ember-scoped-css 2.2.2 → 3.1.0

package/src/lib/rewriteHbs.attributes.test.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest';
+
+import rewriteHbs from './rewriteHbs.js';
+
+const postfix = 'pfx';
+
+/** Add the postfix class to elements that carry one of `attributeNames`. */
+function scopeByAttribute(hbs, attributeNames) {
+  return rewriteHbs(
+    hbs,
+    new Set(),
+    new Set(),
+    postfix,
+    new Set(attributeNames),
+  );
+}
+
+describe('attribute scoping', () => {
+  it('adds the postfix class to an element that has a scoped attribute', () => {
+    expect(scopeByAttribute('<input type="text">', ['type'])).to.equal(
+      '<input type="text" class="pfx">',
+    );
+  });
+
+  it('appends to an existing class attribute', () => {
+    expect(
+      scopeByAttribute('<input type="text" class="foo">', ['type']),
+    ).to.equal('<input type="text" class="foo pfx">');
+  });
+
+  it('matches attribute names case-insensitively, like CSS does', () => {
+    expect(scopeByAttribute('<input TYPE="text">', ['type'])).to.equal(
+      '<input TYPE="text" class="pfx">',
+    );
+  });
+
+  it('does not scope elements without the scoped attribute', () => {
+    expect(scopeByAttribute('<a href="/x">link</a>', ['type'])).to.equal(
+      '<a href="/x">link</a>',
+    );
+  });
+
+  it('adds the postfix class only once when tag and attribute both match', () => {
+    const out = rewriteHbs(
+      '<input type="text">',
+      new Set(),
+      new Set(['input']),
+      postfix,
+      new Set(['type']),
+    );
+
+    expect(out).to.equal('<input type="text" class="pfx">');
+  });
+
+  describe('component invocations are scoped too', () => {
+    // The postfix class reaches the component's root element through
+    // `...attributes`, the same way the matched attribute does.
+    it('scopes capitalized components', () => {
+      expect(scopeByAttribute('<Foo type="text" />', ['type'])).to.equal(
+        '<Foo type="text" class="pfx" />',
+      );
+    });
+
+    it('scopes path-based components', () => {
+      expect(scopeByAttribute('<foo.bar type="text" />', ['type'])).to.equal(
+        '<foo.bar type="text" class="pfx" />',
+      );
+    });
+  });
+
+  describe('dynamic class values still receive the postfix class', () => {
+    it('appends to a mustache class by wrapping it in a concat', () => {
+      expect(
+        scopeByAttribute('<input type="text" class={{this.cls}}>', ['type']),
+      ).to.equal('<input type="text" class="{{this.cls}} pfx">');
+    });
+
+    it('appends to a concat class', () => {
+      expect(
+        scopeByAttribute('<input type="text" class="foo {{bar}}">', ['type']),
+      ).to.equal('<input type="text" class="foo {{bar}} pfx">');
+    });
+
+    it('appends to a mustache class for tag-scoped elements', () => {
+      const out = rewriteHbs(
+        '<div class={{this.cls}}></div>',
+        new Set(),
+        new Set(['div']),
+        postfix,
+        new Set(),
+      );
+
+      expect(out).to.equal('<div class="{{this.cls}} pfx"></div>');
+    });
+  });
+
+  describe('...attributes may deliver any scoped attribute at runtime', () => {
+    it('scopes elements that spread ...attributes', () => {
+      expect(scopeByAttribute('<div ...attributes></div>', ['type'])).to.equal(
+        '<div ...attributes class="pfx"></div>',
+      );
+    });
+
+    it('does not scope ...attributes when the CSS has no attribute selectors', () => {
+      expect(scopeByAttribute('<div ...attributes></div>', [])).to.equal(
+        '<div ...attributes></div>',
+      );
+    });
+  });
+
+  describe('non-attribute bindings are ignored', () => {
+    it('does not match named args', () => {
+      expect(scopeByAttribute('<Foo @type="text" />', ['type'])).to.equal(
+        '<Foo @type="text" />',
+      );
+    });
+  });
+});

package/src/lib/rewriteHbs.js

@@ -2,7 +2,35 @@ import * as recast from 'ember-template-recast';
 
 import { renameClass } from './renameClass.js';
 
-export function templatePlugin({ classes, tags, postfix }) {
+/**
+ * Whether an element may carry an attribute that appears in a scoped
+ * attribute selector. This includes component invocations: a component
+ * receives the postfix class through its `...attributes` the same way it
+ * receives the matched attribute, so `[type="text"]` scopes
+ * `<Foo type="text">` just as it scopes `<input type="text">`.
+ *
+ * An element that spreads `...attributes` can receive any attribute from its
+ * caller at runtime, so it counts as long as the CSS scopes by attribute at
+ * all — the preserved attribute selector still decides which rules actually
+ * apply.
+ *
+ * `attributes` comes from parsing the CSS, so it can only contain valid
+ * attribute-selector names — `@args` can never be in it and needs no special
+ * handling.
+ *
+ * Names in `attributes` are lowercased at discovery (CSS matches HTML
+ * attribute names case-insensitively), so compare lowercased.
+ */
+function elementHasScopedAttribute(node, attributes) {
+  if (attributes.size === 0) return false;
+
+  return node.attributes.some(
+    (attr) =>
+      attr.name === '...attributes' || attributes.has(attr.name.toLowerCase()),
+  );
+}
+
+export function templatePlugin({ classes, tags, attributes, postfix }) {
   let stack = [];
   // scoped-class is a global we allow in hbs
   // scopedClass is importable, and we'll error if someone tries to rename it
@@ -46,18 +74,34 @@ export function templatePlugin({ classes, tags, postfix }) {
     },
 
     ElementNode(node) {
-      if (tags.has(node.tag)) {
-        // check if class attribute already exists
-        const classAttr = node.attributes.find((attr) => attr.name === 'class');
-
-        if (classAttr) {
-          classAttr.value.chars += ' ' + postfix;
-        } else {
-          // push class attribute
-          node.attributes.push(
-            recast.builders.attr('class', recast.builders.text(postfix)),
-          );
-        }
+      // An element is in scope if its tag matches a tag selector, or if it
+      // carries an attribute named in a scoped attribute selector. We add the
+      // postfix class at most once regardless of how many things matched.
+      const shouldScope =
+        tags.has(node.tag) || elementHasScopedAttribute(node, attributes);
+
+      if (!shouldScope) return;
+
+      // check if class attribute already exists
+      const classAttr = node.attributes.find((attr) => attr.name === 'class');
+
+      if (!classAttr) {
+        // push class attribute
+        node.attributes.push(
+          recast.builders.attr('class', recast.builders.text(postfix)),
+        );
+      } else if (classAttr.value.type === 'TextNode') {
+        classAttr.value.chars += ' ' + postfix;
+      } else if (classAttr.value.type === 'ConcatStatement') {
+        // class="foo {{bar}}"
+        classAttr.value.parts.push(recast.builders.text(' ' + postfix));
+      } else {
+        // class={{this.foo}} — wrap in a concat so we can append the text part
+        classAttr.value = recast.builders.concat([
+          classAttr.value,
+          recast.builders.text(' ' + postfix),
+        ]);
+        classAttr.quoteType = '"';
       }
     },
 
@@ -133,10 +177,16 @@ function getValue(path) {
   return path.original;
 }
 
-export default function rewriteHbs(hbs, classes, tags, postfix) {
+export default function rewriteHbs(
+  hbs,
+  classes,
+  tags,
+  postfix,
+  attributes = new Set(),
+) {
   let ast = recast.parse(hbs);
 
-  recast.traverse(ast, templatePlugin({ classes, tags, postfix }));
+  recast.traverse(ast, templatePlugin({ classes, tags, attributes, postfix }));
 
   let result = recast.print(ast);
 

package/types.d.ts

@@ -0,0 +1,30 @@
+/**
+ * This declaration file teaches TypeScript (via Glint) about the special
+ * attributes that ember-scoped-css adds to the `<style>` element,
+ * so that `<style scoped>` and `<style inline>` type-check.
+ *
+ * Add it to your tsconfig.json:
+ *
+ * ```jsonc
+ * {
+ *   "compilerOptions": {
+ *     "types": ["ember-scoped-css/types"]
+ *   }
+ * }
+ * ```
+ *
+ * or, if you don't use `compilerOptions.types`, import it from a
+ * type-declaration file that is included in your project:
+ *
+ * ```ts
+ * import 'ember-scoped-css/types';
+ * ```
+ */
+import '@glint/template';
+
+declare global {
+  interface HTMLStyleElementAttributes {
+    scoped: '';
+    inline: '';
+  }
+}