@knighted/css 1.0.9 → 1.0.10

package/README.md

@@ -4,7 +4,7 @@
 [![codecov](https://codecov.io/gh/knightedcodemonkey/css/graph/badge.svg?token=q93Qqwvq6l)](https://codecov.io/gh/knightedcodemonkey/css)
 [![NPM version](https://img.shields.io/npm/v/@knighted/css.svg)](https://www.npmjs.com/package/@knighted/css)
 
-`@knighted/css` walks your JavaScript/TypeScript module graph, compiles every CSS-like dependency (plain CSS, Sass/SCSS, Less, vanilla-extract), and ships both the concatenated stylesheet string and optional `.knighted-css.*` imports that keep selectors typed. Use it when you need fully materialized styles ahead of runtime—Shadow DOM surfaces, server-rendered routes, static site builds, or any entry point that should inline CSS without spinning up a full bundler.
+`@knighted/css` walks your module graph, compiles every CSS-like dependency (plain CSS, Sass/SCSS, Less, vanilla-extract), and ships both the concatenated stylesheet string and optional `.knighted-css.*` imports that keep selectors typed. Use it with or without a bundler: run the `css()` API in scripts/SSR pipelines, or lean on the `?knighted-css` loader query so bundlers import compiled CSS alongside modules. Either path yields fully materialized styles for Shadow DOM surfaces, server-rendered routes, static site builds, or any entry point that should inline CSS.
 
 ## Why
 
@@ -23,7 +23,7 @@ I needed a single source of truth for UI components that could drop into both li
 
 ## Features
 
-- Traverses module graphs with a built-in walker to find transitive style imports (no bundler required).
+- Traverses module graphs with a built-in walker to find transitive style imports (bundler optional—works standalone or through bundler loaders), including static import attributes (`with { type: "css" }`) for extensionless or aliased specifiers.
 - Resolution parity via [`oxc-resolver`](https://github.com/oxc-project/oxc-resolver): tsconfig `paths`, package `exports` + `imports`, and extension aliasing (e.g., `.css.js` → `.css.ts`) are honored without wiring up a bundler.
 - Compiles `*.css`, `*.scss`, `*.sass`, `*.less`, and `*.css.ts` (vanilla-extract) files out of the box.
 - Optional post-processing via [`lightningcss`](https://github.com/parcel-bundler/lightningcss) for minification, prefixing, media query optimizations, or specificity boosts.

package/dist/cjs/moduleGraph.cjs

@@ -47,7 +47,7 @@ async function collectStyleImports(entryPath, options) {
             return;
         }
         const specifiers = extractModuleSpecifiers(source, absolutePath);
-        for (const specifier of specifiers) {
+        for (const { specifier, assertedType } of specifiers) {
             if (!specifier || isBuiltinSpecifier(specifier)) {
                 continue;
             }
@@ -59,6 +59,13 @@ async function collectStyleImports(entryPath, options) {
             if (!filter(normalized)) {
                 continue;
             }
+            if (assertedType === 'css') {
+                if (!seenStyles.has(normalized)) {
+                    seenStyles.add(normalized);
+                    styleOrder.push(normalized);
+                }
+                continue;
+            }
             if (isStyleExtension(normalized, normalizedStyles)) {
                 if (!seenStyles.has(normalized)) {
                     seenStyles.add(normalized);
@@ -144,26 +151,26 @@ function extractModuleSpecifiers(sourceText, filePath) {
         return [];
     }
     const specifiers = [];
-    const addSpecifier = (raw) => {
+    const addSpecifier = (raw, assertedType) => {
         if (!raw) {
             return;
         }
         const normalized = normalizeSpecifier(raw);
         if (normalized) {
-            specifiers.push(normalized);
+            specifiers.push({ specifier: normalized, assertedType });
         }
     };
     const visitor = new oxc_parser_1.Visitor({
         ImportDeclaration(node) {
-            addSpecifier(node.source?.value);
+            addSpecifier(node.source?.value, getImportAssertedType(node));
         },
         ExportNamedDeclaration(node) {
             if (node.source) {
-                addSpecifier(node.source.value);
+                addSpecifier(node.source.value, getImportAssertedType(node));
             }
         },
         ExportAllDeclaration(node) {
-            addSpecifier(node.source?.value);
+            addSpecifier(node.source?.value, getImportAssertedType(node));
         },
         TSImportEqualsDeclaration(node) {
             const specifier = extractImportEqualsSpecifier(node);
@@ -174,7 +181,7 @@ function extractModuleSpecifiers(sourceText, filePath) {
         ImportExpression(node) {
             const specifier = getStringFromExpression(node.source);
             if (specifier) {
-                addSpecifier(specifier);
+                addSpecifier(specifier, getImportExpressionAssertedType(node));
             }
         },
         CallExpression(node) {
@@ -210,6 +217,126 @@ function normalizeSpecifier(raw) {
     }
     return withoutQuery;
 }
+function getImportAssertedType(node) {
+    const attributes = getImportAttributes(node);
+    for (const attribute of attributes) {
+        const key = getAttributeKey(attribute);
+        const value = getAttributeValue(attribute);
+        if (key === 'type' && value === 'css') {
+            return 'css';
+        }
+    }
+    return undefined;
+}
+function getImportAttributes(node) {
+    const attributes = [];
+    const candidate = node;
+    const withClause = candidate?.withClause;
+    if (withClause && Array.isArray(withClause.attributes)) {
+        attributes.push(...withClause.attributes);
+    }
+    const directAttributes = candidate?.attributes;
+    if (Array.isArray(directAttributes)) {
+        attributes.push(...directAttributes);
+    }
+    const assertions = candidate?.assertions;
+    if (Array.isArray(assertions)) {
+        attributes.push(...assertions);
+    }
+    return attributes;
+}
+function getAttributeKey(attribute) {
+    const attr = attribute;
+    const key = attr?.key;
+    if (!key) {
+        return undefined;
+    }
+    if (typeof key.name === 'string') {
+        return key.name;
+    }
+    const value = key.value;
+    if (typeof value === 'string') {
+        return value;
+    }
+    return undefined;
+}
+function getAttributeValue(attribute) {
+    const attr = attribute;
+    const value = attr?.value;
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (value && typeof value.value === 'string') {
+        return value.value;
+    }
+    return undefined;
+}
+function getImportExpressionAssertedType(node) {
+    // Stage-3 import attributes proposal shape: import(spec, { with: { type: "css" } })
+    const options = node.options;
+    if (!options) {
+        return undefined;
+    }
+    const withObject = getStaticObjectProperty(options, 'with');
+    if (withObject && isObjectExpression(withObject)) {
+        const typeValue = getStaticObjectString(withObject, 'type');
+        if (typeValue === 'css') {
+            return 'css';
+        }
+    }
+    const assertObject = getStaticObjectProperty(options, 'assert');
+    if (assertObject && isObjectExpression(assertObject)) {
+        const typeValue = getStaticObjectString(assertObject, 'type');
+        if (typeValue === 'css') {
+            return 'css';
+        }
+    }
+    return undefined;
+}
+function isObjectExpression(expression) {
+    return expression && expression.type === 'ObjectExpression'
+        ? expression
+        : undefined;
+}
+function getStaticObjectProperty(expression, name) {
+    const objectExpression = isObjectExpression(expression);
+    if (!objectExpression) {
+        return undefined;
+    }
+    for (const prop of objectExpression.properties) {
+        const maybeProp = prop;
+        if (maybeProp.type && maybeProp.type !== 'Property') {
+            continue;
+        }
+        const keyName = getPropertyKeyName(maybeProp.key);
+        if (keyName === name) {
+            const value = maybeProp.value;
+            if (value) {
+                return value;
+            }
+        }
+    }
+    return undefined;
+}
+function getPropertyKeyName(key) {
+    if (!key)
+        return undefined;
+    const asAny = key;
+    if (typeof asAny.name === 'string') {
+        return asAny.name;
+    }
+    if (typeof asAny.value === 'string') {
+        return asAny.value;
+    }
+    return undefined;
+}
+function getStaticObjectString(expression, name) {
+    const valueExpression = getStaticObjectProperty(expression, name);
+    if (!valueExpression) {
+        return undefined;
+    }
+    return getStringFromExpression(valueExpression);
+}
 function extractImportEqualsSpecifier(node) {
     if (node.moduleReference.type === 'TSExternalModuleReference') {
         return node.moduleReference.expression.value;