-
Notifications
You must be signed in to change notification settings - Fork 12
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add CSS hot-reloading #2050
base: main
Are you sure you want to change the base?
Add CSS hot-reloading #2050
Conversation
…(moved to @imports in styles.css); minify CSS as last step
…iles when changes are made
…` of tailwind 3; add `gulp-clean-css` plugin for CSS minification
…removes POSTCSS as well, which will be handled natively by tailwind)
🧪 Review environmenthttps://cdtlcbagmr4jclwbqibuipckfa0yrltg.lambda-url.ca-central-1.on.aws/ |
<script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/index.min.js') }}"></script> | ||
<script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/all.min.js') }}"></script> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need to load both "index" and "all"? It seems like we prepend all with index in gulpfile.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We dont combine them - but i have no idea why. I think we probably could just have the one.
paths.src + "javascripts/branding_request.js", | ||
paths.src + "javascripts/formValidateRequired.js", | ||
paths.src + "javascripts/sessionRedirect.js", | ||
paths.src + "javascripts/touDialog.js", | ||
paths.src + "javascripts/templateFilters.js" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are these ever bundled? Do we load them piece by piece in our html templates? If not, we could remove this step?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These few are not bundled. The thought when they were created was that since they are not often used, they could exist separately. Although, the templateFilters one probably should be bundled now that I look more closely.
@@ -9,9 +9,9 @@ | |||
"test": "jest --config tests/javascripts/jest.config.js tests/javascripts", | |||
"webpack": "webpack --config webpack.config.js", | |||
"build": "gulp", | |||
"watch": "gulp watch", | |||
"watch": "npx tailwindcss -i ./app/assets/stylesheets/tailwind/style.css -o ./app/static/stylesheets/index.css --watch ", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need gulp in there?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nope - all the css is within styles.css now and we shouldnt add arbitrary css to gulp anymore.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So watch will only update on css changes, and not script changes?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah - I didnt tackle watching the js - could be another PR!
sessionRedirect: ["./app/assets/javascripts/sessionRedirect.js"], | ||
touDialog: ["./app/assets/javascripts/touDialog.js"], | ||
templateFilters: ["./app/assets/javascripts/templateFilters.js"], | ||
index: ["./app/assets/javascripts/index.js"], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lovely
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah this file being named main.js
but having a source of index.js when we ALREADY HAVE a file named main.js
was just so super confusing.
This is still confusing - but less so :D
{ | ||
test: /\.css$/i, | ||
include: [ | ||
path.resolve(__dirname, "app/assets/stylesheets/tailwind") | ||
], | ||
use: [ | ||
MiniCssExtractPlugin.loader, | ||
"css-loader", | ||
"postcss-loader" | ||
] | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good riddance!
Summary | Résumé
This PR updates our frontend build pipeline so that we can take better control of it. In particular, these changes enable us to implement better developer experience by allows us to generate our tailwind + css on the fly as we are developing in a few seconds, vs. waiting the 25s+ it was taking before to run
npm run tailwind
Improvements
npm run watch
) 🎉make run-dev
🎉Build pipeline before
Build pipeline after
Quick launch of notify for debugging
tasks.json
(put it in.vscode/
)cmd+shift+p
, type run taskDev environment
, press enterThis will launch flask, tailwind to watch your css, and attach the debugger.
Test instructions | Instructions pour tester la modification