mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-10-30 16:47:54 +09:00
Oleg Isonen
8de2fd47f6
Shorthand properties like background: var(--color) were silently dropped when pasting into the CSS editor because the shorthand expander can't handle unresolved var() references. Fix: CSS vars from the current element's computed styles are now resolved before expanding shorthands. Inline and nested fallbacks (var(--a, var(--b))) are supported. If a var still can't be resolved, a toast error is shown instead of silently dropping the property.
26 lines
1.1 KiB
TypeScript
26 lines
1.1 KiB
TypeScript
import { mkdir, readFile, writeFile } from "node:fs/promises";
|
|
import { parseCss } from "@webstudio-is/css-data";
|
|
import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";
|
|
import { tags } from "@webstudio-is/sdk";
|
|
|
|
const cssFile = new URL("./preflight.css", import.meta.url);
|
|
const css = await readFile(cssFile, "utf8");
|
|
const { styles: parsed } = parseCss(css, new Map());
|
|
const result: Record<string, { property: CssProperty; value: StyleValue }[]> =
|
|
{};
|
|
for (const { selector, breakpoint, ...styleDecl } of parsed) {
|
|
if (tags.includes(selector) && styleDecl.state === undefined) {
|
|
result[selector] ??= [];
|
|
result[selector].push(styleDecl);
|
|
}
|
|
}
|
|
let code = "";
|
|
code += `import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";\n\n`;
|
|
const type =
|
|
"Record<string, undefined | { property: CssProperty, value: StyleValue }[]>";
|
|
code += `export const preflight: ${type} = ${JSON.stringify(result)}`;
|
|
|
|
const generatedFile = new URL("./__generated__/preflight.ts", import.meta.url);
|
|
await mkdir(new URL(".", generatedFile), { recursive: true });
|
|
await writeFile(generatedFile, code);
|