@pre.style/core 3.1.0-alpha.1 → 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/selectors.d.ts

@@ -6,3 +6,6 @@ export declare function compose(parent: SelectorList, child: SelectorList): Sele
 export declare function withClass(selectors: SelectorList, className: string): SelectorList;
 export declare function lvhfaRank(selectors: SelectorList): number;
 export declare function repair<T>(selectors: T): T;
+type Specificity = [ids: number, classes: number, types: number];
+export declare function specificity(selectors: SelectorList): Specificity;
+export {};

package/dist/compiler/selectors.js

@@ -128,3 +128,41 @@ export function repair(selectors) {
     };
     return fix(selectors);
 }
+// A selector list's specificity: its most specific selector's.
+export function specificity(selectors) {
+    let best = [0, 0, 0];
+    for (const selector of selectors) {
+        const current = ofSelector(selector);
+        const difference = current[0] - best[0] || current[1] - best[1] || current[2] - best[2];
+        if (difference > 0)
+            best = current;
+    }
+    return best;
+}
+function ofSelector(selector) {
+    const total = [0, 0, 0];
+    const add = (other) => {
+        total[0] += other[0];
+        total[1] += other[1];
+        total[2] += other[2];
+    };
+    for (const component of selector) {
+        if (component.type === 'id')
+            total[0]++;
+        else if (component.type === 'class' || component.type === 'attribute')
+            total[1]++;
+        else if (component.type === 'type' || component.type === 'pseudo-element')
+            total[2]++;
+        else if (component.type === 'pseudo-class' && component.kind !== 'where') {
+            // `:is()`, `:not()`, and `:has()` count as their most specific argument.
+            if (component.selectors)
+                add(specificity(component.selectors));
+            else {
+                total[1]++;
+                if (component.of)
+                    add(specificity(component.of));
+            }
+        }
+    }
+    return total;
+}

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[];
+};