Skip to content
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.

Sign up for GitHub

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

Jump to bottom

✨ Update script to build scss files along css files #19

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

✨ Update script to build scss files along css files #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d9f4ad
:sparkles: Update script to build scss files along css files
chtushar Dec 11, 2021
fb8c5c4
:bookmark: Version bump
chtushar Dec 12, 2021
499d489
:fire: Remove :root selector for the scss builds
chtushar Dec 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
/types
.DS_Store
/*.css
/*.scss
index.js
index.mjs
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@radix-ui/colors",
"version": "0.1.8",
"version": "0.1.9",
"contributors": [
"Colm Tuite <[email protected]>",
"Vlad Moroz <[email protected]>"
Expand All @@ -9,8 +9,8 @@
"module": "index.mjs",
"types": "types/index.d.ts",
"scripts": {
"build": "yarn clean && yarn && rollup -c && yarn build-css-modules",
"build-css-modules": "node ./scripts/build-css-modules.js",
"build": "yarn clean && yarn && rollup -c && yarn build-stylesheets",
"build-stylesheets": "node ./scripts/build-stylesheets.js",
"postpublish": "yarn clean",
"clean": "git clean -fdX"
},
Expand Down
17 changes: 0 additions & 17 deletions scripts/build-css-modules.js
View file
Open in desktop

This file was deleted.

32 changes: 32 additions & 0 deletions scripts/build-stylesheets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
const fs = require("fs");
const path = require("path");
const allColorScales = require("../index");

const outputDir = require("../tsconfig.json").compilerOptions.outDir;

Object.entries(allColorScales).forEach(([colorScaleName, scale]) => {
const isDarkScale = /DarkA?$/.test(colorScaleName);

// Building css modules
const selectorForCSS = isDarkScale ? ".dark-theme" : ":root";
const scaleAsCssProperties = Object.entries(scale)
.map(([name, value]) => ` --${name}: ${value};`)
.join("\n");
const scaleAsCssFile = `${selectorForCSS} {\n${scaleAsCssProperties}\n}`;
fs.writeFileSync(
path.join(outputDir, colorScaleName + ".css"),
scaleAsCssFile
);

// Building scss modules
const scaleAsScssProperties = Object.entries(scale)
.map(([name, value]) => ` $${name}: ${value};`)
.join("\n");
const scaleAsScssFile = isDarkScale
? `.dark-theme {\n${scaleAsScssProperties}\n}`
: scaleAsScssProperties;
Comment on lines +25 to +27
Copy link
Contributor

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?

Copy link

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.

Copy link

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};
}

fs.writeFileSync(
path.join(outputDir, colorScaleName + ".scss"),
scaleAsScssFile
);
});