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

package/dist/compiler/interpolate.js

@@ -0,0 +1,282 @@
+import { PreStyleError } from './block.js';
+// Each slot is written as this variable, plus its index, until the block is
+// parsed. See `variables.ts`.
+export const SLOT_PREFIX = '--__pre-style-slot-';
+// Stands for an expression while scanning, since it can't be in CSS.
+const EXPRESSION = '\0';
+// Ends a token, so `${w}px` is one slot, and `${a} ${b}` is two.
+const DELIMITER = /[\s,()/;:{}!"']/;
+const IDENT = /[\w-]/;
+// At-rules that can't read a runtime value: their descriptors don't accept
+// `var()`, or, for `@page`, have no element to read it from. Others, such as
+// `@keyframes`, `@position-try`, and `@function`, read it from the element
+// that uses them.
+const NO_VARIABLES = /^@(font-face|property|page|counter-style|font-feature-values|font-palette-values|view-transition)\b/i;
+// Sass at-rules whose arguments are evaluated, rather than written out.
+const SASS_AT_RULES = /^@(include|return|if|else|each|for|while|debug|warn|error|function|mixin)\b/;
+const POSITION_MESSAGE = "`${…}` can only be used in a declaration's value, because it becomes a `var()`, which isn't valid in selectors, property names, or at-rule conditions. To share media queries, use Sass variables.";
+const NO_VARIABLES_MESSAGE = "`${…}` can't be used here: this at-rule doesn't accept `var()`, or has no element for the runtime to set it on.";
+const QUOTED_MESSAGE = '`${…}` can\'t be used inside a quoted string or `url()`, because it becomes a `var()`, which doesn\'t work there. Pass the whole value instead: `content: ${JSON.stringify(label)}`, or `--image: ${`url("${path}")`}` with `background-image: var(--image)`.';
+const TYPE_RUNTIME_MESSAGE = "`type()` and its default are written to the CSS file, so they can't use `${…}`.";
+const TYPE_DEFAULT_MESSAGE = '`type()` needs a default, because a typed `@property` requires an `initial-value`: `var(${w}px type(<length>), 120px)`.';
+const FUNCTION_MESSAGE = "`${…}` can't be used as a function's name.";
+// The optional type at the end of `var()`'s first argument, as in `attr()`.
+const TYPE = /\s+type\(\s*(.*?)\s*\)\s*$/s;
+const newlines = (text) => text.split('\n').length - 1;
+// Replaces each `${…}` in a block with a placeholder variable. `strings` are
+// the text around the expressions, and `expressions` their source, which is
+// only used for positions, so errors and lines match the file.
+export function interpolate(strings, expressions, lang) {
+    const text = strings.join(EXPRESSION);
+    const slots = [];
+    // The position of the expression at an offset in `text`.
+    const positionAt = (offset) => {
+        let written = '';
+        let index = 0;
+        for (let i = 0; i < offset; i++) {
+            if (text[i] === EXPRESSION)
+                written += `\${${expressions[index++]}}`;
+            else
+                written += text[i];
+        }
+        const lastLine = written.lastIndexOf('\n');
+        return { line: newlines(written), column: written.length - lastLine };
+    };
+    const fail = (message, offset) => {
+        throw new PreStyleError(message, positionAt(offset));
+    };
+    // How many expressions come before an offset.
+    const expressionIndex = (offset) => text.slice(0, offset).split(EXPRESSION).length - 1;
+    // Adds a slot for the text at [start, end), and returns its placeholder's
+    // name, and the newlines to write after it, so later lines stay in place.
+    const addSlot = (start, end) => {
+        const first = expressionIndex(start);
+        const parts = text.slice(start, end).split(EXPRESSION);
+        const used = Array.from({ length: parts.length - 1 }, (_, i) => first + i);
+        const index = slots.push({ strings: parts, expressions: used }) - 1;
+        const lines = newlines(text.slice(start, end)) + used.reduce((n, e) => n + newlines(expressions[e]), 0);
+        return { name: `${SLOT_PREFIX}${index}`, lines: '\n'.repeat(lines) };
+    };
+    // What's open: parentheses and Sass's `#{…}`, which don't end statements,
+    // and blocks, with the text before each.
+    const open = [];
+    const atStatementLevel = () => open.length === 0 || open.at(-1).type === '{';
+    let statementStart = 0;
+    // The end of the string starting at `start`, an error if it has an
+    // expression in it.
+    const stringEnd = (start) => {
+        let i = start + 1;
+        for (; i < text.length && text[i] !== text[start]; i++) {
+            if (text[i] === '\\')
+                i++;
+            else if (text[i] === EXPRESSION)
+                fail(QUOTED_MESSAGE, i);
+        }
+        return i + 1;
+    };
+    // What ends the statement at `start`: `;`, `{`, `}`, or nothing.
+    const statementEnd = (start) => {
+        let depth = 0;
+        for (let i = start; i < text.length; i++) {
+            const ch = text[i];
+            if (ch === '"' || ch === "'")
+                i = stringEnd(i) - 1;
+            else if (ch === '(')
+                depth++;
+            else if (ch === ')')
+                depth--;
+            else if (ch === '#' && text[i + 1] === '{') {
+                depth++;
+                i++;
+            }
+            else if (ch === '}' && depth > 0)
+                depth--;
+            else if (depth === 0 && (ch === ';' || ch === '{' || ch === '}'))
+                return ch;
+        }
+        return '';
+    };
+    // Checks that a slot starting at `start` and ending at `end` is in a
+    // declaration's value.
+    const checkPosition = (start, end) => {
+        const offset = text.indexOf(EXPRESSION, start);
+        for (const { type, header } of open)
+            if (type === '{' && NO_VARIABLES.test(header.trim()))
+                fail(NO_VARIABLES_MESSAGE, offset);
+        const statement = text.slice(statementStart, start).trimStart();
+        if (statement.startsWith('@')) {
+            if (lang !== 'scss' || !SASS_AT_RULES.test(statement))
+                fail(POSITION_MESSAGE, offset);
+            return;
+        }
+        if (!statement.includes(':') || statementEnd(end) === '{')
+            fail(POSITION_MESSAGE, offset);
+    };
+    // The end of `var()`'s first argument, starting at `start`.
+    const firstArgumentEnd = (start) => {
+        let depth = 0;
+        for (let i = start; i < text.length; i++) {
+            const ch = text[i];
+            if (ch === '"' || ch === "'")
+                i = stringEnd(i) - 1;
+            else if (ch === '(')
+                depth++;
+            else if (ch === ')') {
+                if (depth === 0)
+                    return i;
+                depth--;
+            }
+            else if (ch === ',' && depth === 0)
+                return i;
+        }
+        return text.length;
+    };
+    // The parenthesis that closes the `var()` whose fallback starts at `start`.
+    const closingParenthesis = (start) => {
+        let end = firstArgumentEnd(start);
+        while (text[end] === ',')
+            end = firstArgumentEnd(end + 1);
+        return end;
+    };
+    let code = '';
+    // Where the current token starts, in `text` and in `code`.
+    let tokenStart = 0;
+    let tokenCode = 0;
+    // Keeps a comment's text, without its expressions, and the lines they took.
+    const comment = (start, end) => {
+        const first = expressionIndex(start);
+        const parts = text.slice(start, end).split(EXPRESSION);
+        let lines = '';
+        for (let i = 0; i < parts.length - 1; i++)
+            lines += '\n'.repeat(newlines(expressions[first + i]));
+        return parts.join('') + lines;
+    };
+    let i = 0;
+    while (i < text.length) {
+        const ch = text[i];
+        if (ch === '/' && text[i + 1] === '*') {
+            const close = text.indexOf('*/', i + 2);
+            const end = close === -1 ? text.length : close + 2;
+            code += comment(i, end);
+            i = end;
+            tokenStart = i;
+            tokenCode = code.length;
+            continue;
+        }
+        if (lang === 'scss' && ch === '/' && text[i + 1] === '/') {
+            const newline = text.indexOf('\n', i);
+            const end = newline === -1 ? text.length : newline;
+            code += comment(i, end);
+            i = end;
+            continue;
+        }
+        if (ch === '"' || ch === "'") {
+            const end = stringEnd(i);
+            code += text.slice(i, end);
+            i = end;
+            tokenStart = i;
+            tokenCode = code.length;
+            continue;
+        }
+        const standsAlone = i === 0 || !IDENT.test(text[i - 1]);
+        // An unquoted `url()` is one token, which can't hold a `var()`.
+        if (standsAlone && text.slice(i, i + 4).toLowerCase() === 'url(') {
+            const argument = /\s*/y;
+            argument.lastIndex = i + 4;
+            const first = text[i + 4 + argument.exec(text)[0].length];
+            if (first !== '"' && first !== "'") {
+                const close = text.indexOf(')', i);
+                const end = close === -1 ? text.length : close + 1;
+                const inside = text.indexOf(EXPRESSION, i);
+                if (inside !== -1 && inside < end)
+                    fail(QUOTED_MESSAGE, inside);
+                code += text.slice(i, end);
+                i = end;
+                tokenStart = i;
+                tokenCode = code.length;
+                continue;
+            }
+        }
+        // `var(${w}px, 120px)`: the first argument is one slot, and what follows
+        // is an ordinary fallback.
+        if (standsAlone && text.slice(i, i + 4).toLowerCase() === 'var(') {
+            const end = firstArgumentEnd(i + 4);
+            const raw = text.slice(i + 4, end);
+            const typed = TYPE.exec(raw);
+            if (typed?.[1].includes(EXPRESSION))
+                fail(TYPE_RUNTIME_MESSAGE, text.indexOf(EXPRESSION, i));
+            const argument = typed === null ? raw : raw.slice(0, typed.index);
+            if (argument.includes(EXPRESSION)) {
+                const start = i + 4 + (argument.length - argument.trimStart().length);
+                const trimmedEnd = i + 4 + argument.trimEnd().length;
+                checkPosition(start, end);
+                // `type(*)` is the same as no type.
+                const syntax = typed === null || typed[1] === '*' ? null : typed[1];
+                if (syntax !== null) {
+                    if (text[end] !== ',')
+                        fail(TYPE_DEFAULT_MESSAGE, start);
+                    const close = closingParenthesis(end + 1);
+                    const inDefault = text.slice(end, close).indexOf(EXPRESSION);
+                    if (inDefault !== -1)
+                        fail(TYPE_RUNTIME_MESSAGE, end + inDefault);
+                }
+                const slot = addSlot(start, trimmedEnd);
+                const type = syntax === null ? '' : `-t${Buffer.from(syntax).toString('hex')}`;
+                const skipped = '\n'.repeat(newlines(text.slice(trimmedEnd, end)));
+                code += `var(${slot.name}${type}${slot.lines}${skipped}`;
+                open.push({ type: '(', header: '' });
+                i = end;
+                tokenStart = i;
+                tokenCode = code.length;
+                continue;
+            }
+        }
+        if (ch === EXPRESSION) {
+            let end = i;
+            while (end < text.length && !DELIMITER.test(text[end]))
+                end++;
+            if (text[end] === '(')
+                fail(FUNCTION_MESSAGE, i);
+            checkPosition(tokenStart, end);
+            const slot = addSlot(tokenStart, end);
+            code = `${code.slice(0, tokenCode)}var(${slot.name})${slot.lines}`;
+            i = end;
+            tokenStart = i;
+            tokenCode = code.length;
+            continue;
+        }
+        if (ch === '#' && text[i + 1] === '{') {
+            open.push({ type: '#{', header: '' });
+            code += '#{';
+            i += 2;
+            continue;
+        }
+        if (ch === '(')
+            open.push({ type: '(', header: '' });
+        else if (ch === ')') {
+            if (open.at(-1)?.type === '(')
+                open.pop();
+        }
+        else if (ch === '{') {
+            if (atStatementLevel()) {
+                open.push({ type: '{', header: text.slice(statementStart, i) });
+                statementStart = i + 1;
+            }
+        }
+        else if (ch === '}') {
+            if (open.length > 0)
+                open.pop();
+            if (atStatementLevel())
+                statementStart = i + 1;
+        }
+        else if (ch === ';' && atStatementLevel())
+            statementStart = i + 1;
+        code += ch;
+        i++;
+        if (DELIMITER.test(ch)) {
+            tokenStart = i;
+            tokenCode = code.length;
+        }
+    }
+    return { code, slots };
+}

package/dist/compiler/libraries.d.ts

@@ -4,6 +4,7 @@ export interface LibraryConfig {
     exclude?: string | string[];
     prependFiles?: PrependFiles;
     keyframeLocalization?: boolean;
+    customPropertyLocalization?: boolean;
 }
 export interface ResolvedLibrary {
     name: string;
@@ -12,5 +13,6 @@ export interface ResolvedLibrary {
     exclude: string[];
     prependFiles?: PrependFiles;
     keyframeLocalization?: boolean;
+    customPropertyLocalization?: boolean;
 }
 export declare function findLibraries(root: string, overrides?: Record<string, LibraryConfig | boolean>, warn?: (message: string) => void): ResolvedLibrary[];

package/dist/compiler/libraries.js

@@ -3,7 +3,13 @@ import { dirname, join } from 'node:path';
 import { checkField } from './config.js';
 // Keys a library's field shares with the app's. `libraries` and
 // `quirksMode` only apply to the app.
-const SHARED_KEYS = new Set(['include', 'exclude', 'prependFiles', 'keyframeLocalization']);
+const SHARED_KEYS = new Set([
+    'include',
+    'exclude',
+    'prependFiles',
+    'keyframeLocalization',
+    'customPropertyLocalization',
+]);
 const APP_KEYS = new Set(['libraries', 'quirksMode']);
 const DEFAULT_INCLUDE = ['**/*.{js,jsx,ts,tsx,mjs,cjs,mts,cts,astro}'];
 const readPackage = (dir) => JSON.parse(readFileSync(join(dir, 'package.json'), 'utf8'));
@@ -44,7 +50,7 @@ export function findLibraries(root, overrides = {}, warn = () => { }) {
             for (const warning of checkField(config, where, new Set([...SHARED_KEYS, ...APP_KEYS])))
                 warn(warning);
         }
-        const { include, exclude, prependFiles, keyframeLocalization } = config === true ? {} : config;
+        const { include, exclude, prependFiles, keyframeLocalization, customPropertyLocalization } = config === true ? {} : config;
         libraries.push({
             name,
             dir,
@@ -52,6 +58,7 @@ export function findLibraries(root, overrides = {}, warn = () => { }) {
             exclude: exclude === undefined ? [] : [exclude].flat(),
             prependFiles,
             keyframeLocalization,
+            customPropertyLocalization,
         });
         // A library's peer dependencies are installed by the app, and found the
         // same way from the library.

package/dist/compiler/mapper.js

@@ -29,13 +29,15 @@ async function openProject(params) {
     const compiler = createCompiler({
         root: app.dir,
         prependFiles: app.config.prependFiles,
-        libraries: libraries.map(({ dir, prependFiles, keyframeLocalization }) => ({
+        libraries: libraries.map(({ dir, prependFiles, keyframeLocalization, customPropertyLocalization }) => ({
             dir,
             prependFiles,
             keyframeLocalization,
+            customPropertyLocalization,
         })),
         quirksMode: app.config.quirksMode,
         keyframeLocalization: app.config.keyframeLocalization,
+        customPropertyLocalization: app.config.customPropertyLocalization,
         warn: () => { },
     });
     projects.set(params.projectHandle, compiler);

package/dist/compiler/stylesheet.js

@@ -1,6 +1,7 @@
 import { pathToFileURL, fileURLToPath } from 'node:url';
 import { atRuleInfo } from './at-rules.js';
 import { addDeclarations, addGlobal, dropOverridden, key, parseRules, PreStyleError, valueOf, walk, } from './block.js';
+import { localizeCustomProperties } from './custom-properties.js';
 import { localizeKeyframes } from './keyframes.js';
 import { compose, isElement } from './selectors.js';
 // Classes used as context for another class (`.card:hover .title`), or in a
@@ -145,6 +146,14 @@ export function parseStylesheet(code, lang, file, id, options) {
     }
     for (const target of classes.values())
         target.atoms = dropOverridden(target.atoms);
+    // Custom properties are local to the whole file, like keyframes.
+    if (options.customPropertyLocalization) {
+        const all = [...classes.values()].flatMap((target) => target.atoms);
+        const local = localizeCustomProperties(all, parsed.globals, `file\n${id}`, lang, options);
+        parsed.globals = local.globals;
+        for (const target of classes.values())
+            target.atoms = local.atoms(target.atoms);
+    }
     // Keyframes are local to the whole file, as in CSS Modules.
     if (options.keyframeLocalization) {
         const local = localizeKeyframes(parsed.globals);

package/dist/compiler/variables.d.ts

@@ -0,0 +1,13 @@
+import type { Atom, GlobalRule } from './block.ts';
+export declare const VARIABLE_PREFIX = "--\0pre.style-variable:";
+export interface Variable {
+    key: string;
+    property: string | null;
+    slot: number;
+    selector: string[] | null;
+}
+export declare function extractVariables(atoms: Atom[], globals: GlobalRule[]): {
+    atoms: Atom[];
+    globals: GlobalRule[];
+    variables: Variable[];
+};

package/dist/compiler/variables.js

@@ -0,0 +1,272 @@
+import { createHash } from 'node:crypto';
+import { transform } from 'lightningcss';
+import { key, overrideKey, PreStyleError, valueOf } from './block.js';
+import { atRuleInfo } from './at-rules.js';
+import { SLOT_PREFIX } from './interpolate.js';
+import { print } from './print.js';
+import { withClass } from './selectors.js';
+// A variable a block's runtime values set. In parsed rules, a generated
+// variable's name is this prefix and a hash of what it's for, and the compiler
+// gives it a name when printing, like localized keyframes.
+export const VARIABLE_PREFIX = '--\0pre.style-variable:';
+const isSlot = (node) => {
+    const value = node;
+    return value?.type === 'var' && value.value.name.ident.startsWith(SLOT_PREFIX);
+};
+// A placeholder's slot, and its type from `type()`, which is in its name (in
+// hex) so that blocks differing only by type don't share a parse.
+const parseSlot = (node) => {
+    const [, slot, type] = /^(\d+)(?:-t([\da-f]+))?/.exec(node.value.name.ident.slice(SLOT_PREFIX.length));
+    return {
+        slot: Number(slot),
+        syntax: type === undefined ? null : Buffer.from(type, 'hex').toString(),
+    };
+};
+// Calls `visit` for each slot in a value, in the order they're written.
+function eachSlot(value, visit) {
+    if (Array.isArray(value)) {
+        for (const item of value)
+            eachSlot(item, visit);
+        return;
+    }
+    if (value === null || typeof value !== 'object')
+        return;
+    if (isSlot(value))
+        visit(value);
+    for (const child of Object.values(value))
+        eachSlot(child, visit);
+}
+const IGNORED = (token) => token.type === 'token' && token.value?.type === 'white-space';
+// The slot a declaration is entirely made of, for `--brand: ${color}` directly
+// on the element, which can set `--brand` itself. Under at-rules or a selector
+// variant, the generated class would have to be too, so those use a variable.
+function directSlot(atom) {
+    if (atom.atRules.length > 0 || atom.variant !== null || atom.declaration.important)
+        return null;
+    const declaration = atom.declaration.value;
+    // Lightning CSS also uses `custom` for properties it doesn't parse, such as
+    // `content` with a `var()`.
+    if (declaration.property !== 'custom' || !atom.property.startsWith('--'))
+        return null;
+    const tokens = declaration.value.value.filter((t) => !IGNORED(t));
+    const [token] = tokens;
+    if (tokens.length !== 1 || !isSlot(token))
+        return null;
+    return !token.value.fallback || parseSlot(token).syntax !== null ? token : null;
+}
+const hash = (identity) => createHash('sha256').update(JSON.stringify(identity)).digest('base64url').slice(0, 16);
+const SELF = '__pre-style-self__';
+// A declaration's selector, for where to set its variables. Null when it's the
+// element itself, as for `&:hover` and `.dark &`.
+function selectorOf(atom) {
+    if (atom.variant === null)
+        return null;
+    const selectors = withClass(atom.variant.selectors, SELF);
+    const onElement = selectors.every((selector) => {
+        const compound = selector.slice(selector.findLastIndex((c) => c.type === 'combinator') + 1);
+        return (compound.some((c) => c.type === 'class' && c.name === SELF) &&
+            !compound.some((c) => c.type === 'pseudo-element'));
+    });
+    if (onElement)
+        return null;
+    const rule = {
+        type: 'style',
+        value: {
+            selectors,
+            // Empty rules aren't printed.
+            declarations: {
+                declarations: [
+                    {
+                        property: 'custom',
+                        value: {
+                            name: '--z',
+                            value: [{ type: 'token', value: { type: 'ident', value: 'z' } }],
+                        },
+                    },
+                ],
+            },
+            rules: [],
+            loc: { source_index: 0, line: 0, column: 1 },
+        },
+    };
+    const { code } = print([rule], [], {}, false);
+    return code
+        .slice(0, code.indexOf('{'))
+        .trim()
+        .replace(/\s*\n\s*/g, ' ')
+        .split(`.${SELF}`);
+}
+const atomIdentity = (atom, index) => [
+    atom.atRules.map((segment) => segment.key),
+    atom.variant?.key ?? '',
+    atom.property,
+    index,
+];
+// `@property --a { syntax: "*"; inherits: false; }`. Without it, an element
+// with no value of its own takes its parent's instead of its default.
+const registration = (name) => {
+    const rule = {
+        type: 'property',
+        value: {
+            name,
+            syntax: { type: 'universal' },
+            inherits: false,
+            initialValue: null,
+            loc: { source_index: 0, line: 0, column: 1 },
+        },
+    };
+    return {
+        key: key(rule),
+        rule,
+        hoist: atRuleInfo('property').hoist,
+        overrideKey: null,
+        position: null,
+    };
+};
+// Units and functions that depend on where they're used. Browsers drop a
+// typed `@property` whose `initial-value` has them (tested in Chromium), and
+// Lightning CSS doesn't report them.
+const NOT_INDEPENDENT = /(?<![\w-])[+-]?[\d.]+(?:e[+-]?\d+)?(?:em|rem|ex|rex|ch|rch|lh|rlh|cap|rcap|ic|ric|cqw|cqh|cqi|cqb|cqmin|cqmax)\b|\b(?:env|attr)\(/i;
+const QUOTED = /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g;
+// A slot's default, as CSS.
+function defaultText(node) {
+    const rule = {
+        type: 'style',
+        value: {
+            selectors: [[{ type: 'class', name: 'z' }]],
+            declarations: {
+                declarations: [
+                    { property: 'custom', value: { name: '--z', value: node.value.fallback ?? [] } },
+                ],
+            },
+            rules: [],
+            loc: { source_index: 0, line: 0, column: 1 },
+        },
+    };
+    const { code } = print([rule], [], {}, false);
+    return /--z:\s*(.*?);?\s*\}/s.exec(code)[1];
+}
+// `@property --a { syntax: "<length>"; inherits: false; initial-value: 1px; }`.
+function typedRegistration(name, syntax, initial, position) {
+    const invalid = (reason, cause) => new PreStyleError(`\`${initial}\` can't be the default of \`type(${syntax})\`: ${reason}`, position, { cause });
+    if (NOT_INDEPENDENT.test(initial.replace(QUOTED, '')))
+        throw invalid("a typed variable's default can't depend on where it's used, such as `em`, `rem`, container units, `env()`, or `attr()`, or browsers drop its `@property` rule. Use an absolute value, or leave out `type()`.");
+    let parsed;
+    try {
+        transform({
+            filename: 'type.css',
+            code: Buffer.from(`@property --z{syntax:${JSON.stringify(syntax)};inherits:false;initial-value:${initial}}`),
+            visitor: {
+                StyleSheetExit(sheet) {
+                    [parsed] = sheet.rules;
+                },
+            },
+        });
+    }
+    catch (error) {
+        throw invalid(`it isn't valid for that type (${error.message}).`, error);
+    }
+    const rule = { ...parsed, value: { ...valueOf(parsed), name } };
+    return {
+        key: key(rule),
+        rule,
+        hoist: atRuleInfo('property').hoist,
+        overrideKey: null,
+        position,
+    };
+}
+const SLOT_MESSAGE = "`${…}` can only be used in a declaration's value, because it becomes a `var()`, which isn't valid here.";
+// Points a slot at its variable, and registers the variable. A typed
+// variable's default moves to its `initial-value`, so each type and default
+// has its own variable.
+function useVariable(node, identity, slot, syntax, variables, added, position, selector = null) {
+    const initial = syntax === null ? null : defaultText(node);
+    const variable = hash([identity, syntax, initial]);
+    const name = VARIABLE_PREFIX + variable;
+    variables.push({ key: variable, property: null, slot, selector });
+    node.value.name.ident = name;
+    if (syntax !== null)
+        node.value.fallback = null;
+    if (added.has(variable))
+        return;
+    added.set(variable, syntax === null ? registration(name) : typedRegistration(name, syntax, initial, position));
+}
+// Replaces the slots in a global rule, such as a `@keyframes`, with variables
+// identified by the rule and their place in it, so the same rule in any block
+// shares them.
+function globalVariables(global, variables, added) {
+    const rule = structuredClone(global.rule);
+    const slots = [];
+    eachSlot(rule, (node) => slots.push(node));
+    const parsed = slots.map(parseSlot);
+    slots.forEach((node, index) => {
+        const type = parsed[index].syntax === null ? '' : `:${parsed[index].syntax}`;
+        node.value.name.ident = `${SLOT_PREFIX}${index}${type}`;
+    });
+    const identity = key(rule);
+    slots.forEach((node, index) => {
+        const { slot, syntax } = parsed[index];
+        useVariable(node, [identity, index], slot, syntax, variables, added, global.position);
+    });
+    const json = key(rule);
+    // Anywhere else, such as a selector Sass built, it isn't a `var()` node.
+    if (json.includes(SLOT_PREFIX))
+        throw new PreStyleError(SLOT_MESSAGE, global.position);
+    return { ...global, key: json, rule };
+}
+// Turns a parsed block's placeholder variables into its real ones. Runs after
+// overridden atoms are dropped, so their slots are left out. Variables are
+// identified by what they're for, so `width: ${w}px` in any block shares one
+// variable and class.
+export function extractVariables(atoms, globals) {
+    const variables = [];
+    const added = new Map();
+    const kept = globals.map((global) => global.key.includes(SLOT_PREFIX) ? globalVariables(global, variables, added) : global);
+    const keptAtoms = [];
+    for (const atom of atoms) {
+        const prefix = atom.atRules.map((segment) => segment.key).join() + (atom.variant?.key ?? '');
+        // Sass can move a placeholder, so its position is checked again here.
+        if (prefix.includes(SLOT_PREFIX))
+            throw new PreStyleError(SLOT_MESSAGE, atom.position);
+        if (!atom.declaration.key.includes(SLOT_PREFIX)) {
+            keptAtoms.push(atom);
+            continue;
+        }
+        const direct = directSlot(atom);
+        if (direct !== null) {
+            const { slot, syntax } = parseSlot(direct);
+            variables.push({
+                key: `direct:${atom.property}`,
+                property: atom.property,
+                slot,
+                selector: null,
+            });
+            // A typed custom property registers itself, under its own name.
+            if (syntax !== null) {
+                const registered = typedRegistration(atom.property, syntax, defaultText(direct), atom.position);
+                added.set(`direct:${atom.property}:${registered.key}`, {
+                    ...registered,
+                    overrideKey: overrideKey(registered.rule),
+                });
+            }
+            continue;
+        }
+        const value = structuredClone(atom.declaration.value);
+        const selector = selectorOf(atom);
+        let index = 0;
+        eachSlot(value, (node) => {
+            const { slot, syntax } = parseSlot(node);
+            const identity = atomIdentity(atom, index++);
+            useVariable(node, identity, slot, syntax, variables, added, atom.position, selector);
+        });
+        keptAtoms.push({
+            ...atom,
+            declaration: {
+                ...atom.declaration,
+                key: key(value) + (atom.declaration.important ? '!' : ''),
+                value,
+            },
+        });
+    }
+    return { atoms: keptAtoms, globals: [...kept, ...added.values()], variables };
+}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-export declare function css(_strings: TemplateStringsArray): string;
-export declare function scss(_strings: TemplateStringsArray): string;
+export type RuntimeValue = string | number | null | undefined;
+export declare function css(_strings: TemplateStringsArray, ..._values: RuntimeValue[]): string;
+export declare function scss(_strings: TemplateStringsArray, ..._values: RuntimeValue[]): string;
 import { createCn } from './cn.ts';
 export declare const cn: (...inputs: import("./cn.ts").ClassValue[]) => string;
 export { createCn };
-export type { ClassDictionary, ClassValue, CnTable } from './cn.ts';
+export type { ClassDictionary, ClassValue, CnLookup, CnTable } from './cn.ts';