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

2025-09-14 18:01:06 +00:00 · 2021-01-28 10:50:56 -08:00 · 2021-01-28 10:50:56 -08:00 · e45d65c71e
commit e45d65c71e
parent 855381a486
11 changed files with 168 additions and 104 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,7 +1,7 @@
 /coverage
 /lib
 /node_modules
-/css
+/css/*.css
 .DS_Store
 yarn-debug.log*
 yarn-error.log*
--- a/CHANGELOG.md
+++ b/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**

--- a/README.md
+++ b/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

--- a/css/all.scss
+++ b/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";
--- a/css/g10.scss
+++ b/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";
--- a/css/g100.scss
+++ b/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";
--- a/css/g90.scss
+++ b/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";
--- a/css/white.scss
+++ b/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";
--- a/package.json
+++ b/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",
--- a/scripts/build-css.js
+++ b/scripts/build-css.js
@ -3,92 +3,25 @@ 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 = {
-  globals: `
-    $css--font-face: true;
-    $css--helpers: true;
-    $css--body: true;
-    $css--use-layer: true;
-    $css--reset: true;
-    $css--default-type: true;
-    $css--plex: true;
+  for (const { name, base } of scss) {
+    const file = `css/${base}`;
+    const outFile = `css/${name}.css`;

-    @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: ``,
-};
+    console.log("[build-css]", file, "-->", outFile);

-const themes = {
-  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"] {
-      @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);
-    }
-  `,
-};
-
-/**
- * Generate pre-compiled CSS for each Carbon theme.
- */
-async function buildCss() {
-  fs.rmdirSync(path.resolve("css"), { recursive: true });
-  fs.mkdirSync(path.resolve("css"));
-
-  Object.keys(themes).forEach(async (theme) => {
-    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}
-        `,
+      file,
      outFile,
      outputStyle: "compressed",
      omitSourceMapUrl: true,
+      includePaths: ["node_modules"],
    });

    const prefixed = await postcss([
@ -97,11 +30,6 @@ async function buildCss() {
      }),
    ]).process(css, { from: undefined });

-      await writeFile(outFile, prefixed.css);
-    } catch (e) {
-      console.log(e);
+    fs.writeFileSync(outFile, prefixed.css);
  }
-  });
-}
-
-buildCss();
+})();
--- a/yarn.lock
+++ b/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==