@pre.style/core 3.1.0-alpha.5 → 3.1.0-alpha.6

package/README.md

@@ -759,7 +759,7 @@ Namespace imports still let bundlers drop the classes you don't use. **Remove th
 
 ## Sharing values with prepended files
 
-Use `prependFiles`, in the `pre.style` field of your `package.json`, to add files to the start of every block and stylesheet file, for custom properties, SCSS variables, mixins, and so on. Each file is read once per build.
+Use `prependFiles`, in the `pre.style` field of your `package.json`, to add files to the start of every block and stylesheet file, for custom properties, SCSS variables, mixins, and so on. Each file is read once per build. In dev, saving one updates every block and stylesheet file it's prepended to. Changes to the `pre.style` field itself need a restart of the dev server, which the plugin warns about.
 
 ```json
 {

package/dist/compiler/compiler.d.ts

@@ -83,6 +83,8 @@ export declare class Compiler {
     classNames(sheet: Stylesheet): string[];
     usages(classNames: Iterable<string>): ClassUsage[];
     forgetSources(file: string): void;
+    prependFiles(): string[];
+    fileChanged(file: string): boolean;
     stylesheet(sheet: Stylesheet): CompiledStylesheet;
     css(): Printed;
     cnTable(): CnTable;

package/dist/compiler/compiler.js

@@ -171,9 +171,10 @@ export class Compiler {
             };
         });
     }
-    // The files a block's class string depends on, through `composes … from`.
+    // The files a block's class string depends on: its prepended files, and
+    // files it composes from.
     dependencies(block) {
-        const dependencies = [];
+        const dependencies = [...this.#library(block.file).prependFiles[block.lang]];
         this.#resolveBlock(block, this.#parse(block), dependencies);
         return [...new Set(dependencies)];
     }
@@ -218,10 +219,45 @@ export class Compiler {
                 if (source.file === file)
                     record.sources.delete(key);
     }
+    // Every prepended file, the app's and each library's, as absolute paths.
+    prependFiles() {
+        return [...new Set(this.#prepends().flatMap(({ files: { css, scss } }) => [...css, ...scss]))];
+    }
+    // Call when a file changes. Drops the places it uses atoms (see
+    // `forgetSources`) and, if it's a prepended file, reads it again, so blocks
+    // and stylesheet files compiled after this use its new code. Returns whether
+    // it was a prepended file.
+    fileChanged(file) {
+        this.forgetSources(file);
+        let changed = false;
+        for (const prepended of this.#prepends()) {
+            if (![...prepended.files.css, ...prepended.files.scss].includes(file))
+                continue;
+            try {
+                prepended.code = readPrependCode(prepended.files);
+            }
+            catch (error) {
+                // Kept as it was, until the file can be read again.
+                this.#parseOptions.warn(`Can't read ${file}, a prepended file, so blocks use its last contents: ${error.message}`);
+                continue;
+            }
+            changed = true;
+        }
+        if (changed) {
+            // Parsed with the old code. Cache keys hold the code they parsed, but
+            // not the code prepended to it.
+            this.#blocks.clear();
+            this.#stylesheets.clear();
+        }
+        return changed;
+    }
     // Each class of a stylesheet file, with its class string.
     stylesheet(sheet) {
         const parsed = this.#parseSheet(sheet);
-        const dependencies = [...parsed.dependencies];
+        const dependencies = [
+            ...this.#library(sheet.file).prependFiles[sheet.lang],
+            ...parsed.dependencies,
+        ];
         const exports = [];
         for (const name of parsed.classes.keys())
             exports.push([
@@ -287,6 +323,10 @@ export class Compiler {
             variables[this.#names.variables.set(key)] = property ? this.#propertyName(property) : '';
         return variables;
     }
+    // The app's prepended files, then each library's.
+    #prepends() {
+        return [this.#prepend, ...this.#libraries.map((library) => library.prepend)];
+    }
     // A library's blocks and files get its prepended files and keyframes
     // setting instead of the app's.
     #library(file) {
@@ -300,9 +340,10 @@ export class Compiler {
             : this.#libraries[library];
         return {
             library,
+            prependFiles: prepend.files,
             options: {
                 ...this.#parseOptions,
-                prepend,
+                prepend: prepend.code,
                 keyframeLocalization: keyframeLocalization ?? false,
                 customPropertyLocalization: customPropertyLocalization ?? false,
             },
@@ -661,13 +702,19 @@ function layerRule(layer) {
 }
 // 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.
+// Reads prepended files, relative to `dir`.
 function readPrepend(dir, files) {
-    const read = (list = []) => list.map((file) => readFileSync(resolvePath(dir, file), 'utf8')).join('\n');
-    return Array.isArray(files)
-        ? { css: read(files), scss: read(files) }
-        : { css: read(files?.css), scss: read(files?.scss) };
+    const resolve = (list = []) => list.map((file) => resolvePath(dir, file));
+    const paths = Array.isArray(files)
+        ? { css: resolve(files), scss: resolve(files) }
+        : { css: resolve(files?.css), scss: resolve(files?.scss) };
+    return { files: paths, code: readPrependCode(paths) };
 }
+const readFiles = (files) => files.map((file) => readFileSync(file, 'utf8')).join('\n');
+const readPrependCode = (files) => ({
+    css: readFiles(files.css),
+    scss: readFiles(files.scss),
+});
 const count = (map, key) => map.set(key, (map.get(key) ?? 0) + 1);
 // The at-rules and selector variant an atom is under. Empty for atoms on the
 // element.

package/dist/compiler/index.d.ts

@@ -6,6 +6,6 @@ export type { Slot } from './interpolate.ts';
 export type { Printed } from './print.ts';
 export { checkField, readConfig } from './config.ts';
 export type { PackageConfig } from './config.ts';
-export { findLibraries } from './libraries.ts';
+export { configFiles, findLibraries } from './libraries.ts';
 export type { LibraryConfig, ResolvedLibrary } from './libraries.ts';
 export { isIdentifier } from './stylesheet.ts';

package/dist/compiler/index.js

@@ -1,5 +1,5 @@
 export { Compiler, createCompiler, interpolatedBlock } from './compiler.js';
 export { PreStyleError } from './block.js';
 export { checkField, readConfig } from './config.js';
-export { findLibraries } from './libraries.js';
+export { configFiles, findLibraries } from './libraries.js';
 export { isIdentifier } from './stylesheet.js';

package/dist/compiler/libraries.d.ts

@@ -16,3 +16,6 @@ export interface ResolvedLibrary {
     customPropertyLocalization?: boolean;
 }
 export declare function findLibraries(root: string, overrides?: Record<string, LibraryConfig | boolean>, warn?: (message: string) => void): ResolvedLibrary[];
+export declare const configFiles: (appDir: string, libraries: {
+    dir: string;
+}[]) => string[];

package/dist/compiler/libraries.js

@@ -81,3 +81,9 @@ export function findLibraries(root, overrides = {}, warn = () => { }) {
         visit(name, root);
     return libraries;
 }
+// The package.json files whose `pre.style` fields configure the compiler: the
+// app's and each library's.
+export const configFiles = (appDir, libraries) => [
+    join(appDir, 'package.json'),
+    ...libraries.map(({ dir }) => join(dir, 'package.json')),
+];

package/dist/compiler/mapper.js

@@ -10,17 +10,16 @@
 //   "contentMappers": [{ "package": "@pre.style/core", "extensions": [".css", ".scss"] }]
 import { createHash } from 'node:crypto';
 import { existsSync, readFileSync } from 'node:fs';
-import { dirname, join, resolve } from 'node:path';
+import { dirname } from 'node:path';
 import { PreStyleError } from './block.js';
 import { createCompiler } from './compiler.js';
 import { readConfig } from './config.js';
-import { findLibraries } from './libraries.js';
+import { configFiles, findLibraries } from './libraries.js';
 import { isIdentifier } from './stylesheet.js';
 // Each open project's compiler, by its handle.
 const projects = new Map();
 // Diagnostic codes, for errors in a stylesheet file.
 const INVALID_STYLESHEET = 9001;
-const prependPaths = (dir, files) => (Array.isArray(files) ? files : [...(files?.css ?? []), ...(files?.scss ?? [])]).map((file) => resolve(dir, file));
 async function openProject(params) {
     // The project's package.json, nearest its tsconfig.json.
     const root = params.configFileName ? dirname(params.configFileName) : process.cwd();
@@ -41,15 +40,10 @@ async function openProject(params) {
         warn: () => { },
     });
     projects.set(params.projectHandle, compiler);
-    await compiler;
     // Changes to these files change which classes files export.
     const watchedFiles = [
-        join(app.dir, 'package.json'),
-        ...prependPaths(app.dir, app.config.prependFiles),
-        ...libraries.flatMap(({ dir, prependFiles }) => [
-            join(dir, 'package.json'),
-            ...prependPaths(dir, prependFiles),
-        ]),
+        ...configFiles(app.dir, libraries),
+        ...(await compiler).prependFiles(),
     ].filter((file) => existsSync(file));
     const hash = createHash('sha256');
     for (const file of watchedFiles)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pre.style/core",
-  "version": "3.1.0-alpha.5",
+  "version": "3.1.0-alpha.6",
   "description": "Zero-runtime CSS-in-JS that compiles css and scss blocks into atomic CSS classes.",
   "keywords": [
     "atomic-css",