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

generate css files from themes/*.styles.ts

Browse Source
This commit is contained in:
Cory LaViska
2021-08-05 16:48:15 -04:00
parent 3877e89277
commit c5d4c532b3
10 changed files with 941 additions and 897 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
scripts/build.js
View File

@@ -10,7 +10,6 @@ import esbuild from 'esbuild';
import fs from 'fs';
import getPort from 'get-port';
import glob from 'globby';
import inlineImportPlugin from 'esbuild-plugin-inline-import';
import path from 'path';
import { execSync } from 'child_process';
@@ -23,17 +22,10 @@ del.sync('./dist');
if (!dev) execSync('tsc', { stdio: 'inherit' }); // for type declarations
execSync('node scripts/make-metadata.js', { stdio: 'inherit' });
execSync('node scripts/make-vscode-data.js', { stdio: 'inherit' });
execSync('node scripts/make-css.js', { stdio: 'inherit' });
execSync('node scripts/make-icons.js', { stdio: 'inherit' });
(async () => {
async function copyFiles() {
// Copy CSS files from src/themes to dist/themes
await copy('./src/themes', './dist/themes', {
overwrite: true,
filter: /\.css$/
});
}
const entryPoints = [
// The whole shebang dist
'./src/shoelace.ts',
@@ -59,15 +51,13 @@ execSync('node scripts/make-icons.js', { stdio: 'inherit' });
},
bundle: true,
splitting: true,
plugins: [inlineImportPlugin()]
plugins: []
})
.catch(err => {
console.error(chalk.red(err));
process.exit(1);
});
await copyFiles();
// Create the docs distribution by copying dist into the docs folder. This is what powers the website. It doesn't need
// to exist in dev because Browser Sync routes it virtually.
await del('./docs/dist');
@@ -107,8 +97,9 @@ execSync('node scripts/make-icons.js', { stdio: 'inherit' });
// Rebuild and reload
.rebuild()
.then(async () => {
if (/\.css$/.test(filename)) {
await copyFiles();
// Rebuild stylesheets when a theme file changes
if (/^src\/themes/.test(filename)) {
execSync('node scripts/make-css.js', { stdio: 'inherit' });
}
})
.then(() => {

31
scripts/make-css.js Normal file
View File

@@ -0,0 +1,31 @@
//
// This script generates stylesheets from all *.styles.ts files in src/themes
//
import chalk from 'chalk';
import esbuild from 'esbuild';
import fs from 'fs/promises';
import glob from 'globby';
import mkdirp from 'mkdirp';
import path from 'path';
import prettier from 'prettier';
import stripComments from 'strip-css-comments';
const files = glob.sync('./src/themes/**/*.styles.ts');
const outdir = './dist/themes';
mkdirp.sync(outdir);
try {
files.map(async file => {
const source = await fs.readFile(file, 'utf8');
const css = prettier.format(stripComments(source.match(/export default css`(.*?)`;/s)[1]), { parser: 'css' });
const filename = path.basename(file).replace('.styles.ts', '.css');
const outfile = path.join(outdir, filename);
await fs.writeFile(outfile, css, 'utf8');
});
console.log(chalk.cyan(`Successfully generated stylesheets 🎨\n`));
} catch (err) {
console.error(chalk.red('Error generating styleseheets!'));
console.error(err);
}