implement $css rune

src/index.ts

@@ -20,6 +20,7 @@ const defaultOptions = (): PluginOptions => {
     includePaths: [],
     localIdentName: '[local]-[hash:base64:6]',
     mode: 'native',
+    rune: false,
     parseExternalStylesheet: false,
     parseStyleTag: true,
     useAsDefaultScoping: false,

src/parsers/index.ts

@@ -1,2 +1,4 @@
 export { default as parseImportDeclaration } from './importDeclaration';
 export { default as parseTemplate } from './template';
+export { default as parseRune } from './rune';
+

src/parsers/rune.ts

@@ -0,0 +1,55 @@
+import { BaseNode, walk } from 'estree-walker';
+import Processor from '../processors/processor';
+import { updateMultipleClasses } from './template';
+
+export const replaceRune = (processor: Processor, node: BaseNode) => {
+  const callExpr = node as {
+    type: 'CallExpression';
+    callee?: { type: string; name: string };
+    start: number;
+    end: number;
+    arguments?: Array<{ type: string; value?: string; start: number; end: number }>;
+  };
+  if (
+    callExpr.type === 'CallExpression' &&
+    callExpr.callee?.type === 'Identifier' &&
+    callExpr.callee?.name === '$css'
+  ) {
+    const args = callExpr.arguments as Array<{
+      type: string;
+      value: string;
+      start: number;
+      end: number;
+    }>;
+
+    if (args.length !== 1 || args[0].type !== 'Literal') {
+      throw new Error('Invalid $css call');
+    }
+    const classNames = args[0].value;
+
+    const generatedClassNames = updateMultipleClasses(processor, classNames);
+    processor.magicContent.overwrite(callExpr.start, callExpr.end, `"${generatedClassNames}"`);
+  }
+};
+
+/**
+ * Parse the template markup and script to process the $css rune
+ * @param processor The CSS Module Processor
+ */
+
+export default (processor: Processor): void => {
+  if (processor.ast.fragment) {
+    walk(processor.ast.fragment, {
+      enter(baseNode) {
+        replaceRune(processor, baseNode);
+      },
+    });
+  }
+  if (processor.ast.instance) {
+    walk(processor.ast.instance, {
+      enter(baseNode) {
+        replaceRune(processor, baseNode);
+      },
+    });
+  }
+};

src/parsers/template.ts

@@ -13,7 +13,7 @@ interface CssVariables {
  * @param classNames The attribute value containing one or multiple classes
  * @returns the CSS Modules classnames
  */
-const updateMultipleClasses = (processor: Processor, classNames: string): string => {
+export const updateMultipleClasses = (processor: Processor, classNames: string): string => {
   const classes: string[] = classNames.split(' ');
   const generatedClassNames: string = classes.reduce((accumulator, currentValue, currentIndex) => {
     let value: string = currentValue;

src/processors/processor.ts

@@ -8,7 +8,7 @@ import {
   hasModuleAttribute,
   hasModuleImports,
 } from '../lib';
-import { parseImportDeclaration, parseTemplate } from '../parsers';
+import { parseImportDeclaration, parseTemplate, parseRune } from '../parsers';
 
 export default class Processor {
   public filename: string;
@@ -100,6 +100,10 @@ export default class Processor {
       parseImportDeclaration(this);
     }
 
+    if(this.options.rune) {
+      parseRune(this);
+    }
+
     if (Object.keys(this.cssModuleList).length > 0 || Object.keys(this.cssVarList).length > 0) {
       parseTemplate(this);
     }

src/types/index.ts

@@ -8,6 +8,7 @@ export type PluginOptions = {
   includePaths: string[];
   localIdentName: string;
   mode: 'native' | 'mixed' | 'scoped';
+  rune: boolean;
   parseExternalStylesheet: boolean;
   parseStyleTag: boolean;
   useAsDefaultScoping: boolean;

test/runes/stylesRune.test.js

@@ -0,0 +1,117 @@
+const compiler = require('../compiler.js');
+
+const source = '<style module>.red { color: red; }</style><span test={$css("red")}>Red</span>';
+
+describe('Rune', () => {
+  test('Works in markup', async () => {
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+        rune: true
+      }
+    );
+
+    expect(output).toBe(
+      '<style module>:global(.red-123) { color: red; }</style><span test={"red-123"}>Red</span>'
+    );
+  });
+
+  test('Works in combination with class', async () => {
+    const output = await compiler(
+      {
+        source: '<style module>.red { color: red; }</style><span class={$css("red")}>Red</span>'
+      },
+      {
+        localIdentName: '[local]-123',
+        rune: true
+      }
+    );
+
+    expect(output).toBe(
+      '<style module>:global(.red-123) { color: red; }</style><span class={"red-123"}>Red</span>'
+    );
+  });
+
+  test('Works in script', async () => {
+    const output = await compiler(
+      {
+        source: '<style module>.red { color: red; }</style><script>const someClass = $css("red")</script>'
+      },
+      {
+        localIdentName: '[local]-123',
+        rune: true
+      }
+    );
+
+    expect(output).toBe(
+      '<style module>:global(.red-123) { color: red; }</style><script>const someClass = "red-123"</script>'
+    );
+  });
+
+  test('Respects option', async () => {
+    const output = await compiler(
+      {
+        source: source + '<script>const someClass = $css("red")</script>'
+      },
+      {
+        localIdentName: '[local]-123',
+        rune: false
+      }
+    );
+
+    expect(output).toBe(
+      '<style module>:global(.red-123) { color: red; }</style><span test={$css("red")}>Red</span><script>const someClass = $css("red")</script>'
+    );
+  });
+
+  test('Large component', async () => {
+    const source = `
+      <script>
+        const test = $css("red");
+        const statement = true? $css("blue") : $css("green");
+        function testFunction() {
+          return $css("red");
+        }
+      </script>
+      <style module>
+        .red { color: red; }
+        .blue { color: blue; }
+        .green { color: green; }
+      </style>
+      <span test={$css("red")}>Red</span>
+      <span class={$css("blue")}>Blue</span>
+      <span lol={$css("green")}>Green</span>
+    `;
+    const result = `
+      <script>
+        const test = "red-123";
+        const statement = true? "blue-123" : "green-123";
+        function testFunction() {
+          return "red-123";
+        }
+      </script>
+      <style module>
+        :global(.red-123) { color: red; }
+        :global(.blue-123) { color: blue; }
+        :global(.green-123) { color: green; }
+      </style>
+      <span test={"red-123"}>Red</span>
+      <span class={"blue-123"}>Blue</span>
+      <span lol={"green-123"}>Green</span>
+    `;
+    const output = await compiler(
+      {
+        source
+      },
+      {
+        localIdentName: '[local]-123',
+        rune: true
+      }
+    );
+
+    expect(output).toBe(result);
+  });
+});