@homebound/truss 2.0.0-next.5 → 2.0.0-next.9

package/build/plugin/index.d.ts

@@ -58,9 +58,9 @@ interface TrussVitePlugin {
  * Vite plugin that transforms `Css.*.$` expressions from truss's CssBuilder DSL
  * into file-local `stylex.create()` + `stylex.props()` calls.
  *
- * Also supports `.css.ts` files: a `.css.ts` file with `export default { ".selector": Css.blue.$ }`
- * is transformed into a virtual CSS module. Imports of `.css.ts` files are rewritten
- * to load the generated CSS.
+ * Also supports `.css.ts` files: a `.css.ts` file with
+ * `export const css = { ".selector": Css.blue.$ }` can keep other runtime exports,
+ * while imports are supplemented with a virtual CSS side-effect module.
  *
  * Must be placed BEFORE the StyleX unplugin in the plugins array so that
  * StyleX's babel plugin can process the generated `stylex.create()` calls.

package/build/plugin/index.js

@@ -1130,6 +1130,44 @@ function buildMaybeIncDeclaration(helperName, increment) {
     t2.variableDeclarator(t2.identifier(helperName), t2.arrowFunctionExpression([incParam], body))
   ]);
 }
+function buildMergePropsDeclaration(helperName, stylexNamespaceName) {
+  const explicitClassNameParam = t2.identifier("explicitClassName");
+  const stylesRestParam = t2.restElement(t2.identifier("styles"));
+  const sxId = t2.identifier("sx");
+  return t2.functionDeclaration(
+    t2.identifier(helperName),
+    [explicitClassNameParam, stylesRestParam],
+    t2.blockStatement([
+      t2.variableDeclaration("const", [
+        t2.variableDeclarator(
+          sxId,
+          t2.callExpression(t2.memberExpression(t2.identifier(stylexNamespaceName), t2.identifier("props")), [
+            t2.spreadElement(t2.identifier("styles"))
+          ])
+        )
+      ]),
+      t2.returnStatement(
+        t2.objectExpression([
+          t2.spreadElement(sxId),
+          t2.objectProperty(
+            t2.identifier("className"),
+            t2.callExpression(
+              t2.memberExpression(
+                t2.binaryExpression(
+                  "+",
+                  t2.binaryExpression("+", explicitClassNameParam, t2.stringLiteral(" ")),
+                  t2.logicalExpression("||", t2.memberExpression(sxId, t2.identifier("className")), t2.stringLiteral(""))
+                ),
+                t2.identifier("trim")
+              ),
+              []
+            )
+          )
+        ])
+      )
+    ])
+  );
+}
 function buildCreateDeclaration(createVarName, stylexNamespaceName, createProperties) {
   const createCall = t2.callExpression(t2.memberExpression(t2.identifier(stylexNamespaceName), t2.identifier("create")), [
     t2.objectExpression(createProperties)
@@ -1191,54 +1229,22 @@ function rewriteExpressionSites(options) {
         t3.memberExpression(t3.identifier(options.stylexNamespaceName), t3.identifier("props")),
         propsArgs
       );
-      const openingElement = cssAttrPath.parentPath;
-      let existingClassNameExpr = null;
-      if (openingElement && openingElement.isJSXOpeningElement()) {
-        const attrs = openingElement.node.attributes;
-        for (let i = 0; i < attrs.length; i++) {
-          const attr = attrs[i];
-          if (t3.isJSXAttribute(attr) && t3.isJSXIdentifier(attr.name, { name: "className" })) {
-            if (t3.isStringLiteral(attr.value)) {
-              existingClassNameExpr = attr.value;
-            } else if (t3.isJSXExpressionContainer(attr.value) && t3.isExpression(attr.value.expression)) {
-              existingClassNameExpr = attr.value.expression;
-            }
-            attrs.splice(i, 1);
-            break;
-          }
-        }
-      }
-      let spreadExpr;
-      if (existingClassNameExpr) {
-        const rId = t3.identifier("__r");
-        const mergedClassName = t3.callExpression(
-          t3.memberExpression(
-            t3.binaryExpression(
-              "+",
-              t3.binaryExpression("+", existingClassNameExpr, t3.stringLiteral(" ")),
-              t3.logicalExpression("||", t3.memberExpression(rId, t3.identifier("className")), t3.stringLiteral(""))
-            ),
-            t3.identifier("trim")
-          ),
-          []
-        );
-        spreadExpr = t3.callExpression(
-          t3.arrowFunctionExpression(
-            [rId],
-            t3.objectExpression([t3.spreadElement(rId), t3.objectProperty(t3.identifier("className"), mergedClassName)])
-          ),
-          [propsCall]
-        );
-      } else {
-        spreadExpr = propsCall;
-      }
-      cssAttrPath.replaceWith(t3.jsxSpreadAttribute(spreadExpr));
+      cssAttrPath.replaceWith(
+        t3.jsxSpreadAttribute(
+          buildCssSpreadExpression(cssAttrPath, propsCall, options.mergePropsHelperName, options.needsMergePropsHelper)
+        )
+      );
       continue;
     }
     site.path.replaceWith(t3.arrayExpression(propsArgs));
   }
   rewriteStyleObjectExpressions(options.ast);
-  rewriteCssArrayExpressions(options.ast, options.stylexNamespaceName);
+  rewriteCssAttributeExpressions(
+    options.ast,
+    options.stylexNamespaceName,
+    options.mergePropsHelperName,
+    options.needsMergePropsHelper
+  );
 }
 function getCssAttributePath(path) {
   const parentPath = path.parentPath;
@@ -1315,42 +1321,107 @@ function buildPropsArgs(segments, options) {
   }
   return args;
 }
-function rewriteCssArrayExpressions(ast, stylexNamespaceName) {
+function rewriteCssAttributeExpressions(ast, stylexNamespaceName, mergePropsHelperName, needsMergePropsHelper) {
   traverse(ast, {
     JSXAttribute(path) {
       if (!t3.isJSXIdentifier(path.node.name, { name: "css" })) return;
       const value = path.node.value;
       if (!t3.isJSXExpressionContainer(value)) return;
-      const expr = value.expression;
-      if (!t3.isArrayExpression(expr)) return;
-      const propsArgs = [];
-      for (const el of expr.elements) {
-        if (t3.isSpreadElement(el)) {
-          const arg = el.argument;
-          if (t3.isArrayExpression(arg)) {
-            for (const inner of arg.elements) {
-              if (!inner) continue;
-              if (t3.isSpreadElement(inner)) {
-                propsArgs.push(t3.spreadElement(inner.argument));
-              } else {
-                propsArgs.push(inner);
-              }
-            }
-          } else {
-            propsArgs.push(t3.spreadElement(arg));
-          }
-        } else if (el) {
-          propsArgs.push(el);
-        }
-      }
+      if (!t3.isExpression(value.expression)) return;
+      const propsArgs = buildStyleObjectPropsArgs(value.expression, path) ?? buildStyleArrayLikePropsArgsFromExpression(value.expression, path);
+      if (!propsArgs) return;
       const propsCall = t3.callExpression(
         t3.memberExpression(t3.identifier(stylexNamespaceName), t3.identifier("props")),
         propsArgs
       );
-      path.replaceWith(t3.jsxSpreadAttribute(propsCall));
+      path.replaceWith(
+        t3.jsxSpreadAttribute(buildCssSpreadExpression(path, propsCall, mergePropsHelperName, needsMergePropsHelper))
+      );
     }
   });
 }
+function buildCssSpreadExpression(path, propsCall, mergePropsHelperName, needsMergePropsHelper) {
+  const existingClassNameExpr = removeExistingClassNameAttribute(path);
+  if (!existingClassNameExpr) return propsCall;
+  needsMergePropsHelper.current = true;
+  return t3.callExpression(t3.identifier(mergePropsHelperName), [existingClassNameExpr, ...propsCall.arguments]);
+}
+function removeExistingClassNameAttribute(path) {
+  const openingElement = path.parentPath;
+  if (!openingElement || !openingElement.isJSXOpeningElement()) return null;
+  const attrs = openingElement.node.attributes;
+  for (let i = 0; i < attrs.length; i++) {
+    const attr = attrs[i];
+    if (!t3.isJSXAttribute(attr) || !t3.isJSXIdentifier(attr.name, { name: "className" })) continue;
+    let classNameExpr = null;
+    if (t3.isStringLiteral(attr.value)) {
+      classNameExpr = attr.value;
+    } else if (t3.isJSXExpressionContainer(attr.value) && t3.isExpression(attr.value.expression)) {
+      classNameExpr = attr.value.expression;
+    }
+    attrs.splice(i, 1);
+    return classNameExpr;
+  }
+  return null;
+}
+function buildStyleObjectPropsArgs(expr, path) {
+  if (!t3.isObjectExpression(expr) || expr.properties.length === 0) return null;
+  let sawStyleArray = false;
+  const propsArgs = [];
+  for (const prop of expr.properties) {
+    if (!t3.isSpreadElement(prop)) return null;
+    const normalizedArg = normalizeStyleArrayLikeExpression(prop.argument, path, /* @__PURE__ */ new Set());
+    if (!normalizedArg) {
+      propsArgs.push(t3.spreadElement(prop.argument));
+      continue;
+    }
+    if (isStyleArrayLike(normalizedArg, path, /* @__PURE__ */ new Set())) {
+      sawStyleArray = true;
+    }
+    const nestedArgs = buildStyleArrayLikePropsArgs(normalizedArg, path, /* @__PURE__ */ new Set());
+    if (nestedArgs && t3.isArrayExpression(normalizedArg)) {
+      propsArgs.push(...nestedArgs);
+    } else {
+      propsArgs.push(t3.spreadElement(normalizedArg));
+    }
+  }
+  return sawStyleArray ? propsArgs : null;
+}
+function buildStyleArrayLikePropsArgsFromExpression(expr, path) {
+  const normalizedExpr = normalizeStyleArrayLikeExpression(expr, path, /* @__PURE__ */ new Set());
+  if (!normalizedExpr) return null;
+  return buildStyleArrayLikePropsArgs(normalizedExpr, path, /* @__PURE__ */ new Set());
+}
+function buildStyleArrayLikePropsArgs(expr, path, seen) {
+  if (seen.has(expr)) return null;
+  seen.add(expr);
+  if (t3.isArrayExpression(expr)) {
+    const propsArgs = [];
+    for (const el of expr.elements) {
+      if (!el) continue;
+      if (t3.isSpreadElement(el)) {
+        const normalizedArg = normalizeStyleArrayLikeExpression(el.argument, path, /* @__PURE__ */ new Set());
+        if (!normalizedArg) {
+          propsArgs.push(t3.spreadElement(el.argument));
+          continue;
+        }
+        const nestedArgs = buildStyleArrayLikePropsArgs(normalizedArg, path, seen);
+        if (nestedArgs && t3.isArrayExpression(normalizedArg)) {
+          propsArgs.push(...nestedArgs);
+        } else {
+          propsArgs.push(t3.spreadElement(normalizedArg));
+        }
+        continue;
+      }
+      propsArgs.push(el);
+    }
+    return propsArgs;
+  }
+  if (t3.isIdentifier(expr) || t3.isMemberExpression(expr) || t3.isConditionalExpression(expr)) {
+    return [t3.spreadElement(expr)];
+  }
+  return null;
+}
 function rewriteStyleObjectExpressions(ast) {
   traverse(ast, {
     ObjectExpression(path) {
@@ -1368,7 +1439,7 @@ function tryBuildStyleArrayFromObject(path) {
     if (!t3.isSpreadElement(prop)) {
       return null;
     }
-    const normalizedArg = normalizeStyleArrayExpression(
+    const normalizedArg = normalizeStyleArrayLikeExpression(
       prop.argument,
       path,
       /* @__PURE__ */ new Set()
@@ -1377,7 +1448,7 @@ function tryBuildStyleArrayFromObject(path) {
     if (!normalizedArg) {
       return null;
     }
-    if (isStyleArrayLikeExpression(normalizedArg, path, /* @__PURE__ */ new Set())) {
+    if (isStyleArrayLike(normalizedArg, path, /* @__PURE__ */ new Set())) {
       sawStyleArray = true;
     }
     if (t3.isArrayExpression(normalizedArg)) {
@@ -1389,30 +1460,30 @@ function tryBuildStyleArrayFromObject(path) {
   if (!sawStyleArray) return null;
   return t3.arrayExpression(elements);
 }
-function normalizeStyleArrayExpression(expr, path, seen) {
+function normalizeStyleArrayLikeExpression(expr, path, seen) {
   if (seen.has(expr)) return null;
   seen.add(expr);
   if (t3.isArrayExpression(expr)) return expr;
   if (t3.isConditionalExpression(expr)) {
-    const consequent = normalizeConditionalBranch(expr.consequent, path, seen);
-    const alternate = normalizeConditionalBranch(expr.alternate, path, seen);
+    const consequent = normalizeStyleArrayLikeBranch(expr.consequent, path, seen);
+    const alternate = normalizeStyleArrayLikeBranch(expr.alternate, path, seen);
     if (!consequent || !alternate) return null;
     return t3.conditionalExpression(expr.test, consequent, alternate);
   }
   if (t3.isIdentifier(expr) || t3.isMemberExpression(expr)) {
     const nestedSeen = new Set(seen);
     nestedSeen.delete(expr);
-    if (isStyleArrayLikeExpression(expr, path, nestedSeen)) return expr;
+    if (isStyleArrayLike(expr, path, nestedSeen)) return expr;
   }
   return null;
 }
-function normalizeConditionalBranch(expr, path, seen) {
+function normalizeStyleArrayLikeBranch(expr, path, seen) {
   if (isEmptyObjectExpression(expr)) {
     return t3.arrayExpression([]);
   }
-  return normalizeStyleArrayExpression(expr, path, seen);
+  return normalizeStyleArrayLikeExpression(expr, path, seen);
 }
-function isStyleArrayLikeExpression(expr, path, seen) {
+function isStyleArrayLike(expr, path, seen) {
   if (seen.has(expr)) return false;
   seen.add(expr);
   if (t3.isArrayExpression(expr)) return true;
@@ -1424,7 +1495,7 @@ function isStyleArrayLikeExpression(expr, path, seen) {
     const bindingPath = binding?.path;
     if (!bindingPath || !bindingPath.isVariableDeclarator()) return false;
     const init = bindingPath.node.init;
-    return !!(init && isStyleArrayLikeExpression(init, bindingPath, seen));
+    return !!(init && isStyleArrayLike(init, bindingPath, seen));
   }
   if (t3.isMemberExpression(expr) && !expr.computed && t3.isIdentifier(expr.property)) {
     const object = expr.object;
@@ -1439,13 +1510,13 @@ function isStyleArrayLikeExpression(expr, path, seen) {
       if (!t3.isObjectProperty(prop) || prop.computed) continue;
       if (!isMatchingPropertyName(prop.key, propertyName)) continue;
       const value = prop.value;
-      return t3.isExpression(value) && isStyleArrayLikeExpression(value, bindingPath, seen);
+      return t3.isExpression(value) && isStyleArrayLike(value, bindingPath, seen);
     }
   }
   return false;
 }
 function isStyleArrayLikeBranch(expr, path, seen) {
-  return isEmptyObjectExpression(expr) || isStyleArrayLikeExpression(expr, path, seen);
+  return isEmptyObjectExpression(expr) || isStyleArrayLike(expr, path, seen);
 }
 function isMatchingPropertyName(key, name) {
   return t3.isIdentifier(key) && key.name === name || t3.isStringLiteral(key) && key.value === name;
@@ -1493,6 +1564,8 @@ function transformTruss(code, filename, mapping) {
   const stylexNamespaceName = existingStylexNamespace ?? reservePreferredName(usedTopLevelNames, "stylex");
   const createVarName = reservePreferredName(usedTopLevelNames, "css", "css_");
   const maybeIncHelperName = needsMaybeInc ? reservePreferredName(usedTopLevelNames, "__maybeInc") : null;
+  const mergePropsHelperName = reservePreferredName(usedTopLevelNames, "__mergeProps");
+  const needsMergePropsHelper = { current: false };
   const runtimeLookupNames = /* @__PURE__ */ new Map();
   for (const [lookupKey] of runtimeLookups) {
     runtimeLookupNames.set(lookupKey, reservePreferredName(usedTopLevelNames, `__${lookupKey}`));
@@ -1504,6 +1577,8 @@ function transformTruss(code, filename, mapping) {
     createVarName,
     stylexNamespaceName,
     maybeIncHelperName,
+    mergePropsHelperName,
+    needsMergePropsHelper,
     runtimeLookupNames
   });
   removeCssImport(ast, cssBindingName);
@@ -1516,6 +1591,9 @@ function transformTruss(code, filename, mapping) {
   if (maybeIncHelperName) {
     declarationsToInsert.push(buildMaybeIncDeclaration(maybeIncHelperName, mapping.increment));
   }
+  if (needsMergePropsHelper.current) {
+    declarationsToInsert.push(buildMergePropsDeclaration(mergePropsHelperName, stylexNamespaceName));
+  }
   declarationsToInsert.push(...hoistedMarkerDecls);
   if (createProperties.length > 0) {
     declarationsToInsert.push(buildCreateDeclaration(createVarName, stylexNamespaceName, createProperties));
@@ -1587,7 +1665,72 @@ function hoistMarkerDeclarations(ast, names) {
 
 // src/plugin/transform-css.ts
 import { parse as parse2 } from "@babel/parser";
+import * as t6 from "@babel/types";
+
+// src/plugin/css-ts-utils.ts
 import * as t5 from "@babel/types";
+function collectStaticStringBindings(ast) {
+  const bindings = /* @__PURE__ */ new Map();
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const node of ast.program.body) {
+      const declaration = getTopLevelVariableDeclaration(node);
+      if (!declaration) continue;
+      for (const declarator of declaration.declarations) {
+        if (!t5.isIdentifier(declarator.id) || !declarator.init) continue;
+        if (bindings.has(declarator.id.name)) continue;
+        const value = resolveStaticString(declarator.init, bindings);
+        if (value === null) continue;
+        bindings.set(declarator.id.name, value);
+        changed = true;
+      }
+    }
+  }
+  return bindings;
+}
+function resolveStaticString(node, bindings) {
+  if (!node) return null;
+  if (t5.isStringLiteral(node)) return node.value;
+  if (t5.isTemplateLiteral(node)) {
+    let value = "";
+    for (let i = 0; i < node.quasis.length; i++) {
+      value += node.quasis[i].value.cooked ?? "";
+      if (i >= node.expressions.length) continue;
+      const expressionValue = resolveStaticString(node.expressions[i], bindings);
+      if (expressionValue === null) return null;
+      value += expressionValue;
+    }
+    return value;
+  }
+  if (t5.isIdentifier(node)) {
+    return bindings.get(node.name) ?? null;
+  }
+  if (t5.isTSAsExpression(node) || t5.isTSSatisfiesExpression(node) || t5.isTSNonNullExpression(node)) {
+    return resolveStaticString(node.expression, bindings);
+  }
+  if (t5.isParenthesizedExpression(node)) {
+    return resolveStaticString(node.expression, bindings);
+  }
+  if (t5.isBinaryExpression(node, { operator: "+" })) {
+    const left = resolveStaticString(node.left, bindings);
+    const right = resolveStaticString(node.right, bindings);
+    if (left === null || right === null) return null;
+    return left + right;
+  }
+  return null;
+}
+function getTopLevelVariableDeclaration(node) {
+  if (t5.isVariableDeclaration(node)) {
+    return node;
+  }
+  if (t5.isExportNamedDeclaration(node) && node.declaration && t5.isVariableDeclaration(node.declaration)) {
+    return node.declaration;
+  }
+  return null;
+}
+
+// src/plugin/transform-css.ts
 function transformCssTs(code, filename, mapping) {
   const ast = parse2(code, {
     sourceType: "module",
@@ -1599,28 +1742,29 @@ function transformCssTs(code, filename, mapping) {
     return `/* [truss] ${filename}: no Css import found */
 `;
   }
-  const defaultExport = findDefaultExportObject(ast);
-  if (!defaultExport) {
-    return `/* [truss] ${filename}: expected \`export default { ... }\` with an object literal */
+  const cssExport = findNamedCssExportObject(ast);
+  if (!cssExport) {
+    return `/* [truss] ${filename}: expected \`export const css = { ... }\` with an object literal */
 `;
   }
   const rules = [];
-  for (const prop of defaultExport.properties) {
-    if (t5.isSpreadElement(prop)) {
+  const stringBindings = collectStaticStringBindings(ast);
+  for (const prop of cssExport.properties) {
+    if (t6.isSpreadElement(prop)) {
       rules.push(`/* [truss] unsupported: spread elements in css.ts export */`);
       continue;
     }
-    if (!t5.isObjectProperty(prop)) {
+    if (!t6.isObjectProperty(prop)) {
       rules.push(`/* [truss] unsupported: non-property in css.ts export */`);
       continue;
     }
-    const selector = objectPropertyStringKey(prop);
+    const selector = objectPropertyStringKey(prop, stringBindings);
     if (selector === null) {
       rules.push(`/* [truss] unsupported: non-string-literal key in css.ts export */`);
       continue;
     }
     const valueNode = prop.value;
-    if (!t5.isExpression(valueNode)) {
+    if (!t6.isExpression(valueNode)) {
       rules.push(`/* [truss] unsupported: "${selector}" value is not an expression */`);
       continue;
     }
@@ -1633,23 +1777,32 @@ function transformCssTs(code, filename, mapping) {
   }
   return rules.join("\n\n") + "\n";
 }
-function findDefaultExportObject(ast) {
+function findNamedCssExportObject(ast) {
   for (const node of ast.program.body) {
-    if (!t5.isExportDefaultDeclaration(node)) continue;
-    const decl = node.declaration;
-    if (t5.isObjectExpression(decl)) return decl;
-    if (t5.isTSAsExpression(decl) && t5.isObjectExpression(decl.expression)) return decl.expression;
-    if (t5.isTSSatisfiesExpression(decl) && t5.isObjectExpression(decl.expression)) return decl.expression;
+    if (!t6.isExportNamedDeclaration(node) || !node.declaration) continue;
+    if (!t6.isVariableDeclaration(node.declaration)) continue;
+    for (const declarator of node.declaration.declarations) {
+      if (!t6.isIdentifier(declarator.id, { name: "css" })) continue;
+      const value = unwrapObjectExpression(declarator.init);
+      if (value) return value;
+    }
   }
   return null;
 }
-function objectPropertyStringKey(prop) {
-  if (t5.isStringLiteral(prop.key)) return prop.key.value;
-  if (t5.isIdentifier(prop.key) && !prop.computed) return prop.key.name;
+function unwrapObjectExpression(node) {
+  if (!node) return null;
+  if (t6.isObjectExpression(node)) return node;
+  if (t6.isTSAsExpression(node) || t6.isTSSatisfiesExpression(node)) return unwrapObjectExpression(node.expression);
+  return null;
+}
+function objectPropertyStringKey(prop, stringBindings) {
+  if (t6.isStringLiteral(prop.key)) return prop.key.value;
+  if (t6.isIdentifier(prop.key) && !prop.computed) return prop.key.name;
+  if (prop.computed) return resolveStaticString(prop.key, stringBindings);
   return null;
 }
 function resolveCssExpression(node, cssBindingName, mapping, filename) {
-  if (!t5.isMemberExpression(node) || node.computed || !t5.isIdentifier(node.property, { name: "$" })) {
+  if (!t6.isMemberExpression(node) || node.computed || !t6.isIdentifier(node.property, { name: "$" })) {
     return { error: "value must be a Css.*.$  expression" };
   }
   const chain = extractChain(node.object, cssBindingName);
@@ -1718,8 +1871,61 @@ ${body}
 }`;
 }
 
+// src/plugin/rewrite-css-ts-imports.ts
+import { parse as parse3 } from "@babel/parser";
+import _generate2 from "@babel/generator";
+import * as t7 from "@babel/types";
+var generate2 = _generate2.default ?? _generate2;
+function rewriteCssTsImports(code, filename) {
+  if (!code.includes(".css.ts")) {
+    return { code, changed: false };
+  }
+  const ast = parse3(code, {
+    sourceType: "module",
+    plugins: ["typescript", "jsx"],
+    sourceFilename: filename
+  });
+  const existingCssSideEffects = /* @__PURE__ */ new Set();
+  const neededCssSideEffects = /* @__PURE__ */ new Set();
+  let changed = false;
+  for (const node of ast.program.body) {
+    if (!t7.isImportDeclaration(node)) continue;
+    if (typeof node.source.value !== "string") continue;
+    if (!node.source.value.endsWith(".css.ts")) continue;
+    if (node.specifiers.length === 0) {
+      node.source = t7.stringLiteral(toVirtualCssSpecifier(node.source.value));
+      existingCssSideEffects.add(node.source.value);
+      changed = true;
+      continue;
+    }
+    neededCssSideEffects.add(toVirtualCssSpecifier(node.source.value));
+  }
+  const sideEffectImports = [];
+  for (const source of neededCssSideEffects) {
+    if (existingCssSideEffects.has(source)) continue;
+    sideEffectImports.push(t7.importDeclaration([], t7.stringLiteral(source)));
+    changed = true;
+  }
+  if (!changed) {
+    return { code, changed: false };
+  }
+  if (sideEffectImports.length > 0) {
+    const insertIndex = findLastImportIndex(ast) + 1;
+    ast.program.body.splice(insertIndex, 0, ...sideEffectImports);
+  }
+  const output = generate2(ast, {
+    sourceFileName: filename,
+    retainLines: false
+  });
+  return { code: output.code, changed: true };
+}
+function toVirtualCssSpecifier(source) {
+  return `${source}?truss-css`;
+}
+
 // src/plugin/index.ts
 var VIRTUAL_CSS_PREFIX = "\0truss-css:";
+var CSS_TS_QUERY = "?truss-css";
 function trussPlugin(opts) {
   let mapping = null;
   let projectRoot;
@@ -1743,15 +1949,8 @@ function trussPlugin(opts) {
       ensureMapping();
     },
     resolveId(source, importer) {
-      if (!source.endsWith(".css.ts")) return null;
-      let absolutePath;
-      if (isAbsolute(source)) {
-        absolutePath = source;
-      } else if (importer) {
-        absolutePath = resolve(dirname(importer), source);
-      } else {
-        absolutePath = resolve(projectRoot || process.cwd(), source);
-      }
+      if (!source.endsWith(CSS_TS_QUERY)) return null;
+      const absolutePath = resolveImportPath(source.slice(0, -CSS_TS_QUERY.length), importer, projectRoot);
       if (!existsSync(absolutePath)) return null;
       return VIRTUAL_CSS_PREFIX + absolutePath.slice(0, -3);
     },
@@ -1763,17 +1962,38 @@ function trussPlugin(opts) {
     },
     transform(code, id) {
       if (!/\.[cm]?[jt]sx?(\?|$)/.test(id)) return null;
-      if (!code.includes("Css")) return null;
+      const rewrittenImports = rewriteCssTsImports(code, id);
+      const rewrittenCode = rewrittenImports.code;
+      const hasCssDsl = rewrittenCode.includes("Css");
+      if (!hasCssDsl && !rewrittenImports.changed) return null;
       const fileId = stripQueryAndHash(id);
       if (isNodeModulesFile(fileId) && !isWhitelistedExternalPackageFile(fileId, externalPackages)) {
         return null;
       }
-      const result = transformTruss(code, id, ensureMapping());
-      if (!result) return null;
+      if (fileId.endsWith(".css.ts")) {
+        return rewrittenImports.changed ? { code: rewrittenCode, map: null } : null;
+      }
+      if (!hasCssDsl) {
+        return { code: rewrittenCode, map: null };
+      }
+      const result = transformTruss(rewrittenCode, id, ensureMapping());
+      if (!result) {
+        if (!rewrittenImports.changed) return null;
+        return { code: rewrittenCode, map: null };
+      }
       return { code: result.code, map: result.map };
     }
   };
 }
+function resolveImportPath(source, importer, projectRoot) {
+  if (isAbsolute(source)) {
+    return source;
+  }
+  if (importer) {
+    return resolve(dirname(importer), source);
+  }
+  return resolve(projectRoot || process.cwd(), source);
+}
 function stripQueryAndHash(id) {
   const queryIndex = id.indexOf("?");
   const hashIndex = id.indexOf("#");