@pre.style/core 3.1.0-alpha.2 → 3.1.0-alpha.4

package/dist/compiler/compiler.js

@@ -3,9 +3,11 @@ import { dirname, relative, resolve as resolvePath, sep } from 'node:path';
 import { transform } from 'lightningcss';
 import SweatMap from 'sweatmap';
 import { dropOverridden, parseBlock, PreStyleError, valueOf } from './block.js';
+import { interpolate } from './interpolate.js';
 import { print } from './print.js';
 import { lvhfaRank, specificity, withClass } from './selectors.js';
 import { KEYFRAMES_PREFIX } from './keyframes.js';
+import { VARIABLE_PREFIX } from './variables.js';
 import { MARKER_PREFIX, markerKey, parseStylesheet } from './stylesheet.js';
 import { SHORTHANDS } from '../shorthands.js';
 const RANGES = {
@@ -31,6 +33,16 @@ const QUIRKS_NAME_OPTIONS = {
     cssSafe: true,
     ranges: Object.fromEntries(Object.entries(RANGES).filter(([name]) => name !== 'Uppercase')),
 };
+// A block with `${…}`, from the text around its expressions and their source.
+export function interpolatedBlock(block) {
+    const { strings, expressions, ...rest } = block;
+    try {
+        return { ...rest, ...interpolate(strings, expressions, block.lang) };
+    }
+    catch (error) {
+        throw error instanceof PreStyleError ? locate(error, { ...rest, code: '' }) : error;
+    }
+}
 export async function createCompiler(options = {}) {
     let sass = null;
     try {
@@ -55,19 +67,22 @@ export class Compiler {
     #root;
     // One name list for every class, one for prefixes (the at-rules and
     // selector variant a class is under), which only the `cn` table uses, and
-    // one for localized keyframes.
+    // one each for localized keyframes and runtime variables.
     #names;
-    // How often each class, prefix, and localized keyframes is used across
-    // scanned blocks.
+    // How often each class, prefix, localized keyframes, and variable is used
+    // across scanned blocks.
     #counts = {
         atoms: new Map(),
         prefixes: new Map(),
         keyframes: new Map(),
+        variables: new Map(),
     };
     #atoms = new Map();
     #globals = new Map();
     // The current global for each overridable at-rule.
     #overrides = new Map();
+    // Each runtime variable's custom property, or null for `--<its name>`.
+    #variables = new Map();
     #order = 0;
     constructor(options, sass) {
         this.#options = options;
@@ -78,6 +93,8 @@ export class Compiler {
             // four characters only after about 227,000 names, so they're never
             // `none` or a CSS-wide keyword.
             keyframes: new SweatMap(NAME_OPTIONS),
+            // Part of the classes generated at runtime, so these follow class names.
+            variables: new SweatMap(options.quirksMode ? QUIRKS_NAME_OPTIONS : NAME_OPTIONS),
         };
         this.#layer = layerRule(options.layer);
         const root = options.root ?? process.cwd();
@@ -90,6 +107,7 @@ export class Compiler {
                 dir: dir + sep,
                 prepend: readPrepend(dir, library.prependFiles),
                 keyframeLocalization: library.keyframeLocalization ?? false,
+                customPropertyLocalization: library.customPropertyLocalization ?? false,
             };
         })
             .toSorted((a, b) => b.dir.length - a.dir.length);
@@ -111,7 +129,9 @@ export class Compiler {
         this.#register(block, parsed);
         this.#count(this.#resolveBlock(block, parsed, []));
         for (const global of parsed.globals)
-            this.#countKeyframes(global.key);
+            this.#countNames(global.key);
+        for (const variable of parsed.variables ?? [])
+            count(this.#counts.variables, variable.key);
     }
     // Pass 1 of naming for a stylesheet file: counts what each class uses.
     scanStylesheet(sheet) {
@@ -119,12 +139,12 @@ export class Compiler {
         for (const name of parsed.classes.keys())
             this.#count(this.#resolveClass(sheet.file, parsed, name, [], []));
         for (const global of parsed.globals)
-            this.#countKeyframes(global.key);
+            this.#countNames(global.key);
     }
     // Pass 2 of naming: gives the most-used entries the shortest names. Ties
     // are broken by key, so names don't depend on the order files are read.
     assignNames() {
-        for (const list of ['atoms', 'prefixes', 'keyframes']) {
+        for (const list of ['atoms', 'prefixes', 'keyframes', 'variables']) {
             const sorted = [...this.#counts[list]].toSorted(([a, countA], [b, countB]) => countB - countA || (a < b ? -1 : a > b ? 1 : 0));
             for (const [key] of sorted)
                 this.#names[list].set(key);
@@ -137,6 +157,20 @@ export class Compiler {
         this.#register(block, parsed);
         return this.#classString(this.#resolveBlock(block, parsed, []));
     }
+    // The variables a block sets at runtime, in the order they're written.
+    variables(block) {
+        const parsed = this.#parse(block);
+        this.#register(block, parsed);
+        return (parsed.variables ?? []).map((variable) => {
+            const name = this.#names.variables.set(variable.key);
+            return {
+                name,
+                property: variable.property ? this.#propertyName(variable.property) : `--${name}`,
+                slot: block.slots[variable.slot],
+                selector: variable.selector,
+            };
+        });
+    }
     // The files a block's class string depends on, through `composes … from`.
     dependencies(block) {
         const dependencies = [];
@@ -240,18 +274,29 @@ export class Compiler {
             const key = prefixKey(record.atom);
             const prefix = key === '' ? '' : this.#names.prefixes.set(key);
             const properties = (table[prefix] ??= {});
-            const { property } = record.atom;
+            const property = this.#propertyName(record.atom.property);
             const name = this.#nameOf(record);
             properties[property] = properties[property] ? `${properties[property]} ${name}` : name;
         }
         return table;
     }
+    // The variables runtime values set, for `cn` to recognize generated classes.
+    cnVariables() {
+        const variables = {};
+        for (const [key, property] of this.#variables)
+            variables[this.#names.variables.set(key)] = property ? this.#propertyName(property) : '';
+        return variables;
+    }
     // A library's blocks and files get its prepended files and keyframes
     // setting instead of the app's.
     #library(file) {
         const library = file === undefined ? -1 : this.#libraries.findIndex(({ dir }) => file.startsWith(dir));
-        const { prepend, keyframeLocalization } = library === -1
-            ? { prepend: this.#prepend, keyframeLocalization: this.#options.keyframeLocalization }
+        const { prepend, keyframeLocalization, customPropertyLocalization } = library === -1
+            ? {
+                prepend: this.#prepend,
+                keyframeLocalization: this.#options.keyframeLocalization,
+                customPropertyLocalization: this.#options.customPropertyLocalization,
+            }
             : this.#libraries[library];
         return {
             library,
@@ -259,6 +304,7 @@ export class Compiler {
                 ...this.#parseOptions,
                 prepend,
                 keyframeLocalization: keyframeLocalization ?? false,
+                customPropertyLocalization: customPropertyLocalization ?? false,
             },
         };
     }
@@ -377,7 +423,7 @@ export class Compiler {
             const prefix = prefixKey(atom);
             if (prefix !== '')
                 count(this.#counts.prefixes, prefix);
-            this.#countKeyframes(atom.declaration.key);
+            this.#countNames(atom.declaration.key);
         }
         for (const extra of resolved.extras)
             if (extra.startsWith(MARKER_PREFIX))
@@ -389,12 +435,18 @@ export class Compiler {
             names.push(extra.startsWith(MARKER_PREFIX) ? this.#names.atoms.set(extra) : extra);
         return [...new Set(names)].join(' ');
     }
-    // Counts the localized keyframes a JSON key names.
-    #countKeyframes(json) {
-        if (!json.includes(KEYFRAMES_KEY))
-            return;
-        for (const [, hash] of json.matchAll(KEYFRAMES_KEY_RE))
-            count(this.#counts.keyframes, KEYFRAMES_PREFIX + hash);
+    // Counts the localized keyframes and custom properties a JSON key names.
+    #countNames(json) {
+        if (json.includes(KEYFRAMES_KEY))
+            for (const [, hash] of json.matchAll(KEYFRAMES_KEY_RE))
+                count(this.#counts.keyframes, KEYFRAMES_PREFIX + hash);
+        if (json.includes(VARIABLE_KEY))
+            for (const [, hash] of json.matchAll(VARIABLE_KEY_RE))
+                count(this.#counts.variables, hash);
+    }
+    // A property's name in the output, for a custom property with a generated one.
+    #propertyName(property) {
+        return property.startsWith(VARIABLE_PREFIX) ? this.#named(property) : property;
     }
     // Replaces markers in selectors, and localized keyframes names, with their
     // names.
@@ -402,6 +454,8 @@ export class Compiler {
         const visit = (node) => {
             if (Array.isArray(node))
                 return node.map(visit);
+            if (typeof node === 'string' && node.startsWith(VARIABLE_PREFIX))
+                return `--${this.#names.variables.set(node.slice(VARIABLE_PREFIX.length))}`;
             if (node === null || typeof node !== 'object')
                 return node;
             const record = node;
@@ -418,6 +472,13 @@ export class Compiler {
         return visit(value);
     }
     #register(block, parsed) {
+        for (const variable of parsed.variables ?? []) {
+            if (this.#variables.has(variable.key))
+                continue;
+            this.#variables.set(variable.key, variable.property);
+            // A custom property set directly adds no atom or rule, but `cn` needs it.
+            this.#order++;
+        }
         for (const atom of parsed.atoms) {
             const key = atomKey(atom);
             const source = sourceOf(block, atom.position);
@@ -483,7 +544,7 @@ export class Compiler {
     }
     #atomRule(record, loc) {
         const { atom } = record;
-        const value = atom.declaration.key.includes(KEYFRAMES_KEY)
+        const value = hasGenerated(atom.declaration.key)
             ? this.#named(atom.declaration.value)
             : atom.declaration.value;
         const declarations = atom.declaration.important
@@ -502,9 +563,11 @@ export class Compiler {
                 return this.#atomRule(record, loc(source));
             });
             for (const child of sortGroups([...group.children.values()])) {
+                const segment = child.segment;
+                const named = hasGenerated(segment.key) ? this.#named(segment.rule) : segment.rule;
                 rules.push({
-                    type: child.segment.rule.type,
-                    value: { ...valueOf(child.segment.rule), rules: emit(child) },
+                    type: segment.rule.type,
+                    value: { ...valueOf(named), rules: emit(child) },
                 });
             }
             return rules;
@@ -524,7 +587,8 @@ export class Compiler {
             className: record.className,
             selector: code.slice(0, open).replaceAll('\n', ' '),
             atRules: atom.atRules.map((segment) => {
-                const wrapped = { ...valueOf(segment.rule), rules: [rule] };
+                const named = hasGenerated(segment.key) ? this.#named(segment.rule) : segment.rule;
+                const wrapped = { ...valueOf(named), rules: [rule] };
                 const printed = text({ type: segment.rule.type, value: wrapped });
                 return printed.slice(0, printed.indexOf(' {\n'));
             }),
@@ -532,7 +596,7 @@ export class Compiler {
                 .slice(open + 3, code.lastIndexOf('\n}'))
                 .trim()
                 .replace(/;$/, ''),
-            property: atom.property,
+            property: this.#propertyName(atom.property),
             covers: Object.hasOwn(SHORTHANDS, atom.property) ? SHORTHANDS[atom.property] : [],
             important: atom.declaration.important,
             specificity: specificity(this.#atomSelectors(record)),
@@ -545,10 +609,14 @@ export class Compiler {
 // escape the `\0`.
 const MARKER_KEY = JSON.stringify(MARKER_PREFIX).slice(1, -1);
 const KEYFRAMES_KEY = JSON.stringify(KEYFRAMES_PREFIX).slice(1, -1);
+const VARIABLE_KEY = JSON.stringify(VARIABLE_PREFIX).slice(1, -1);
+const VARIABLE_KEY_RE = new RegExp(`${RegExp.escape(VARIABLE_KEY)}([\\w-]+)`, 'g');
 const KEYFRAMES_KEY_RE = new RegExp(`${RegExp.escape(KEYFRAMES_KEY)}([\\w-]+)`, 'g');
 // Rules that can't be inside a layer.
 const outside = (rule) => rule.type === 'import' || rule.type === 'namespace';
-const hasPlaceholder = (json) => json.includes(MARKER_KEY) || json.includes(KEYFRAMES_KEY);
+// Whether a declaration has generated names.
+const hasGenerated = (json) => json.includes(KEYFRAMES_KEY) || json.includes(VARIABLE_KEY);
+const hasPlaceholder = (json) => json.includes(MARKER_KEY) || hasGenerated(json);
 // Parses the `layer` option into an `@layer` block rule.
 function layerRule(layer) {
     if (layer === undefined || layer === false)

package/dist/compiler/config.d.ts

@@ -7,6 +7,7 @@ export interface PackageConfig {
     libraries?: Record<string, LibraryConfig | boolean>;
     quirksMode?: boolean;
     keyframeLocalization?: boolean;
+    customPropertyLocalization?: boolean;
 }
 export declare function checkField(field: Record<string, unknown>, where: string, keys: Set<string>): string[];
 export declare function readConfig(root: string): {

package/dist/compiler/config.js

@@ -7,6 +7,7 @@ const KEYS = new Set([
     'libraries',
     'quirksMode',
     'keyframeLocalization',
+    'customPropertyLocalization',
 ]);
 const isStrings = (value) => typeof value === 'string' ||
     (Array.isArray(value) && value.every((item) => typeof item === 'string'));
@@ -31,6 +32,9 @@ export function checkField(field, where, keys) {
         fail('quirksMode', '`true` or `false`');
     if (field.keyframeLocalization !== undefined && typeof field.keyframeLocalization !== 'boolean')
         fail('keyframeLocalization', '`true` or `false`');
+    if (field.customPropertyLocalization !== undefined &&
+        typeof field.customPropertyLocalization !== 'boolean')
+        fail('customPropertyLocalization', '`true` or `false`');
     if (field.libraries !== undefined &&
         (field.libraries === null ||
             typeof field.libraries !== 'object' ||

package/dist/compiler/custom-properties.d.ts

@@ -0,0 +1,5 @@
+import type { Atom, GlobalRule, Lang, ParseOptions } from './block.ts';
+export declare function localizeCustomProperties(atoms: Atom[], globals: GlobalRule[], scope: string, lang: Lang, options: ParseOptions): {
+    globals: GlobalRule[];
+    atoms: (atoms: Atom[]) => Atom[];
+};

package/dist/compiler/custom-properties.js

@@ -0,0 +1,150 @@
+import { createHash } from 'node:crypto';
+import { key, overrideKey, parseRules, valueOf, walk } from './block.js';
+import { VARIABLE_PREFIX } from './variables.js';
+// With `customPropertyLocalization`, a custom property that a block or
+// stylesheet file declares gets a generated name, used only in that block or
+// file. In parsed rules it's a variable name, which the compiler names when
+// printing, in the same list as the variables runtime values set. Names it only
+// reads, and names from prepended files, which are how values are shared, stay
+// global.
+// Properties whose values name custom properties. Other dashed names, such as
+// `anchor-name: --x` or `anchor(--x top)`, aren't custom properties.
+const NAMING = new Set(['will-change', 'transition', 'transition-property']);
+// Calls `declared` with each custom property a value declares.
+function eachDeclared(value, declared) {
+    if (Array.isArray(value)) {
+        for (const item of value)
+            eachDeclared(item, declared);
+        return;
+    }
+    if (value === null || typeof value !== 'object')
+        return;
+    const node = value;
+    if (node.property === 'custom' && node.value?.name?.startsWith('--'))
+        declared(node.value.name);
+    if (node.type === 'property' && typeof node.value?.name === 'string')
+        declared(node.value.name);
+    for (const child of Object.values(node))
+        eachDeclared(child, declared);
+}
+// Replaces custom property names in a value. Returns `value` itself when nothing
+// changed.
+function rename(value, local, naming = false) {
+    if (Array.isArray(value)) {
+        const mapped = value.map((item) => rename(item, local, naming));
+        return (mapped.some((item, i) => item !== value[i]) ? mapped : value);
+    }
+    if (value === null || typeof value !== 'object')
+        return value;
+    const node = value;
+    // `var(--x)`.
+    const ident = node.ident;
+    // `transition-property`'s `{ property: '--x' }`.
+    const property = node.property;
+    // `will-change: --x`.
+    const dashed = naming && node.type === 'dashed-ident' ? node.value : undefined;
+    const isNaming = naming ||
+        (node.property === 'custom' && NAMING.has(node.value?.name)) ||
+        (node.property === 'unparsed' && NAMING.has(node.value?.propertyId?.property));
+    let result = node;
+    const set = (field, next) => {
+        if (result === node)
+            result = { ...node };
+        result[field] = next;
+    };
+    for (const [field, child] of Object.entries(node)) {
+        const next = rename(child, local, isNaming);
+        if (next !== child)
+            set(field, next);
+    }
+    if (typeof ident === 'string' && local.has(ident))
+        set('ident', local.get(ident));
+    if (typeof property === 'string' && local.has(property))
+        set('property', local.get(property));
+    if (typeof dashed === 'string' && local.has(dashed))
+        set('value', local.get(dashed));
+    // `--x: 1` and `@property --x`.
+    if ((node.property === 'custom' || node.type === 'property') && local.has(result.value?.name))
+        set('value', { ...result.value, name: local.get(result.value.name) });
+    return result;
+}
+const prepended = new Map();
+// The rules and custom properties prepended files output. They're parsed once
+// more on their own, and only with this setting on, since within a block they
+// can't be told apart from its own rules.
+function prependedOf(lang, options) {
+    const code = options.prepend[lang];
+    const cacheKey = `${lang}\n${code}`;
+    let result = prepended.get(cacheKey);
+    if (result !== undefined)
+        return result;
+    result = { keys: new Set(), names: new Set() };
+    if (code.trim() !== '') {
+        const css = lang === 'scss' && options.sass !== null ? options.sass.compileString(code).css : code;
+        const parsed = { atoms: [], globals: [], composes: [] };
+        parseRules(css, options.lightningcss, () => null, (rules) => walk(rules, [], null, parsed, () => null));
+        for (const global of parsed.globals) {
+            result.keys.add(global.key);
+            eachDeclared(global.rule, (name) => result.names.add(name));
+        }
+    }
+    prepended.set(cacheKey, result);
+    return result;
+}
+// Localizes the custom properties a scope (a block, or a whole stylesheet file)
+// declares. `scope` identifies it, and has to be stable between builds.
+export function localizeCustomProperties(atoms, globals, scope, lang, options) {
+    const shared = prependedOf(lang, options);
+    const local = new Map();
+    const declared = (name) => {
+        if (shared.names.has(name) || local.has(name))
+            return;
+        const hash = createHash('sha256').update(`${scope}\n${name}`).digest('base64url').slice(0, 16);
+        local.set(name, VARIABLE_PREFIX + hash);
+    };
+    for (const atom of atoms)
+        eachDeclared(atom.declaration.value, declared);
+    const own = (global) => !shared.keys.has(global.key);
+    for (const global of globals)
+        if (own(global))
+            eachDeclared(global.rule, declared);
+    if (local.size === 0)
+        return { globals, atoms: (list) => list };
+    return {
+        globals: globals.map((global) => {
+            if (!own(global))
+                return global;
+            const rule = rename(global.rule, local);
+            if (rule === global.rule)
+                return global;
+            return {
+                ...global,
+                key: key(rule),
+                rule,
+                overrideKey: global.overrideKey === null ? null : overrideKey(rule),
+            };
+        }),
+        atoms: (list) => list.map((atom) => {
+            const value = rename(atom.declaration.value, local);
+            const atRules = atom.atRules.map((segment) => {
+                const rule = rename(segment.rule, local);
+                return rule === segment.rule ? segment : { key: key(valueKey(rule)), rule };
+            });
+            const unchanged = value === atom.declaration.value && atRules.every((s, i) => s === atom.atRules[i]);
+            if (unchanged)
+                return atom;
+            return {
+                ...atom,
+                atRules,
+                property: local.get(atom.property) ?? atom.property,
+                declaration: {
+                    ...atom.declaration,
+                    key: key(value) + (atom.declaration.important ? '!' : ''),
+                    value,
+                },
+            };
+        }),
+    };
+}
+// The same key `walk` gives an at-rule.
+const valueKey = (rule) => ({ type: rule.type, value: valueOf(rule) });

package/dist/compiler/index.d.ts

@@ -1,7 +1,8 @@
-export { Compiler, createCompiler } from './compiler.ts';
-export type { Block, ClassUsage, CompiledStylesheet, CompilerOptions, Library, PrependFiles, Source, Stylesheet, } from './compiler.ts';
+export { Compiler, createCompiler, interpolatedBlock } from './compiler.ts';
+export type { Block, BlockVariable, ClassUsage, CompiledStylesheet, CompilerOptions, Library, PrependFiles, Source, Stylesheet, } from './compiler.ts';
 export { PreStyleError } from './block.ts';
 export type { Lang, LightningOptions, Position } from './block.ts';
+export type { Slot } from './interpolate.ts';
 export type { Printed } from './print.ts';
 export { checkField, readConfig } from './config.ts';
 export type { PackageConfig } from './config.ts';

package/dist/compiler/index.js

@@ -1,4 +1,4 @@
-export { Compiler, createCompiler } from './compiler.js';
+export { Compiler, createCompiler, interpolatedBlock } from './compiler.js';
 export { PreStyleError } from './block.js';
 export { checkField, readConfig } from './config.js';
 export { findLibraries } from './libraries.js';

package/dist/compiler/interpolate.d.ts

@@ -0,0 +1,11 @@
+import type { Lang } from './block.ts';
+export interface Slot {
+    strings: string[];
+    expressions: number[];
+}
+export interface Interpolated {
+    code: string;
+    slots: Slot[];
+}
+export declare const SLOT_PREFIX = "--__pre-style-slot-";
+export declare function interpolate(strings: string[], expressions: string[], lang: Lang): Interpolated;