Full import/export handling

README.md

@@ -133,6 +133,14 @@ ecij({
 });
 ```
 
+## Limitations
+
+- The `css` tag must be imported directly from `'ecij'` (aliasing it is fine,
+  e.g. `import { css as styled } from 'ecij'`). Re-exporting the tag through
+  another module is not supported and leaves the templates untransformed.
+- Interpolations must statically resolve to strings or numbers; dynamic or
+  complex expressions cause the css`` block to be skipped with a warning.
+
 ## Development
 
 ### Building
@@ -167,5 +175,4 @@ npm test -- -u
 
 ## TODO
 
-- Full import/export handling (default/namespace import/export)
 - Sourcemaps

test/fixtures/ambiguous-a.ts

@@ -0,0 +1 @@
+export const accent = 'red';

test/fixtures/ambiguous-b.ts

@@ -0,0 +1 @@
+export const accent = 'blue';

test/fixtures/ambiguous-barrel.ts

@@ -0,0 +1,5 @@
+// @ts-nocheck — the ambiguity below is deliberate.
+// `accent` is provided by two different bindings — per ESM the name is
+// ambiguous and not exported at all.
+export * from './ambiguous-a';
+export * from './ambiguous-b';

test/fixtures/ambiguous.input.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck — `accent` is ambiguous, so the namespace exposes no such member
+import { css } from 'ecij';
+
+import * as ambiguous from './ambiguous-barrel';
+
+// At runtime `ambiguous.accent` is undefined (ambiguous star exports are
+// excluded from namespace objects) — the plugin must warn, not pick one.
+export const usesAmbiguous = css`
+  color: ${ambiguous.accent};
+`;

test/fixtures/barrel-a.ts

@@ -0,0 +1,8 @@
+import { css } from 'ecij';
+
+export const aColor = 'aqua';
+
+export const aClass = css`
+  /* a */
+  color: ${aColor};
+`;

test/fixtures/barrel-b.ts

@@ -0,0 +1,12 @@
+import { css } from 'ecij';
+
+export const bColor = 'beige';
+
+export const bClass = css`
+  /* b */
+  color: ${bColor};
+`;
+
+// `b` also defines `shared` — barrel-c re-exports an explicit `shared`
+// that should win over the `export *` collision.
+export const shared = 'b-loses';

test/fixtures/barrel-c.ts

@@ -0,0 +1 @@
+export const shared = 'c-wins';

test/fixtures/barrel-d.ts

@@ -0,0 +1 @@
+export const dColor = 'darkcyan';

test/fixtures/barrel-deep-only.input.ts

@@ -0,0 +1,11 @@
+import { css } from 'ecij';
+
+// Resolving `dColor` probes barrel-a and barrel-b (which fail to provide it)
+// before the nested barrel — their stylesheets must NOT be dragged into this
+// bundle, since nothing from them is used here.
+import { dColor } from './barrel';
+
+export const usesOnlyDeep = css`
+  /* uses-only-deep */
+  color: ${dColor};
+`;

test/fixtures/barrel-nested.ts

@@ -0,0 +1,4 @@
+// Nested barrel — re-exports through another barrel layer.
+// `dColor` is reachable from the top-level barrel only through this hop.
+export * from './barrel-a';
+export * from './barrel-d';

test/fixtures/barrel.input.ts

@@ -0,0 +1,39 @@
+import { css } from 'ecij';
+
+// Pull a mix of names through a barrel file:
+// - `aColor`, `aClass` come from barrel-a via `export *`
+// - `bColor`, `bClass` come from barrel-b via `export *`
+// - `shared` is exposed by both barrel-b (via `export *`) and barrel-c (explicit
+//   `export { shared }`); the explicit re-export must win
+// - `aClass` is also reachable through a nested barrel, but should still resolve
+//   to the same value (two star paths to the *same* binding are not ambiguous).
+// - `dColor` is only reachable through the nested barrel (depth-2 `export *`).
+import { aColor, aClass, bColor, bClass, shared, dColor } from './barrel';
+
+export const usesBarrelA = css`
+  /* uses-a */
+  color: ${aColor};
+
+  &.${aClass} {
+    color: red;
+  }
+`;
+
+export const usesBarrelB = css`
+  /* uses-b */
+  color: ${bColor};
+
+  &.${bClass} {
+    color: red;
+  }
+`;
+
+export const usesBarrelShared = css`
+  /* uses-shared */
+  color: ${shared};
+`;
+
+export const usesBarrelDeep = css`
+  /* uses-deep */
+  color: ${dColor};
+`;

test/fixtures/barrel.ts

@@ -0,0 +1,10 @@
+// A barrel file with a mix of explicit re-exports and `export *` aggregation.
+// Explicit named re-exports must take precedence over `export *` collisions.
+export { shared } from './barrel-c';
+export * from './barrel-a';
+export * from './barrel-b';
+export * from './barrel-nested';
+
+// Local export that shadows `aColor` re-exported via `export * from './barrel-a'`.
+// Per spec, an explicit named export wins over `export *` for the same name.
+export const aColor = 'locally-overridden';

test/fixtures/broken-export.input.ts

@@ -0,0 +1,9 @@
+import { css } from 'ecij';
+
+import { brokenClass } from './broken-export';
+
+export const usesBrokenClass = css`
+  &.${brokenClass} {
+    color: red;
+  }
+`;

test/fixtures/broken-export.ts

@@ -0,0 +1,11 @@
+import { css } from 'ecij';
+
+function dynamicPadding(): number {
+  return 4;
+}
+
+// Extraction of this declaration fails (complex interpolation), so its class
+// name must not leak into consumers as if its rule existed.
+export const brokenClass = css`
+  padding: ${dynamicPadding()}px;
+`;

test/fixtures/cycle-a.input.ts

@@ -0,0 +1,17 @@
+import { css } from 'ecij';
+
+// Mutual import cycle: this module uses cycle-b's class while cycle-b uses
+// this module's class. Resolution must neither deadlock nor lose classes that
+// are already extracted when the cycle is entered.
+import { bClass } from './cycle-b';
+
+export const aClass = css`
+  /* cycle-a */
+  color: red;
+`;
+
+export const usesB = css`
+  &.${bClass} {
+    color: blue;
+  }
+`;

test/fixtures/cycle-b.ts

@@ -0,0 +1,10 @@
+import { css } from 'ecij';
+
+import { aClass } from './cycle-a.input';
+
+export const bClass = css`
+  /* cycle-b */
+  &.${aClass} {
+    color: green;
+  }
+`;

test/fixtures/default-passthrough-source.ts

@@ -0,0 +1,5 @@
+export default 'mediumseagreen';
+
+// Decoy: resolving the re-exported default-import binding below must pick the
+// default export above, not this same-named named export.
+export const passthroughDefault = 'wrong-named-export';

test/fixtures/default-passthrough.ts

@@ -0,0 +1,5 @@
+// oxc normalizes this pair into a re-export entry that points at the *local*
+// binding name instead of 'default' — the plugin must map it back.
+import passthroughDefault from './default-passthrough-source';
+
+export { passthroughDefault };

test/fixtures/export-default-css.ts

@@ -0,0 +1,7 @@
+import { css } from 'ecij';
+
+// Default-exported css tagged template (no local binding)
+export default css`
+  /* default css */
+  border: 2px dashed teal;
+`;

test/fixtures/export-default-literal.ts

@@ -0,0 +1,2 @@
+// Default-exported string literal
+export default 'royalblue';

test/fixtures/export-default-local.ts

@@ -0,0 +1,9 @@
+import { css } from 'ecij';
+
+const localClass = css`
+  /* default-local */
+  display: grid;
+`;
+
+// Default export pointing at a locally-bound css class
+export default localClass;

test/fixtures/export-default-negative.ts

@@ -0,0 +1,2 @@
+// Default-exported signed number literal
+export default -5;

test/fixtures/export-default-wrapped-css.ts

@@ -0,0 +1,9 @@
+import { css } from 'ecij';
+
+// Default-exported css tagged template behind a TS `as` assertion — the
+// wrapper (like parentheses) must be unwrapped for the declaration to be
+// recognized.
+export default css`
+  /* wrapped-default */
+  display: flex;
+` as string;

test/fixtures/external-barrel.ts

@@ -0,0 +1,6 @@
+// @ts-nocheck — '@acme/tokens' deliberately does not exist; it is marked
+// external in the consuming test's build options.
+// The first star source is an external package that cannot be parsed —
+// resolution must skip it gracefully and find the value in the next source.
+export * from '@acme/tokens';
+export * from './external-tokens';

test/fixtures/external-star.input.ts

@@ -0,0 +1,8 @@
+import { css } from 'ecij';
+
+import { brandColor } from './external-barrel';
+
+export const usesExternalBarrel = css`
+  /* uses external-barrel */
+  color: ${brandColor};
+`;

test/fixtures/external-tokens.ts

@@ -0,0 +1 @@
+export const brandColor = 'goldenrod';

test/fixtures/import-export-hardening.input.ts

@@ -0,0 +1,49 @@
+import { css } from 'ecij';
+
+// Default import re-exported under its local name (`import d from 'mod'; export { d };`)
+import { passthroughDefault } from './default-passthrough';
+// Default exports with static expressions the evaluator must unwrap
+import negativePad from './export-default-negative';
+import wrappedClass from './export-default-wrapped-css';
+// Namespace re-export reached through a chained named re-export
+import { styles as chainedStyles } from './ns-chain';
+// Namespace re-export reached through an `export *` aggregation
+import { styles as starChainedStyles } from './ns-chain-star';
+// Nested namespace member access (`ns.inner.member`)
+import * as outerNs from './reexports-namespace';
+
+export const usesPassthroughDefault = css`
+  /* uses passthrough-default */
+  color: ${passthroughDefault};
+`;
+
+export const usesChainedNamespace = css`
+  /* uses chained-namespace */
+  color: ${chainedStyles.accentColor};
+`;
+
+export const usesStarChainedNamespace = css`
+  /* uses star-chained-namespace */
+  font-size: ${starChainedStyles.accentSize}px;
+`;
+
+export const usesNestedNamespaceMember = css`
+  /* uses nested-namespace-member */
+  background: ${outerNs.styles.accentColor};
+
+  &.${outerNs.styles.accentClass} {
+    color: red;
+  }
+`;
+
+export const usesNegativeDefault = css`
+  /* uses negative-default */
+  margin: ${negativePad}px;
+`;
+
+export const usesWrappedDefaultCss = css`
+  /* uses wrapped-default-css */
+  &.${wrappedClass} {
+    color: red;
+  }
+`;