-
Notifications
You must be signed in to change notification settings - Fork 6.2k
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
feat: switch from scss to postcss #5888
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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.
Sounds good to me 👍
Signed-off-by: Claudio W <[email protected]>
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.
some small nits worth changing
Signed-off-by: Brian Muenzenmeyer <[email protected]>
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.
Seems like a logical change to me, I'm always a fan of less tools in the chain
@bmuenzenmeyer and @MattIPv4 if you two don't mind, could y'all give a last copy-check on the changes? I've just pushed some changes to simplify and better some docs |
✅ looking good to me |
Description
To simplify the stack of the Node.js Website, I've decided to remove support for SASS/SCSS from this repository.
This is because all our styles were processed at least 3 times. (Sass -> PostCSS -> CSS -> Minification)
Introducing Tailwind would also create inconsistencies, as we use custom Tailwind "syntax" such as
@tailwind
,@apply
andtheme
.The SASS/SCSS processor also includes a lot of extra things that we don't necessarily need;
By switching to PostCSS, we wanted to retain a SCSS-alike syntax, such as supporting Mixins, Variables, Nesting, and more. This PR also adds relevant plugins although it is important to mention that the only significant difference is how
mixins
work with PostCSS.The benefits of PostCSS include a lighter CSS footprint, faster compilation times, less verbose, and the support of a subset of functionalities (plugins) we like.
Differences in Mixins
In SCSS, you define a Mixin with
@mixin
, and if you have variables, you define them as$variable
; With PostCSS, you define a Mixin with@define-mixin
, and variables do not need the$
.In SCSS, you consume a Mixin with
@include
. In PostCSS, you consume a Mixin with@mixin
.What changed in this PR?
*.scss
to.css
preview.tsx
, fixing styles, types, and other thingsWhy so many changes?
Some changes are partially unrelated to the migration from SCSS to PostCSS (mainly the Storybook changes); they're added in this PR primarily for convenience and to address these stylistic changes in a single batch.
Validation
Storybooks, Builds, and Local Development should work as expected.