@pre.style/core 3.0.0-alpha.0 → 3.1.0-alpha.1

package/dist/compiler/block.d.ts

@@ -31,9 +31,22 @@ export interface GlobalRule {
     overrideKey: string | null;
     position: Position | null;
 }
+export interface Compose {
+    names: string[];
+    from: {
+        type: 'local';
+    } | {
+        type: 'global';
+    } | {
+        type: 'file';
+        path: string;
+    };
+    position: Position | null;
+}
 export interface ParsedBlock {
     atoms: Atom[];
     globals: GlobalRule[];
+    composes: Compose[];
 }
 export declare class PreStyleError extends Error {
     readonly position: Position | null;
@@ -41,12 +54,14 @@ export declare class PreStyleError extends Error {
 }
 export interface SassCompiler {
     compileString(source: string, options?: {
+        url?: URL;
         logger?: {
             warn?(message: string): void;
             debug?(message: string): void;
         };
     }): {
         css: string;
+        loadedUrls?: URL[];
     };
 }
 export interface ParseOptions {
@@ -54,9 +69,24 @@ export interface ParseOptions {
     prepend: Record<Lang, string>;
     sass: SassCompiler | null;
     warn: (message: string) => void;
+    keyframeLocalization: boolean;
 }
+export declare const key: (value: unknown) => string;
 export declare function parseBlock(code: string, lang: Lang, options: ParseOptions): ParsedBlock;
+export declare function parseRules(css: string, lightningcss: LightningOptions, position: ToPosition, collect: (rules: Rule[]) => void): void;
+export declare function dropOverridden(atoms: Atom[]): Atom[];
+export type ToPosition = (loc: {
+    line: number;
+    column: number;
+} | undefined) => Position | null;
 export declare const valueOf: (rule: Rule) => Record<string, any>;
+export declare function walk(rules: Rule[], atRules: AtRuleSegment[], variant: SelectorList | null, parsed: ParsedBlock, position: ToPosition): void;
+export declare function addDeclarations(block: {
+    declarations?: Declaration[];
+    importantDeclarations?: Declaration[];
+} | undefined, atRules: AtRuleSegment[], selectors: SelectorList, atoms: Atom[], composes: Compose[] | null, position: Position | null): void;
+export declare function addGlobal(rule: Rule, atRules: AtRuleSegment[], globals: GlobalRule[], position: ToPosition): void;
+export declare function overrideKey(rule: Rule): string;
 export declare function propertyOf(declaration: Declaration): {
     property: string;
     shorthand: boolean;

package/dist/compiler/block.js

@@ -1,6 +1,7 @@
 import { composeVisitors, transform } from 'lightningcss';
 import { atRuleInfo } from './at-rules.js';
 import { expand } from './expand.js';
+import { localizeKeyframes } from './keyframes.js';
 import { compose, fromPlaceholder, isElement, PLACEHOLDER, repair } from './selectors.js';
 import { splitBlock } from './split.js';
 import { SHORTHANDS } from '../shorthands.js';
@@ -14,7 +15,7 @@ export class PreStyleError extends Error {
 }
 // JSON keys used to deduplicate. Locations are left out, so identical rules
 // from different places share a key.
-const key = (value) => JSON.stringify(value, (k, v) => (k === 'loc' ? undefined : v));
+export const key = (value) => JSON.stringify(value, (k, v) => (k === 'loc' ? undefined : v));
 const HOIST_ORDER = { charset: 0, layer: 1, import: 2, namespace: 3 };
 const hoistOrder = (rule) => HOIST_ORDER[/^@([\w-]+)/.exec(rule)[1].toLowerCase()] ?? Infinity;
 // Joins rules onto one line.
@@ -78,38 +79,46 @@ export function parseBlock(code, lang, options) {
             });
         }
     }
-    const parsed = { atoms: [], globals: [] };
+    const parsed = { atoms: [], globals: [], composes: [] };
     // Sass output positions don't match the block, so scss atoms have none.
     const position = (loc) => lang === 'css' && loc ? toBlock(loc.line, loc.column) : null;
-    // Collected on exit, after the user's visitor has changed the rules.
-    const collect = {
+    parseRules(css, options.lightningcss, position, (rules) => walk(rules, [], null, parsed, position));
+    const atoms = dropOverridden(parsed.atoms);
+    if (!options.keyframeLocalization)
+        return { atoms, globals: parsed.globals, composes: parsed.composes };
+    const local = localizeKeyframes(parsed.globals);
+    return { atoms: local.atoms(atoms), globals: local.globals, composes: parsed.composes };
+}
+// Parses CSS with Lightning CSS, and passes its rules to `collect` once the
+// user's visitor has changed them. `position` converts error locations.
+export function parseRules(css, lightningcss, position, collect) {
+    const exit = {
         StyleSheetExit(sheet) {
-            walk(sheet.rules, [], null, parsed, position);
+            collect(sheet.rules);
         },
     };
-    const { visitor, ...rest } = options.lightningcss;
+    const { visitor, ...rest } = lightningcss;
     try {
         transform({
             ...rest,
             filename: 'block.css',
             code: Buffer.from(css),
-            visitor: visitor ? composeVisitors([visitor, collect]) : collect,
+            visitor: visitor ? composeVisitors([visitor, exit]) : exit,
         });
     }
     catch (error) {
+        if (error instanceof PreStyleError)
+            throw error;
         const loc = error.loc;
         // Lightning CSS reports error lines from 1.
-        throw new PreStyleError(`Invalid CSS: ${error.message}`, lang === 'css' && loc ? toBlock(loc.line - 1, loc.column) : null, {
-            cause: error,
-        });
+        throw new PreStyleError(`Invalid CSS: ${error.message}`, loc ? position({ line: loc.line - 1, column: loc.column }) : null, { cause: error });
     }
-    return { atoms: dropOverridden(parsed.atoms), globals: parsed.globals };
 }
 // Within a block, a later declaration overrides an earlier one that sets the
 // same property under the same at-rules and selector variant, as in CSS.
 // `!important` declarations are collected after normal ones in each rule,
 // so they win. Identical atoms are kept once.
-function dropOverridden(atoms) {
+export function dropOverridden(atoms) {
     const seen = new Set();
     const kept = [];
     for (let i = atoms.length - 1; i >= 0; i--) {
@@ -129,14 +138,15 @@ function dropOverridden(atoms) {
 export const valueOf = (rule) => 'value' in rule && rule.value !== null ? rule.value : {};
 const ruleLoc = (rule) => valueOf(rule).loc;
 // Walks the rules. `variant` is the element's selector variant when inside a
-// rule that targets the element, and null outside one.
-function walk(rules, atRules, variant, parsed, position) {
+// rule that targets the element, and null outside one. Without the
+// placeholder, every rule is global.
+export function walk(rules, atRules, variant, parsed, position) {
     for (const rule of rules) {
         if (rule.type === 'style') {
             const { selectors, declarations, rules: children = [], loc } = rule.value;
             if (variant !== null) {
                 const composed = compose(variant, selectors);
-                addDeclarations(declarations, atRules, composed, parsed, position(loc));
+                addDeclarations(declarations, atRules, composed, parsed.atoms, null, position(loc));
                 walk(children, atRules, composed, parsed, position);
                 continue;
             }
@@ -151,15 +161,17 @@ function walk(rules, atRules, variant, parsed, position) {
                     other.push(selector);
             }
             if (other.length > 0)
-                addGlobal({ ...rule, value: { ...rule.value, selectors: other } }, atRules, parsed, position);
+                addGlobal({ ...rule, value: { ...rule.value, selectors: other } }, atRules, parsed.globals, position);
             if (element.length > 0) {
-                addDeclarations(declarations, atRules, element, parsed, position(loc));
+                // `composes` only works directly in the block, outside at-rules.
+                const composes = atRules.length === 0 && isElement(element) ? parsed.composes : null;
+                addDeclarations(declarations, atRules, element, parsed.atoms, composes, position(loc));
                 walk(children, atRules, element, parsed, position);
             }
             continue;
         }
         if (rule.type === 'nested-declarations' && variant !== null) {
-            addDeclarations(rule.value.declarations, atRules, variant, parsed, position(rule.value.loc));
+            addDeclarations(rule.value.declarations, atRules, variant, parsed.atoms, null, position(rule.value.loc));
             continue;
         }
         if (atRuleInfo(rule.type).atomic) {
@@ -171,20 +183,40 @@ function walk(rules, atRules, variant, parsed, position) {
             walk(children, [...atRules, segment], variant, parsed, position);
             continue;
         }
-        addGlobal(rule, atRules, parsed, position);
+        addGlobal(rule, atRules, parsed.globals, position);
     }
 }
-function addDeclarations(block, atRules, selectors, parsed, position) {
+const COMPOSES_PLACEMENT = "`composes` must come before the rule's other declarations, and can't be used inside nested selectors or at-rules.";
+const isComposes = (declaration) => declaration.property === 'unparsed' && declaration.value.propertyId.property === 'composes';
+// Adds a rule's declarations as atoms. `composes` declarations are added to
+// `composes` when it's given, and are an error where it isn't (inside
+// nested selectors and at-rules).
+export function addDeclarations(block, atRules, selectors, atoms, composes, position) {
     let variant = null;
     if (!isElement(selectors)) {
         const repaired = repair(selectors);
         variant = { key: key(repaired), selectors: repaired };
     }
+    if (block?.importantDeclarations?.some(isComposes))
+        throw new PreStyleError("`composes` can't be `!important`.", position);
+    let normal = block?.declarations ?? [];
+    // As in CSS Modules, `composes` comes before the rule's other declarations.
+    const leading = normal.findIndex((d) => !isComposes(d));
+    const own = leading === -1 ? normal.length : leading;
+    if (normal.slice(own).some(isComposes))
+        throw new PreStyleError(COMPOSES_PLACEMENT, position);
+    if (own > 0) {
+        if (composes === null)
+            throw new PreStyleError(COMPOSES_PLACEMENT, position);
+        for (const d of normal.slice(0, own))
+            composes.push(parseComposes(d, position));
+        normal = normal.slice(own);
+    }
     const add = (declarations = [], important) => {
         for (const declaration of declarations) {
             for (const value of expand(declaration)) {
                 const { property, shorthand } = propertyOf(value);
-                parsed.atoms.push({
+                atoms.push({
                     atRules,
                     variant,
                     declaration: { key: key(value) + (important ? '!' : ''), value, important },
@@ -195,11 +227,38 @@ function addDeclarations(block, atRules, selectors, parsed, position) {
             }
         }
     };
-    add(block?.declarations, false);
+    add(normal, false);
     add(block?.importantDeclarations, true);
 }
+const ident = (t) => t?.type === 'token' && t.value.type === 'ident' ? t.value.value : null;
+// Reads `composes: a b`, `composes: a from './file.css'`, or
+// `composes: a from global`.
+function parseComposes(declaration, position) {
+    const tokens = declaration.value.value.filter((t) => !(t.type === 'token' && t.value.type === 'white-space'));
+    const invalid = () => new PreStyleError('Invalid `composes`. Use `composes: a b;`, `composes: a from "./file.css";`, or `composes: a from global;`.', position);
+    const names = [];
+    let i = 0;
+    for (; i < tokens.length; i++) {
+        const name = ident(tokens[i]);
+        if (name === null || name === 'from')
+            break;
+        names.push(name);
+    }
+    if (names.length === 0)
+        throw invalid();
+    if (i === tokens.length)
+        return { names, from: { type: 'local' }, position };
+    if (ident(tokens[i]) !== 'from' || tokens.length !== i + 2)
+        throw invalid();
+    const source = tokens[i + 1];
+    if (ident(source) === 'global')
+        return { names, from: { type: 'global' }, position };
+    if (source.type === 'token' && source.value.type === 'string')
+        return { names, from: { type: 'file', path: source.value.value }, position };
+    throw invalid();
+}
 // Global rules inside at-rules keep their at-rules around them.
-function addGlobal(rule, atRules, parsed, position) {
+export function addGlobal(rule, atRules, globals, position) {
     let wrapped = rule;
     for (const segment of atRules.toReversed()) {
         wrapped = {
@@ -209,7 +268,7 @@ function addGlobal(rule, atRules, parsed, position) {
     }
     const info = atRules.length === 0 ? atRuleInfo(rule.type) : atRuleInfo('');
     wrapped = repair(wrapped);
-    parsed.globals.push({
+    globals.push({
         key: key(wrapped),
         rule: wrapped,
         hoist: info.hoist,
@@ -218,11 +277,12 @@ function addGlobal(rule, atRules, parsed, position) {
     });
 }
 // The identity of an overridable at-rule: its type and name.
-function overrideKey(rule) {
+export function overrideKey(rule) {
     const value = valueOf(rule);
     switch (rule.type) {
         case 'keyframes':
-            return `keyframes ${key(value.name)}`;
+            // `@-webkit-keyframes x` doesn't replace `@keyframes x`.
+            return `keyframes ${key(value.vendorPrefix ?? [])} ${key(value.name)}`;
         case 'font-face': {
             // A font face is identified by its family, style, weight, and stretch.
             const descriptors = Object.fromEntries(value.properties

package/dist/compiler/compiler.d.ts

@@ -8,6 +8,7 @@ export type PrependFiles = string[] | {
 export interface Library {
     dir: string;
     prependFiles?: PrependFiles;
+    keyframeLocalization?: boolean;
 }
 export interface CompilerOptions {
     prependFiles?: PrependFiles;
@@ -17,6 +18,8 @@ export interface CompilerOptions {
     root?: string;
     warn?: (message: string) => void;
     quirksMode?: boolean;
+    keyframeLocalization?: boolean;
+    layer?: false | string;
 }
 export interface Block {
     code: string;
@@ -25,14 +28,27 @@ export interface Block {
     line?: number;
     column?: number;
 }
+export interface Stylesheet {
+    code: string;
+    lang: Lang;
+    file: string;
+}
+export interface CompiledStylesheet {
+    exports: [name: string, classString: string][];
+    dependencies: string[];
+}
 export declare function createCompiler(options?: CompilerOptions): Promise<Compiler>;
 export declare class Compiler {
     #private;
     constructor(options: CompilerOptions, sass: SassCompiler | null);
     get revision(): number;
     scan(block: Block): void;
+    scanStylesheet(sheet: Stylesheet): void;
     assignNames(): void;
     classString(block: Block): string;
+    dependencies(block: Block): string[];
+    classNames(sheet: Stylesheet): string[];
+    stylesheet(sheet: Stylesheet): CompiledStylesheet;
     css(): Printed;
     cnTable(): CnTable;
 }