diff --git a/.gitignore b/.gitignore index 508583c..4318b1f 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,6 @@ /types .DS_Store /*.css +/*.scss index.js index.mjs diff --git a/package.json b/package.json index 5cb0032..210e541 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@radix-ui/colors", - "version": "0.1.8", + "version": "0.1.9", "contributors": [ "Colm Tuite ", "Vlad Moroz " @@ -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" }, diff --git a/scripts/build-css-modules.js b/scripts/build-css-modules.js deleted file mode 100644 index f3b7031..0000000 --- a/scripts/build-css-modules.js +++ /dev/null @@ -1,17 +0,0 @@ -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 selector = /DarkA?$/.test(colorScaleName) ? '.dark-theme' : ':root'; - const scaleAssCssProperties = Object.entries(scale) - .map(([name, value]) => ` --${name}: ${value};`) - .join('\n'); - const scaleAsCssFile = `${selector} {\n${scaleAssCssProperties}\n}`; - fs.writeFileSync( - path.join(outputDir, colorScaleName + '.css'), - scaleAsCssFile - ); -}); diff --git a/scripts/build-stylesheets.js b/scripts/build-stylesheets.js new file mode 100644 index 0000000..ba27ab7 --- /dev/null +++ b/scripts/build-stylesheets.js @@ -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; + fs.writeFileSync( + path.join(outputDir, colorScaleName + ".scss"), + scaleAsScssFile + ); +});