feat: fix style build pipeline #278
Conversation
size-limit report 📦
|
anoblet
force-pushed
the
anoblet/feat/style-build
branch
4 times, most recently
from
2ea3740 to
8077baa
Compare
|
@pawelkmpt I moved |
anoblet
force-pushed
the
anoblet/feat/style-build
branch
from
8077baa to
2f33978
Compare
|
Should be ready for review. |
anoblet
force-pushed
the
anoblet/feat/style-build
branch
from
2f33978 to
40c0b1d
Compare
| "styles:build": { | ||
| "command": "node packages/sass-render/bin/sass-render.js -s \"packages/*/scss/**/*.scss\"", | ||
| "dependencies": [ | ||
| "styles:clean" | ||
| ], | ||
| "files": [ | ||
| "packages/*/scss/**/*.scss" | ||
| ] | ||
| }, | ||
| "styles:clean": { | ||
| "command": "rimraf packages/**/styles/**/*.js" | ||
| }, | ||
| "styles:watch": { | ||
| "command": "yarn run styles:build --watch", | ||
| "service": true | ||
| } |
There was a problem hiding this comment.
Because wireit watcher doesn't have SASS-specific intelligence, this seems to render all SCSS files on any one change?
There was a problem hiding this comment.
I do see that. There aren't very many files, and on my machine it doesn't take too long. Piping only changed files is a feature that they might implement: google/wireit#168.
There was a problem hiding this comment.
To me it's a pretty clear blocker until they solve it upstream.
For our partial watching problem, we could explore how to wire up native sass -w instead, similar to how packages/institute-theme does it. Wireit may or may not be a part of the solution, maybe it's still useful without its watcher function.
There was a problem hiding this comment.
From what I gather, there's no way to determine that a change has been made to an imported file.
For example:
A change is made to packages\cxl-ui\scss\cxl-app-layout\_layout.scss. Run sass on packages\cxl-ui\scss\cxl-app-layout.scss.
The reason why build and build-styling work is because we do run sass-render on everything. Even if scripts/watcher.js is able to detect a change in packages\cxl-ui\scss\cxl-app-layout\_layout.scss, it won't update packages\cxl-ui\src\styles\cxl-app-layout-css.js.
Storybook won't refresh unless packages\cxl-ui\src\styles\cxl-app-layout-css.js is updated.
The best two solutions I see are:
- Get rid of partials
- Run
sass-renderon all files whenever anyscssfile is changed (which is pretty much what we do now manually).
anoblet
force-pushed
the
anoblet/feat/style-build
branch
from
40c0b1d to
62959cb
Compare
anoblet
force-pushed
the
anoblet/feat/style-build
branch
from
62959cb to
f1b0b07
Compare
This fixes the style build pipeline while in development mode. In essence, it uses Google Wireit (https://github.com/google/wireit) to run
yarn storybookandyarn buildin parallel while also adding watch functionality toyarn build. Instead of running separate commands, we would just useyarn dev.