ember-scoped-css 2.1.0 → 2.2.0

package/src/lib/css/rewrite.test.ts

@@ -22,7 +22,8 @@ it('should use a custom layer', function () {
     @layer utils {
     .foo_postfix { color: red; }
     }
-"`);
+    "
+  `);
 });
 
 it(`understands nth-of-type syntax`, function () {
@@ -40,7 +41,8 @@ it(`understands nth-of-type syntax`, function () {
 
         li.postfix:nth-of-type(odd) {}
         li.postfix:nth-of-type(even) {}
-"`);
+    "
+  `);
 });
 
 describe('@container', () => {
@@ -64,7 +66,8 @@ describe('@container', () => {
           font-size: 1.5em;
         }
       }
-"`);
+      "
+    `);
   });
 
   it('handles parameters', () => {
@@ -120,7 +123,8 @@ describe('@container', () => {
           color: white;
         }
       }
-"`);
+      "
+    `);
   });
 });
 
@@ -142,8 +146,9 @@ describe('@media', () => {
       @media (height >= 680px), screen and (orientation: portrait) {
         .foo_postfix { color: red; }
       }
-}
-"`);
+      }
+      "
+    `);
   });
 });
 
@@ -170,8 +175,9 @@ describe('@keyframe', () => {
                 padding-top: 1rem;
               }
             }
-}
-"`);
+      }
+      "
+    `);
   });
 
   it(`references are also scoped`, function () {
@@ -200,7 +206,7 @@ describe('@keyframe', () => {
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-@layer components {
+      @layer components {
 
             p.postfix {
               animation-duration: 3s;
@@ -218,8 +224,9 @@ describe('@keyframe', () => {
                 scale: 100% 1;
               }
             }
-}
-"`);
+      }
+      "
+    `);
   });
 
   it('handles multiple references and keyframes', () => {
@@ -268,7 +275,7 @@ describe('@keyframe', () => {
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-@layer components {
+      @layer components {
 
             p.postfix {
               animation-duration: 3s;
@@ -307,8 +314,9 @@ describe('@keyframe', () => {
                 color: magenta;
               }
             }
-}
-"`);
+      }
+      "
+    `);
   });
 
   it('works in shorthand combo-declarations', () => {
@@ -333,7 +341,7 @@ describe('@keyframe', () => {
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-@layer components {
+      @layer components {
 
             div.postfix {
               width: 100px;
@@ -347,8 +355,9 @@ describe('@keyframe', () => {
               from {top: 0px;}
               to {top: 200px;}
             }
-}
-"`);
+      }
+      "
+    `);
   });
 });
 
@@ -375,8 +384,9 @@ describe('@counter-style', () => {
               symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
               suffix: " ";
             }
-}
-"`);
+      }
+      "
+    `);
   });
 
   it('updates references', () => {
@@ -398,19 +408,20 @@ describe('@counter-style', () => {
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-@layer components {
+      @layer components {
 
-              @counter-style circled-alpha__postfix {
-                system: fixed;
-                symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
-                suffix: " ";
-              }
+            @counter-style circled-alpha__postfix {
+              system: fixed;
+              symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+              suffix: " ";
+            }
 
-              .items_postfix {
-                list-style: circled-alpha__postfix;
-              }
-}
-"`);
+            .items_postfix {
+              list-style: circled-alpha__postfix;
+            }
+      }
+      "
+    `);
   });
 });
 
@@ -430,15 +441,16 @@ describe('@position-try', () => {
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-@layer components {
+      @layer components {
 
             @position-try --custom-left__postfix {
               position-area: left;
               width: 100px;
               margin-right: 10px;
             }
-}
-"`);
+      }
+      "
+    `);
   });
 
   it('updates references', () => {
@@ -461,20 +473,21 @@ describe('@position-try', () => {
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-@layer components {
+      @layer components {
 
-              @position-try --custom-left__postfix {
-                position-area: left;
-                width: 100px;
-                margin-right: 10px;
-              }
+            @position-try --custom-left__postfix {
+              position-area: left;
+              width: 100px;
+              margin-right: 10px;
+            }
 
-              .infobox_postfix {
-                position-try-fallbacks:
-                  --custom-left__postfix;
-              }
-}
-"`);
+            .infobox_postfix {
+              position-try-fallbacks:
+                --custom-left__postfix;
+            }
+      }
+      "
+    `);
   });
 });
 
@@ -494,15 +507,16 @@ describe('@property', () => {
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-@layer components {
+      @layer components {
 
             @property --item-size__postfix {
               syntax: "<percentage>";
               inherits: true;
               initial-value: 40%;
             }
-}
-"`);
+      }
+      "
+    `);
   });
 
   it('updates references', () => {
@@ -537,7 +551,7 @@ describe('@property', () => {
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-@layer components {
+      @layer components {
 
             @property --item-size__postfix {
               syntax: "<percentage>";
@@ -561,8 +575,9 @@ describe('@property', () => {
               height: var(--item-size__postfix);
               background-color: var(--item-color);
             }
-}
-"`);
+      }
+      "
+    `);
   });
 });
 
@@ -584,6 +599,7 @@ describe('@supports', () => {
           @supports (transform-origin: 5% 5%) {}
           @supports selector(h2 > p) {}
       }
-"`);
+      "
+    `);
   });
 });

package/src/lib/css/utils.js

@@ -1,5 +1,6 @@
 import { existsSync, readFileSync } from 'fs';
 import postcss from 'postcss';
+import scssSyntax from 'postcss-scss';
 import parser from 'postcss-selector-parser';
 
 import { md5 } from '../path/md5.js';
@@ -39,17 +40,25 @@ export function getCSSInfo(cssPath) {
  * to see if we need to leave it alone or transform it
  *
  * @param {string} css the CSS's contents
+ * @param {string} [lang] optional language hint (e.g. 'scss', 'sass', 'less')
  * @return {{ classes: Set<string>, tags: Set<string>, css: string, id: string }}
  */
-export function getCSSContentInfo(css) {
+export function getCSSContentInfo(css, lang) {
   const classes = new Set();
   const tags = new Set();
 
-  const ast = postcss.parse(css);
+  const parseOptions =
+    lang === 'scss' || lang === 'sass' ? { syntax: scssSyntax } : {};
+
+  const ast = postcss.parse(css, parseOptions);
+
+  const isScss = lang === 'scss' || lang === 'sass';
 
   ast.walk((node) => {
     if (node.type === 'rule') {
-      getClassesAndTags(node.selector, classes, tags);
+      const selector = isScss ? resolveNestedSassSelector(node) : node.selector;
+
+      getClassesAndTags(selector, classes, tags);
     }
   });
 
@@ -58,6 +67,36 @@ export function getCSSContentInfo(css) {
   return { classes, tags, css, id };
 }
 
+/**
+ * Resolves a nested SCSS selector by substituting `&` with the fully-resolved
+ * parent selector, recursively. This converts e.g. `&--modifier` (child of
+ * `.block`) into `.block--modifier`, and handles arbitrary nesting depth so
+ * that `&--modifier` inside `&--modifier` inside `.block` yields
+ * `.block--modifier--modifier`.
+ *
+ * @param {import('postcss').Rule} node
+ * @return {string}
+ */
+function resolveNestedSassSelector(node) {
+  const { selector } = node;
+
+  if (!selector.includes('&')) {
+    return selector;
+  }
+
+  const parent = node.parent;
+
+  if (!parent || parent.type !== 'rule') {
+    // No parent rule — `&` has nothing to substitute, return as-is
+    return selector;
+  }
+
+  // Recursively resolve the parent first, then substitute into this selector
+  const resolvedParent = resolveNestedSassSelector(parent);
+
+  return selector.replace(/&/g, resolvedParent);
+}
+
 function getClassesAndTags(sel, classes, tags) {
   const transform = (sls) => {
     sls.walk((selector) => {
@@ -85,4 +124,69 @@ if (import.meta.vitest) {
     expect(tags.size).to.equal(1);
     expect([...tags]).to.have.members(['div']);
   });
+
+  it('should parse SCSS nesting syntax without crashing when lang=scss', function () {
+    const scss = `
+      $base-color: #c6538c;
+      $border-dark: rgba($base-color, 0.88);
+
+      .parent {
+        &:hover { color: $base-color; }
+        .child { border: 1px solid $border-dark; }
+        color: red;
+      }
+    `;
+    const { classes } = getCSSContentInfo(scss, 'scss');
+
+    expect([...classes]).toMatchInlineSnapshot(`
+      [
+        "parent",
+        "child",
+      ]
+    `);
+  });
+
+  it('should parse SCSS nesting syntax without crashing when lang=sass', function () {
+    const scss = `
+      $base-color: green;
+      .block {
+        &--modifier { color: $base-color; }
+      }
+    `;
+    const { classes } = getCSSContentInfo(scss, 'sass');
+
+    expect([...classes]).toMatchInlineSnapshot(`
+      [
+        "block",
+        "block--modifier",
+      ]
+    `);
+  });
+
+  it('should parse SCSS deeply nested BEM when lang=sass', function () {
+    const scss = `
+      $base-color: green;
+      .block {
+        &--modifier {
+          color: $base-color;
+          &--modifier {
+            color: $base-color;
+            &--modifier {
+              color: $base-color;
+            }
+          }
+        }
+      }
+    `;
+    const { classes } = getCSSContentInfo(scss, 'sass');
+
+    expect([...classes]).toMatchInlineSnapshot(`
+      [
+        "block",
+        "block--modifier",
+        "block--modifier--modifier",
+        "block--modifier--modifier--modifier",
+      ]
+    `);
+  });
 }

package/src/lib/request.js

@@ -19,9 +19,16 @@ export const request = {
      * @param {string} cssHash the hash of the CSS contents
      * @param {string} postfix the hash of the file that _includes_ the linked file
      * @param {string} cssContents the contents of the CSS file
+     * @param {string} [lang] optional preprocessor language (e.g. 'scss', 'sass', 'less')
      */
-    create(cssHash, postfix, cssContents) {
-      return `./${postfix}${SEP}${cssHash}.${KEY}?css=${encodeURIComponent(cssContents)}`;
+    create(cssHash, postfix, cssContents, lang) {
+      let url = `./${postfix}${SEP}${cssHash}.${KEY}?css=${encodeURIComponent(cssContents)}`;
+
+      if (lang) {
+        url += `&lang=${encodeURIComponent(lang)}`;
+      }
+
+      return url;
     },
     decode(request) {
       let [left, qps] = request.split('?');
@@ -37,6 +44,7 @@ export const request = {
         postfix,
         css: search.get('css'),
         from: search.get('from'),
+        lang: search.get('lang'),
       };
     },
   },