ember-scoped-css 0.24.2 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-scoped-css",
-  "version": "0.24.2",
+  "version": "1.0.0",
   "description": "",
   "keywords": [
     "ember-addon"
@@ -44,17 +44,6 @@
     "./helpers/scoped-class": {
       "default": "./classic-app-support/helpers/scoped-class.js"
     },
-    "./build/app-css-loader": {
-      "import": "./src/build/app-css-loader.js",
-      "require": "./dist/cjs/app-css-loader.cjs"
-    },
-    "./build/app-dependency-loader": {
-      "import": "./src/build/app-dependency-loader.js",
-      "require": "./dist/cjs/app-dependency-loader.cjs"
-    },
-    "./build/ember-classic-support": {
-      "require": "./dist/cjs/ember-classic-support.cjs"
-    },
     "./addon-main.cjs": "./addon-main.cjs",
     "./babel-plugin": {
       "import": "./src/build/babel-plugin.js",
@@ -83,17 +72,15 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.26.8",
-    "@nullvoxpopuli/eslint-configs": "^4.3.0",
+    "@nullvoxpopuli/eslint-configs": "^5.3.4",
     "@tsconfig/ember": "^3.0.9",
     "@tsconfig/strictest": "^2.0.5",
-    "@typescript-eslint/eslint-plugin": "^8.24.1",
-    "@typescript-eslint/parser": "^8.24.1",
     "concurrently": "^9.1.2",
     "ember-template-lint": "^6.1.0",
     "esbuild": "^0.25.0",
     "esbuild-plugin-vitest-cleaner": "^0.5.1",
-    "eslint": "^8.50.0",
-    "prettier": "^3.5.1",
+    "eslint": "^9.36.0",
+    "prettier": "^3.6.2",
     "typescript": "^5.2.2",
     "vitest": "^3.0.6",
     "webpack": "^5.98.0"
@@ -107,7 +94,7 @@
     }
   },
   "engines": {
-    "node": ">= 18"
+    "node": ">= 22.16"
   },
   "peerDependencies": {
     "ember-template-lint": ">= 5.7.2",

package/src/build/babel-plugin.js

@@ -1,8 +1,4 @@
-import { ImportUtil } from 'babel-import-util';
-import { existsSync } from 'fs';
-import nodePath from 'path';
-
-import { cssPathFor, isRelevantFile } from '../lib/path/utils.js';
+import { isRelevantFile } from '../lib/path/utils.js';
 
 function _isRelevantFile(state, cwd) {
   let fileName = state.file.opts.filename;
@@ -21,11 +17,10 @@ function _isRelevantFile(state, cwd) {
  */
 export default (env, options, workingDirectory) => {
   /**
-   * This babel plugin does three things:
+   * This babel plugin does two things:
    * - removes the import of scopedClass, if it exists
    *   - if scopedClass was imported, it is removed from any component's "scope bag"
    *     (the scope bag being a low-level object used for passing what is "in scope" for a component)
-   * - adds an import to the CSS file, if it exists
    */
   return {
     visitor: {
@@ -36,8 +31,6 @@ export default (env, options, workingDirectory) => {
 
             return;
           }
-
-          state.importUtil = new ImportUtil(env, path);
         },
       },
       ImportDeclaration(path, state) {
@@ -76,35 +69,6 @@ export default (env, options, workingDirectory) => {
           path.remove();
         }
       },
-      /**
-       * If there is a CSS file, AND a corresponding template,
-       * we can import the CSS to then defer to the CSS loader
-       * or other CSS processing to handle the postfixing
-       */
-      CallExpression(path, state) {
-        if (state.canSkip) {
-          return;
-        }
-
-        const node = path.node;
-
-        if (
-          node.callee.name === 'precompileTemplate' ||
-          node.callee.name === 'hbs' ||
-          node.callee.name === 'createTemplateFactory'
-        ) {
-          const fileName =
-            state.file.opts.sourceFileName || state.file.opts.filename;
-
-          let cssPath = cssPathFor(fileName);
-
-          if (existsSync(cssPath)) {
-            let baseCSS = nodePath.basename(cssPath);
-
-            state.importUtil.importForSideEffect(`./${baseCSS}`);
-          }
-        }
-      },
     },
   };
 };

package/src/build/index.js

@@ -1,3 +1,7 @@
 export { default as babelPlugin } from './babel-plugin.js';
 export { default as scopedCssUnplugin } from './scoped-css-unplugin.js';
 export { createPlugin as templatePlugin } from './template-plugin.js';
+
+import { default as scopedCssUnplugin } from './scoped-css-unplugin.js';
+
+export const rollupPlugin = scopedCssUnplugin.rollup;

package/src/build/scoped-css-unplugin.js

@@ -1,201 +1,39 @@
-import { existsSync } from 'node:fs';
-import { readFile } from 'node:fs/promises';
 import path from 'node:path';
-import process from 'node:process';
 
 import { createUnplugin } from 'unplugin';
 
-import getClassesTagsFromCss from '../lib/getClassesTagsFromCss.js';
-import {
-  cssHasAssociatedComponent,
-  hashFromAbsolutePath,
-  isRelevantFile,
-} from '../lib/path/utils.js';
-import replaceHbsInJs from '../lib/replaceHbsInJs.js';
-import rewriteCss from '../lib/rewriteCss.js';
-import rewriteHbs from '../lib/rewriteHbs.js';
-
-function isJsFile(id) {
-  return (
-    id.endsWith('.js') ||
-    id.endsWith('.ts') ||
-    id.endsWith('.gjs') ||
-    id.endsWith('.gts')
-  );
-}
-
-function isHbsFile(id) {
-  return id.endsWith('.hbs');
-}
-
-function isCssFile(id) {
-  return id.endsWith('.css');
-}
-
-function asCSSPath(id) {
-  const cssPath = id.endsWith('.hbs')
-    ? id.replace(/\.hbs$/, '.css')
-    : id.replace(/(\.hbs)?\.(js|ts|gjs|gts)$/, '.css');
-
-  return cssPath;
-}
-
-async function transformJsFile(code, id) {
-  let cssPath = asCSSPath(id);
-  let cssFileName = path.basename(cssPath);
-
-  let cssExists = existsSync(cssPath);
-
-  // Check for pods (using styles.css)
-  if (!cssExists) {
-    let [, ...parts] = id.split('/').reverse();
-
-    cssPath = [...parts.reverse(), 'styles.css'].join('/');
-    cssFileName = 'styles.css';
-    cssExists = existsSync(cssPath);
-  }
-
-  let css;
-
-  if (cssExists) {
-    css = await readFile(cssPath, 'utf8');
-  } else {
-    return {
-      code,
-      map: null,
-    };
-  }
-
-  // add css import for js and gjs files
-  code = `import './${cssFileName}';\n\n${code}`;
-
-  // rewrite hbs in js in case it is gjs file (for gjs files hbs is already in js file)
-
-  const rewrittenCode = replaceHbsInJs(code, (hbs, scopedClass) => {
-    const { classes, tags } = getClassesTagsFromCss(css);
-    const postfix = hashFromAbsolutePath(cssPath);
-    const rewritten = rewriteHbs(hbs, classes, tags, postfix, scopedClass);
-
-    return rewritten;
-  });
-
+import { decodeScopedCSSRequest, isScopedCSSRequest } from '../lib/request.js';
+/**
+ * The plugin that handles CSS requests from other transform (e.g.: babel)
+ *
+ * This plugin takes no options because the CSS transform has already happened by the time
+ * we handle it here.
+ */
+export default createUnplugin(() => {
   return {
-    code: rewrittenCode,
-    map: null,
-  };
-}
-
-function transformCssFile(code, id, layerName) {
-  if (cssHasAssociatedComponent(id)) {
-    const postfix = hashFromAbsolutePath(id);
-
-    code = rewriteCss(code, postfix, path.basename(id), layerName);
-  }
-
-  return code;
-}
-
-function gatherCSSFiles(bundle) {
-  let cssFiles = [];
-
-  for (let asset in bundle) {
-    const cssAsset = asset.replace('js', 'css');
-
-    if (!asset.endsWith('js') || !bundle[cssAsset]) {
-      continue;
-    }
-
-    if (process.env.environment === 'development') {
-      cssFiles.push(bundle[cssAsset].source);
-      delete bundle[cssAsset];
-    } else {
-      const cssImport = path.basename(asset.replace('.js', '.css'));
-      const importLine = `import './${cssImport}';`;
-
-      const code = bundle[asset].code;
-
-      // add import to js files
-      if (code && code.indexOf(importLine) < 0) {
-        bundle[asset].code = `${importLine}\n` + code;
+    name: 'ember-scoped-css-unplugin',
+
+    resolveId(id, importer) {
+      if (isScopedCSSRequest(id)) {
+        let parsed = decodeScopedCSSRequest(id);
+
+        return {
+          id: path.resolve(path.dirname(importer), parsed.postfix + '.css'),
+          meta: {
+            'scoped-css': {
+              css: parsed.css,
+            },
+          },
+        };
       }
-    }
-  }
-
-  return cssFiles;
-}
-
-export default createUnplugin(
-  /**
-   * @typedef {object} Options
-   * @property {string} [layerName] the name of the layer to place the generated css. Defaults to "components"
-   *
-   * @param {Options} [options]
-   */
-  (options) => {
-    let cwd = process.cwd();
-    let additionalRoots = options?.additionalRoots || [];
+    },
 
-    return {
-      name: 'ember-scoped-css-unplugin',
+    load(id) {
+      let meta = this.getModuleInfo(id)?.meta?.['scoped-css'];
 
-      generateBundle(_, bundle) {
-        let cssFiles = gatherCSSFiles(bundle);
-
-        if (process.env.environment === 'development') {
-          this.emitFile({
-            type: 'asset',
-            fileName: 'scoped.css',
-            source: cssFiles.join('\n'),
-          });
-        }
-      },
-      vite: {
-        generateBundle() {
-          /* deliberately do nothing */
-        },
-        transform(code, jsPath) {
-          if (!isRelevantFile(jsPath, { additionalRoots, cwd })) return;
-
-          /**
-           * HBS files are actually JS files with a call to precompileTemplate
-           */
-          if (isHbsFile(jsPath)) {
-            return transformJsFile(code, jsPath);
-          } else if (isJsFile(jsPath)) {
-            return transformJsFile(code, jsPath);
-          } else if (isCssFile(jsPath)) {
-            return transformCssFile(code, jsPath, options?.layerName);
-          }
-        },
-      },
-
-      transform(code, jsPath) {
-        if (!isRelevantFile(jsPath, { additionalRoots, cwd })) return;
-
-        /**
-         * HBS files are actually JS files with a call to precompileTemplate
-         */
-        if (isHbsFile(jsPath)) {
-          return transformJsFile(code, jsPath);
-        } else if (isJsFile(jsPath)) {
-          return transformJsFile(code, jsPath);
-        } else if (isCssFile(jsPath)) {
-          let css = transformCssFile(code, jsPath, options?.layerName);
-
-          const emittedFileName = jsPath.replace(
-            path.join(process.cwd(), 'src/'),
-            '',
-          );
-
-          this.emitFile({
-            type: 'asset',
-            fileName: emittedFileName,
-            source: css,
-          });
-
-          return '';
-        }
-      },
-    };
-  },
-);
+      if (meta) {
+        return meta.css;
+      }
+    },
+  };
+});

package/src/build/template-plugin.js

@@ -4,7 +4,8 @@
  *
  */
 
-import { getCSSInfo } from '../lib/css/utils.js';
+import { rewriteCss } from '../lib/css/rewrite.js';
+import { getCSSContentInfo, getCSSInfo } from '../lib/css/utils.js';
 import { fixFilename } from '../lib/path/template-transform-paths.js';
 import {
   appPath,
@@ -12,6 +13,7 @@ import {
   hashFromModulePath,
   isRelevantFile,
 } from '../lib/path/utils.js';
+import { makeRequest } from '../lib/request.js';
 import { templatePlugin } from '../lib/rewriteHbs.js';
 
 const noopPlugin = {
@@ -28,9 +30,10 @@ export function createPlugin(config) {
    * @param {ASTPluginEnvironment} env
    */
   return function scopedCss(env) {
+    let cwd = process.cwd();
     let isRelevant = isRelevantFile(env.filename, {
       additionalRoots: config.additionalRoots,
-      cwd: process.cwd(),
+      cwd,
     });
 
     if (!isRelevant) {
@@ -39,18 +42,64 @@ export function createPlugin(config) {
 
     let absolutePath = fixFilename(env.filename);
     let modulePath = appPath(absolutePath);
+    let postfix = hashFromModulePath(modulePath);
+
+    /**
+     * The list of naked tag selectors found in the CSS
+     *
+     * @type {Set<string>}
+     */
+    let scopedTags = new Set();
+
+    /**
+     * The list of classes found in the CSS
+     *
+     * @type {Set<string>}
+     */
+    let scopedClasses = new Set();
+
+    /**
+     * @param {{ tags: Set<string>; classes: Set<string> }} info
+     */
+    function addInfo(info) {
+      for (let item of info.tags) {
+        scopedTags.add(item);
+      }
+
+      for (let item of info.classes) {
+        scopedClasses.add(item);
+      }
+    }
 
     let cssPath = cssPathFor(absolutePath);
     let info = getCSSInfo(cssPath);
-    let postfix = hashFromModulePath(modulePath);
 
-    if (!info) {
-      return noopPlugin;
+    /**
+     * This will be falsey if we don't have a co-located CSS file.
+     * We'll still want to check for embedded <style scoped> tags though.
+     */
+    if (info) {
+      addInfo(info);
+
+      let localCssPath = cssPath.replace(cwd + '/', '');
+      let scopedCss = rewriteCss(
+        info.css,
+        postfix,
+        localCssPath,
+        config.layerName,
+      );
+
+      let cssRequest = makeRequest(postfix, info.id, scopedCss);
+
+      /**
+       * With this we don't need a JS plugin
+       */
+      env.meta.jsutils.importForSideEffect(cssRequest);
     }
 
     let visitors = templatePlugin({
-      classes: info.classes,
-      tags: info.tags,
+      classes: scopedClasses,
+      tags: scopedTags,
       postfix,
     });
 
@@ -59,13 +108,58 @@ export function createPlugin(config) {
       visitor: {
         // Stack Manager
         ...visitors,
+
+        /**
+         * We have to eagerly get the <style scoped> contents, so we can pre-parse
+         * the tags and classes to then pass to the other visitors so that they can
+         * appropriately change matching classes / tags.
+         */
+        Template(node) {
+          /**
+           * We only allow a scoped <style> at the root
+           */
+          let styleTag = node.body.find(
+            (n) => n.type === 'ElementNode' && n.tag === 'style',
+          );
+
+          if (hasScopedAttribute(styleTag)) {
+            let css = textContent(styleTag);
+            let info = getCSSContentInfo(css);
+            let localCssPath = `<inline>/` + cssPath.replace(cwd + '/', '');
+            let scopedCss = rewriteCss(
+              info.css,
+              postfix,
+              localCssPath,
+              config.layerName,
+            );
+
+            addInfo(info);
+
+            let cssRequest = makeRequest(postfix, info.id, scopedCss);
+
+            env.meta.jsutils.importForSideEffect(cssRequest);
+          }
+        },
+
         // Visitors broken out like this so we can conditionally
         // debug based on file path.
         AttrNode(...args) {
           return visitors.AttrNode(...args);
         },
-        ElementNode(...args) {
-          return visitors.ElementNode(...args);
+        ElementNode(node, walker) {
+          // class attribute handling
+          visitors.ElementNode(node, walker);
+
+          if (hasScopedAttribute(node)) {
+            if (walker.parent?.node.type !== 'Template') {
+              throw new Error(
+                '<style scoped> tags must be at the root of the template, they cannot be nested',
+              );
+            }
+
+            // Returning null removes the node
+            return null;
+          }
         },
         MustacheStatement(...args) {
           return visitors.MustacheStatement(...args);
@@ -77,3 +171,24 @@ export function createPlugin(config) {
     };
   };
 }
+
+/**
+ * Thanks, CardStack and @ef4 for this code.
+ */
+const SCOPED_ATTRIBUTE_NAME = 'scoped';
+
+function hasScopedAttribute(node) {
+  if (!node) return;
+  if (node.tag !== 'style') return;
+  if (node.type !== 'ElementNode') return;
+
+  return node.attributes.some(
+    (attribute) => attribute.name === SCOPED_ATTRIBUTE_NAME,
+  );
+}
+
+function textContent(node) {
+  let textChildren = node.children.filter((c) => c.type === 'TextNode');
+
+  return textChildren.map((c) => c.chars).join('');
+}

package/src/lib/{rewriteCss.js → css/rewrite.js}

@@ -1,7 +1,7 @@
 import postcss from 'postcss';
 import parser from 'postcss-selector-parser';
 
-import isInsideGlobal from './isInsideGlobal.js';
+import { isInsideGlobal } from './utils.js';
 
 function rewriteSelector(sel, postfix) {
   const transform = (selectors) => {
@@ -37,7 +37,7 @@ function isInsideKeyframes(node) {
   return isInsideKeyframes(parent);
 }
 
-export default function rewriteCss(css, postfix, fileName, layerName) {
+export function rewriteCss(css, postfix, fileName, layerName) {
   const layerNameWithDefault = layerName ?? 'components';
   const ast = postcss.parse(css);
 

package/src/lib/css/utils.js

@@ -1,6 +1,25 @@
 import { existsSync, readFileSync } from 'fs';
+import postcss from 'postcss';
+import parser from 'postcss-selector-parser';
 
-import getClassesTagsFromCss from '../getClassesTagsFromCss.js';
+import { md5 } from '../path/md5.js';
+
+/**
+ * @param {string} css
+ * @return {string} hashed down version of the CSS for disambiguating
+ */
+export function hash(css) {
+  return `css-${md5(css)}`;
+}
+
+export function isInsideGlobal(node, func) {
+  const parent = node.parent;
+
+  if (!parent) return false;
+  if (parent.type === 'pseudo' && parent.value === ':global') return true;
+
+  return isInsideGlobal(parent, func);
+}
 
 /**
  * @param {string} cssPath path to a CSS file
@@ -11,7 +30,59 @@ export function getCSSInfo(cssPath) {
   }
 
   let css = readFileSync(cssPath, 'utf8');
-  let result = getClassesTagsFromCss(css);
 
-  return result;
+  return getCSSContentInfo(css);
+}
+
+/**
+ * We use this function to check each class used in the template
+ * to see if we need to leave it alone or transform it
+ *
+ * @param {string} css the CSS's contents
+ * @return {{ classes: Set<string>, tags: Set<string>, css: string, id: string }}
+ */
+export function getCSSContentInfo(css) {
+  const classes = new Set();
+  const tags = new Set();
+
+  const ast = postcss.parse(css);
+
+  ast.walk((node) => {
+    if (node.type === 'rule') {
+      getClassesAndTags(node.selector, classes, tags);
+    }
+  });
+
+  let id = hash(css);
+
+  return { classes, tags, css, id };
+}
+
+function getClassesAndTags(sel, classes, tags) {
+  const transform = (sls) => {
+    sls.walk((selector) => {
+      if (selector.type === 'class' && !isInsideGlobal(selector)) {
+        classes.add(selector.value);
+      } else if (selector.type === 'tag' && !isInsideGlobal(selector)) {
+        tags.add(selector.value);
+      }
+    });
+  };
+
+  parser(transform).processSync(sel);
+}
+
+if (import.meta.vitest) {
+  const { it, expect } = import.meta.vitest;
+
+  it('should return classes and tags that are not in :global', function () {
+    const css = '.baz :global(.foo) .bar div :global(p)  { color: red; }';
+    const { classes, tags } = getCSSContentInfo(css);
+
+    // classes should be baz and bar
+    expect(classes.size).to.equal(2);
+    expect([...classes]).to.have.members(['baz', 'bar']);
+    expect(tags.size).to.equal(1);
+    expect([...tags]).to.have.members(['div']);
+  });
 }

package/src/lib/path/hash-from-absolute-path.test.ts

@@ -3,37 +3,15 @@ import path from 'node:path';
 import { describe, expect, it } from 'vitest';
 
 import { hashFromAbsolutePath } from './hash-from-absolute-path.js';
-import { hashFromModulePath } from './hash-from-module-path.js';
 import { paths } from './utils.paths.test.js';
 
 describe('hashFromAbsolutePath', () => {
   describe(`the module: "embroider-app/templates/application"`, () => {
-    let file = 'templates/application';
-    let expected = 'ea418816b';
-
-    it('matches the module path', () => {
-      let postfix = hashFromModulePath(`embroider-app/${file}`);
-
-      expect(postfix).to.equal(expected);
-    });
-
-    it('works with rewritten app', () => {
-      let filePath = path.join(
-        paths.embroiderApp,
-        '/node_modules/.embroider/rewritten-app',
-        file,
-      );
-
-      let postfix = hashFromAbsolutePath(filePath);
-
-      expect(postfix).to.equal(expected);
-    });
-
     it('works with direct path', () => {
-      let filePath = path.join(paths.embroiderApp, 'app', file);
+      let filePath = path.join(paths.viteApp, 'src/components/third');
       let postfix = hashFromAbsolutePath(filePath);
 
-      expect(postfix).to.equal(expected);
+      expect(postfix).to.equal('e4b5bd4dc');
     });
   });
 });