-
Notifications
You must be signed in to change notification settings - Fork 64
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
✨ Update script to build scss files along css files #19
base: main
Are you sure you want to change the base?
Conversation
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.
It has been a good while since I used SCSS – are :root
scoped variables a thing in SCSS? I expected they need to be under the global scope.
I tried this on sassmeister.com and got an error
Fixing this🔩.. It didn't appear on my vim setup. |
@vladmoroz Fixed it. Please do have a look. |
const scaleAsScssFile = isDarkScale | ||
? `.dark-theme {\n${scaleAsScssProperties}\n}` | ||
: scaleAsScssProperties; |
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.
How do you expect to use the dark theme values with Sass? If I understand correctly, Sass outputs compiled values only, so .dark-theme
scope would have the same problem that :root
scope had.
With vanilla CSS variables, we provide .dark-theme
class name to facilitate automatic theme changes. This way you would put .dark-theme
on html or body element to toggle the theme globally.
It seems that in Sass you need to output these variables into global scope too and handle theming manually?
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.
Was just trying out Radix Colors and tried to @import
the CSS files into my SCSS setup and I ran into this problem exactly - applying .dark-theme
to body
has no effect.
Promoting .dark-theme
to :global
scope in the exported SCSS files solves it for me. It behaves the same way as the CSS version afaict.
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.
It seems that in Sass you need to output these variables into global scope too and handle theming manually?
you can do both, continue to use CSS custom props referencing sass vars for the automatic theming and also use sass vars elsewhere
$root: ":root" !default;
$gray1: hsl(0, 0%, 99.0%) !default;
#{$root} {
--gray1: #{$gray1};
}
and similar for the dark
$root: ".dark-theme" !default;
$gray1: hsl(0, 0%, 8.5%) !default;
#{$root} {
--gray1: #{$gray1};
}
I think the commit below resolves the theming issue as it allows you to import the identical-to-css data with css custom props you can continue to dynamically use based on class selector, BUT it also allows you to:
For example, these imports allows overriding
|
This PR will rename
scripts/build-css-modules.js
toscripts/build-stylesheets.js
and update the script to exportscss
files along withcss
files.Fix
Fixes #18
Checklist:
build-css-modules
.scss
files.