@fluixi/compiler 1.0.0-alpha.93 → 1.0.0-alpha.94

package/dist/transform/templates.d.cts

@@ -3,6 +3,7 @@ import { type CompileTemplateOptions } from '../lower/compile-template.cjs';
 import type { IRLoadStrategy } from '../ir/nodes.cjs';
 import { type PropsDiagnostic } from './props.cjs';
 import { type IntrinsicDiagnostic } from './intrinsics.cjs';
+import { type CompiledStyle, type StyleDiagnostic, type StyleLiteral, type StyleOptions, type StyleReference } from './styles.cjs';
 export interface TransformOptions extends CompileTemplateOptions {
     /**
      * Which authoring syntaxes to compile. Both lower to the same IR, so this is
@@ -42,6 +43,11 @@ export interface TransformOptions extends CompileTemplateOptions {
      * @default true
      */
     intrinsics?: boolean;
+    /**
+     * Compile `<style>` / `<style scoped>` blocks with this CSS processor (the project's
+     * @fluixi-css context). Without it, `<style>` is an ordinary element.
+     */
+    styles?: StyleOptions;
 }
 export interface UnresolvedDiagnostic {
     /** The tag nothing supplies. */
@@ -65,5 +71,12 @@ export interface TransformResult {
     loadDiagnostics?: LoadDiagnostic[];
     /** Capitalised tags nothing supplies: they compile to an undefined reference. */
     unresolvedDiagnostics?: UnresolvedDiagnostic[];
+    /** `<style>` blocks taken out of the templates, processed and scoped, for the host to emit. */
+    styles?: CompiledStyle[];
+    styleDiagnostics?: StyleDiagnostic[];
+    /** `css`` values of the module, processed and unscoped, by handle id: emitted where used. */
+    styleLiterals?: StyleLiteral[];
+    /** Style values interpolated from other modules, for the build to resolve. */
+    styleReferences?: StyleReference[];
 }
 export declare function transformTemplates(code: string, id: string, options?: TransformOptions): TransformResult | null;

package/dist/transform/templates.d.ts

@@ -3,6 +3,7 @@ import { type CompileTemplateOptions } from '../lower/compile-template.js';
 import type { IRLoadStrategy } from '../ir/nodes.js';
 import { type PropsDiagnostic } from './props.js';
 import { type IntrinsicDiagnostic } from './intrinsics.js';
+import { type CompiledStyle, type StyleDiagnostic, type StyleLiteral, type StyleOptions, type StyleReference } from './styles.js';
 export interface TransformOptions extends CompileTemplateOptions {
     /**
      * Which authoring syntaxes to compile. Both lower to the same IR, so this is
@@ -42,6 +43,11 @@ export interface TransformOptions extends CompileTemplateOptions {
      * @default true
      */
     intrinsics?: boolean;
+    /**
+     * Compile `<style>` / `<style scoped>` blocks with this CSS processor (the project's
+     * @fluixi-css context). Without it, `<style>` is an ordinary element.
+     */
+    styles?: StyleOptions;
 }
 export interface UnresolvedDiagnostic {
     /** The tag nothing supplies. */
@@ -65,6 +71,13 @@ export interface TransformResult {
     loadDiagnostics?: LoadDiagnostic[];
     /** Capitalised tags nothing supplies: they compile to an undefined reference. */
     unresolvedDiagnostics?: UnresolvedDiagnostic[];
+    /** `<style>` blocks taken out of the templates, processed and scoped, for the host to emit. */
+    styles?: CompiledStyle[];
+    styleDiagnostics?: StyleDiagnostic[];
+    /** `css`` values of the module, processed and unscoped, by handle id: emitted where used. */
+    styleLiterals?: StyleLiteral[];
+    /** Style values interpolated from other modules, for the build to resolve. */
+    styleReferences?: StyleReference[];
 }
 export declare function transformTemplates(code: string, id: string, options?: TransformOptions): TransformResult | null;
 //# sourceMappingURL=templates.d.ts.map

package/dist/transform/templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../src/transform/templates.ts"],"names":[],"mappings":"AASA,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAiB,KAAK,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,KAAK,EAAqB,cAAc,EAAU,MAAM,gBAAgB,CAAC;AAWhF,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAAgE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAoBzH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAChC,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,wEAAwE;IACxE,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,8DAA8D;IAC9D,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,iFAAiF;IACjF,qBAAqB,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAChD;AAwTD,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,OAAO,GAAE,gBAAqB,GAC7B,eAAe,GAAG,IAAI,CAkNxB"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../src/transform/templates.ts"],"names":[],"mappings":"AASA,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAiB,KAAK,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,KAAK,EAAqB,cAAc,EAAU,MAAM,gBAAgB,CAAC;AAWhF,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAAgE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEzH,OAAO,EAAqC,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAkB,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAmBrL,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAChC,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,wEAAwE;IACxE,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,8DAA8D;IAC9D,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,iFAAiF;IACjF,qBAAqB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC/C,+FAA+F;IAC/F,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,6FAA6F;IAC7F,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,8EAA8E;IAC9E,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;CACpC;AAoTD,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,OAAO,GAAE,gBAAqB,GAC7B,eAAe,GAAG,IAAI,CAuPxB"}

package/dist/transform/templates.js

@@ -22,7 +22,8 @@ import { moduleBindings } from './bindings.js';
 import { collectPropsEdits } from './props.js';
 import { avoidBindingClashes, collectIntrinsicEdits, intrinsicImports } from './intrinsics.js';
 import { collectSourceEdits, mayHaveSourceMarks } from './source-locations.js';
-import { mayHaveIntrinsic } from '../analyze/intrinsics.js';
+import { collectStyles, finishShadowStyles } from './styles.js';
+import { mayHaveIntrinsic, tagIntrinsics } from '../analyze/intrinsics.js';
 import { declaredNames } from '../analyze/reactive-bindings.js';
 import { DOM_CONTROL_FLOW, CORE_CONTROL_FLOW, ROUTER_COMPONENTS } from '../resolve/builtins.js';
 // Which builtin comes from which module is published by resolve/builtins.ts , 
@@ -67,10 +68,8 @@ function isJsxRoot(node, parent, key) {
         return false;
     return !(parent && isJsx(parent) && key === 'children');
 }
-function isTemplateTag(node, litTag) {
-    return (node.type === 'TaggedTemplateExpression' &&
-        node.tag?.type === 'Identifier' &&
-        (node.tag.name === litTag || node.tag.name === 'svg'));
+function isTemplateTag(node, tags) {
+    return node.type === 'TaggedTemplateExpression' && node.tag?.type === 'Identifier' && tags.has(node.tag.name);
 }
 /** The edits in `list` that no other edit in `list` contains. */
 function outermost(list) {
@@ -307,16 +306,25 @@ export function transformTemplates(code, id, options = {}) {
     // What a mark calls this file. The declaration marks and the usage marks are read back by
     // name, so both passes have to spell it the same way.
     const sourceName = relativeToRoot(id, options.sourceRoot);
-    if (!mayHaveTemplate && !(wantsJsx && code.includes('<')) && !wantsIntrinsics && !wantsSources)
+    // A module of nothing but css`` values still has literals to compile.
+    const wantsStyles = options.styles !== undefined && (code.includes('<style') || code.includes('css`'));
+    if (!mayHaveTemplate && !(wantsJsx && code.includes('<')) && !wantsIntrinsics && !wantsSources && !wantsStyles)
         return null;
     const ast = parse(code, {
         sourceType: 'module',
         plugins: ['jsx', 'typescript'],
         errorRecovery: true,
     });
+    // `html`, `svg`, and in an app `$html`/`$svg`/`$css`, which need no import.
+    const intrinsicTags = options.intrinsics === false ? new Map() : tagIntrinsics(moduleBindings(ast.program));
+    const templateTags = new Map([[litTag, 'html'], ['svg', 'svg']]);
+    for (const [name, tag] of intrinsicTags)
+        if (tag !== 'css')
+            templateTags.set(name, tag);
+    const cssTags = [...intrinsicTags].filter(([, tag]) => tag === 'css').map(([name]) => name);
     const found = [];
     walk(ast.program, (n, parent, key) => {
-        if (wantsLit && isTemplateTag(n, litTag))
+        if (wantsLit && isTemplateTag(n, templateTags))
             found.push(n);
         else if (wantsJsx && isJsxRoot(n, parent, key))
             found.push(n);
@@ -340,6 +348,9 @@ export function transformTemplates(code, id, options = {}) {
     const sources = options.sourceLocations === true
         ? collectSourceEdits(ast.program, sourceName)
         : { edits: [], marked: 0 };
+    // `<style>` blocks, processed by the host's CSS engine and scoped. Only when the host asked:
+    // without a processor a `<style>` stays an ordinary element.
+    const styles = wantsStyles ? collectStyles(ast.program, sourceName, options.styles, { html: templateTags, css: cssTags }, { id, code }) : undefined;
     // Nothing to emit still returns a result when there's something to say, a shadowed
     // intrinsic is a diagnostic even though the code comes back untouched.
     const silent = found.length === 0 &&
@@ -347,7 +358,9 @@ export function transformTemplates(code, id, options = {}) {
         sources.edits.length === 0 &&
         intrinsics.edits.length === 0 &&
         intrinsics.diagnostics.length === 0 &&
-        props.diagnostics.length === 0;
+        props.diagnostics.length === 0 &&
+        !styles?.edits.length &&
+        !styles?.diagnostics.length;
     if (silent)
         return null;
     // Innermost first, so a nested template is already compiled by the time the
@@ -362,19 +375,33 @@ export function transformTemplates(code, id, options = {}) {
         declared: declaredNames(ast.program),
     };
     const hoisted = new Map();
-    const edits = [...props.edits, ...intrinsics.edits, ...sources.edits];
+    const edits = [...props.edits, ...intrinsics.edits, ...sources.edits, ...(styles?.edits ?? [])];
     for (const node of found) {
         // A root inside another root's hole is emitted without partial templates,
         // matching what the plugin does for nested emits. Marker layout has to agree
         // between server and client, so this is not the place to change it.
         const nested = found.some((o) => o !== node && o.start <= node.start && o.end >= node.end && o.end - o.start > node.end - node.start);
         if (isJsx(node)) {
-            edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceName) });
+            edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceName, styles) });
             continue;
         }
         const holes = node.quasi.expressions.map((e) => bindHole(code, e, edits, options.sourceLocations === true));
+        const scope = styles?.scopes.find((s) => node.start >= s.start && node.end <= s.end)?.value;
+        const owner = styles?.templateOwners.get(node.start);
+        const templateStyles = options.styles && styles && (scope || owner)
+            ? {
+                options: options.styles,
+                ...(scope ? { scope } : {}),
+                ...(owner ? { owner } : {}),
+                line: node.loc?.start.line ?? 0,
+                column: node.loc?.start.column ?? 0,
+                styles: styles.styles,
+                diagnostics: styles.diagnostics,
+            }
+            : undefined;
         const result = compilePieces(toPieces(node), holes, {
             ...options,
+            ...(templateStyles ? { templateStyles } : {}),
             hoistTemplates: true,
             // A tag inside a template gets the same mark a JSX tag does. Without one, the nodes it
             // makes are the only ones in the module carrying no mark, and they take whichever was
@@ -385,13 +412,17 @@ export function transformTemplates(code, id, options = {}) {
             // Same defaults as the plugin, so moving a build over is not a rendering change.
             templateClone: options.templateClone ?? true,
             partialTemplates: nested ? false : options.partialTemplates ?? true,
-            svg: node.tag.name === 'svg',
+            svg: templateTags.get(node.tag.name) === 'svg',
         });
         for (const symbol of result.imports)
             used.add(symbol);
         collectNeeds(result.ir, needs);
         edits.push({ start: node.start, end: node.end, code: adoptTemplates(result.code, result.templates, hoisted) });
     }
+    // A shadow-DOM element's blocks and css`` values go into its `static styles`, once every
+    // template has been compiled and its blocks numbered.
+    if (styles && options.styles)
+        edits.push(...finishShadowStyles(styles, code, id));
     const out = new MagicString(code);
     // Same reason as in `slice`: a nested edit is already inside its parent's code.
     for (const e of outermost(edits)) {
@@ -476,6 +507,10 @@ export function transformTemplates(code, id, options = {}) {
         ...(unresolvedDiagnostics.length ? { unresolvedDiagnostics } : {}),
         ...(props.diagnostics.length ? { propsDiagnostics: props.diagnostics } : {}),
         ...(intrinsics.diagnostics.length ? { intrinsicDiagnostics: intrinsics.diagnostics } : {}),
+        ...(styles?.styles.length ? { styles: styles.styles } : {}),
+        ...(styles?.diagnostics.length ? { styleDiagnostics: styles.diagnostics } : {}),
+        ...(styles?.literals.length ? { styleLiterals: styles.literals } : {}),
+        ...(styles?.references.length ? { styleReferences: styles.references } : {}),
     };
 }
 /**
@@ -483,10 +518,12 @@ export function transformTemplates(code, id, options = {}) {
  * with anything already compiled inside them folded in, so nested JSX and nested
  * `` html`` `` both come along for free.
  */
-function compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceFile) {
+function compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceFile, styles) {
     const ir = buildJsxIR(node, {
         code: (n) => slice(code, n.start, n.end, edits),
         used,
+        ...(styles?.scopes.length ? { scopes: styles.scopes } : {}),
+        ...(styles?.drop.size ? { dropStyles: styles.drop } : {}),
         ...(options.sourceLocations === true && sourceFile ? { sourceFile } : {}),
     });
     analyzeStatic(ir);