ember-scoped-css 1.1.0 → 2.0.0

package/src/build/unplugin-inline.js

@@ -0,0 +1,71 @@
+import path from 'node:path';
+
+import { rewriteCss } from '../lib/css/rewrite.js';
+import { request } from '../lib/request.js';
+
+const META = 'scoped-css:inline';
+
+/**
+ * Plugin for supporting the styles from
+ *
+ * <template>
+ *   <style>...</style>
+ * </template>
+ *
+ * This plugin can't have HMR for CSS because changes to the CSS content alters the template content
+ */
+export function inline(options = {}) {
+  const CWD = process.cwd();
+
+  /**
+   * @param {string} id the request id / what was imported
+   */
+  function buildResponse(id, filePath) {
+    const parsed = request.inline.decode(id);
+
+    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,
+      meta: {
+        [META]: {
+          css,
+          postfix: parsed.postfix,
+          fileName: relativeFilePath,
+        },
+      },
+    };
+  }
+
+  return {
+    name: 'ember-scoped-css:inline',
+    resolveId(id, importer) {
+      if (request.is.inline(id)) {
+        const parsed = request.inline.decode(id);
+
+        const filePath = path.resolve(
+          path.dirname(importer),
+          `${path.basename(importer, path.extname(importer))}-${parsed.hash}.css`,
+        );
+
+        return buildResponse(id, filePath);
+      }
+    },
+    load(id) {
+      const meta = this.getModuleInfo(id)?.meta?.[META];
+
+      if (meta) {
+        return meta.css;
+      }
+    },
+  };
+}

package/src/lib/css/rewrite.js

@@ -85,7 +85,6 @@ function isInsideKeyframes(node) {
 }
 
 export function rewriteCss(css, postfix, fileName, layerName) {
-  const layerNameWithDefault = layerName ?? 'components';
   const ast = postcss.parse(css);
   /**
    * kind => originalName => postfixedName
@@ -185,13 +184,14 @@ export function rewriteCss(css, postfix, fileName, layerName) {
 
   const rewrittenCss = ast.toString();
 
-  if (!layerNameWithDefault) {
-    return `/* ${fileName} */\n${rewrittenCss}\n`;
-  }
-
   return (
-    `/* ${fileName} */\n@layer ${layerNameWithDefault} {\n\n` +
-    rewrittenCss +
-    '\n}\n'
+    [
+      `/* ${fileName} */`,
+      layerName ? `@layer ${layerName} {` : '',
+      rewrittenCss.trimEnd(),
+      layerName ? `}` : '',
+    ]
+      .filter(Boolean)
+      .join('\n') + '\n'
   );
 }

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

@@ -6,7 +6,7 @@ it('should rewrite css', function () {
   const css = '.foo { color: red; }';
   const postfix = 'postfix';
   const fileName = 'foo.css';
-  const rewritten = rewriteCss(css, postfix, fileName, false);
+  const rewritten = rewriteCss(css, postfix, fileName);
 
   expect(rewritten).to.equal(`/* foo.css */\n.foo_postfix { color: red; }\n`);
 });
@@ -17,20 +17,12 @@ it('should use a custom layer', function () {
   const fileName = 'foo.css';
   const rewritten = rewriteCss(css, postfix, fileName, 'utils');
 
-  expect(rewritten).to.equal(
-    `/* foo.css */\n@layer utils {\n\n.foo_postfix { color: red; }\n}\n`,
-  );
-});
-
-it('shouldnt rewrite global', function () {
-  const css = '.baz :global(.foo p) .bar { color: red; }';
-  const postfix = 'postfix';
-  const fileName = 'foo.css';
-  const rewritten = rewriteCss(css, postfix, fileName);
-
-  expect(rewritten).to.equal(
-    `/* foo.css */\n@layer components {\n\n.baz_postfix .foo p .bar_postfix { color: red; }\n}\n`,
-  );
+  expect(rewritten).toMatchInlineSnapshot(`
+    "/* foo.css */
+    @layer utils {
+    .foo_postfix { color: red; }
+    }
+"`);
 });
 
 it(`understands nth-of-type syntax`, function () {
@@ -45,15 +37,10 @@ it(`understands nth-of-type syntax`, function () {
 
   expect(rewritten).toMatchInlineSnapshot(`
     "/* foo.css */
-    @layer components {
-
 
         li.postfix:nth-of-type(odd) {}
         li.postfix:nth-of-type(even) {}
-      
-    }
-    "
-  `);
+"`);
 });
 
 describe('@container', () => {
@@ -71,18 +58,13 @@ describe('@container', () => {
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-      @layer components {
-
 
       @container (width > 400px) {
         h2.postfix {
           font-size: 1.5em;
         }
       }
-
-      }
-      "
-    `);
+"`);
   });
 
   it('handles parameters', () => {
@@ -116,8 +98,6 @@ describe('@container', () => {
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-      @layer components {
-
 
       /* With an optional <container-name> */
       @container tall (height > 30rem) {
@@ -140,10 +120,7 @@ describe('@container', () => {
           color: white;
         }
       }
-
-      }
-      "
-    `);
+"`);
   });
 });
 
@@ -162,14 +139,11 @@ describe('@media', () => {
       "/* foo.css */
       @layer utils {
 
-
       @media (height >= 680px), screen and (orientation: portrait) {
         .foo_postfix { color: red; }
       }
-
-      }
-      "
-    `);
+}
+"`);
   });
 });
 
@@ -185,22 +159,19 @@ describe('@keyframe', () => {
 
     const postfix = 'postfix';
     const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+    const rewritten = rewriteCss(css, postfix, fileName, 'components');
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
       @layer components {
 
-
             @keyframes luna-view-navigation__postfix {
               100% {
                 padding-top: 1rem;
               }
             }
-          
-      }
-      "
-    `);
+}
+"`);
   });
 
   it(`references are also scoped`, function () {
@@ -225,12 +196,11 @@ describe('@keyframe', () => {
 
     const postfix = 'postfix';
     const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+    const rewritten = rewriteCss(css, postfix, fileName, 'components');
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-      @layer components {
-
+@layer components {
 
             p.postfix {
               animation-duration: 3s;
@@ -248,10 +218,8 @@ describe('@keyframe', () => {
                 scale: 100% 1;
               }
             }
-          
-      }
-      "
-    `);
+}
+"`);
   });
 
   it('handles multiple references and keyframes', () => {
@@ -296,12 +264,11 @@ describe('@keyframe', () => {
       `;
     const postfix = 'postfix';
     const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+    const rewritten = rewriteCss(css, postfix, fileName, 'components');
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-      @layer components {
-
+@layer components {
 
             p.postfix {
               animation-duration: 3s;
@@ -340,10 +307,8 @@ describe('@keyframe', () => {
                 color: magenta;
               }
             }
-
-      }
-      "
-    `);
+}
+"`);
   });
 
   it('works in shorthand combo-declarations', () => {
@@ -364,12 +329,11 @@ describe('@keyframe', () => {
 
     const postfix = 'postfix';
     const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+    const rewritten = rewriteCss(css, postfix, fileName, 'components');
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-      @layer components {
-
+@layer components {
 
             div.postfix {
               width: 100px;
@@ -383,10 +347,8 @@ describe('@keyframe', () => {
               from {top: 0px;}
               to {top: 200px;}
             }
-
-      }
-      "
-    `);
+}
+"`);
   });
 });
 
@@ -402,22 +364,19 @@ describe('@counter-style', () => {
 
     const postfix = 'postfix';
     const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+    const rewritten = rewriteCss(css, postfix, fileName, 'components');
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
       @layer components {
 
-
             @counter-style circled-alpha__postfix {
               system: fixed;
               symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
               suffix: " ";
             }
-          
-      }
-      "
-    `);
+}
+"`);
   });
 
   it('updates references', () => {
@@ -435,26 +394,23 @@ describe('@counter-style', () => {
 
     const postfix = 'postfix';
     const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+    const rewritten = rewriteCss(css, postfix, fileName, 'components');
 
     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;
+              }
+}
+"`);
   });
 });
 
@@ -470,22 +426,19 @@ describe('@position-try', () => {
 
     const postfix = 'postfix';
     const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+    const rewritten = rewriteCss(css, postfix, fileName, 'components');
 
     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', () => {
@@ -504,27 +457,24 @@ describe('@position-try', () => {
 
     const postfix = 'postfix';
     const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+    const rewritten = rewriteCss(css, postfix, fileName, 'components');
 
     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;
+              }
+}
+"`);
   });
 });
 
@@ -540,22 +490,19 @@ describe('@property', () => {
 
     const postfix = 'postfix';
     const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+    const rewritten = rewriteCss(css, postfix, fileName, 'components');
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-      @layer components {
-
+@layer components {
 
             @property --item-size__postfix {
               syntax: "<percentage>";
               inherits: true;
               initial-value: 40%;
             }
-          
-      }
-      "
-    `);
+}
+"`);
   });
 
   it('updates references', () => {
@@ -586,12 +533,11 @@ describe('@property', () => {
 
     const postfix = 'postfix';
     const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+    const rewritten = rewriteCss(css, postfix, fileName, 'components');
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
-      @layer components {
-
+@layer components {
 
             @property --item-size__postfix {
               syntax: "<percentage>";
@@ -615,10 +561,8 @@ describe('@property', () => {
               height: var(--item-size__postfix);
               background-color: var(--item-color);
             }
-          
-      }
-      "
-    `);
+}
+"`);
   });
 });
 
@@ -631,18 +575,15 @@ describe('@supports', () => {
 
     const postfix = 'postfix';
     const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+    const rewritten = rewriteCss(css, postfix, fileName, 'components');
 
     expect(rewritten).toMatchInlineSnapshot(`
       "/* foo.css */
       @layer components {
 
-
           @supports (transform-origin: 5% 5%) {}
           @supports selector(h2 > p) {}
-
       }
-      "
-    `);
+"`);
   });
 });

package/src/lib/path/const.js

@@ -0,0 +1,19 @@
+import path from 'path';
+
+/**
+ * Join will convert to whatever is appropriate fro the current platform
+ */
+
+export const leadingSlashPath = {
+  embroiderDir: path.join('/node_modules/.embroider/'),
+  atEmbroider: path.join('/@embroider'),
+  componentsDir: path.join('/components/'),
+  templatesDir: path.join('/templates/'),
+  testem: path.join('/testem'),
+  src: path.join('/src/'),
+  app: path.join('/app/'),
+};
+
+export const barePath = {
+  pnpmDir: path.join('node_modules/.pnpm'),
+};

package/src/lib/path/hash-from-absolute-path.js

@@ -1,5 +1,5 @@
 import { hash } from './hash-from-module-path.js';
-import { appPath } from './utils.js';
+import { appPath, forcePosix } from './utils.js';
 
 export { hash } from './hash-from-module-path.js';
 
@@ -10,7 +10,8 @@ export function hashFromAbsolutePath(absolutePath) {
    * at runtime.
    */
   const modulePath = appPath(absolutePath);
-  const postfix = hash(modulePath);
+  const forced = forcePosix(modulePath);
+  const postfix = hash(forced);
 
   return postfix;
 }

package/src/lib/path/template-transform-paths.js

@@ -1,5 +1,6 @@
 import path from 'node:path';
 
+import { leadingSlashPath } from './const.js';
 import { findWorkspacePath } from './utils.js';
 
 /**
@@ -28,10 +29,10 @@ export function fixFilename(filename) {
 
   if (
     !(hasAppDir || hasSrcDir) &&
-    !fileName.includes('/node_modules/.embroider/')
+    !fileName.includes(leadingSlashPath.embroiderDir)
   ) {
     let maybeModule = fileName.replace(workspace, '');
-    let [maybeScope, ...rest] = maybeModule.split('/').filter(Boolean);
+    let [maybeScope, ...rest] = maybeModule.split(path.sep).filter(Boolean);
     let parts = rest;
 
     if (maybeScope.startsWith('@')) {

package/src/lib/path/utils.appPath.test.ts

@@ -10,13 +10,13 @@ describe('appPath()', () => {
     let file = path.join(paths.viteApp, 'app', 'templates/application');
     let result = appPath(file);
 
-    expect(result).to.equal('vite-app/templates/application');
+    expect(result).to.equal(path.join('vite-app/templates/application'));
   });
 
   it('handles psuedo module', () => {
     let file = path.join(paths.viteApp, 'templates/application');
     let result = appPath(file);
 
-    expect(result).to.equal('vite-app/templates/application');
+    expect(result).to.equal(path.join('vite-app/templates/application'));
   });
 });

package/src/lib/path/utils.hashFrom.test.ts

@@ -10,13 +10,13 @@ describe('hashFrom()', () => {
     css: path.join(paths.viteApp, 'components/forth.css'),
     ext: path.join(paths.viteApp, 'components/forth.gjs'),
     withoutExt: path.join(paths.viteApp, 'components/forth'),
-    module: 'vite-app/components/forth',
+    module: path.join('vite-app/components/forth'),
   };
   let route = {
     css: path.join(paths.viteApp, 'templates/application.css'),
     ext: path.join(paths.viteApp, 'templates/application.gjs'),
     withoutExt: path.join(paths.viteApp, 'templates/application'),
-    module: 'vite-app/templates/application',
+    module: path.join('vite-app/templates/application'),
   };
 
   describe('component', () => {