mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 09:51:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: build pre-compiled CSS from Carbon themes

Browse source 
#243
This commit is contained in:
Eric Liu 2020-09-06 15:40:36 -07:00
commit 70e0875f28
4 changed files with 1198 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -2,6 +2,7 @@
/lib
/node_modules
/storybook-static
/css
.DS_Store
yarn-debug.log*
yarn-error.log*

14
package.json
View file

@ -11,7 +11,7 @@
"start": "start-storybook -p 9090",
"build": "build-storybook",
"prettier": "prettier --write './**/*.svelte'",
"prepack": "rollup -c"
"prepack": "node scripts/build-css && rollup -c"
},
"sideEffects": false,
"dependencies": {
@ -37,7 +37,14 @@
"rollup-plugin-terser": "^7.0.2",
"svelte": "^3.24.1",
"svelte-loader": "^2.13.6",
"typescript": "^4.0.2"
"typescript": "^4.0.2",
"cssnano": "^4.1.10",
"@carbon/themes": "^10.18.0",
"autoprefixer": "^9.8.6",
"carbon-components-10.18": "npm:carbon-components@10.18",
"carbon-components-10.19": "npm:carbon-components@10.19",
"node-sass": "^4.14.1",
"postcss": "^7.0.32"
},
"babel": {
"presets": [
@ -60,7 +67,8 @@
"files": [
"lib",
"src",
"types"
"types",
"css"
],
"contributors": [
{

149
scripts/build-css.js Normal file
View file

@ -0,0 +1,149 @@
const fs = require("fs");
const sass = require("node-sass");
const autoprefixer = require("autoprefixer");
const postcss = require("postcss");
const cssnano = require("cssnano");
const path = require("path");
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.19/scss/globals/scss/_css--reset.scss";
@import "node_modules/carbon-components-10.19/scss/globals/scss/_css--font-face.scss";
@import "node_modules/carbon-components-10.19/scss/globals/scss/_css--helpers.scss";
@import "node_modules/carbon-components-10.19/scss/globals/scss/_css--body.scss";
@import "node_modules/carbon-components-10.19/scss/globals/grid/_grid.scss";
`,
components: `
@import "node_modules/carbon-components-10.19/scss/components/accordion/accordion";
@import "node_modules/carbon-components-10.19/scss/components/breadcrumb/breadcrumb";
@import "node_modules/carbon-components-10.19/scss/components/button/button";
@import "node_modules/carbon-components-10.19/scss/components/checkbox/checkbox";
@import "node_modules/carbon-components-10.19/scss/components/code-snippet/code-snippet";
@import "node_modules/carbon-components-10.19/scss/components/combo-box/combo-box";
@import "node_modules/carbon-components-10.19/scss/components/content-switcher/content-switcher";
@import "node_modules/carbon-components-10.19/scss/components/copy-button/copy-button";
@import "node_modules/carbon-components-10.19/scss/components/data-table/data-table";
@import "node_modules/carbon-components-10.19/scss/components/date-picker/date-picker";
@import "node_modules/carbon-components-10.19/scss/components/dropdown/dropdown";
@import "node_modules/carbon-components-10.19/scss/components/file-uploader/file-uploader";
@import "node_modules/carbon-components-10.19/scss/components/form/form";
@import "node_modules/carbon-components-10.19/scss/components/inline-loading/inline-loading";
@import "node_modules/carbon-components-10.19/scss/components/link/link";
@import "node_modules/carbon-components-10.19/scss/components/list/list";
@import "node_modules/carbon-components-10.19/scss/components/list-box/list-box";
@import "node_modules/carbon-components-10.19/scss/components/loading/loading";
@import "node_modules/carbon-components-10.19/scss/components/modal/modal";
@import "node_modules/carbon-components-10.19/scss/components/multi-select/multi-select";
@import "node_modules/carbon-components-10.19/scss/components/notification/inline-notification";
@import "node_modules/carbon-components-10.19/scss/components/notification/toast-notification";
@import "node_modules/carbon-components-10.19/scss/components/number-input/number-input";
@import "node_modules/carbon-components-10.19/scss/components/overflow-menu/overflow-menu";
@import "node_modules/carbon-components-10.19/scss/components/pagination/pagination";
@import "node_modules/carbon-components-10.19/scss/components/pagination-nav/pagination-nav";
@import "node_modules/carbon-components-10.19/scss/components/progress-indicator/progress-indicator";
@import "node_modules/carbon-components-10.19/scss/components/radio-button/radio-button";
@import "node_modules/carbon-components-10.19/scss/components/search/search";
@import "node_modules/carbon-components-10.19/scss/components/select/select";
@import "node_modules/carbon-components-10.19/scss/components/skeleton/skeleton";
@import "node_modules/carbon-components-10.19/scss/components/slider/slider";
@import "node_modules/carbon-components-10.19/scss/components/structured-list/structured-list";
@import "node_modules/carbon-components-10.18/scss/components/tabs/tabs";
@import "node_modules/carbon-components-10.19/scss/components/tag/tag";
@import "node_modules/carbon-components-10.19/scss/components/text-area/text-area";
@import "node_modules/carbon-components-10.19/scss/components/text-input/text-input";
@import "node_modules/carbon-components-10.19/scss/components/tile/tile";
@import "node_modules/carbon-components-10.19/scss/components/time-picker/time-picker";
@import "node_modules/carbon-components-10.19/scss/components/toggle/toggle";
@import "node_modules/carbon-components-10.19/scss/components/toolbar/toolbar";
@import "node_modules/carbon-components-10.19/scss/components/tooltip/tooltip";
@import "node_modules/carbon-components-10.19/scss/components/ui-shell/ui-shell";
`,
};
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[theme="white"] {
@include carbon--theme($carbon--theme--white, true);
}
:root {
@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: `
$feature-flags: (
enable-css-custom-properties: ${theme === "all"},
grid-columns-16: true,
);
@import "node_modules/@carbon/themes/scss/themes";
${themes[theme]}
${shared.globals}
${shared.components}
`,
outFile,
outputStyle: "compact",
omitSourceMapUrl: true,
});
const prefixed = await postcss([
autoprefixer({
overrideBrowserslist: ["last 1 version", "ie >= 11"],
}),
cssnano({ preset: "default" }),
]).process(css, {
from: undefined,
});
fs.writeFileSync(outFile, prefixed.css);
} catch (e) {
console.log(e);
}
});
}
buildCss();

1063
yarn.lock
View file

File diff suppressed because it is too large Load diff