From e45d65c71e94f24775008532140e3a9cdf7bc650 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 28 Jan 2021 10:50:56 -0800 Subject: [PATCH] feat(css): ship scss files used to pre-compile CSS (#500) --- .gitignore | 2 +- CHANGELOG.md | 2 +- README.md | 16 ++++-- css/all.scss | 28 ++++++++++ css/g10.scss | 25 +++++++++ css/g100.scss | 25 +++++++++ css/g90.scss | 25 +++++++++ css/white.scss | 25 +++++++++ package.json | 2 +- scripts/build-css.js | 120 +++++++++---------------------------------- yarn.lock | 2 +- 11 files changed, 168 insertions(+), 104 deletions(-) create mode 100644 css/all.scss create mode 100644 css/g10.scss create mode 100644 css/g100.scss create mode 100644 css/g90.scss create mode 100644 css/white.scss diff --git a/.gitignore b/.gitignore index b59f2c48..2fa5e32b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ /coverage /lib /node_modules -/css +/css/*.css .DS_Store yarn-debug.log* yarn-error.log* diff --git a/CHANGELOG.md b/CHANGELOG.md index 28bf5161..12f5a326 100644 --- 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** diff --git a/README.md b/README.md index 3fdfcafc..25e8f78e 100644 --- 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 diff --git a/css/all.scss b/css/all.scss new file mode 100644 index 00000000..faa17656 --- /dev/null +++ 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"; \ No newline at end of file diff --git a/css/g10.scss b/css/g10.scss new file mode 100644 index 00000000..452ad7a2 --- /dev/null +++ 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"; \ No newline at end of file diff --git a/css/g100.scss b/css/g100.scss new file mode 100644 index 00000000..9eb38fea --- /dev/null +++ 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"; \ No newline at end of file diff --git a/css/g90.scss b/css/g90.scss new file mode 100644 index 00000000..5a28dbcc --- /dev/null +++ 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"; \ No newline at end of file diff --git a/css/white.scss b/css/white.scss new file mode 100644 index 00000000..2b1a12a5 --- /dev/null +++ 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"; \ No newline at end of file diff --git a/package.json b/package.json index b50569b5..c6887839 100644 --- 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", diff --git a/scripts/build-css.js b/scripts/build-css.js index 0e010125..378109af 100644 --- a/scripts/build-css.js +++ b/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 = { - 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; - - @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: ``, -}; + for (const { name, base } of scss) { + const file = `css/${base}`; + const outFile = `css/${name}.css`; -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); - } + console.log("[build-css]", file, "-->", outFile); - :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); - } - `, -}; + const { css } = sass.renderSync({ + file, + outFile, + outputStyle: "compressed", + omitSourceMapUrl: true, + includePaths: ["node_modules"], + }); -/** - * Generate pre-compiled CSS for each Carbon theme. - */ -async function buildCss() { - fs.rmdirSync(path.resolve("css"), { recursive: true }); - fs.mkdirSync(path.resolve("css")); + const prefixed = await postcss([ + autoprefixer({ + overrideBrowserslist: ["last 1 version", "ie >= 11", "Firefox ESR"], + }), + ]).process(css, { from: undefined }); - 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} - `, - 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(); + fs.writeFileSync(outFile, prefixed.css); + } +})(); diff --git a/yarn.lock b/yarn.lock index 7fc06daa..f741cbdf 100644 --- 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==