Merge branch 'bump'

.eslintrc

@@ -11,13 +11,15 @@
   },
   "overrides": [
     {
-      "files": ["test/**", "www/*.js"],
+      "files": ["test/**", "www/**"],
       "env": {
         "jest": true
       },
       "rules": {
         "global-require": "off",
         "no-console": "off",
+        "react/react-in-jsx-scope": "off",
+        "import/extensions": "off",
         "import/no-extraneous-dependencies": [
           "error",
           { "devDependencies": true }

package.json

@@ -15,7 +15,7 @@
     "build:pick": "cherry-pick --cwd=lib --input-dir=../src/runtime --cjs-dir=cjs --esm-dir=esm",
     "build:runtime": "4c build src/runtime --no-copy-files --no-types",
     "build:tools": "4c build -d lib --no-esm -- --ignore \"**/runtime/**\"",
-    "build": "yarn build:tools && yarn build:runtime && yarn build:pick && yarn copy:types",
+    "build": "yarn build:tools && yarn build:runtime && yarn build:pick && yarn copy:types && yarn file-butler prepare-publish-dir lib",
     "deploy-docs": "yarn --cwd www build --prefix-paths && gh-pages -d www/public",
     "release": "4c release",
     "start": "yarn --cwd ./example start"
@@ -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/cli.ts

@@ -243,7 +243,7 @@ export async function handler({ files, outFile, configFile }) {
 
     await writeFile(
       file,
-      replaceStyleTemplates({}, file, content, changeset).code,
+      replaceStyleTemplates(file, content, changeset, false).code,
     );
   }
 

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;
   }
@@ -196,10 +207,10 @@ module.exports = async function loader(
         await cache.set(resourcePath, styles);
 
         const result = replaceStyleTemplates(
-          this,
           resourcePath,
           content,
           changeset,
+          this.sourceMap,
         );
 
         cb(null, result.code, result.map as any);

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;

src/utils/loaders.ts

@@ -148,11 +148,10 @@ export function collectStyles(
 }
 
 export function replaceStyleTemplates(
-  loaderContext: any,
   filename: string,
   src: string,
   locations: { start?: number; end?: number; code?: string }[],
-  // content: Map<string, string>,
+  sourceMap = true,
 ) {
   locations = sortBy(locations, (i) => i.start || 0);
 
@@ -170,8 +169,12 @@ export function replaceStyleTemplates(
 
   return {
     code: magic.toString(),
-    map: loaderContext.sourceMap
-      ? magic.generateMap({ includeContent: true, source: filename })
+    map: sourceMap
+      ? magic.generateMap({
+          includeContent: true,
+          source: filename,
+          hires: true,
+        })
       : null,
   };
 }

src/vfs-loader.ts

@@ -141,10 +141,10 @@ module.exports = async function loader(
         });
 
         const result = replaceStyleTemplates(
-          this,
           resourcePath,
           content,
           changeset,
+          this.sourceMap,
         );
 
         cb(null, result.code, result.map as any);