kosmos/akkounts
8
1
Fork 0
Code Issues 25 Pull Requests 1 Actions Packages Releases 12 Activity

Switch from Webpacker to cssbundling-rails, upgrade Tailwind CSS to version 3 #59

Merged
raucao merged 32 commits from dev/cssbundling into master 2022-02-17 14:45:18 +00:00
Conversation 8 Commits 32 Files Changed 62
+26270 -1355
25 changed files with 26270 additions and 1355 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 32f02cc18a - Show all commits
.gitignore
+3
View File
@@ -42,3 +42,6 @@ yarn-debug.log*
# Ignore redis dumps from sidekiq
dump.rdb
/app/assets/builds/*
!/app/assets/builds/.keep
Gemfile
+3 -1
View File
@@ -8,7 +8,9 @@ gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
#gem 'webpacker', '~> 4.0'
# Allows custom JS build tasks to integrate with the asset pipeline
gem 'cssbundling-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
Gemfile.lock
+8 -8
View File
@@ -79,6 +79,8 @@ GEM
crack (0.4.5)
rexml
crass (1.0.6)
cssbundling-rails (1.0.0)
railties (>= 6.0.0)
database_cleaner (2.0.1)
database_cleaner-active_record (~> 2.0.0)
database_cleaner-active_record (2.0.1)
@@ -159,11 +161,15 @@ GEM
matrix (0.4.2)
method_source (1.0.0)
mini_mime (1.1.2)
mini_portile2 (2.6.1)
minitest (5.14.4)
msgpack (1.4.2)
multipart-post (2.1.1)
net-ldap (0.17.0)
nio4r (2.5.8)
nokogiri (1.12.5)
mini_portile2 (~> 2.6.1)
racc (~> 1.4)
nokogiri (1.12.5-x86_64-linux)
racc (~> 1.4)
orm_adapter (0.5.0)
@@ -174,8 +180,6 @@ GEM
raabro (1.4.0)
racc (1.6.0)
rack (2.2.3)
rack-proxy (0.7.0)
rack
rack-test (1.1.0)
rack (>= 1.0, < 3)
rails (6.0.4.1)
@@ -292,10 +296,6 @@ GEM
addressable (>= 2.8.0)
crack (>= 0.3.2)
hashdiff (>= 0.4.0, < 2.0.0)
webpacker (4.3.0)
activesupport (>= 4.2)
rack-proxy (>= 0.6.1)
railties (>= 4.2)
websocket-driver (0.7.5)
websocket-extensions (>= 0.1.0)
websocket-extensions (0.1.5)
@@ -311,6 +311,7 @@ DEPENDENCIES
bootsnap (>= 1.4.2)
byebug
capybara
cssbundling-rails
database_cleaner
devise
devise_ldap_authenticatable
@@ -339,7 +340,6 @@ DEPENDENCIES
warden
web-console (>= 3.3.0)
webmock
webpacker (~> 4.0)
BUNDLED WITH
2.2.2
2.3.6
Procfile.dev
+2
View File
@@ -0,0 +1,2 @@
web: bin/rails server -p 3000
css: yarn build:css --watch
app/assets/builds/.keep
View File
app/assets/config/manifest.js
+2 -1
View File
@@ -1,2 +1,3 @@
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../builds
//= link legacy.css
app/assets/stylesheets/application.tailwind.css
+8
View File
@@ -0,0 +1,8 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "components/base";
@import "components/buttons";
@import "components/forms";
@import "components/links";
app/javascript/stylesheets/base.scss → app/assets/stylesheets/components/base.css
+1 -1
View File
@@ -1,6 +1,6 @@
@layer base {
body {
line-height: 1;
@apply leading-none
}
h1, h2, h3 {
app/javascript/stylesheets/buttons.scss → app/assets/stylesheets/components/buttons.css
View File
app/assets/stylesheets/components/forms.css
+15
View File
@@ -0,0 +1,15 @@
@layer components {
input[type=text], input[type=email], input[type=password],
input[type=number], select {
@apply mt-1 rounded-md bg-gray-100 focus:bg-white
border-transparent focus:border-gray-500 focus:ring-0;
}
.field_with_errors {
@apply inline-block;
}
.error-msg {
@apply text-red-700;
}
}
app/javascript/stylesheets/links.scss → app/assets/stylesheets/components/links.css
View File
app/assets/stylesheets/application.css → app/assets/stylesheets/legacy.css
View File
app/javascript/packs/application.js
+1 -1
View File
@@ -7,7 +7,7 @@ require("@rails/ujs").start()
require("turbolinks").start()
require("channels")
import "stylesheets/application"
// import "stylesheets/application"
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
app/javascript/stylesheets/application.scss
-9
View File
@@ -1,9 +0,0 @@
// version 6
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "base";
@import "buttons";
@import "forms";
@import "links";
app/javascript/stylesheets/forms.scss
-17
View File
@@ -1,17 +0,0 @@
@layer components {
form {
input[type=text], input[type=email], input[type=password],
input[type=number], select {
@apply mt-1 rounded-md bg-gray-100 focus:bg-white
border-transparent focus:border-gray-500 focus:ring-0;
}
.field_with_errors {
@apply inline-block;
}
.error-msg {
@apply text-red-700;
}
}
}
app/javascript/stylesheets/tailwind.config.js
-26
View File
@@ -1,26 +0,0 @@
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
purge: {
layers: ['base', 'components', 'utilities'],
content: [
"./app/**/*.html.erb",
"./app/helpers/**/*.rb",
"./app/javascript/**/*.js"
]
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
sans: ['Open Sans', 'sans-serif']
}
},
},
variants: {
extend: {},
},
plugins: [
require('@tailwindcss/forms')
],
}
app/views/layouts/admin.html.erb
+2 -3
View File
@@ -6,9 +6,8 @@
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
bumi commented 2022-02-12 10:37:39 +00:00
Outdated
Review
Copy Link
Copy Source

is the JS here still used? do we use turbolinks and such?

is the JS here still used? do we use turbolinks and such?
raucao commented 2022-02-12 15:21:11 +00:00
Outdated
Review
Copy Link
Copy Source

We use turbolinks still, but never added any JavaScript to the folders/templates in app/javascript. The only custom JS we currently use is a little bit of vanilla inline JS in the wallet view.

We use turbolinks still, but never added any JavaScript to the folders/templates in `app/javascript`. The only custom JS we currently use is a little bit of vanilla inline JS in the wallet view.
raucao commented 2022-02-12 21:44:34 +00:00
Outdated
Review
Copy Link
Copy Source

My response was wrong, removing JS obviously also removed Turbolinks. I upgraded everything to Rails 7, and it builds everything without Webpacker now, including Turbolinks.

My response was wrong, removing JS obviously also removed Turbolinks. I upgraded everything to Rails 7, and it builds everything without Webpacker now, including Turbolinks.
<%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application' %>
</head>
<body id="admin-panel">
<div id="wrapper">
app/views/layouts/application.html.erb
+2 -3
View File
@@ -6,9 +6,8 @@
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application' %>
</head>
<body>
<div id="wrapper">
app/views/layouts/signup.html.erb
+2 -3
View File
@@ -6,9 +6,8 @@
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application' %>
</head>
<body class="layout-signup">
<div id="wrapper">
bin/dev
Executable
+9
View File
@@ -0,0 +1,9 @@
#!/usr/bin/env bash
if ! command -v foreman &> /dev/null
then
echo "Installing foreman..."
gem install foreman
fi
foreman start -f Procfile.dev
package-lock.json
Generated
+24538
View File
File diff suppressed because it is too large Load Diff
package.json
+11 -4
View File
@@ -5,14 +5,21 @@
"@rails/actioncable": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.3.0",
"@tailwindcss/forms": "^0.2.1",
"autoprefixer": "^9",
"postcss": "^7",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"@tailwindcss/forms": "^0.4.0",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.6",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^14.0.2",
"postcss-nested": "^5.0.6",
"postcss-preset-env": "^7.3.1",
"tailwindcss": "^3.0.22",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
}
}
postcss.config.js
+11 -9
View File
@@ -1,13 +1,15 @@
module.exports = {
plugins: [
require("tailwindcss")("./app/javascript/stylesheets/tailwind.config.js"),
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
require("autoprefixer"),
require("postcss-import"),
require("tailwindcss"),
require("postcss-nested"),
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: 'no-2009'
flexbox: "no-2009",
},
stage: 3
})
]
}
stage: 3,
}),
],
};
tailwind.config.js
+17
View File
@@ -0,0 +1,17 @@
module.exports = {
content: [
'./app/views/**/*.html.erb',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js'
],
theme: {
extend: {
fontFamily: {
sans: ['Open Sans', 'sans-serif']
}
},
},
plugins: [
require('@tailwindcss/forms')
],
}
yarn.lock
+1635 -1269
View File
File diff suppressed because it is too large Load Diff