ember-scoped-css 2.1.0 → 2.2.0

package/dist/cjs/all.cjs

@@ -1,3 +1,3 @@
-const require_all = require('./all-Bimr-GZ4.cjs');
+const require_all = require('./all-CFsaG5pM.cjs');
 
 exports.scopedCSS = require_all.scopedCSS;

package/dist/cjs/babel.cjs

@@ -1,4 +1,4 @@
-const require_all = require('./all-Bimr-GZ4.cjs');
+const require_all = require('./all-CFsaG5pM.cjs');
 
 //#region src/build/public-exports/babel.js
 const scopedCSS = require_all.scopedCSS.babel;

package/dist/cjs/rollup.cjs

@@ -1,4 +1,4 @@
-const require_all = require('./all-Bimr-GZ4.cjs');
+const require_all = require('./all-CFsaG5pM.cjs');
 
 //#region src/build/public-exports/rollup.js
 const scopedCSS = require_all.scopedCSS.rollup;

package/dist/cjs/vite.cjs

@@ -1,4 +1,4 @@
-const require_all = require('./all-Bimr-GZ4.cjs');
+const require_all = require('./all-CFsaG5pM.cjs');
 
 //#region src/build/public-exports/vite.js
 const scopedCSS = require_all.scopedCSS.vite;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-scoped-css",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "",
   "keywords": [
     "ember-addon"
@@ -62,6 +62,7 @@
     "ember-template-recast": "^6.1.5",
     "glob": "^8.1.0",
     "postcss": "^8.5.3",
+    "postcss-scss": "^4.0.9",
     "postcss-selector-parser": "^6.0.16",
     "recast": "^0.23.7",
     "unplugin": "^2.3.10"
@@ -75,7 +76,7 @@
     "@types/babel__core": "^7.20.5",
     "@types/common-tags": "^1.8.4",
     "@types/jscodeshift": "^17.3.0",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/coverage-v8": "^4.1.0",
     "babel-plugin-ember-template-compilation": "^3.0.1",
     "common-tags": "^1.8.2",
     "concurrently": "^9.2.1",
@@ -86,7 +87,7 @@
     "prettier": "^3.6.2",
     "tsdown": "^0.15.12",
     "typescript": "^5.2.2",
-    "vitest": "^3.0.6",
+    "vitest": "^4.1.0",
     "webpack": "^5.98.0"
   },
   "ember-addon": {

package/src/build/template-plugin.js

@@ -122,18 +122,32 @@ export function createPlugin(config) {
 
           if (hasScopedAttribute(styleTag)) {
             let css = textContent(styleTag);
-            let info = getCSSContentInfo(css);
+            let lang = getLangAttribute(styleTag);
+            let info = getCSSContentInfo(css, lang);
 
             addInfo(info);
 
-            /**
-             * This will be handled in ElementNode traversal
-             */
-            if (hasInlineAttribute(styleTag)) {
+            if (hasInlineAttributeWithoutLang(styleTag)) {
+              /**
+               * This will be handled in ElementNode traversal
+               */
               return;
             }
 
-            let cssRequest = request.inline.create(info.id, postfix, css);
+            if (lang) {
+              /**
+               * For <style scoped inline lang="..."> we cannot preprocess at Babel-time
+               * (preprocessing is async and requires Vite's ResolvedConfig).
+               * Remove the tag and inject via virtual CSS module and warn user.
+               */
+              console.warn(
+                `[ember-scoped-css] <style scoped inline lang="${lang}"> is not supported ` +
+                  `(preprocessing is async and cannot run at Babel-time). ` +
+                  `Downgrading to non-inline: the style tag will be removed and injected as a virtual CSS module.`,
+              );
+            }
+
+            let cssRequest = request.inline.create(info.id, postfix, css, lang);
 
             env.meta.jsutils.importForSideEffect(cssRequest);
           }
@@ -155,7 +169,7 @@ export function createPlugin(config) {
               );
             }
 
-            if (hasInlineAttribute(node)) {
+            if (hasInlineAttributeWithoutLang(node)) {
               let text = textContent(node);
               let scopedText = rewriteCss(
                 text,
@@ -176,7 +190,7 @@ export function createPlugin(config) {
             return null;
           }
 
-          if (hasInlineAttribute(node)) {
+          if (hasInlineAttributeWithoutLang(node)) {
             throw new Error(
               `<style inline> is not valid. Please add the scoped attribute: <style scoped inline>`,
             );
@@ -198,6 +212,7 @@ export function createPlugin(config) {
  */
 const SCOPED_ATTRIBUTE_NAME = 'scoped';
 const INLINE_ATTRIBUTE_NAME = 'inline';
+const LANG_ATTRIBUTE_NAME = 'lang';
 
 function hasScopedAttribute(node) {
   if (!node) return;
@@ -209,16 +224,45 @@ function hasScopedAttribute(node) {
   );
 }
 
-function hasInlineAttribute(node) {
+function hasInlineAttributeWithoutLang(node) {
   if (!node) return;
   if (node.tag !== 'style') return;
   if (node.type !== 'ElementNode') return;
 
+  if (getLangAttribute(node)) {
+    return false;
+  }
+
   return node.attributes.some(
     (attribute) => attribute.name === INLINE_ATTRIBUTE_NAME,
   );
 }
 
+/**
+ * Returns the value of the `lang` attribute on a `<style>` node, or null if absent.
+ *
+ * @param {object} node
+ * @returns {string | null}
+ */
+function getLangAttribute(node) {
+  if (!node) return null;
+  if (node.tag !== 'style') return null;
+  if (node.type !== 'ElementNode') return null;
+
+  const attr = node.attributes.find(
+    (attribute) => attribute.name === LANG_ATTRIBUTE_NAME,
+  );
+
+  if (!attr) return null;
+
+  // The attribute value is a TextNode child of the AttrNode's value
+  const value = attr.value;
+
+  if (value?.type === 'TextNode') return value.chars || null;
+
+  return null;
+}
+
 function textContent(node) {
   let textChildren = node.children.filter((c) => c.type === 'TextNode');
 

package/src/build/template-plugin.test.ts

@@ -2,7 +2,7 @@ import * as babel from '@babel/core';
 import { stripIndent } from 'common-tags';
 import { Preprocessor } from 'content-tag';
 import jscodeshift from 'jscodeshift';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { createPlugin } from './template-plugin.js';
 
@@ -28,6 +28,30 @@ async function transform(file: string, config = {}) {
   return result?.code;
 }
 
+function virtualImportUrlsOf(file: string | null | undefined) {
+  if (!file) return [];
+
+  let j = jscodeshift;
+
+  let result: string[] = [];
+
+  j(file)
+    .find(j.ImportDeclaration, {
+      source: {
+        value: (value: string) => value.includes('.ember-scoped.css?css='),
+      },
+    })
+    .forEach((path) => {
+      let source = path.node.source.value;
+
+      if (typeof source === 'string') {
+        result.push(source);
+      }
+    });
+
+  return result;
+}
+
 function templateContentsOf(file: string | null | undefined) {
   if (!file) return [];
 
@@ -194,3 +218,118 @@ it('scoped inline transforms correctly', async () => {
     ]
   `);
 });
+
+describe('lang attribute (SCSS preprocessor)', () => {
+  it('scoped lang="scss" emits virtual import with lang param and rewrites classes', async () => {
+    let output = await transform(`
+      export const Foo = <template>
+        <div class="foo">hi</div>
+        <style scoped lang="scss">
+          .foo {
+            &:hover { color: blue; }
+            color: red;
+          }
+        </style>
+      </template>;
+    `);
+
+    // The style tag should be removed (it's a virtual module, not inline)
+    expect(templateContentsOf(output)).toMatchInlineSnapshot(`
+      [
+        "<div class="foo_e65d154a1">hi</div>",
+      ]
+    `);
+
+    // The virtual module import should include &lang=scss
+    expect(virtualImportUrlsOf(output)).toMatchInlineSnapshot(`
+      [
+        "./e65d154a1___css-3fbbf8c13a5ef6f5c5395268df4e8f37.ember-scoped.css?css=%0A%20%20%20%20%20%20%20%20%20%20.foo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26%3Ahover%20%7B%20color%3A%20blue%3B%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20red%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&lang=scss",
+      ]
+    `);
+  });
+
+  it('scoped inline lang="scss" is downgraded to non-inline (warning emitted, style tag removed)', async () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    let output = await transform(`
+      export const Foo = <template>
+        <div class="foo">hi</div>
+        <style scoped inline lang="scss">
+          .foo {
+            &:hover { color: blue; }
+            color: red;
+          }
+        </style>
+      </template>;
+    `);
+
+    // The style tag should be removed (downgraded to non-inline)
+    expect(templateContentsOf(output)).toMatchInlineSnapshot(`
+      [
+        "<div class="foo_e65d154a1">hi</div>",
+      ]
+    `);
+
+    // A virtual module import should have been emitted with lang=scss
+    expect(virtualImportUrlsOf(output)).toMatchInlineSnapshot(`
+      [
+        "./e65d154a1___css-3fbbf8c13a5ef6f5c5395268df4e8f37.ember-scoped.css?css=%0A%20%20%20%20%20%20%20%20%20%20.foo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26%3Ahover%20%7B%20color%3A%20blue%3B%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20red%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&lang=scss",
+      ]
+    `);
+
+    // A warning should have been logged
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining(
+        '<style scoped inline lang="scss"> is not supported',
+      ),
+    );
+
+    warnSpy.mockRestore();
+  });
+
+  it('handles scoped lang="scss" BEM constructs', async () => {
+    let output = await transform(`
+    export const Foo = <template>
+      <div class="block block--modifier">hi</div>
+      <style scoped lang="scss">
+        .block {
+          &--modifier { color: green; }
+        }
+      </style>
+    </template>;
+  `);
+
+    expect(templateContentsOf(output)).toMatchInlineSnapshot(`
+    [
+      "<div class="block_e65d154a1 block--modifier_e65d154a1">hi</div>",
+    ]
+  `);
+  });
+
+  it('handles deeply nested BEM constructs', async () => {
+    let output = await transform(`
+    export const Foo = <template>
+      <div class="block block--modifier block--modifier--modifier block--modifier--modifier--modifier">hi</div>
+      <style scoped lang="scss">
+        .block {
+          &--modifier {
+            color: green;
+            &--modifier {
+              color: green;
+              &--modifier {
+                color: green;
+              }
+            }
+          }
+        }
+      </style>
+    </template>;
+  `);
+
+    expect(templateContentsOf(output)).toMatchInlineSnapshot(`
+      [
+        "<div class="block_e65d154a1 block--modifier_e65d154a1 block--modifier--modifier_e65d154a1 block--modifier--modifier--modifier_e65d154a1">hi</div>",
+      ]
+    `);
+  });
+});

package/src/build/unplugin-colocated.js

@@ -1,4 +1,5 @@
 import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
 import path from 'node:path';
 
 import { rewriteCss } from '../lib/css/rewrite.js';
@@ -6,6 +7,15 @@ import { request } from '../lib/request.js';
 
 const META = 'scoped-css:colocated';
 
+/** File extensions that Vite can preprocess via its CSS preprocessor pipeline */
+const PREPROCESSED_EXTENSIONS = new Set([
+  '.scss',
+  '.sass',
+  '.less',
+  '.styl',
+  '.stylus',
+]);
+
 /**
  * Plugin for supporting colocated styles
  *
@@ -16,6 +26,12 @@ const META = 'scoped-css:colocated';
 export function colocated(options = {}) {
   const CWD = process.cwd();
 
+  /** @type {import('vite').ResolvedConfig | undefined} */
+  let viteConfig;
+
+  /** @type {((code: string, filename: string, config: unknown) => Promise<{ code: string }>) | undefined} */
+  let preprocessCSS;
+
   /**
    *
    * @param {string} id the request id / what was imported
@@ -73,18 +89,55 @@ export function colocated(options = {}) {
       }
     },
     vite: {
+      async configResolved(config) {
+        viteConfig = config;
+
+        // Resolve Vite's preprocessCSS from the app root to ensure we find
+        // the correct Vite installation (not a stale or missing one).
+        try {
+          const require = createRequire(config.root);
+          const vitePath = require.resolve('vite');
+          const viteModule = await import(vitePath);
+
+          preprocessCSS = viteModule.preprocessCSS;
+        } catch {
+          // Vite may not be resolvable from the config root in some setups;
+          // preprocessor support for colocated .scss files will throw a clear
+          // error at load time if used.
+        }
+      },
+
       /**
        * There may not be meta for this request yet.
        *
        * @param {*} id
        */
-      load(id) {
+      async load(id) {
         if (request.is.colocated(id)) {
           const parsed = request.colocated.decode(id);
 
           let code = readFileSync(parsed.fileName, 'utf-8');
           let relativeFilePath = path.relative(CWD, parsed.fileName);
 
+          const ext = path.extname(parsed.fileName).toLowerCase();
+
+          if (PREPROCESSED_EXTENSIONS.has(ext)) {
+            if (!viteConfig || !preprocessCSS) {
+              throw new Error(
+                `[ember-scoped-css] Colocated CSS file with extension '${ext}' requires Vite. ` +
+                  `CSS preprocessing is only supported in Vite builds.`,
+              );
+            }
+
+            const result = await preprocessCSS(
+              code,
+              parsed.fileName,
+              viteConfig,
+            );
+
+            code = result.code;
+          }
+
           let css = rewriteCss(
             code,
             parsed.postfix,

package/src/build/unplugin-inline.js

@@ -1,3 +1,4 @@
+import { createRequire } from 'node:module';
 import path from 'node:path';
 
 import { rewriteCss } from '../lib/css/rewrite.js';
@@ -17,6 +18,12 @@ const META = 'scoped-css:inline';
 export function inline(options = {}) {
   const CWD = process.cwd();
 
+  /** @type {import('vite').ResolvedConfig | undefined} */
+  let viteConfig;
+
+  /** @type {((code: string, filename: string, config: unknown) => Promise<{ code: string }>) | undefined} */
+  let preprocessCSS;
+
   /**
    * @param {string} id the request id / what was imported
    */
@@ -25,22 +32,14 @@ export function inline(options = {}) {
 
     const relativeFilePath = path.relative(CWD, filePath);
 
-    const css = rewriteCss(
-      parsed.css,
-      parsed.postfix,
-      `<inline>/${relativeFilePath}`,
-      options.layerName,
-    );
-
-    const nextId = filePath.split('?')[0];
-
     return {
-      id: nextId,
+      id: filePath.split('?')[0],
       meta: {
         [META]: {
-          css,
+          rawCss: parsed.css,
           postfix: parsed.postfix,
           fileName: relativeFilePath,
+          lang: parsed.lang,
         },
       },
     };
@@ -60,12 +59,53 @@ export function inline(options = {}) {
         return buildResponse(id, filePath);
       }
     },
-    load(id) {
+    async load(id) {
       const meta = this.getModuleInfo(id)?.meta?.[META];
 
       if (meta) {
-        return meta.css;
+        let rawCss = meta.rawCss;
+
+        if (meta.lang) {
+          if (!viteConfig || !preprocessCSS) {
+            throw new Error(
+              `[ember-scoped-css] <style scoped lang="${meta.lang}"> requires Vite. ` +
+                `CSS preprocessing via the 'lang' attribute is only supported in Vite builds.`,
+            );
+          }
+
+          const fakeFilename = `${meta.fileName}.${meta.lang}`;
+          const result = await preprocessCSS(rawCss, fakeFilename, viteConfig);
+
+          rawCss = result.code;
+        }
+
+        const css = rewriteCss(
+          rawCss,
+          meta.postfix,
+          `<inline>/${meta.fileName}`,
+          options.layerName,
+        );
+
+        return css;
       }
     },
+    vite: {
+      async configResolved(config) {
+        viteConfig = config;
+
+        // Resolve Vite's preprocessCSS from the app root to ensure we find
+        // the correct Vite installation (not a stale or missing one).
+        try {
+          const require = createRequire(config.root);
+          const vitePath = require.resolve('vite');
+          const viteModule = await import(vitePath);
+
+          preprocessCSS = viteModule.preprocessCSS;
+        } catch {
+          // Vite may not be resolvable from the config root in some setups;
+          // lang= support will throw a clear error at load time if used.
+        }
+      },
+    },
   };
 }

package/src/lib/css/rewrite.js

@@ -21,7 +21,7 @@ function isDeclaration(node) {
  * NOTE: "keyframes" is a singular definition, in that it's a block containing keyframes
  *       using `@keyframes {}` with only one thing on the inside doesn't make sense.
  */
-function rewriteReferencable(node, postfix) {
+function rewriteReferenceable(node, postfix) {
   let originalName = node.params;
   let postfixedName = node.params + SEP + postfix;
 
@@ -90,25 +90,25 @@ export function rewriteCss(css, postfix, fileName, layerName) {
    * kind => originalName => postfixedName
    * @type {{ [kind: string]: { [originalName: string]: string }}}
    */
-  const referencables = {
+  const referenceables = {
     keyframes: {},
     'counter-style': {},
     'position-try': {},
     property: {},
   };
 
-  const availableReferencables = new Set(Object.keys(referencables));
+  const availableReferenceables = new Set(Object.keys(referenceables));
 
-  function isReferencable(node) {
+  function isReferenceable(node) {
     if (node.type !== 'atrule') return;
 
-    return availableReferencables.has(node.name);
+    return availableReferenceables.has(node.name);
   }
 
   function updateDirectReferences(node) {
     if (!node.value) return;
 
-    for (let [, map] of Object.entries(referencables)) {
+    for (let [, map] of Object.entries(referenceables)) {
       if (map[node.value]) {
         node.value = map[node.value];
       }
@@ -118,11 +118,11 @@ export function rewriteCss(css, postfix, fileName, layerName) {
   function updateShorthandContents(node) {
     if (node.prop === 'animation') {
       let parts = node.value.split(' ');
-      let match = parts.filter((x) => referencables.keyframes[x]);
+      let match = parts.filter((x) => referenceables.keyframes[x]);
 
       if (match.length) {
         match.forEach((x) => {
-          let replacement = referencables.keyframes[x];
+          let replacement = referenceables.keyframes[x];
 
           if (!replacement) return;
 
@@ -131,7 +131,9 @@ export function rewriteCss(css, postfix, fileName, layerName) {
       }
     }
 
-    for (let [lookFor, replaceWith] of Object.entries(referencables.property)) {
+    for (let [lookFor, replaceWith] of Object.entries(
+      referenceables.property,
+    )) {
       let lookForVar = `var(${lookFor})`;
       let replaceWithVar = `var(${replaceWith})`;
 
@@ -141,27 +143,27 @@ export function rewriteCss(css, postfix, fileName, layerName) {
 
   /**
    * We have to do two passes:
-   * 1. postfix all the referencable syntax
+   * 1. postfix all the referenceable syntax
    * 2. postfix as normal, but also checking values of CSS properties
-   *    that could match postfixed referencables from step 1
+   *    that could match postfixed referenceables from step 1
    */
 
-  // Step 1: find referencables
+  // Step 1: find referenceables
   ast.walk((node) => {
     /**
      * @keyframes, @counter-style, etc
      */
-    if (isReferencable(node)) {
+    if (isReferenceable(node)) {
       let name = node.name;
-      let { originalName, postfixedName } = rewriteReferencable(node, postfix);
+      let { originalName, postfixedName } = rewriteReferenceable(node, postfix);
 
-      referencables[name][originalName] = postfixedName;
+      referenceables[name][originalName] = postfixedName;
 
       return;
     }
   });
 
-  // Step 2: postfix and update refenced referencables
+  // Step 2: postfix and update referenced referenceables
   ast.walk((node) => {
     if (isDeclaration(node)) {
       updateDirectReferences(node);