js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 02:59:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixes #571

Browse Source
This commit is contained in:
Cory LaViska
2022-01-25 17:09:53 -05:00
parent 4fdc5aa55f
commit 4adcb8c938
11 changed files with 1134 additions and 1121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/build.js
View File

@@ -29,7 +29,7 @@ fs.mkdirSync(outdir, { recursive: true });
execSync(`node scripts/make-search.js --outdir "${outdir}"`, { stdio: 'inherit' });
execSync(`node scripts/make-react.js`, { stdio: 'inherit' });
execSync(`node scripts/make-vscode-data.js --outdir "${outdir}"`, { stdio: 'inherit' });
execSync(`node scripts/make-css.js --outdir "${outdir}"`, { stdio: 'inherit' });
execSync(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
execSync(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });
if (types) execSync(`tsc --project ./tsconfig.prod.json --outdir "${outdir}"`, { stdio: 'inherit' });
} catch (err) {
@@ -155,7 +155,7 @@ fs.mkdirSync(outdir, { recursive: true });
.then(() => {
// Rebuild stylesheets when a theme file changes
if (/^src\/themes/.test(filename)) {
execSync(`node scripts/make-css.js --outdir "${outdir}"`, { stdio: 'inherit' });
execSync(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
}
})
.then(() => {

42
scripts/make-css.js
View File

@@ -1,42 +0,0 @@
//
// This script generates stylesheets from all *.styles.ts files in src/themes
//
import chalk from 'chalk';
import commandLineArgs from 'command-line-args';
import fs from 'fs/promises';
import { mkdirSync } from 'fs';
import { globbySync } from 'globby';
import path from 'path';
import prettier from 'prettier';
import stripComments from 'strip-css-comments';
const { outdir } = commandLineArgs({ name: 'outdir', type: String });
const files = globbySync('./src/themes/**/*.styles.ts');
const themesDir = path.join(outdir, 'themes');
console.log('Generating stylesheets');
mkdirSync(themesDir, { recursive: true });
try {
files.map(async file => {
const source = await fs.readFile(file, 'utf8');
const css = source.match(/export default css`(.*?)`;/s)[1];
// We're currently scraping for CSS with a regex, so we can't use interpolation at the moment
if (css.includes('${')) {
console.error(
chalk.red(`Template literal expressions are not currently supported in theme stylesheets: ${file}`)
);
process.exit(1);
}
const formattedStyles = prettier.format(stripComments(css), { parser: 'css' });
const filename = path.basename(file).replace('.styles.ts', '.css');
const outFile = path.join(themesDir, filename);
await fs.writeFile(outFile, formattedStyles, 'utf8');
});
} catch (err) {
console.error(chalk.red('Error generating stylesheets!'));
console.error(err);
}

62
scripts/make-themes.js Normal file
View File

@@ -0,0 +1,62 @@
//
// This script bakes and copies themes, then generates a corresponding Lit stylesheet in dist/themes
//
import chalk from 'chalk';
import commandLineArgs from 'command-line-args';
import fs from 'fs';
import { mkdirSync } from 'fs';
import { globbySync } from 'globby';
import path from 'path';
import prettier from 'prettier';
import stripComments from 'strip-css-comments';
const { outdir } = commandLineArgs({ name: 'outdir', type: String });
const files = globbySync('./src/themes/**/[!_]*.css');
const filesToEmbed = globbySync('./src/themes/**/_*.css');
const themesDir = path.join(outdir, 'themes');
const embeds = {};
console.log('Generating stylesheets');
mkdirSync(themesDir, { recursive: true });
try {
// Gather an object containing the source of all files named "_filename.css" so we can embed them later
filesToEmbed.forEach(file => {
embeds[path.basename(file)] = fs.readFileSync(file, 'utf8');
});
// Loop through each theme file, copying the .css and generating a .js version for Lit users
files.forEach(file => {
let source = fs.readFileSync(file, 'utf8');
// If the source has "/* _filename.css */" in it, replace it with the embedded styles
Object.keys(embeds).forEach(key => {
source = source.replace(`/* ${key} */`, embeds[key]);
});
const css = prettier.format(stripComments(source), {
parser: 'css'
});
let js = prettier.format(
`
import { css } from 'lit';
export default css\`
${css}
\`;
`,
{ parser: 'babel-ts' }
);
const cssFile = path.join(themesDir, path.basename(file));
const jsFile = path.join(themesDir, path.basename(file).replace('.css', '.styles.js'));
fs.writeFileSync(cssFile, css, 'utf8');
fs.writeFileSync(jsFile, js, 'utf8');
});
} catch (err) {
console.error(chalk.red('Error generating stylesheets!'));
console.error(err);
}