test: import attrs (#72)

bennypowers · web-flow · commit 2f23476272ee · 2025-12-17T14:57:42.000+02:00
* chore: package lock

* test: import attrs

* test: import attrs
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/typescript-transform-lit-css/test/expected/import-attrs-module/output.js b/packages/typescript-transform-lit-css/test/expected/import-attrs-module/output.js
@@ -0,0 +1,8 @@
+// Tests CSS import attributes with inline: false
+// Unlike import-attrs (which uses inline: true), this generates a separate .css.js file
+// instead of inlining the CSS content directly into the JavaScript output
+import { LitElement } from 'lit';
+import styles from "./styles.css.js";
+export class MyEl extends LitElement {
+    static styles = [styles];
+}
diff --git a/packages/typescript-transform-lit-css/test/expected/import-attrs/output.js b/packages/typescript-transform-lit-css/test/expected/import-attrs/output.js
@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+import { css } from "lit";
+const styles = css `:host {
+  display: block;
+  color: red;
+}
+`;
+export class MyEl extends LitElement {
+    static styles = [styles];
+}
diff --git a/packages/typescript-transform-lit-css/test/fixtures/import-attrs-module/input.ts b/packages/typescript-transform-lit-css/test/fixtures/import-attrs-module/input.ts
@@ -0,0 +1,10 @@
+// Tests CSS import attributes with inline: false
+// Unlike import-attrs (which uses inline: true), this generates a separate .css.js file
+// instead of inlining the CSS content directly into the JavaScript output
+import { LitElement } from 'lit';
+
+import styles from './styles.css' with { type: 'css' };
+
+export class MyEl extends LitElement {
+  static readonly styles = [styles];
+}
diff --git a/packages/typescript-transform-lit-css/test/fixtures/import-attrs-module/styles.css b/packages/typescript-transform-lit-css/test/fixtures/import-attrs-module/styles.css
@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  color: blue;
+}
diff --git a/packages/typescript-transform-lit-css/test/fixtures/import-attrs-module/tsconfig.json b/packages/typescript-transform-lit-css/test/fixtures/import-attrs-module/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "include": [".", "../declaration.d.ts"],
+  "compilerOptions": {
+    "outDir": "../../TSPC_OUTPUT/import-attrs-module",
+    "module": "NodeNext",
+    "plugins": [
+      {
+        "transform": "typescript-transform-lit-css",
+        "inline": false,
+        "cssnano": false
+      }
+    ]
+  }
+}
diff --git a/packages/typescript-transform-lit-css/test/fixtures/import-attrs/input.ts b/packages/typescript-transform-lit-css/test/fixtures/import-attrs/input.ts
@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+
+import styles from './styles.css' with { type: 'css' };
+
+export class MyEl extends LitElement {
+  static readonly styles = [styles];
+}
diff --git a/packages/typescript-transform-lit-css/test/fixtures/import-attrs/styles.css b/packages/typescript-transform-lit-css/test/fixtures/import-attrs/styles.css
@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  color: red;
+}
diff --git a/packages/typescript-transform-lit-css/test/typescript-transform-lit-css.test.js b/packages/typescript-transform-lit-css/test/typescript-transform-lit-css.test.js
@@ -62,5 +62,19 @@ test('typescript-transform-lit-css', async function(assert) {
     'handles special chars in CSS',
   );
 
+  assert.equal(
+    await getCode('import-attrs/input.js'),
+    await read('import-attrs/output.js'),
+    'handles CSS imports with import attributes (with { type: "css" })',
+  );
+
+  await compile(join(FIXTURES_DIR, 'import-attrs-module'));
+
+  assert.equal(
+    await getCode('import-attrs-module/input.js'),
+    await read('import-attrs-module/output.js'),
+    'handles CSS imports with import attributes in non-inline mode',
+  );
+
   assert.end();
 });

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +:host {
 +  display: block;
 +  color: blue;
 +}