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

package/dist/compiler/interpolate.js

@@ -0,0 +1,318 @@
+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 UNQUOTED_URL_MESSAGE = '`${…}` can\'t be used in an unquoted `url()`. Add quotes: `url("${path}")`.';
+const SASS_MESSAGE = "`#{…}` can't be used in the same value as `${…}`, because that value is set at runtime, after Sass has run. Use a Sass variable in a separate declaration.";
+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 span = text.slice(start, end);
+        if (lang === 'scss' && span.includes('#{'))
+            fail(SASS_MESSAGE, start);
+        const first = expressionIndex(start);
+        const parts = span.split(EXPRESSION);
+        const used = [];
+        let quote = null;
+        for (let i = 0; i < span.length; i++) {
+            const ch = span[i];
+            if (ch === '\\')
+                i++;
+            else if (ch === EXPRESSION) {
+                const index = first + used.length;
+                used.push(quote === null ? index : ~index);
+            }
+            else if (quote === null ? ch === '"' || ch === "'" : ch === quote)
+                quote = quote === null ? ch : null;
+        }
+        const index = slots.push({ strings: parts, expressions: used }) - 1;
+        const lines = newlines(span) + used.reduce((n, e) => n + newlines(expressions[e < 0 ? ~e : 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;
+    // Where the last `#{…}` ended, since it can't touch a slot.
+    let sassEnd = -1;
+    // The end of the string starting at `start`.
+    const stringEnd = (start) => {
+        let i = start + 1;
+        for (; i < text.length && text[i] !== text[start]; i++) {
+            if (text[i] === '\\')
+                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);
+            const string = text.slice(i, end);
+            // `"Count: ${i}"`: the whole string is the value, since a `var()` can't
+            // go inside one.
+            if (string.includes(EXPRESSION)) {
+                checkPosition(i, end);
+                const slot = addSlot(i, end);
+                code += `var(${slot.name})${slot.lines}`;
+            }
+            else
+                code += string;
+            i = end;
+            tokenStart = i;
+            tokenCode = code.length;
+            continue;
+        }
+        const standsAlone = i === 0 || !IDENT.test(text[i - 1]);
+        // A `url()` can't hold a `var()`, so it's a value as a whole.
+        if (standsAlone && text.slice(i, i + 4).toLowerCase() === 'url(') {
+            const argument = /\s*/y;
+            argument.lastIndex = i + 4;
+            const firstAt = i + 4 + argument.exec(text)[0].length;
+            const first = text[firstAt];
+            const quoted = first === '"' || first === "'";
+            const close = text.indexOf(')', quoted ? stringEnd(firstAt) : i);
+            const end = close === -1 ? text.length : close + 1;
+            const inside = text.slice(i, end).indexOf(EXPRESSION);
+            if (inside !== -1 && !quoted)
+                fail(UNQUOTED_URL_MESSAGE, i + inside);
+            if (inside !== -1 || !quoted) {
+                // `url("${path}")`: the whole `url()` is the value.
+                if (inside !== -1) {
+                    checkPosition(i, end);
+                    const slot = addSlot(i, end);
+                    code += `var(${slot.name})${slot.lines}`;
+                }
+                else
+                    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);
+            if (tokenStart === sassEnd || (text[end - 1] === '#' && text[end] === '{'))
+                fail(SASS_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 === '}') {
+            // Sass's `#{…}` is part of a value, so it doesn't end a statement.
+            if (open.pop()?.type === '#{')
+                sassEnd = i + 1;
+            else 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[];
+};