feat(css): ship scss files used to pre-compile CSS (#500)

.gitignore

@@ -1,7 +1,7 @@
 /coverage
 /lib
 /node_modules
-/css
+/css/*.css
 .DS_Store
 yarn-debug.log*
 yarn-error.log*

CHANGELOG.md

@@ -476,7 +476,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 **Features**
 
-- css: ship precompiled CSS StyleSheets for each Carbon theme (70e0875)
+- css: ship pre-compiled CSS StyleSheets for each Carbon theme (70e0875)
 
 **Documentation**
 

README.md

@@ -83,17 +83,25 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
 
 **Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
 
-### Precompiled CSS StyleSheets
+### Pre-compiled CSS StyleSheets
 
-`carbon-components-svelte` includes precompiled CSS StyleSheets for each Carbon theme:
+`carbon-components-svelte` includes pre-compiled CSS StyleSheets for each Carbon theme:
 
 - **white.css**: Default Carbon theme (light)
 - **g10.css**: Gray 10 theme (light)
 - **g90.css**: Gray 90 theme (dark)
 - **g100.css**: Gray 100 theme (dark)
-- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using CSS variables
+- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
 
-Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/master/packages/components) library..
+Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/master/packages/components) library.
+
+The compiled CSS is generated from the following `.scss` files:
+
+- [css/white.scss](css/white.scss)
+- [css/g10.scss](css/g10.scss)
+- [css/g90.scss](css/g90.scss)
+- [css/g100.scss](css/g100.scss)
+- [css/all.scss](css/all.scss)
 
 #### Usage
 

css/all.scss

@@ -0,0 +1,28 @@
+$feature-flags: (
+  enable-css-custom-properties: true,
+  ui-shell: true,
+  grid-columns-16: true
+);
+
+$css--font-face: true;
+$css--helpers: true;
+$css--body: true;
+$css--use-layer: true;
+$css--reset: true;
+$css--default-type: true;
+$css--plex: true;
+
+// Use all Carbon themes
+@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
+
+:root { @include carbon--theme($carbon--theme--white, true); }
+:root[theme="g10"] { @include carbon--theme($carbon--theme--g10, true); }
+:root[theme="g90"] { @include carbon--theme($carbon--theme--g90, true); }
+:root[theme="g100"] { @include carbon--theme($carbon--theme--g100, true); }
+
+@import "carbon-components/scss/globals/scss/_css--reset.scss";
+@import "carbon-components/scss/globals/scss/_css--font-face.scss";
+@import "carbon-components/scss/globals/scss/_css--helpers.scss";
+@import "carbon-components/scss/globals/scss/_css--body.scss";
+@import "carbon-components/scss/globals/grid/_grid.scss";
+@import "carbon-components/scss/globals/scss/styles.scss";

css/g10.scss

@@ -0,0 +1,25 @@
+$feature-flags: (
+  ui-shell: true,
+  grid-columns-16: true
+);
+
+$css--font-face: true;
+$css--helpers: true;
+$css--body: true;
+$css--use-layer: true;
+$css--reset: true;
+$css--default-type: true;
+$css--plex: true;
+
+// Use the "g10" (Gray 10) Carbon theme
+@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
+
+$carbon--theme: $carbon--theme--g10;
+@include carbon--theme();
+
+@import "carbon-components/scss/globals/scss/_css--reset.scss";
+@import "carbon-components/scss/globals/scss/_css--font-face.scss";
+@import "carbon-components/scss/globals/scss/_css--helpers.scss";
+@import "carbon-components/scss/globals/scss/_css--body.scss";
+@import "carbon-components/scss/globals/grid/_grid.scss";
+@import "carbon-components/scss/globals/scss/styles.scss";

css/g100.scss

@@ -0,0 +1,25 @@
+$feature-flags: (
+  ui-shell: true,
+  grid-columns-16: true
+);
+
+$css--font-face: true;
+$css--helpers: true;
+$css--body: true;
+$css--use-layer: true;
+$css--reset: true;
+$css--default-type: true;
+$css--plex: true;
+
+// Use the "g100" (Gray 100) Carbon theme
+@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
+
+$carbon--theme: $carbon--theme--g100;
+@include carbon--theme();
+
+@import "carbon-components/scss/globals/scss/_css--reset.scss";
+@import "carbon-components/scss/globals/scss/_css--font-face.scss";
+@import "carbon-components/scss/globals/scss/_css--helpers.scss";
+@import "carbon-components/scss/globals/scss/_css--body.scss";
+@import "carbon-components/scss/globals/grid/_grid.scss";
+@import "carbon-components/scss/globals/scss/styles.scss";

css/g90.scss

@@ -0,0 +1,25 @@
+$feature-flags: (
+  ui-shell: true,
+  grid-columns-16: true
+);
+
+$css--font-face: true;
+$css--helpers: true;
+$css--body: true;
+$css--use-layer: true;
+$css--reset: true;
+$css--default-type: true;
+$css--plex: true;
+
+// Use the "g90" (Gray 90) Carbon theme
+@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
+
+$carbon--theme: $carbon--theme--g90;
+@include carbon--theme();
+
+@import "carbon-components/scss/globals/scss/_css--reset.scss";
+@import "carbon-components/scss/globals/scss/_css--font-face.scss";
+@import "carbon-components/scss/globals/scss/_css--helpers.scss";
+@import "carbon-components/scss/globals/scss/_css--body.scss";
+@import "carbon-components/scss/globals/grid/_grid.scss";
+@import "carbon-components/scss/globals/scss/styles.scss";

css/white.scss

@@ -0,0 +1,25 @@
+$feature-flags: (
+  ui-shell: true,
+  grid-columns-16: true
+);
+
+$css--font-face: true;
+$css--helpers: true;
+$css--body: true;
+$css--use-layer: true;
+$css--reset: true;
+$css--default-type: true;
+$css--plex: true;
+
+// Use the "white" (White) Carbon theme
+@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
+
+$carbon--theme: $carbon--theme--white;
+@include carbon--theme();
+
+@import "carbon-components/scss/globals/scss/_css--reset.scss";
+@import "carbon-components/scss/globals/scss/_css--font-face.scss";
+@import "carbon-components/scss/globals/scss/_css--helpers.scss";
+@import "carbon-components/scss/globals/scss/_css--body.scss";
+@import "carbon-components/scss/globals/grid/_grid.scss";
+@import "carbon-components/scss/globals/scss/styles.scss";

package.json

@@ -30,7 +30,7 @@
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@tsconfig/svelte": "^1.0.10",
     "autoprefixer": "^10.2.3",
-    "carbon-components-10.27": "npm:carbon-components@10.27.0",
+    "carbon-components": "10.27.0",
     "gh-pages": "^3.1.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",

scripts/build-css.js

@@ -3,105 +3,33 @@ const sass = require("sass");
 const autoprefixer = require("autoprefixer");
 const postcss = require("postcss");
 const path = require("path");
-const { promisify } = require("util");
 
-const writeFile = promisify(fs.writeFile);
+(async () => {
+  const scss = fs
+    .readdirSync("css")
+    .filter((file) => file.endsWith(".scss"))
+    .map((file) => path.parse(file));
 
-const shared = {
+  for (const { name, base } of scss) {
-  globals: `
+    const file = `css/${base}`;
-    $css--font-face: true;
+    const outFile = `css/${name}.css`;
-    $css--helpers: true;
-    $css--body: true;
-    $css--use-layer: true;
-    $css--reset: true;
-    $css--default-type: true;
-    $css--plex: true;
-    
-    @import "node_modules/carbon-components-10.27/scss/globals/scss/_css--reset.scss";
-    @import "node_modules/carbon-components-10.27/scss/globals/scss/_css--font-face.scss";
-    @import "node_modules/carbon-components-10.27/scss/globals/scss/_css--helpers.scss";
-    @import "node_modules/carbon-components-10.27/scss/globals/scss/_css--body.scss";
-    @import "node_modules/carbon-components-10.27/scss/globals/grid/_grid.scss";
-    @import "node_modules/carbon-components-10.27/scss/globals/scss/styles.scss";
-  `,
-  components: ``,
-};
 
-const themes = {
+    console.log("[build-css]", file, "-->", outFile);
-  white: `
-    $carbon--theme: $carbon--theme--white;
-    @include carbon--theme();
-  `,
-  g10: `
-    $carbon--theme: $carbon--theme--g10;
-    @include carbon--theme();
-  `,
-  g90: `
-    $carbon--theme: $carbon--theme--g90;
-    @include carbon--theme();
-  `,
-  g100: `
-    $carbon--theme: $carbon--theme--g100;
-    @include carbon--theme();
-  `,
-  all: `
-    :root {
-      @include carbon--theme($carbon--theme--white, true);
-    }
 
-    :root[theme="g10"] {
+    const { css } = sass.renderSync({
-      @include carbon--theme($carbon--theme--g10, true);
+      file,
-    }
+      outFile,
-    
+      outputStyle: "compressed",
-    :root[theme="g90"] {
+      omitSourceMapUrl: true,
-      @include carbon--theme($carbon--theme--g90, true);
+      includePaths: ["node_modules"],
-    }
+    });
-    
-    :root[theme="g100"] {
-      @include carbon--theme($carbon--theme--g100, true);
-    }
-  `,
-};
 
-/**
+    const prefixed = await postcss([
- * Generate pre-compiled CSS for each Carbon theme.
+      autoprefixer({
- */
+        overrideBrowserslist: ["last 1 version", "ie >= 11", "Firefox ESR"],
-async function buildCss() {
+      }),
-  fs.rmdirSync(path.resolve("css"), { recursive: true });
+    ]).process(css, { from: undefined });
-  fs.mkdirSync(path.resolve("css"));
 
-  Object.keys(themes).forEach(async (theme) => {
+    fs.writeFileSync(outFile, prefixed.css);
-    try {
+  }
-      const outFile = path.resolve("css", theme + ".css");
+})();
-      const { css } = sass.renderSync({
-        data: `
-          @import "node_modules/@carbon/themes/scss/themes";
-
-          $feature-flags: (
-            enable-css-custom-properties: ${theme === "all"},
-            grid-columns-16: true,
-          );
-          
-          ${themes[theme]}
-          ${shared.globals}
-          ${shared.components}
-        `,
-        outFile,
-        outputStyle: "compressed",
-        omitSourceMapUrl: true,
-      });
-
-      const prefixed = await postcss([
-        autoprefixer({
-          overrideBrowserslist: ["last 1 version", "ie >= 11", "Firefox ESR"],
-        }),
-      ]).process(css, { from: undefined });
-
-      await writeFile(outFile, prefixed.css);
-    } catch (e) {
-      console.log(e);
-    }
-  });
-}
-
-buildCss();

yarn.lock

@@ -476,7 +476,7 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001180.tgz#67abcd6d1edf48fa5e7d1e84091d1d65ab76e33b"
   integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
 
-"carbon-components-10.27@npm:carbon-components@10.27.0":
+carbon-components@10.27.0:
   version "10.27.0"
   resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.27.0.tgz#b984ee1b87371a64ecd041853993ffc69c9191a0"
   integrity sha512-kDW3ezjfqxTydIMLZ+pTxA3oWsmhET330NTVe47hXeCRsoZ000tq0ZwGbbliSjlW2wY4s5nKxWkMj0b+dkeFyQ==