Adding support for CSS modules

.gitignore

@@ -2,3 +2,4 @@
 build
 node_modules
 .github/actions/*/package-lock.json
+*.css.d.ts

README.md

@@ -51,15 +51,16 @@ This style of import can only be used in `static-build`.
 ## CSS
 
 ```js
-import cssURL, { inline } from 'css:./styles.css';
+import cssURL, { inline, $tabButton } from './styles.css';
 ```
 
-`css:` followed by a path to some CSS will add and minify that CSS to the build.
+Imports ending `.css` are assumed to be CSS.
+
+The CSS supports CSS modules, Sass-style nesting, and will be minified.
 
 - `cssURL` - URL to the CSS resource.
 - `inline` - The text of the CSS.
-
-The CSS can also use Sass-style nesting.
+- `$*` - Other imports starting with \$ refer to class names within the CSS. So, if the CSS contains `.tab-button`, then `$tabButton` will be one of the exports.
 
 ## Markdown
 

lib/css-plugin.js

@@ -12,80 +12,121 @@
  */
 import { promises as fsp, readFileSync } from 'fs';
 import { createHash } from 'crypto';
+import { promisify } from 'util';
 import { parse as parsePath, resolve as resolvePath, dirname } from 'path';
 
 import postcss from 'postcss';
 import postCSSNested from 'postcss-nested';
 import postCSSUrl from 'postcss-url';
+import postCSSModules from 'postcss-modules';
 import cssNano from 'cssnano';
+import camelCase from 'lodash.camelcase';
+import glob from 'glob';
 
-const prefix = 'css:';
+const globP = promisify(glob);
+
+const suffix = '.css';
 const assetRe = new RegExp('/fake/path/to/asset/([^/]+)/', 'g');
 
 export default function() {
+  /** @type {string[]} */
   let emittedCSSIds;
+  /** @type {Map<string, string>} */
   let hashToId;
+  /** @type {Map<string, string>} */
+  let pathToModule;
 
   return {
     name: 'css',
-    buildStart() {
+    async buildStart() {
       emittedCSSIds = [];
       hashToId = new Map();
-    },
-    async resolveId(id, importer) {
-      if (!id.startsWith(prefix)) return null;
+      pathToModule = new Map();
 
-      const realId = id.slice(prefix.length);
-      const resolveResult = await this.resolve(realId, importer);
-      if (!resolveResult) {
-        throw Error(`Cannot resolve ${resolveResult.id}`);
-      }
-      return prefix + resolveResult.id;
-    },
-    async load(id) {
-      if (!id.startsWith(prefix)) return;
-
-      const realId = id.slice(prefix.length);
-      const parsedPath = parsePath(realId);
-      this.addWatchFile(realId);
-      const file = await fsp.readFile(realId);
-      const cssResult = await postcss([
-        postCSSNested,
-        postCSSUrl({
-          url: ({ relativePath, url }) => {
-            if (/^https?:\/\//.test(url)) return url;
-            const parsedPath = parsePath(relativePath);
-            const source = readFileSync(
-              resolvePath(dirname(realId), relativePath),
-            );
-            const fileId = this.emitFile({
-              type: 'asset',
-              name: parsedPath.base,
-              source,
-            });
-            const hash = createHash('md5');
-            hash.update(source);
-            const md5 = hash.digest('hex');
-            hashToId.set(md5, fileId);
-            return `/fake/path/to/asset/${md5}/`;
-          },
-        }),
-        cssNano,
-      ]).process(file, {
-        from: undefined,
+      const cssPaths = await globP('static-build/**/*.css', {
+        nodir: true,
+        absolute: true,
       });
 
-      const fileId = this.emitFile({
-        type: 'asset',
-        source: cssResult.css,
-        name: parsedPath.base,
-      });
+      await Promise.all(
+        cssPaths.map(async path => {
+          this.addWatchFile(path);
+          const parsedPath = parsePath(path);
+          const file = await fsp.readFile(path);
+          let moduleJSON;
+          const cssResult = await postcss([
+            postCSSNested,
+            postCSSModules({
+              getJSON(_, json) {
+                moduleJSON = json;
+              },
+            }),
+            postCSSUrl({
+              url: ({ relativePath, url }) => {
+                if (/^https?:\/\//.test(url)) return url;
+                const parsedPath = parsePath(relativePath);
+                const source = readFileSync(
+                  resolvePath(dirname(realId), relativePath),
+                );
+                const fileId = this.emitFile({
+                  type: 'asset',
+                  name: parsedPath.base,
+                  source,
+                });
+                const hash = createHash('md5');
+                hash.update(source);
+                const md5 = hash.digest('hex');
+                hashToId.set(md5, fileId);
+                return `/fake/path/to/asset/${md5}/`;
+              },
+            }),
+            cssNano,
+          ]).process(file, {
+            from: undefined,
+          });
+
+          const cssClassExports = Object.entries(moduleJSON).map(
+            ([key, val]) =>
+              `export const $${camelCase(key)} = ${JSON.stringify(val)};`,
+          );
 
-      emittedCSSIds.push(fileId);
+          const defs = [
+            'declare var url: string;',
+            'export default url;',
+            'export const inline: string;',
+            ...Object.keys(moduleJSON).map(
+              key => `export const $${camelCase(key)}: string;`,
+            ),
+          ];
+
+          const fileId = this.emitFile({
+            type: 'asset',
+            source: cssResult.css,
+            name: parsedPath.base,
+          });
+
+          emittedCSSIds.push(fileId);
+
+          await fsp.writeFile(path + '.d.ts', defs.join('\n'));
+
+          pathToModule.set(
+            path,
+            [
+              `export default import.meta.ROLLUP_FILE_URL_${fileId}`,
+              `export const inline = ${JSON.stringify(cssResult.css)}`,
+              ...cssClassExports,
+            ].join('\n'),
+          );
+        }),
+      );
+    },
+    async load(id) {
+      if (!id.endsWith(suffix)) return;
+      if (!pathToModule.has(id)) {
+        throw Error(`Cannot find ${id} in pathToModule`);
+      }
 
-      return `export default import.meta.ROLLUP_FILE_URL_${fileId}; export const inline = ${JSON.stringify(
-        cssResult.css,
-      )}`;
+      return pathToModule.get(id);
     },
     async generateBundle(options, bundle) {
       const cssAssets = emittedCSSIds.map(id => this.getFileName(id));

lib/simple-ts.js

@@ -41,10 +41,14 @@ export default function simpleTS(mainPath, { noBuild, watch } = {}) {
   const config = loadConfig(mainPath);
   const args = ['-b', mainPath];
 
-  let done = Promise.resolve();
+  let tsBuildDone;
 
-  if (!noBuild) {
-    done = new Promise(resolve => {
+  function tsBuild(rollupContext) {
+    if (tsBuildDone) return tsBuildDone;
+    if (noBuild) {
+      return (tsBuildDone = Promise.resolve());
+    }
+    tsBuildDone = new Promise(resolve => {
       const proc = spawn('tsc', args, {
         stdio: 'inherit',
       });
@@ -56,23 +60,25 @@ export default function simpleTS(mainPath, { noBuild, watch } = {}) {
         resolve();
       });
     });
-  }
 
-  if (!noBuild && watch) {
-    done.then(() => {
-      spawn('tsc', [...args, '--watch', '--preserveWatchOutput'], {
-        stdio: 'inherit',
-      });
+    tsBuildDone.then(async () => {
+      const matches = await globP(config.options.outDir + '/**/*.js');
+      for (const match of matches) rollupContext.addWatchFile(match);
     });
+
+    if (watch) {
+      tsBuildDone.then(() => {
+        spawn('tsc', [...args, '--watch', '--preserveWatchOutput'], {
+          stdio: 'inherit',
+        });
+      });
+    }
+
+    return tsBuildDone;
   }
 
   return {
     name: 'simple-ts',
-    async buildStart() {
-      await done;
-      const matches = await globP(config.options.outDir + '/**/*.js');
-      for (const match of matches) this.addWatchFile(match);
-    },
     resolveId(id, importer) {
       // If there isn't an importer, it's an entry point, so we don't need to resolve it relative
       // to something.
@@ -96,9 +102,14 @@ export default function simpleTS(mainPath, { noBuild, watch } = {}) {
       }
       return tsResolve.resolvedModule.resolvedFileName;
     },
-    load(id) {
+    async load(id) {
       if (!extRe.test(id)) return null;
 
+      // TypeScript building is deferred until the first TS file load.
+      // This allows prerequisites to happen first,
+      // such as css.d.ts generation in css-plugin.
+      await tsBuild(this);
+
       // Look for the JS equivalent in the tmp folder
       const newId = join(
         config.options.outDir,