generate css files from themes/*.styles.ts

package.json

@@ -64,14 +64,15 @@
     "del": "^6.0.0",
     "download": "^8.0.0",
     "esbuild": "^0.12.4",
-    "esbuild-plugin-inline-import": "^1.0.1",
     "front-matter": "^4.0.2",
     "get-port": "^5.1.1",
     "husky": "^4.3.8",
+    "mkdirp": "^0.5.5",
     "plop": "^2.7.4",
     "prettier": "^2.2.1",
     "recursive-copy": "^2.0.11",
     "sinon": "^11.1.1",
+    "strip-css-comments": "^4.1.0",
     "tslib": "^2.2.0",
     "typescript": "^4.2.4",
     "wait-on": "^5.2.1"

scripts/build.js

@@ -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(() => {

scripts/make-css.js

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