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

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

Browse source
This commit is contained in:
Eric Liu 2021-01-28 10:50:56 -08:00 • committed by GitHub
commit e45d65c71e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 168 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

120
scripts/build-css.js
View file

@ -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);
}
})();