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

package/dist/compiler/compiler.js

@@ -1,10 +1,13 @@
 import { readFileSync } from 'node:fs';
 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 { print } from './print.js';
-import { lvhfaRank, withClass } from './selectors.js';
+import { lvhfaRank, specificity, withClass } from './selectors.js';
+import { KEYFRAMES_PREFIX } from './keyframes.js';
 import { MARKER_PREFIX, markerKey, parseStylesheet } from './stylesheet.js';
+import { SHORTHANDS } from '../shorthands.js';
 const RANGES = {
     Digits: { start: '0030', end: '0039' },
     Uppercase: { start: '0041', end: '005A' },
@@ -45,14 +48,22 @@ export class Compiler {
     // most deeply nested library first.
     #prepend;
     #libraries;
+    // The layer the output is wrapped in, as parsed, or null for none.
+    #layer;
     #blocks = new Map();
     #stylesheets = new Map();
     #root;
-    // One name list for every class, and one for prefixes (the at-rules and
-    // selector variant a class is under), which only the `cn` table uses.
+    // 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.
     #names;
-    // How often each class and prefix is used across scanned blocks.
-    #counts = { atoms: new Map(), prefixes: new Map() };
+    // How often each class, prefix, and localized keyframes is used across
+    // scanned blocks.
+    #counts = {
+        atoms: new Map(),
+        prefixes: new Map(),
+        keyframes: new Map(),
+    };
     #atoms = new Map();
     #globals = new Map();
     // The current global for each overridable at-rule.
@@ -63,14 +74,23 @@ export class Compiler {
         this.#names = {
             atoms: new SweatMap(options.quirksMode ? QUIRKS_NAME_OPTIONS : NAME_OPTIONS),
             prefixes: new SweatMap(NAME_OPTIONS),
+            // Keyframes names are case-sensitive, even in quirks mode. They reach
+            // four characters only after about 227,000 names, so they're never
+            // `none` or a CSS-wide keyword.
+            keyframes: new SweatMap(NAME_OPTIONS),
         };
+        this.#layer = layerRule(options.layer);
         const root = options.root ?? process.cwd();
         this.#root = root;
         this.#prepend = readPrepend(root, options.prependFiles);
         this.#libraries = (options.libraries ?? [])
             .map((library) => {
             const dir = resolvePath(root, library.dir);
-            return { dir: dir + sep, prepend: readPrepend(dir, library.prependFiles) };
+            return {
+                dir: dir + sep,
+                prepend: readPrepend(dir, library.prependFiles),
+                keyframeLocalization: library.keyframeLocalization ?? false,
+            };
         })
             .toSorted((a, b) => b.dir.length - a.dir.length);
         this.#parseOptions = {
@@ -90,17 +110,21 @@ export class Compiler {
         const parsed = this.#parse(block);
         this.#register(block, parsed);
         this.#count(this.#resolveBlock(block, parsed, []));
+        for (const global of parsed.globals)
+            this.#countKeyframes(global.key);
     }
     // Pass 1 of naming for a stylesheet file: counts what each class uses.
     scanStylesheet(sheet) {
         const parsed = this.#parseSheet(sheet);
         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);
     }
     // 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']) {
+        for (const list of ['atoms', 'prefixes', 'keyframes']) {
             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);
@@ -123,15 +147,43 @@ export class Compiler {
     // anything, for tools that only need the names (such as the TypeScript
     // content mapper).
     classNames(sheet) {
-        const { prepend } = this.#library(sheet.file);
+        const { options } = this.#library(sheet.file);
         try {
-            const parsed = parseStylesheet(sheet.code, sheet.lang, sheet.file, relative(this.#root, sheet.file), { ...this.#parseOptions, prepend });
+            const parsed = parseStylesheet(sheet.code, sheet.lang, sheet.file, relative(this.#root, sheet.file), options);
             return [...parsed.classes.keys()];
         }
         catch (error) {
             throw error instanceof PreStyleError ? locate(error, fileBlock(sheet.file)) : error;
         }
     }
+    // Where each of the given classes is used, in output order. Classes that
+    // aren't in the output are left out. Sources are only kept with `sourceMap`
+    // on, and only list what has been compiled so far.
+    usages(classNames) {
+        const wanted = new Set(classNames);
+        const usages = [];
+        let order = 0;
+        const walk = (group) => {
+            for (const record of sortAtoms(group.atoms)) {
+                order++;
+                if (record.className !== null && wanted.has(record.className))
+                    usages.push(this.#usage(record, order));
+            }
+            for (const child of sortGroups([...group.children.values()]))
+                walk(child);
+        };
+        walk(this.#atomGroups());
+        return usages;
+    }
+    // Drops the places a file uses atoms, because it changed. They're added back
+    // as its blocks are compiled again. The atoms stay, like the rest of dev's
+    // output, which only grows.
+    forgetSources(file) {
+        for (const record of this.#atoms.values())
+            for (const [key, source] of record.sources)
+                if (source.file === file)
+                    record.sources.delete(key);
+    }
     // Each class of a stylesheet file, with its class string.
     stylesheet(sheet) {
         const parsed = this.#parseSheet(sheet);
@@ -160,8 +212,25 @@ export class Compiler {
             .filter((g) => g.global.hoist !== false)
             .toSorted((a, b) => a.global.hoist - b.global.hoist);
         const rest = globals.filter((g) => g.global.hoist === false);
-        const rules = [...hoisted, ...rest].map((g) => withLoc(g.global.key.includes(MARKER_KEY) ? this.#named(g.global.rule) : g.global.rule, loc(g.source)));
+        const named = (g) => withLoc(hasPlaceholder(g.global.key) ? this.#named(g.global.rule) : g.global.rule, loc(g.source));
+        let rules = [...hoisted, ...rest].map(named);
         rules.push(...this.#atomRules(loc));
+        // `@import` and `@namespace` can't be inside a layer, so they stay
+        // before it. `@layer` statements go inside, so the layers they order
+        // are the same ones blocks' `@layer` rules add to.
+        if (this.#layer !== null) {
+            rules = [
+                ...rules.filter(outside),
+                {
+                    type: 'layer-block',
+                    value: {
+                        ...valueOf(this.#layer),
+                        rules: rules.filter((r) => !outside(r)),
+                        loc: loc(null),
+                    },
+                },
+            ];
+        }
         return print(rules, sources, this.#parseOptions.lightningcss, this.#options.sourceMap ?? false);
     }
     // Classes on the element have an empty prefix.
@@ -177,19 +246,29 @@ export class Compiler {
         }
         return table;
     }
-    // A library's blocks and files get its prepended files instead of the
-    // app's.
+    // 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));
-        return { library, prepend: library === -1 ? this.#prepend : this.#libraries[library].prepend };
+        const { prepend, keyframeLocalization } = library === -1
+            ? { prepend: this.#prepend, keyframeLocalization: this.#options.keyframeLocalization }
+            : this.#libraries[library];
+        return {
+            library,
+            options: {
+                ...this.#parseOptions,
+                prepend,
+                keyframeLocalization: keyframeLocalization ?? false,
+            },
+        };
     }
     #parse(block) {
-        const { library, prepend } = this.#library(block.file);
+        const { library, options } = this.#library(block.file);
         const cacheKey = `${library}\n${block.lang}\n${block.code}`;
         let parsed = this.#blocks.get(cacheKey);
         if (parsed === undefined) {
             try {
-                parsed = parseBlock(block.code, block.lang, { ...this.#parseOptions, prepend });
+                parsed = parseBlock(block.code, block.lang, options);
             }
             catch (error) {
                 throw error instanceof PreStyleError ? locate(error, block) : error;
@@ -201,15 +280,12 @@ export class Compiler {
     // Parses a stylesheet file and registers its classes and global rules, so
     // the output includes them once the file is used.
     #parseSheet(sheet) {
-        const { library, prepend } = this.#library(sheet.file);
+        const { library, options } = this.#library(sheet.file);
         const cacheKey = `${library}\n${sheet.lang}\n${sheet.file}\n${sheet.code}`;
         let parsed = this.#stylesheets.get(cacheKey);
         if (parsed === undefined) {
             try {
-                parsed = parseStylesheet(sheet.code, sheet.lang, sheet.file, relative(this.#root, sheet.file), {
-                    ...this.#parseOptions,
-                    prepend,
-                });
+                parsed = parseStylesheet(sheet.code, sheet.lang, sheet.file, relative(this.#root, sheet.file), options);
             }
             catch (error) {
                 throw error instanceof PreStyleError ? locate(error, fileBlock(sheet.file)) : error;
@@ -301,6 +377,7 @@ export class Compiler {
             const prefix = prefixKey(atom);
             if (prefix !== '')
                 count(this.#counts.prefixes, prefix);
+            this.#countKeyframes(atom.declaration.key);
         }
         for (const extra of resolved.extras)
             if (extra.startsWith(MARKER_PREFIX))
@@ -312,7 +389,15 @@ export class Compiler {
             names.push(extra.startsWith(MARKER_PREFIX) ? this.#names.atoms.set(extra) : extra);
         return [...new Set(names)].join(' ');
     }
-    // Replaces markers in selectors with their names.
+    // 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);
+    }
+    // Replaces markers in selectors, and localized keyframes names, with their
+    // names.
     #named(value) {
         const visit = (node) => {
             if (Array.isArray(node))
@@ -324,6 +409,10 @@ export class Compiler {
                 typeof record.name === 'string' &&
                 record.name.startsWith(MARKER_PREFIX))
                 return { ...record, name: this.#names.atoms.set(record.name) };
+            if (record.type === 'ident' &&
+                typeof record.value === 'string' &&
+                record.value.startsWith(KEYFRAMES_PREFIX))
+                return { ...record, value: this.#names.keyframes.set(record.value) };
             return Object.fromEntries(Object.entries(record).map(([k, v]) => [k, visit(v)]));
         };
         return visit(value);
@@ -331,14 +420,21 @@ export class Compiler {
     #register(block, parsed) {
         for (const atom of parsed.atoms) {
             const key = atomKey(atom);
-            if (!this.#atoms.has(key)) {
-                this.#atoms.set(key, {
+            const source = sourceOf(block, atom.position);
+            let record = this.#atoms.get(key);
+            if (record === undefined) {
+                record = {
                     atom,
                     className: null,
                     order: this.#order++,
-                    source: sourceOf(block, atom.position),
-                });
+                    source,
+                    sources: new Map(),
+                    printed: null,
+                };
+                this.#atoms.set(key, record);
             }
+            if (source !== null && this.#options.sourceMap)
+                record.sources.set(`${source.file}:${source.line}:${source.column}`, source);
         }
         for (const global of parsed.globals) {
             if (this.#globals.has(global.key))
@@ -360,8 +456,8 @@ export class Compiler {
     #nameOf(record) {
         return (record.className ??= this.#names.atoms.set(atomKey(record.atom)));
     }
-    #atomRules(loc) {
-        // Group atoms by their at-rules, nesting groups the same way.
+    // Atoms grouped by their at-rules, nesting groups the same way.
+    #atomGroups() {
         const root = { segment: null, order: 0, atoms: [], children: new Map() };
         for (const record of this.#atoms.values()) {
             let group = root;
@@ -375,22 +471,35 @@ export class Compiler {
             }
             group.atoms.push(record);
         }
+        return root;
+    }
+    #atomSelectors(record) {
+        const { atom } = record;
+        const className = this.#nameOf(record);
+        const selectors = atom.variant
+            ? withClass(atom.variant.selectors, className)
+            : [[{ type: 'class', name: className }]];
+        return atom.variant?.key.includes(MARKER_KEY) ? this.#named(selectors) : selectors;
+    }
+    #atomRule(record, loc) {
+        const { atom } = record;
+        const value = atom.declaration.key.includes(KEYFRAMES_KEY)
+            ? this.#named(atom.declaration.value)
+            : atom.declaration.value;
+        const declarations = atom.declaration.important
+            ? { importantDeclarations: [value] }
+            : { declarations: [value] };
+        return {
+            type: 'style',
+            value: { selectors: this.#atomSelectors(record), declarations, rules: [], loc },
+        };
+    }
+    #atomRules(loc) {
         const emit = (group) => {
             const rules = sortAtoms(group.atoms).map((record) => {
-                const { atom, source } = record;
-                const className = this.#nameOf(record);
-                let selectors = atom.variant
-                    ? withClass(atom.variant.selectors, className)
-                    : [[{ type: 'class', name: className }]];
-                if (atom.variant?.key.includes(MARKER_KEY))
-                    selectors = this.#named(selectors);
-                const declarations = atom.declaration.important
-                    ? { importantDeclarations: [atom.declaration.value] }
-                    : { declarations: [atom.declaration.value] };
-                return {
-                    type: 'style',
-                    value: { selectors, declarations, rules: [], loc: loc(source) },
-                };
+                // The first place it's still used, since `forgetSources` drops places.
+                const [source = record.source] = record.sources.values();
+                return this.#atomRule(record, loc(source));
             });
             for (const child of sortGroups([...group.children.values()])) {
                 rules.push({
@@ -400,11 +509,72 @@ export class Compiler {
             }
             return rules;
         };
-        return emit(root);
+        return emit(this.#atomGroups());
+    }
+    #usage(record, order) {
+        const { atom } = record;
+        const loc = { source_index: 0, line: 0, column: 1 };
+        const rule = this.#atomRule(record, loc);
+        // Printed for reading, so without the user's `minify` and `targets`.
+        const { drafts, nonStandard, errorRecovery } = this.#parseOptions.lightningcss;
+        const text = (rules) => print([rules], [], { drafts, nonStandard, errorRecovery }, false).code;
+        const code = (record.printed ??= text(rule));
+        const open = code.indexOf(' {\n');
+        return {
+            className: record.className,
+            selector: code.slice(0, open).replaceAll('\n', ' '),
+            atRules: atom.atRules.map((segment) => {
+                const wrapped = { ...valueOf(segment.rule), rules: [rule] };
+                const printed = text({ type: segment.rule.type, value: wrapped });
+                return printed.slice(0, printed.indexOf(' {\n'));
+            }),
+            declaration: code
+                .slice(open + 3, code.lastIndexOf('\n}'))
+                .trim()
+                .replace(/;$/, ''),
+            property: atom.property,
+            covers: Object.hasOwn(SHORTHANDS, atom.property) ? SHORTHANDS[atom.property] : [],
+            important: atom.declaration.important,
+            specificity: specificity(this.#atomSelectors(record)),
+            order,
+            sources: [...record.sources.values()],
+        };
     }
 }
-// Markers as they appear in JSON keys, which escape the `\0`.
+// Markers and localized keyframes names as they appear in JSON keys, which
+// escape the `\0`.
 const MARKER_KEY = JSON.stringify(MARKER_PREFIX).slice(1, -1);
+const KEYFRAMES_KEY = JSON.stringify(KEYFRAMES_PREFIX).slice(1, -1);
+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);
+// Parses the `layer` option into an `@layer` block rule.
+function layerRule(layer) {
+    if (layer === undefined || layer === false)
+        return null;
+    if (typeof layer !== 'string')
+        throw new PreStyleError('`layer` must be `false` or a string.', null);
+    let rule;
+    try {
+        transform({
+            filename: 'layer.css',
+            code: Buffer.from(`@layer ${layer} {}`),
+            visitor: {
+                StyleSheetExit(sheet) {
+                    if (sheet.rules.length === 1)
+                        rule = sheet.rules[0];
+                },
+            },
+        });
+    }
+    catch {
+        // Reported below.
+    }
+    if (rule?.type !== 'layer-block' || (layer.trim() === '') !== (rule.value.name == null))
+        throw new PreStyleError(`\`layer\` must be a layer name, such as "pre.style" or "base.components", or "" for an unnamed layer. Got ${JSON.stringify(layer)}.`, null);
+    return rule;
+}
 // A stylesheet file, for positions and source maps.
 const fileBlock = (file) => ({ code: '', lang: 'css', file, line: 1, column: 1 });
 // Reads prepended files, relative to `dir`, once.

package/dist/compiler/config.d.ts

@@ -6,6 +6,7 @@ export interface PackageConfig {
     prependFiles?: PrependFiles;
     libraries?: Record<string, LibraryConfig | boolean>;
     quirksMode?: boolean;
+    keyframeLocalization?: 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

@@ -1,6 +1,13 @@
 import { existsSync, readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-const KEYS = new Set(['include', 'exclude', 'prependFiles', 'libraries', 'quirksMode']);
+const KEYS = new Set([
+    'include',
+    'exclude',
+    'prependFiles',
+    'libraries',
+    'quirksMode',
+    'keyframeLocalization',
+]);
 const isStrings = (value) => typeof value === 'string' ||
     (Array.isArray(value) && value.every((item) => typeof item === 'string'));
 const isPrependFiles = (value) => (Array.isArray(value) && isStrings(value)) ||
@@ -22,6 +29,8 @@ export function checkField(field, where, keys) {
         fail('prependFiles', 'an array of paths, or an object with `css` and `scss` arrays');
     if (field.quirksMode !== undefined && typeof field.quirksMode !== 'boolean')
         fail('quirksMode', '`true` or `false`');
+    if (field.keyframeLocalization !== undefined && typeof field.keyframeLocalization !== 'boolean')
+        fail('keyframeLocalization', '`true` or `false`');
     if (field.libraries !== undefined &&
         (field.libraries === null ||
             typeof field.libraries !== 'object' ||

package/dist/compiler/index.d.ts

@@ -1,5 +1,5 @@
 export { Compiler, createCompiler } from './compiler.ts';
-export type { Block, CompiledStylesheet, CompilerOptions, Library, PrependFiles, Stylesheet, } from './compiler.ts';
+export type { Block, 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 { Printed } from './print.ts';

package/dist/compiler/keyframes.d.ts

@@ -0,0 +1,6 @@
+import type { Atom, GlobalRule } from './block.ts';
+export declare const KEYFRAMES_PREFIX = "\0pre.style-keyframes:";
+export declare function localizeKeyframes(globals: GlobalRule[]): {
+    globals: GlobalRule[];
+    atoms: (atoms: Atom[]) => Atom[];
+};

package/dist/compiler/keyframes.js

@@ -0,0 +1,120 @@
+import { createHash } from 'node:crypto';
+import { key, overrideKey, valueOf } from './block.js';
+// With `keyframeLocalization`, each `@keyframes` name is replaced with a
+// generated one, like styled-components' `keyframes`. In parsed rules, a
+// local name is an ident with this prefix and a hash of every definition of
+// the name in its scope (a block, or a stylesheet file), so identical
+// keyframes share a name wherever they're defined. The compiler gives it a
+// name when printing.
+export const KEYFRAMES_PREFIX = '\0pre.style-keyframes:';
+// Properties whose values name keyframes, without a vendor prefix.
+const ANIMATION_PROPERTIES = new Set(['animation', 'animation-name']);
+// Replaces each `@keyframes` name defined in a scope (in its globals, which
+// include its prepended code) with a local name, in the definitions, and,
+// through `atoms`, in `animation` and `animation-name` declarations. Names
+// the scope doesn't define are left as they are.
+export function localizeKeyframes(globals) {
+    const definitions = new Map();
+    for (const global of globals)
+        eachKeyframes(global.rule, (value) => {
+            const list = definitions.get(value.name.value) ?? [];
+            list.push(key({ vendorPrefix: value.vendorPrefix, keyframes: value.keyframes }));
+            definitions.set(value.name.value, list);
+        });
+    if (definitions.size === 0)
+        return { globals, atoms: (atoms) => atoms };
+    const local = new Map();
+    for (const [name, list] of definitions)
+        local.set(name, KEYFRAMES_PREFIX +
+            createHash('sha256').update(JSON.stringify(list)).digest('base64url').slice(0, 16));
+    return {
+        globals: globals.map((global) => {
+            let found = false;
+            const rule = mapRule(global.rule, (inner) => {
+                if (inner.type !== 'keyframes')
+                    return inner;
+                found = true;
+                const value = valueOf(inner);
+                return {
+                    ...inner,
+                    value: {
+                        ...value,
+                        name: { type: 'ident', value: local.get(value.name.value) },
+                    },
+                };
+            });
+            if (!found)
+                return global;
+            return {
+                ...global,
+                key: key(rule),
+                rule,
+                overrideKey: global.overrideKey === null ? null : overrideKey(rule),
+            };
+        }),
+        atoms: (atoms) => atoms.map((atom) => {
+            if (!ANIMATION_PROPERTIES.has(atom.property.replace(/^-\w+-/, '')))
+                return atom;
+            const value = renameIdents(atom.declaration.value, local);
+            if (value === atom.declaration.value)
+                return atom;
+            return {
+                ...atom,
+                declaration: {
+                    ...atom.declaration,
+                    key: key(value) + (atom.declaration.important ? '!' : ''),
+                    value,
+                },
+            };
+        }),
+    };
+}
+// Calls `visit` for each `@keyframes` rule in a rule, including inside the
+// at-rules a global keeps around it.
+function eachKeyframes(rule, visit) {
+    mapRule(rule, (inner) => {
+        if (inner.type === 'keyframes')
+            visit(valueOf(inner));
+        return inner;
+    });
+}
+// Maps a rule and the rules nested in it.
+function mapRule(rule, map) {
+    const value = valueOf(rule);
+    const mapped = Array.isArray(value.rules)
+        ? {
+            ...rule,
+            value: {
+                ...value,
+                rules: value.rules.map((r) => mapRule(r, map)),
+            },
+        }
+        : rule;
+    return map(mapped);
+}
+// Replaces names in idents and strings (parsed animation names, and tokens
+// in unparsed values). Returns `value` itself when nothing changed.
+function renameIdents(value, local) {
+    const visit = (node) => {
+        if (Array.isArray(node)) {
+            const mapped = node.map(visit);
+            return mapped.some((item, i) => item !== node[i]) ? mapped : node;
+        }
+        if (node === null || typeof node !== 'object')
+            return node;
+        const record = node;
+        if ((record.type === 'ident' || record.type === 'string') &&
+            typeof record.value === 'string' &&
+            local.has(record.value))
+            return { type: 'ident', value: local.get(record.value) };
+        let changed = false;
+        const entries = Object.entries(record).map(([k, v]) => {
+            const mapped = visit(v);
+            if (mapped !== v)
+                changed = true;
+            return [k, mapped];
+        });
+        return changed ? Object.fromEntries(entries) : node;
+    };
+    return visit(value);
+}

package/dist/compiler/libraries.d.ts

@@ -3,6 +3,7 @@ export interface LibraryConfig {
     include?: string | string[];
     exclude?: string | string[];
     prependFiles?: PrependFiles;
+    keyframeLocalization?: boolean;
 }
 export interface ResolvedLibrary {
     name: string;
@@ -10,5 +11,6 @@ export interface ResolvedLibrary {
     include: string[];
     exclude: string[];
     prependFiles?: PrependFiles;
+    keyframeLocalization?: 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,7 @@ 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']);
+const SHARED_KEYS = new Set(['include', 'exclude', 'prependFiles', 'keyframeLocalization']);
 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,13 +44,14 @@ 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 } = config === true ? {} : config;
+        const { include, exclude, prependFiles, keyframeLocalization } = config === true ? {} : config;
         libraries.push({
             name,
             dir,
             include: include === undefined ? DEFAULT_INCLUDE : [include].flat(),
             exclude: exclude === undefined ? [] : [exclude].flat(),
             prependFiles,
+            keyframeLocalization,
         });
         // A library's peer dependencies are installed by the app, and found the
         // same way from the library.

package/dist/compiler/mapper.js

@@ -29,8 +29,13 @@ async function openProject(params) {
     const compiler = createCompiler({
         root: app.dir,
         prependFiles: app.config.prependFiles,
-        libraries: libraries.map(({ dir, prependFiles }) => ({ dir, prependFiles })),
+        libraries: libraries.map(({ dir, prependFiles, keyframeLocalization }) => ({
+            dir,
+            prependFiles,
+            keyframeLocalization,
+        })),
         quirksMode: app.config.quirksMode,
+        keyframeLocalization: app.config.keyframeLocalization,
         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 {};