WIP

package.json

@@ -60,38 +60,39 @@
       "__file_snapshots__"
     ]
   },
-  "author": "4Catalyzer",
+  "author": "Jason Quense",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/4Catalyzer/astroturf/issues"
   },
   "homepage": "https://github.com/4Catalyzer/astroturf#readme",
   "dependencies": {
-    "@babel/code-frame": "^7.16.0",
-    "@babel/core": "^7.16.5",
-    "@babel/generator": "^7.16.5",
-    "@babel/helper-module-imports": "^7.16.0",
-    "@babel/plugin-transform-react-jsx": "^7.16.5",
-    "@babel/template": "^7.16.0",
-    "@babel/traverse": "^7.16.5",
-    "@babel/types": "^7.16.0",
-    "@modular-css/processor": "^27.0.3",
+    "@babel/code-frame": "^7.18.6",
+    "@babel/core": "^7.19.6",
+    "@babel/generator": "^7.20.0",
+    "@babel/helper-module-imports": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
+    "@babel/template": "^7.18.10",
+    "@babel/traverse": "^7.20.0",
+    "@babel/types": "^7.20.0",
+    "@modular-css/processor": "^28.1.4",
     "common-tags": "^1.8.2",
     "cosmiconfig": "^7.0.1",
     "css-loader": "^5.1.3",
     "fast-levenshtein": "^3.0.0",
     "find-cache-dir": "^3.3.2",
     "globby": "^11.0.0",
-    "json5": "^2.2.0",
+    "json5": "^2.2.1",
     "lodash": "^4.17.21",
-    "magic-string": "^0.25.7",
+    "magic-string": "^0.26.7",
     "picocolors": "^1.0.0",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.18",
     "postcss-nested": "^5.0.6",
-    "postcss-scss": "^4.0.2",
-    "resolve": "^1.20.0",
+    "postcss-scss": "^4.0.5",
+    "resolve": "^1.22.1",
+    "unique-slug": "^4.0.0",
     "webpack-virtual-modules": "^0.3.2",
-    "yargs": "^17.3.0"
+    "yargs": "^17.6.0"
   },
   "peerDependencies": {
     "webpack": ">=5"

src/getLocalIdent.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+
+import slug from 'unique-slug';
+
+export function getLocalIdent(
+  loaderContext,
+  _localIdentName,
+  localName,
+  options,
+) {
+  const query = new URLSearchParams(loaderContext.resourceQuery || '');
+  return query.get('styleId')
+    ? `${slug(
+        path.relative(options.context, loaderContext.resourcePath),
+      )}${query.get('styleId')}_${localName}`
+    : null;
+}

src/inline-loader.ts

@@ -18,12 +18,16 @@ import replaceComposes from './utils/replaceComposes';
 
 const cacheDir = findCacheDir({ name: 'astroturf-loader' });
 
-mkdirSync(cacheDir, { recursive: true });
+try {
+  mkdirSync(cacheDir, { recursive: true });
+} catch (error) {
+  console.error('astroturf/loader could not create cache directory', error);
+}
 
 const inMemoryStyleCache = new Map<string, Map<string, Style>>();
 
 const hash = (name: string) =>
-  `${crypto.createHash('md4').update(name).digest('hex')}.cache`;
+  `${crypto.createHash('sha1').update(name).digest('hex')}.cache`;
 
 const cache = {
   async set(source: string, newStyles: Style[]) {
@@ -33,7 +37,11 @@ const cache = {
       styles.set(style.identifier, style);
     });
 
-    await fs.writeFile(`${cacheDir}/${hash(source)}`, serialize(styles));
+    try {
+      await fs.writeFile(`${cacheDir}/${hash(source)}`, serialize(styles));
+    } catch {
+      /* ignore */
+    }
   },
 
   async get(source: string): Promise<Map<string, Style> | undefined> {
@@ -43,7 +51,7 @@ const cache = {
       try {
         styles = deserialize(await fs.readFile(`${cacheDir}/${hash(source)}`));
         inMemoryStyleCache.set(source, styles!);
-      } catch (err) {
+      } catch {
         /* ignore */
       }
     }
@@ -68,15 +76,17 @@ module.exports = async function loader(
   );
 
   if (loaderOpts.style) {
-    const styleId = this.resourceQuery.slice(1);
+    const styleId = new URLSearchParams(this.resourceQuery || '').get(
+      'styleId',
+    );
 
     const styles = await cache.get(resourcePath);
 
-    let style = styles?.get(styleId);
+    let style = styles?.get(styleId!);
 
     if (!style) {
       await loadModule(resourcePath);
-      style = inMemoryStyleCache.get(resourcePath)?.get(styleId);
+      style = inMemoryStyleCache.get(resourcePath)?.get(styleId!);
     }
 
     if (!style) {
@@ -86,6 +96,7 @@ module.exports = async function loader(
         ),
       );
     }
+
     if (!this._module.matchResource)
       this._module.matchResource = style.absoluteFilePath;
 
@@ -95,7 +106,7 @@ module.exports = async function loader(
   function getLoaderRequest(from: string, to: string, id: string) {
     const cssBase = basename(to);
 
-    const file = `${cssBase}!=!astroturf/inline-loader?style=1!${from}?${id}`;
+    const file = `${cssBase}!=!astroturf/inline-loader?style=1!${from}?styleId=${id}`;
 
     return file;
   }

src/plugin.ts

@@ -61,6 +61,7 @@ export default function plugin(): PluginObj<PluginState> {
           enter(path: NodePath<t.Program>, state: any) {
             state.styleImports = new ImportInjector(path);
             state.defaultedOptions = defaults(state.opts, {
+              nesting: 'auto',
               extension: '.module.css',
               cssTagName: 'css',
               styledTagName: 'styled',

src/types.ts

@@ -25,6 +25,7 @@ export interface ResolvedOptions {
   configFile?: string | boolean;
   writeFiles: boolean;
   allowGlobal: boolean;
+  nesting: boolean | 'auto';
 
   cssTagName: string | false;
   styledTagName: string | false;

src/utils/buildTaggedTemplate.ts

@@ -371,8 +371,10 @@ export default function buildTaggedTemplate(opts: Options) {
   css = `${allImports.trim()}\n\n${css}`.trim();
 
   if (
-    location !== 'STYLESHEET' &&
-    opts.style.absoluteFilePath.endsWith('.css')
+    opts.pluginOptions.nesting === true ||
+    (opts.pluginOptions.nesting === 'auto' &&
+      location !== 'STYLESHEET' &&
+      opts.style.absoluteFilePath.endsWith('.css'))
   ) {
     try {
       css = processCss(css, opts.style.absoluteFilePath).css;