ember-scoped-css 1.0.0 → 1.0.2

package/src/lib/css/rewrite.js

@@ -1,14 +1,55 @@
+/**
+ * Important docs:
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/
+ */
 import postcss from 'postcss';
 import parser from 'postcss-selector-parser';
 
 import { isInsideGlobal } from './utils.js';
 
+const SEP = '__';
+
+function isRule(node) {
+  return node.type === 'rule';
+}
+
+function isDeclaration(node) {
+  return node.type === 'decl';
+}
+
+/**
+ * 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) {
+  let originalName = node.params;
+  let postfixedName = node.params + SEP + postfix;
+
+  node.params = postfixedName;
+
+  return {
+    originalName,
+    postfixedName,
+  };
+}
+
 function rewriteSelector(sel, postfix) {
   const transform = (selectors) => {
     selectors.walk((selector) => {
-      if (selector.type === 'class' && !isInsideGlobal(selector)) {
+      if (isInsideGlobal(selector)) return;
+
+      // We never want to touch psuedo selectors since we and the user doesn't own them.
+      if (selector.type === 'psuedo') return;
+
+      // :nth-of-type has special syntax where the values passed to nth-of-type()
+      // must either be exactly "odd", "even", or a simple formula
+      //
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
+      if (isNthOfType(selector)) return;
+
+      if (selector.type === 'class') {
         selector.value += '_' + postfix;
-      } else if (selector.type === 'tag' && !isInsideGlobal(selector)) {
+      } else if (selector.type === 'tag') {
         selector.replaceWith(
           parser.tag({ value: selector.value }),
           parser.className({ value: postfix }),
@@ -28,6 +69,12 @@ function rewriteSelector(sel, postfix) {
   return transformed;
 }
 
+function isNthOfType(node) {
+  if (!node) return false;
+
+  return node.parent?.value === ':nth-of-type' || isNthOfType(node.parent);
+}
+
 function isInsideKeyframes(node) {
   const parent = node.parent;
 
@@ -40,75 +87,111 @@ function isInsideKeyframes(node) {
 export function rewriteCss(css, postfix, fileName, layerName) {
   const layerNameWithDefault = layerName ?? 'components';
   const ast = postcss.parse(css);
+  /**
+   * kind => originalName => postfixedName
+   * @type {{ [kind: string]: { [originalName: string]: string }}}
+   */
+  const referencables = {
+    keyframes: {},
+    'counter-style': {},
+    'position-try': {},
+    property: {},
+  };
 
-  ast.walk((node) => {
-    if (node.type === 'rule' && !isInsideKeyframes(node)) {
-      node.selector = rewriteSelector(node.selector, postfix);
+  const availableReferencables = new Set(Object.keys(referencables));
+
+  function isReferencable(node) {
+    if (node.type !== 'atrule') return;
+
+    return availableReferencables.has(node.name);
+  }
+
+  function updateDirectReferences(node) {
+    if (!node.value) return;
+
+    for (let [, map] of Object.entries(referencables)) {
+      if (map[node.value]) {
+        node.value = map[node.value];
+      }
     }
-  });
+  }
 
-  const rewrittenCss = ast.toString();
+  function updateShorthandContents(node) {
+    if (node.prop === 'animation') {
+      let parts = node.value.split(' ');
+      let match = parts.filter((x) => referencables.keyframes[x]);
 
-  if (!layerNameWithDefault) {
-    return `/* ${fileName} */\n${rewrittenCss}\n`;
+      if (match.length) {
+        match.forEach((x) => {
+          let replacement = referencables.keyframes[x];
+
+          if (!replacement) return;
+
+          node.value = node.value.replace(x, replacement);
+        });
+      }
+    }
+
+    for (let [lookFor, replaceWith] of Object.entries(referencables.property)) {
+      let lookForVar = `var(${lookFor})`;
+      let replaceWithVar = `var(${replaceWith})`;
+
+      node.value = node.value.replace(lookForVar, replaceWithVar);
+    }
   }
 
-  return (
-    `/* ${fileName} */\n@layer ${layerNameWithDefault} {\n\n` +
-    rewrittenCss +
-    '\n}\n'
-  );
-}
+  /**
+   * We have to do two passes:
+   * 1. postfix all the referencable syntax
+   * 2. postfix as normal, but also checking values of CSS properties
+   *    that could match postfixed referencables from step 1
+   */
 
-if (import.meta.vitest) {
-  const { it, expect } = import.meta.vitest;
+  // Step 1: find referencables
+  ast.walk((node) => {
+    /**
+     * @keyframes, @counter-style, etc
+     */
+    if (isReferencable(node)) {
+      let name = node.name;
+      let { originalName, postfixedName } = rewriteReferencable(node, postfix);
 
-  it('should rewrite css', function () {
-    const css = '.foo { color: red; }';
-    const postfix = 'postfix';
-    const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName, false);
+      referencables[name][originalName] = postfixedName;
 
-    expect(rewritten).to.equal(`/* foo.css */\n.foo_postfix { color: red; }\n`);
+      return;
+    }
   });
 
-  it('should use a custom layer', function () {
-    const css = '.foo { color: red; }';
-    const postfix = 'postfix';
-    const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName, 'utils');
+  // Step 2: postfix and update refenced referencables
+  ast.walk((node) => {
+    if (isDeclaration(node)) {
+      updateDirectReferences(node);
+      updateShorthandContents(node);
 
-    expect(rewritten).to.equal(
-      `/* foo.css */\n@layer utils {\n\n.foo_postfix { color: red; }\n}\n`,
-    );
-  });
+      return;
+    }
+
+    if (isRule(node)) {
+      /**
+       * The inner-contents of a keyframe are percentages, rather than selectors
+       */
+      if (isInsideKeyframes(node)) return;
 
-  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);
+      node.selector = rewriteSelector(node.selector, postfix);
 
-    expect(rewritten).to.equal(
-      `/* foo.css */\n@layer components {\n\n.baz_postfix .foo p .bar_postfix { color: red; }\n}\n`,
-    );
+      return;
+    }
   });
 
-  it(`shouldn't rewrite keyframes`, function () {
-    const css = `
-      @keyframes luna-view-navigation {
-        100% {
-          padding-top: 1rem;
-        }
-      }
-    `;
+  const rewrittenCss = ast.toString();
 
-    const postfix = 'postfix';
-    const fileName = 'foo.css';
-    const rewritten = rewriteCss(css, postfix, fileName);
+  if (!layerNameWithDefault) {
+    return `/* ${fileName} */\n${rewrittenCss}\n`;
+  }
 
-    expect(rewritten).to.equal(
-      `/* foo.css */\n@layer components {\n\n${css}\n}\n`,
-    );
-  });
+  return (
+    `/* ${fileName} */\n@layer ${layerNameWithDefault} {\n\n` +
+    rewrittenCss +
+    '\n}\n'
+  );
 }