@gtkx/css 1.0.0-rc.1 → 1.0.0-rc.3

package/dist/create-css.d.ts

@@ -1,12 +1,12 @@
 import type { CSSInterpolation } from "@emotion/serialize";
 import type { Element } from "stylis";
 type CxToken = string | boolean | undefined | null;
-export type Css = {
+type Css = {
     css: (...args: CSSInterpolation[]) => string;
     cx: (...classNames: CxToken[]) => string[];
     injectGlobal: (...args: CSSInterpolation[]) => void;
 };
-export declare const removeLabel: (element: Element) => void;
-export declare const createCss: () => Css;
-export {};
+declare const removeLabel: (element: Element) => void;
+declare const createCss: () => Css;
+export { removeLabel, createCss, type Css };
 //# sourceMappingURL=create-css.d.ts.map

package/dist/create-css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-css.d.ts","sourceRoot":"","sources":["../src/create-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAqC,MAAM,oBAAoB,CAAC;AAE9F,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAUtC,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,GAAG,GAAG;IACd,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,gBAAgB,EAAE,KAAK,MAAM,CAAC;IAC7C,EAAE,EAAE,CAAC,GAAG,UAAU,EAAE,OAAO,EAAE,KAAK,MAAM,EAAE,CAAC;IAC3C,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,WAAW,YAAa,OAAO,KAAG,IAS9C,CAAC;AAiBF,eAAO,MAAM,SAAS,QAAO,GAmD5B,CAAC"}
+{"version":3,"file":"create-css.d.ts","sourceRoot":"","sources":["../src/create-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAqC,MAAM,oBAAoB,CAAC;AAC9F,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;AAEnD,KAAK,GAAG,GAAG;IACP,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,gBAAgB,EAAE,KAAK,MAAM,CAAC;IAC7C,EAAE,EAAE,CAAC,GAAG,UAAU,EAAE,OAAO,EAAE,KAAK,MAAM,EAAE,CAAC;IAC3C,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AASF,QAAA,MAAM,WAAW,GAAI,SAAS,OAAO,KAAG,IASvC,CAAC;AAiFF,QAAA,MAAM,SAAS,QAAO,GAUrB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,CAAC"}

package/dist/create-css.js

@@ -5,15 +5,31 @@ import { StyleSheet } from "./stylesheet.js";
 const KEY = "gtkx";
 const LABEL_DECL_FIRST_CHAR = 108;
 const LABEL_DECL_THIRD_CHAR = 98;
-export const removeLabel = (element) => {
-    if (element.type === "decl" &&
+const removeLabel = (element) => {
+    if (!(element.type === "decl" &&
         element.value.codePointAt(0) === LABEL_DECL_FIRST_CHAR &&
-        element.value.codePointAt(2) === LABEL_DECL_THIRD_CHAR) {
-        element.return = "";
-        element.value = "";
+        element.value.codePointAt(2) === LABEL_DECL_THIRD_CHAR)) {
+        return;
     }
+    element.return = "";
+    element.value = "";
+};
+const getClassName = (serialized) => `${KEY}-${serialized.name}`;
+const isNonEmptyString = (token) => typeof token === "string" && token.length > 0;
+const partitionTokens = (tokens, registered) => {
+    const rawClasses = [];
+    const registeredStyles = [];
+    for (const token of tokens) {
+        const styles = registered[token];
+        if (styles === undefined) {
+            rawClasses.push(token);
+        }
+        else {
+            registeredStyles.push(styles);
+        }
+    }
+    return { rawClasses, registeredStyles };
 };
-const classNameFor = (serialized) => `${KEY}-${serialized.name}`;
 const runStylis = (sheet, input) => {
     stylisSerialize(compile(escapeNamedColors(input)), middleware([
         removeLabel,
@@ -23,50 +39,49 @@ const runStylis = (sheet, input) => {
         }),
     ]));
 };
-export const createCss = () => {
-    const sheet = new StyleSheet();
-    const inserted = new Set();
-    const registered = {};
-    const serialize = (args) => serializeStyles(args, registered);
-    const insertStyles = (serialized) => {
-        if (inserted.has(serialized.name))
-            return;
-        inserted.add(serialized.name);
-        const className = classNameFor(serialized);
-        runStylis(sheet, `.${className}{${serialized.styles}}`);
-        registered[className] = serialized.styles;
-    };
-    const insertWithoutScoping = (serialized) => {
-        if (inserted.has(serialized.name))
-            return;
-        inserted.add(serialized.name);
-        runStylis(sheet, serialized.styles);
-    };
-    const css = (...args) => {
-        const serialized = serialize(args);
-        insertStyles(serialized);
-        return classNameFor(serialized);
-    };
-    const cx = (...classNames) => {
-        const tokens = classNames.filter((cn) => typeof cn === "string" && cn.length > 0);
-        const rawClasses = [];
-        const registeredStyles = [];
-        for (const token of tokens) {
-            const styles = registered[token];
-            if (styles === undefined) {
-                rawClasses.push(token);
-            }
-            else {
-                registeredStyles.push(styles);
-            }
-        }
-        if (registeredStyles.length < 2)
-            return tokens;
-        return [...rawClasses, css(registeredStyles.join(""))];
-    };
-    const injectGlobal = (...args) => {
-        insertWithoutScoping(serialize(args));
+const didMarkNewStyle = (state, serialized) => {
+    if (state.inserted.has(serialized.name)) {
+        return false;
+    }
+    state.inserted.add(serialized.name);
+    return true;
+};
+const insertStyles = (state, serialized) => {
+    if (!didMarkNewStyle(state, serialized)) {
+        return;
+    }
+    const className = getClassName(serialized);
+    runStylis(state.sheet, `.${className}{${serialized.styles}}`);
+    state.registered[className] = serialized.styles;
+};
+const insertWithoutScoping = (state, serialized) => {
+    if (!didMarkNewStyle(state, serialized)) {
+        return;
+    }
+    runStylis(state.sheet, serialized.styles);
+};
+const cssClassName = (state, args) => {
+    const serialized = serializeStyles(args, state.registered);
+    insertStyles(state, serialized);
+    return getClassName(serialized);
+};
+const cxClassNames = (state, classNames) => {
+    const tokens = classNames.filter(isNonEmptyString);
+    const { rawClasses, registeredStyles } = partitionTokens(tokens, state.registered);
+    if (registeredStyles.length < 2) {
+        return tokens;
+    }
+    return [...rawClasses, cssClassName(state, [registeredStyles.join("")])];
+};
+const createCss = () => {
+    const state = { sheet: new StyleSheet(), inserted: new Set(), registered: {} };
+    return {
+        css: (...args) => cssClassName(state, args),
+        cx: (...classNames) => cxClassNames(state, classNames),
+        injectGlobal: (...args) => {
+            insertWithoutScoping(state, serializeStyles(args, state.registered));
+        },
     };
-    return { css, cx, injectGlobal };
 };
+export { removeLabel, createCss };
 //# sourceMappingURL=create-css.js.map

package/dist/create-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-css.js","sourceRoot":"","sources":["../src/create-css.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSInterpolation, RegisteredCache, SerializedStyles } from \"@emotion/serialize\";\nimport { serializeStyles } from \"@emotion/serialize\";\nimport type { Element } from \"stylis\";\nimport { compile, middleware, rulesheet, stringify, serialize as stylisSerialize } from \"stylis\";\nimport { escapeNamedColors, restoreNamedColors } from \"./named-colors.js\";\nimport { StyleSheet } from \"./stylesheet.js\";\n\nconst KEY = \"gtkx\";\n\nconst LABEL_DECL_FIRST_CHAR = 108;\nconst LABEL_DECL_THIRD_CHAR = 98;\n\ntype CxToken = string | boolean | undefined | null;\n\nexport type Css = {\n    css: (...args: CSSInterpolation[]) => string;\n    cx: (...classNames: CxToken[]) => string[];\n    injectGlobal: (...args: CSSInterpolation[]) => void;\n};\n\nexport const removeLabel = (element: Element): void => {\n    if (\n        element.type === \"decl\" &&\n        element.value.codePointAt(0) === LABEL_DECL_FIRST_CHAR &&\n        element.value.codePointAt(2) === LABEL_DECL_THIRD_CHAR\n    ) {\n        element.return = \"\";\n        element.value = \"\";\n    }\n};\n\nconst classNameFor = (serialized: SerializedStyles): string => `${KEY}-${serialized.name}`;\n\nconst runStylis = (sheet: StyleSheet, input: string): void => {\n    stylisSerialize(\n        compile(escapeNamedColors(input)),\n        middleware([\n            removeLabel,\n            stringify,\n            rulesheet((rule) => {\n                sheet.insert(restoreNamedColors(rule));\n            }),\n        ]),\n    );\n};\n\nexport const createCss = (): Css => {\n    const sheet = new StyleSheet();\n    const inserted = new Set<string>();\n    const registered: RegisteredCache = {};\n\n    const serialize = (args: CSSInterpolation[]): SerializedStyles => serializeStyles(args, registered);\n\n    const insertStyles = (serialized: SerializedStyles): void => {\n        if (inserted.has(serialized.name)) return;\n        inserted.add(serialized.name);\n        const className = classNameFor(serialized);\n        runStylis(sheet, `.${className}{${serialized.styles}}`);\n        registered[className] = serialized.styles;\n    };\n\n    const insertWithoutScoping = (serialized: SerializedStyles): void => {\n        if (inserted.has(serialized.name)) return;\n        inserted.add(serialized.name);\n        runStylis(sheet, serialized.styles);\n    };\n\n    const css = (...args: CSSInterpolation[]): string => {\n        const serialized = serialize(args);\n        insertStyles(serialized);\n        return classNameFor(serialized);\n    };\n\n    const cx = (...classNames: CxToken[]): string[] => {\n        const tokens = classNames.filter((cn): cn is string => typeof cn === \"string\" && cn.length > 0);\n\n        const rawClasses: string[] = [];\n        const registeredStyles: string[] = [];\n        for (const token of tokens) {\n            const styles = registered[token];\n            if (styles === undefined) {\n                rawClasses.push(token);\n            } else {\n                registeredStyles.push(styles);\n            }\n        }\n\n        if (registeredStyles.length < 2) return tokens;\n\n        return [...rawClasses, css(registeredStyles.join(\"\"))];\n    };\n\n    const injectGlobal = (...args: CSSInterpolation[]): void => {\n        insertWithoutScoping(serialize(args));\n    };\n\n    return { css, cx, injectGlobal };\n};\n"]}
+{"version":3,"file":"create-css.js","sourceRoot":"","sources":["../src/create-css.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSInterpolation, RegisteredCache, SerializedStyles } from \"@emotion/serialize\";\nimport type { Element } from \"stylis\";\nimport { serializeStyles } from \"@emotion/serialize\";\nimport { compile, middleware, rulesheet, stringify, serialize as stylisSerialize } from \"stylis\";\nimport { escapeNamedColors, restoreNamedColors } from \"./named-colors.js\";\nimport { StyleSheet } from \"./stylesheet.js\";\n\ntype CxToken = string | boolean | undefined | null;\n\ntype Css = {\n    css: (...args: CSSInterpolation[]) => string;\n    cx: (...classNames: CxToken[]) => string[];\n    injectGlobal: (...args: CSSInterpolation[]) => void;\n};\n\ntype TokenPartition = { rawClasses: string[]; registeredStyles: string[] };\ntype CssState = { sheet: StyleSheet; inserted: Set<string>; registered: RegisteredCache };\n\nconst KEY = \"gtkx\";\nconst LABEL_DECL_FIRST_CHAR = 108;\nconst LABEL_DECL_THIRD_CHAR = 98;\n\nconst removeLabel = (element: Element): void => {\n    if (!(element.type === \"decl\" &&\n        element.value.codePointAt(0) === LABEL_DECL_FIRST_CHAR &&\n        element.value.codePointAt(2) === LABEL_DECL_THIRD_CHAR)) {\n        return;\n    }\n\n    element.return = \"\";\n    element.value = \"\";\n};\n\nconst getClassName = (serialized: SerializedStyles): string => `${KEY}-${serialized.name}`;\nconst isNonEmptyString = (token: CxToken): token is string => typeof token === \"string\" && token.length > 0;\n\nconst partitionTokens = (tokens: string[], registered: RegisteredCache): TokenPartition => {\n    const rawClasses: string[] = [];\n    const registeredStyles: string[] = [];\n\n    for (const token of tokens) {\n        const styles = registered[token];\n\n        if (styles === undefined) {\n            rawClasses.push(token);\n        } else {\n            registeredStyles.push(styles);\n        }\n    }\n\n    return { rawClasses, registeredStyles };\n};\n\nconst runStylis = (sheet: StyleSheet, input: string): void => {\n    stylisSerialize(\n        compile(escapeNamedColors(input)),\n        middleware([\n            removeLabel,\n            stringify,\n            rulesheet((rule) => {\n                sheet.insert(restoreNamedColors(rule));\n            }),\n        ]),\n    );\n};\n\nconst didMarkNewStyle = (state: CssState, serialized: SerializedStyles): boolean => {\n    if (state.inserted.has(serialized.name)) {\n        return false;\n    }\n\n    state.inserted.add(serialized.name);\n\n    return true;\n};\n\nconst insertStyles = (state: CssState, serialized: SerializedStyles): void => {\n    if (!didMarkNewStyle(state, serialized)) {\n        return;\n    }\n\n    const className = getClassName(serialized);\n    runStylis(state.sheet, `.${className}{${serialized.styles}}`);\n    state.registered[className] = serialized.styles;\n};\n\nconst insertWithoutScoping = (state: CssState, serialized: SerializedStyles): void => {\n    if (!didMarkNewStyle(state, serialized)) {\n        return;\n    }\n\n    runStylis(state.sheet, serialized.styles);\n};\n\nconst cssClassName = (state: CssState, args: CSSInterpolation[]): string => {\n    const serialized = serializeStyles(args, state.registered);\n    insertStyles(state, serialized);\n\n    return getClassName(serialized);\n};\n\nconst cxClassNames = (state: CssState, classNames: CxToken[]): string[] => {\n    const tokens = classNames.filter(isNonEmptyString);\n    const { rawClasses, registeredStyles } = partitionTokens(tokens, state.registered);\n\n    if (registeredStyles.length < 2) {\n        return tokens;\n    }\n\n    return [...rawClasses, cssClassName(state, [registeredStyles.join(\"\")])];\n};\n\nconst createCss = (): Css => {\n    const state: CssState = { sheet: new StyleSheet(), inserted: new Set(), registered: {} };\n\n    return {\n        css: (...args) => cssClassName(state, args),\n        cx: (...classNames) => cxClassNames(state, classNames),\n        injectGlobal: (...args) => {\n            insertWithoutScoping(state, serializeStyles(args, state.registered));\n        },\n    };\n};\n\nexport { removeLabel, createCss, type Css };\n"]}

package/dist/index.d.ts

@@ -3,15 +3,16 @@ import { type Css } from "./create-css.js";
  * Serializes the given style interpolations, inserts the resulting rules into
  * the default stylesheet, and returns the generated GTK4 CSS class name.
  */
-export declare const css: Css["css"];
+declare const css: Css["css"];
 /**
  * Combines class name tokens, filtering out falsy values and merging any
  * gtkx-registered styles into a single generated class.
  */
-export declare const cx: Css["cx"];
+declare const cx: Css["cx"];
 /**
  * Serializes and inserts the given styles into the default stylesheet globally,
  * without scoping them to a generated class.
  */
-export declare const injectGlobal: Css["injectGlobal"];
+declare const injectGlobal: Css["injectGlobal"];
+export { css, cx, injectGlobal };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAa,MAAM,iBAAiB,CAAC;AAItD;;;GAGG;AACH,eAAO,MAAM,GAAG,EAAE,GAAG,CAAC,KAAK,CAAgB,CAAC;AAC5C;;;GAGG;AACH,eAAO,MAAM,EAAE,EAAE,GAAG,CAAC,IAAI,CAAe,CAAC;AACzC;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,GAAG,CAAC,cAAc,CAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAGtD;;;GAGG;AACH,QAAA,MAAM,GAAG,EAAE,GAAG,CAAC,KAAK,CAAgB,CAAC;AACrC;;;GAGG;AACH,QAAA,MAAM,EAAE,EAAE,GAAG,CAAC,IAAI,CAAe,CAAC;AAClC;;;GAGG;AACH,QAAA,MAAM,YAAY,EAAE,GAAG,CAAC,cAAc,CAAyB,CAAC;AAEhE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC"}

package/dist/index.js

@@ -4,15 +4,16 @@ const instance = createCss();
  * Serializes the given style interpolations, inserts the resulting rules into
  * the default stylesheet, and returns the generated GTK4 CSS class name.
  */
-export const css = instance.css;
+const css = instance.css;
 /**
  * Combines class name tokens, filtering out falsy values and merging any
  * gtkx-registered styles into a single generated class.
  */
-export const cx = instance.cx;
+const cx = instance.cx;
 /**
  * Serializes and inserts the given styles into the default stylesheet globally,
  * without scoping them to a generated class.
  */
-export const injectGlobal = instance.injectGlobal;
+const injectGlobal = instance.injectGlobal;
+export { css, cx, injectGlobal };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;AAE7B;;;GAGG;AACH,MAAM,CAAC,MAAM,GAAG,GAAe,QAAQ,CAAC,GAAG,CAAC;AAC5C;;;GAGG;AACH,MAAM,CAAC,MAAM,EAAE,GAAc,QAAQ,CAAC,EAAE,CAAC;AACzC;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAwB,QAAQ,CAAC,YAAY,CAAC","sourcesContent":["import { type Css, createCss } from \"./create-css.js\";\n\nconst instance = createCss();\n\n/**\n * Serializes the given style interpolations, inserts the resulting rules into\n * the default stylesheet, and returns the generated GTK4 CSS class name.\n */\nexport const css: Css[\"css\"] = instance.css;\n/**\n * Combines class name tokens, filtering out falsy values and merging any\n * gtkx-registered styles into a single generated class.\n */\nexport const cx: Css[\"cx\"] = instance.cx;\n/**\n * Serializes and inserts the given styles into the default stylesheet globally,\n * without scoping them to a generated class.\n */\nexport const injectGlobal: Css[\"injectGlobal\"] = instance.injectGlobal;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,iBAAiB,CAAC;AAEtD,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;AAC7B;;;GAGG;AACH,MAAM,GAAG,GAAe,QAAQ,CAAC,GAAG,CAAC;AACrC;;;GAGG;AACH,MAAM,EAAE,GAAc,QAAQ,CAAC,EAAE,CAAC;AAClC;;;GAGG;AACH,MAAM,YAAY,GAAwB,QAAQ,CAAC,YAAY,CAAC;AAEhE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import { createCss, type Css } from \"./create-css.js\";\n\nconst instance = createCss();\n/**\n * Serializes the given style interpolations, inserts the resulting rules into\n * the default stylesheet, and returns the generated GTK4 CSS class name.\n */\nconst css: Css[\"css\"] = instance.css;\n/**\n * Combines class name tokens, filtering out falsy values and merging any\n * gtkx-registered styles into a single generated class.\n */\nconst cx: Css[\"cx\"] = instance.cx;\n/**\n * Serializes and inserts the given styles into the default stylesheet globally,\n * without scoping them to a generated class.\n */\nconst injectGlobal: Css[\"injectGlobal\"] = instance.injectGlobal;\n\nexport { css, cx, injectGlobal };\n"]}

package/dist/named-colors.d.ts

@@ -1,5 +1,6 @@
-export declare const AT_RULE_KEYWORDS: Set<string>;
-export declare const NAMED_COLOR_TOKEN = "gtkx-named-color__";
-export declare const escapeNamedColors: (input: string) => string;
-export declare const restoreNamedColors: (rule: string) => string;
+declare const AT_RULE_KEYWORDS: Set<string>;
+declare const NAMED_COLOR_TOKEN = "gtkx-named-color__";
+declare const escapeNamedColors: (input: string) => string;
+declare const restoreNamedColors: (rule: string) => string;
+export { AT_RULE_KEYWORDS, NAMED_COLOR_TOKEN, escapeNamedColors, restoreNamedColors };
 //# sourceMappingURL=named-colors.d.ts.map

package/dist/named-colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"named-colors.d.ts","sourceRoot":"","sources":["../src/named-colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAA6D,CAAC;AAIvG,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAItD,eAAO,MAAM,iBAAiB,UAAW,MAAM,KAAG,MAG7C,CAAC;AAEN,eAAO,MAAM,kBAAkB,SAAU,MAAM,KAAG,MAAwD,CAAC"}
+{"version":3,"file":"named-colors.d.ts","sourceRoot":"","sources":["../src/named-colors.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAA6D,CAAC;AAEhG,QAAA,MAAM,iBAAiB,uBAAuB,CAAC;AAG/C,QAAA,MAAM,iBAAiB,GAAI,OAAO,MAAM,KAAG,MAGtC,CAAC;AAEN,QAAA,MAAM,kBAAkB,GAAI,MAAM,MAAM,KAAG,MAA2D,CAAC;AAEvG,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/named-colors.js

@@ -1,7 +1,8 @@
-export const AT_RULE_KEYWORDS = new Set(["define-color", "import", "keyframes", "media"]);
+const AT_RULE_KEYWORDS = new Set(["define-color", "import", "keyframes", "media"]);
 const AT_IDENTIFIER_PATTERN = /@([A-Za-z_][\w-]*)/g;
-export const NAMED_COLOR_TOKEN = "gtkx-named-color__";
-const NAMED_COLOR_TOKEN_PATTERN = new RegExp(`${NAMED_COLOR_TOKEN}([\\w-]+)`, "g");
-export const escapeNamedColors = (input) => input.replace(AT_IDENTIFIER_PATTERN, (match, name) => AT_RULE_KEYWORDS.has(name) ? match : `${NAMED_COLOR_TOKEN}${name}`);
-export const restoreNamedColors = (rule) => rule.replace(NAMED_COLOR_TOKEN_PATTERN, "@$1");
+const NAMED_COLOR_TOKEN = "gtkx-named-color__";
+const NAMED_COLOR_TOKEN_PATTERN = new RegExp(String.raw `${NAMED_COLOR_TOKEN}([\w-]+)`, "g");
+const escapeNamedColors = (input) => input.replaceAll(AT_IDENTIFIER_PATTERN, (match, name) => AT_RULE_KEYWORDS.has(name) ? match : `${NAMED_COLOR_TOKEN}${name}`);
+const restoreNamedColors = (rule) => rule.replaceAll(NAMED_COLOR_TOKEN_PATTERN, "@$1");
+export { AT_RULE_KEYWORDS, NAMED_COLOR_TOKEN, escapeNamedColors, restoreNamedColors };
 //# sourceMappingURL=named-colors.js.map

package/dist/named-colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"named-colors.js","sourceRoot":"","sources":["../src/named-colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAgB,IAAI,GAAG,CAAC,CAAC,cAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AAEvG,MAAM,qBAAqB,GAAG,qBAAqB,CAAC;AAEpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;AAEtD,MAAM,yBAAyB,GAAG,IAAI,MAAM,CAAC,GAAG,iBAAiB,WAAW,EAAE,GAAG,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAU,EAAE,CACvD,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,EAAE,IAAY,EAAE,EAAE,CACzD,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,iBAAiB,GAAG,IAAI,EAAE,CACrE,CAAC;AAEN,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAY,EAAU,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC","sourcesContent":["export const AT_RULE_KEYWORDS: Set<string> = new Set([\"define-color\", \"import\", \"keyframes\", \"media\"]);\n\nconst AT_IDENTIFIER_PATTERN = /@([A-Za-z_][\\w-]*)/g;\n\nexport const NAMED_COLOR_TOKEN = \"gtkx-named-color__\";\n\nconst NAMED_COLOR_TOKEN_PATTERN = new RegExp(`${NAMED_COLOR_TOKEN}([\\\\w-]+)`, \"g\");\n\nexport const escapeNamedColors = (input: string): string =>\n    input.replace(AT_IDENTIFIER_PATTERN, (match, name: string) =>\n        AT_RULE_KEYWORDS.has(name) ? match : `${NAMED_COLOR_TOKEN}${name}`,\n    );\n\nexport const restoreNamedColors = (rule: string): string => rule.replace(NAMED_COLOR_TOKEN_PATTERN, \"@$1\");\n"]}
+{"version":3,"file":"named-colors.js","sourceRoot":"","sources":["../src/named-colors.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAgB,IAAI,GAAG,CAAC,CAAC,cAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AAChG,MAAM,qBAAqB,GAAG,qBAAqB,CAAC;AACpD,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;AAC/C,MAAM,yBAAyB,GAAG,IAAI,MAAM,CAAC,MAAM,CAAC,GAAG,CAAA,GAAG,iBAAiB,UAAU,EAAE,GAAG,CAAC,CAAC;AAE5F,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAU,EAAE,CAChD,KAAK,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,EAAE,IAAY,EAAE,EAAE,CAC5D,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,iBAAiB,GAAG,IAAI,EAAE,CACrE,CAAC;AAEN,MAAM,kBAAkB,GAAG,CAAC,IAAY,EAAU,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;AAEvG,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,CAAC","sourcesContent":["const AT_RULE_KEYWORDS: Set<string> = new Set([\"define-color\", \"import\", \"keyframes\", \"media\"]);\nconst AT_IDENTIFIER_PATTERN = /@([A-Za-z_][\\w-]*)/g;\nconst NAMED_COLOR_TOKEN = \"gtkx-named-color__\";\nconst NAMED_COLOR_TOKEN_PATTERN = new RegExp(String.raw`${NAMED_COLOR_TOKEN}([\\w-]+)`, \"g\");\n\nconst escapeNamedColors = (input: string): string =>\n    input.replaceAll(AT_IDENTIFIER_PATTERN, (match, name: string) =>\n        AT_RULE_KEYWORDS.has(name) ? match : `${NAMED_COLOR_TOKEN}${name}`,\n    );\n\nconst restoreNamedColors = (rule: string): string => rule.replaceAll(NAMED_COLOR_TOKEN_PATTERN, \"@$1\");\n\nexport { AT_RULE_KEYWORDS, NAMED_COLOR_TOKEN, escapeNamedColors, restoreNamedColors };\n"]}

package/dist/provider.d.ts

@@ -1,5 +1,6 @@
-import { CssProvider } from "@gtkx/gi/gtk";
 import type { Logger } from "@gtkx/utils";
-export declare const registerProviderForDefaultDisplay: (priority?: number) => CssProvider;
-export declare const attachParsingErrorLogger: (provider: CssProvider, log: Logger, subject: string) => void;
+import { CssProvider } from "@gtkx/gi/gtk";
+declare const registerProviderForDefaultDisplay: (priority?: number) => CssProvider;
+declare const attachParsingErrorLogger: (provider: CssProvider, log: Logger, subject: string) => void;
+export { registerProviderForDefaultDisplay, attachParsingErrorLogger };
 //# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAqD,MAAM,cAAc,CAAC;AAC9F,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,iCAAiC,cAChC,MAAM,KACjB,WAgBF,CAAC;AAEF,eAAO,MAAM,wBAAwB,aAAc,WAAW,OAAO,MAAM,WAAW,MAAM,KAAG,IAM9F,CAAC"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAqD,MAAM,cAAc,CAAC;AAE9F,QAAA,MAAM,iCAAiC,GACnC,WAAU,MAA4C,KACvD,WAmBF,CAAC;AAEF,QAAA,MAAM,wBAAwB,GAAI,UAAU,WAAW,EAAE,KAAK,MAAM,EAAE,SAAS,MAAM,KAAG,IAMvF,CAAC;AAEF,OAAO,EAAE,iCAAiC,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/provider.js

@@ -1,6 +1,6 @@
 import { DisplayManager } from "@gtkx/gi/gdk";
 import { CssProvider, STYLE_PROVIDER_PRIORITY_APPLICATION, StyleContext } from "@gtkx/gi/gtk";
-export const registerProviderForDefaultDisplay = (priority = STYLE_PROVIDER_PRIORITY_APPLICATION) => {
+const registerProviderForDefaultDisplay = (priority = STYLE_PROVIDER_PRIORITY_APPLICATION) => {
     const provider = new CssProvider();
     const manager = DisplayManager.get();
     const attach = (display) => {
@@ -11,15 +11,18 @@ export const registerProviderForDefaultDisplay = (priority = STYLE_PROVIDER_PRIO
         attach(initialDisplay);
     }
     else {
-        manager.once("display-opened", (openedDisplay) => attach(openedDisplay));
+        manager.once("display-opened", (openedDisplay) => {
+            attach(openedDisplay);
+        });
     }
     return provider;
 };
-export const attachParsingErrorLogger = (provider, log, subject) => {
+const attachParsingErrorLogger = (provider, log, subject) => {
     if (process.env.NODE_ENV !== "production") {
         provider.on("parsing-error", (section, error) => {
             log.warn(`GTK4 rejected ${subject} at ${section.toString()}: ${error.message}`);
         });
     }
 };
+export { registerProviderForDefaultDisplay, attachParsingErrorLogger };
 //# sourceMappingURL=provider.js.map

package/dist/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,mCAAmC,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG9F,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAC7C,QAAQ,GAAW,mCAAmC,EAC3C,EAAE;IACb,MAAM,QAAQ,GAAG,IAAI,WAAW,EAAE,CAAC;IACnC,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,EAAE,CAAC;IAErC,MAAM,MAAM,GAAG,CAAC,OAAgB,EAAQ,EAAE;QACtC,YAAY,CAAC,qBAAqB,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACpE,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,iBAAiB,EAAE,CAAC;IACnD,IAAI,cAAc,EAAE,CAAC;QACjB,MAAM,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC;SAAM,CAAC;QACJ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,aAAsB,EAAQ,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5F,CAAC;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,QAAqB,EAAE,GAAW,EAAE,OAAe,EAAQ,EAAE;IAClG,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QACxC,QAAQ,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;YAC5C,GAAG,CAAC,IAAI,CAAC,iBAAiB,OAAO,OAAO,OAAO,CAAC,QAAQ,EAAE,KAAK,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;QACpF,CAAC,CAAC,CAAC;IACP,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { type Display, DisplayManager } from \"@gtkx/gi/gdk\";\nimport { CssProvider, STYLE_PROVIDER_PRIORITY_APPLICATION, StyleContext } from \"@gtkx/gi/gtk\";\nimport type { Logger } from \"@gtkx/utils\";\n\nexport const registerProviderForDefaultDisplay = (\n    priority: number = STYLE_PROVIDER_PRIORITY_APPLICATION,\n): CssProvider => {\n    const provider = new CssProvider();\n    const manager = DisplayManager.get();\n\n    const attach = (display: Display): void => {\n        StyleContext.addProviderForDisplay(display, provider, priority);\n    };\n\n    const initialDisplay = manager.getDefaultDisplay();\n    if (initialDisplay) {\n        attach(initialDisplay);\n    } else {\n        manager.once(\"display-opened\", (openedDisplay: Display): void => attach(openedDisplay));\n    }\n\n    return provider;\n};\n\nexport const attachParsingErrorLogger = (provider: CssProvider, log: Logger, subject: string): void => {\n    if (process.env.NODE_ENV !== \"production\") {\n        provider.on(\"parsing-error\", (section, error) => {\n            log.warn(`GTK4 rejected ${subject} at ${section.toString()}: ${error.message}`);\n        });\n    }\n};\n"]}
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,cAAc,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,mCAAmC,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE9F,MAAM,iCAAiC,GAAG,CACtC,WAAmB,mCAAmC,EAC3C,EAAE;IACb,MAAM,QAAQ,GAAG,IAAI,WAAW,EAAE,CAAC;IACnC,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,EAAE,CAAC;IAErC,MAAM,MAAM,GAAG,CAAC,OAAgB,EAAQ,EAAE;QACtC,YAAY,CAAC,qBAAqB,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACpE,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,iBAAiB,EAAE,CAAC;IAEnD,IAAI,cAAc,EAAE,CAAC;QACjB,MAAM,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC;SAAM,CAAC;QACJ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,aAAsB,EAAQ,EAAE;YAC5D,MAAM,CAAC,aAAa,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACP,CAAC;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,wBAAwB,GAAG,CAAC,QAAqB,EAAE,GAAW,EAAE,OAAe,EAAQ,EAAE;IAC3F,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QACxC,QAAQ,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;YAC5C,GAAG,CAAC,IAAI,CAAC,iBAAiB,OAAO,OAAO,OAAO,CAAC,QAAQ,EAAE,KAAK,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;QACpF,CAAC,CAAC,CAAC;IACP,CAAC;AACL,CAAC,CAAC;AAEF,OAAO,EAAE,iCAAiC,EAAE,wBAAwB,EAAE,CAAC","sourcesContent":["import type { Logger } from \"@gtkx/utils\";\nimport { type Display, DisplayManager } from \"@gtkx/gi/gdk\";\nimport { CssProvider, STYLE_PROVIDER_PRIORITY_APPLICATION, StyleContext } from \"@gtkx/gi/gtk\";\n\nconst registerProviderForDefaultDisplay = (\n    priority: number = STYLE_PROVIDER_PRIORITY_APPLICATION,\n): CssProvider => {\n    const provider = new CssProvider();\n    const manager = DisplayManager.get();\n\n    const attach = (display: Display): void => {\n        StyleContext.addProviderForDisplay(display, provider, priority);\n    };\n\n    const initialDisplay = manager.getDefaultDisplay();\n\n    if (initialDisplay) {\n        attach(initialDisplay);\n    } else {\n        manager.once(\"display-opened\", (openedDisplay: Display): void => {\n            attach(openedDisplay);\n        });\n    }\n\n    return provider;\n};\n\nconst attachParsingErrorLogger = (provider: CssProvider, log: Logger, subject: string): void => {\n    if (process.env.NODE_ENV !== \"production\") {\n        provider.on(\"parsing-error\", (section, error) => {\n            log.warn(`GTK4 rejected ${subject} at ${section.toString()}: ${error.message}`);\n        });\n    }\n};\n\nexport { registerProviderForDefaultDisplay, attachParsingErrorLogger };\n"]}

package/dist/stylesheet.d.ts

@@ -1,4 +1,4 @@
-export declare class StyleSheet {
+declare class StyleSheet {
     private css;
     private provider;
     private updateScheduled;
@@ -6,4 +6,5 @@ export declare class StyleSheet {
     private scheduleUpdate;
     insert(rule: string): void;
 }
+export { StyleSheet };
 //# sourceMappingURL=stylesheet.d.ts.map

package/dist/stylesheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../src/stylesheet.ts"],"names":[],"mappings":"AAMA,qBAAa,UAAU;IACnB,OAAO,CAAC,GAAG,CAAM;IACjB,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAStB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAGzB;CACJ"}
+{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../src/stylesheet.ts"],"names":[],"mappings":"AAMA,cAAM,UAAU;IACZ,OAAO,CAAC,GAAG,CAAM;IACjB,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAatB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;CAI7B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/stylesheet.js

@@ -1,21 +1,23 @@
 import { createLogger } from "@gtkx/utils";
 import { attachParsingErrorLogger, registerProviderForDefaultDisplay } from "./provider.js";
 const log = createLogger("css");
-export class StyleSheet {
+class StyleSheet {
     css = "";
     provider = null;
     updateScheduled = false;
     ensureProvider() {
-        if (this.provider)
+        if (this.provider) {
             return this.provider;
+        }
         const provider = registerProviderForDefaultDisplay();
         this.provider = provider;
         attachParsingErrorLogger(provider, log, "CSS");
         return provider;
     }
     scheduleUpdate() {
-        if (this.updateScheduled)
+        if (this.updateScheduled) {
             return;
+        }
         this.updateScheduled = true;
         queueMicrotask(() => {
             this.updateScheduled = false;
@@ -27,4 +29,5 @@ export class StyleSheet {
         this.scheduleUpdate();
     }
 }
+export { StyleSheet };
 //# sourceMappingURL=stylesheet.js.map

package/dist/stylesheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.js","sourceRoot":"","sources":["../src/stylesheet.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,wBAAwB,EAAE,iCAAiC,EAAE,MAAM,eAAe,CAAC;AAE5F,MAAM,GAAG,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;AAEhC,MAAM,OAAO,UAAU;IACX,GAAG,GAAG,EAAE,CAAC;IACT,QAAQ,GAA2B,IAAI,CAAC;IACxC,eAAe,GAAG,KAAK,CAAC;IAExB,cAAc;QAClB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,QAAQ,CAAC;QACxC,MAAM,QAAQ,GAAG,iCAAiC,EAAE,CAAC;QACrD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,wBAAwB,CAAC,QAAQ,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;QAC/C,OAAO,QAAQ,CAAC;IACpB,CAAC;IAEO,cAAc;QAClB,IAAI,IAAI,CAAC,eAAe;YAAE,OAAO;QACjC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,cAAc,CAAC,GAAG,EAAE;YAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,IAAI,CAAC,cAAc,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;IACP,CAAC;IAED,MAAM,CAAC,IAAY;QACf,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACrD,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;CACJ","sourcesContent":["import type * as Gtk from \"@gtkx/gi/gtk\";\nimport { createLogger } from \"@gtkx/utils\";\nimport { attachParsingErrorLogger, registerProviderForDefaultDisplay } from \"./provider.js\";\n\nconst log = createLogger(\"css\");\n\nexport class StyleSheet {\n    private css = \"\";\n    private provider: Gtk.CssProvider | null = null;\n    private updateScheduled = false;\n\n    private ensureProvider(): Gtk.CssProvider {\n        if (this.provider) return this.provider;\n        const provider = registerProviderForDefaultDisplay();\n        this.provider = provider;\n        attachParsingErrorLogger(provider, log, \"CSS\");\n        return provider;\n    }\n\n    private scheduleUpdate(): void {\n        if (this.updateScheduled) return;\n        this.updateScheduled = true;\n        queueMicrotask(() => {\n            this.updateScheduled = false;\n            this.ensureProvider().loadFromString(this.css);\n        });\n    }\n\n    insert(rule: string): void {\n        this.css += this.css.length > 0 ? `\\n${rule}` : rule;\n        this.scheduleUpdate();\n    }\n}\n"]}
+{"version":3,"file":"stylesheet.js","sourceRoot":"","sources":["../src/stylesheet.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,wBAAwB,EAAE,iCAAiC,EAAE,MAAM,eAAe,CAAC;AAE5F,MAAM,GAAG,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;AAEhC,MAAM,UAAU;IACJ,GAAG,GAAG,EAAE,CAAC;IACT,QAAQ,GAA2B,IAAI,CAAC;IACxC,eAAe,GAAG,KAAK,CAAC;IAExB,cAAc;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;QACzB,CAAC;QAED,MAAM,QAAQ,GAAG,iCAAiC,EAAE,CAAC;QACrD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,wBAAwB,CAAC,QAAQ,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;QAE/C,OAAO,QAAQ,CAAC;IACpB,CAAC;IAEO,cAAc;QAClB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,OAAO;QACX,CAAC;QAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAE5B,cAAc,CAAC,GAAG,EAAE;YAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,IAAI,CAAC,cAAc,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;IACP,CAAC;IAED,MAAM,CAAC,IAAY;QACf,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACrD,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;CACJ;AAED,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import type * as Gtk from \"@gtkx/gi/gtk\";\nimport { createLogger } from \"@gtkx/utils\";\nimport { attachParsingErrorLogger, registerProviderForDefaultDisplay } from \"./provider.js\";\n\nconst log = createLogger(\"css\");\n\nclass StyleSheet {\n    private css = \"\";\n    private provider: Gtk.CssProvider | null = null;\n    private updateScheduled = false;\n\n    private ensureProvider(): Gtk.CssProvider {\n        if (this.provider) {\n            return this.provider;\n        }\n\n        const provider = registerProviderForDefaultDisplay();\n        this.provider = provider;\n        attachParsingErrorLogger(provider, log, \"CSS\");\n\n        return provider;\n    }\n\n    private scheduleUpdate(): void {\n        if (this.updateScheduled) {\n            return;\n        }\n\n        this.updateScheduled = true;\n\n        queueMicrotask(() => {\n            this.updateScheduled = false;\n            this.ensureProvider().loadFromString(this.css);\n        });\n    }\n\n    insert(rule: string): void {\n        this.css += this.css.length > 0 ? `\\n${rule}` : rule;\n        this.scheduleUpdate();\n    }\n}\n\nexport { StyleSheet };\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/css",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.3",
   "description": "Emotion-flavored CSS-in-JS that compiles to real GTK4 CSS and installs it on the default display",
   "keywords": [
     "gtkx",
@@ -44,15 +44,13 @@
   "dependencies": {
     "@emotion/serialize": "^1.3.3",
     "stylis": "^4.4.0",
-    "@gtkx/utils": "1.0.0-rc.1"
+    "@gtkx/utils": "1.0.0-rc.3"
   },
   "devDependencies": {
     "@types/stylis": "^4.2.7",
-    "@gtkx/vitest": "1.0.0-rc.1"
+    "@gtkx/vitest": "1.0.0-rc.3"
   },
   "scripts": {
-    "build": "tsc -b tsconfig.lib.json",
-    "typecheck": "tsc -b --emitDeclarationOnly",
     "release": "tsx ../../scripts/release-package.ts"
   }
 }

package/src/create-css.ts

@@ -1,35 +1,55 @@
 import type { CSSInterpolation, RegisteredCache, SerializedStyles } from "@emotion/serialize";
-import { serializeStyles } from "@emotion/serialize";
 import type { Element } from "stylis";
+import { serializeStyles } from "@emotion/serialize";
 import { compile, middleware, rulesheet, stringify, serialize as stylisSerialize } from "stylis";
 import { escapeNamedColors, restoreNamedColors } from "./named-colors.js";
 import { StyleSheet } from "./stylesheet.js";
 
-const KEY = "gtkx";
-
-const LABEL_DECL_FIRST_CHAR = 108;
-const LABEL_DECL_THIRD_CHAR = 98;
-
 type CxToken = string | boolean | undefined | null;
 
-export type Css = {
+type Css = {
     css: (...args: CSSInterpolation[]) => string;
     cx: (...classNames: CxToken[]) => string[];
     injectGlobal: (...args: CSSInterpolation[]) => void;
 };
 
-export const removeLabel = (element: Element): void => {
-    if (
-        element.type === "decl" &&
+type TokenPartition = { rawClasses: string[]; registeredStyles: string[] };
+type CssState = { sheet: StyleSheet; inserted: Set<string>; registered: RegisteredCache };
+
+const KEY = "gtkx";
+const LABEL_DECL_FIRST_CHAR = 108;
+const LABEL_DECL_THIRD_CHAR = 98;
+
+const removeLabel = (element: Element): void => {
+    if (!(element.type === "decl" &&
         element.value.codePointAt(0) === LABEL_DECL_FIRST_CHAR &&
-        element.value.codePointAt(2) === LABEL_DECL_THIRD_CHAR
-    ) {
-        element.return = "";
-        element.value = "";
+        element.value.codePointAt(2) === LABEL_DECL_THIRD_CHAR)) {
+        return;
     }
+
+    element.return = "";
+    element.value = "";
 };
 
-const classNameFor = (serialized: SerializedStyles): string => `${KEY}-${serialized.name}`;
+const getClassName = (serialized: SerializedStyles): string => `${KEY}-${serialized.name}`;
+const isNonEmptyString = (token: CxToken): token is string => typeof token === "string" && token.length > 0;
+
+const partitionTokens = (tokens: string[], registered: RegisteredCache): TokenPartition => {
+    const rawClasses: string[] = [];
+    const registeredStyles: string[] = [];
+
+    for (const token of tokens) {
+        const styles = registered[token];
+
+        if (styles === undefined) {
+            rawClasses.push(token);
+        } else {
+            registeredStyles.push(styles);
+        }
+    }
+
+    return { rawClasses, registeredStyles };
+};
 
 const runStylis = (sheet: StyleSheet, input: string): void => {
     stylisSerialize(
@@ -44,55 +64,62 @@ const runStylis = (sheet: StyleSheet, input: string): void => {
     );
 };
 
-export const createCss = (): Css => {
-    const sheet = new StyleSheet();
-    const inserted = new Set<string>();
-    const registered: RegisteredCache = {};
+const didMarkNewStyle = (state: CssState, serialized: SerializedStyles): boolean => {
+    if (state.inserted.has(serialized.name)) {
+        return false;
+    }
 
-    const serialize = (args: CSSInterpolation[]): SerializedStyles => serializeStyles(args, registered);
+    state.inserted.add(serialized.name);
 
-    const insertStyles = (serialized: SerializedStyles): void => {
-        if (inserted.has(serialized.name)) return;
-        inserted.add(serialized.name);
-        const className = classNameFor(serialized);
-        runStylis(sheet, `.${className}{${serialized.styles}}`);
-        registered[className] = serialized.styles;
-    };
+    return true;
+};
 
-    const insertWithoutScoping = (serialized: SerializedStyles): void => {
-        if (inserted.has(serialized.name)) return;
-        inserted.add(serialized.name);
-        runStylis(sheet, serialized.styles);
-    };
+const insertStyles = (state: CssState, serialized: SerializedStyles): void => {
+    if (!didMarkNewStyle(state, serialized)) {
+        return;
+    }
 
-    const css = (...args: CSSInterpolation[]): string => {
-        const serialized = serialize(args);
-        insertStyles(serialized);
-        return classNameFor(serialized);
-    };
+    const className = getClassName(serialized);
+    runStylis(state.sheet, `.${className}{${serialized.styles}}`);
+    state.registered[className] = serialized.styles;
+};
 
-    const cx = (...classNames: CxToken[]): string[] => {
-        const tokens = classNames.filter((cn): cn is string => typeof cn === "string" && cn.length > 0);
-
-        const rawClasses: string[] = [];
-        const registeredStyles: string[] = [];
-        for (const token of tokens) {
-            const styles = registered[token];
-            if (styles === undefined) {
-                rawClasses.push(token);
-            } else {
-                registeredStyles.push(styles);
-            }
-        }
+const insertWithoutScoping = (state: CssState, serialized: SerializedStyles): void => {
+    if (!didMarkNewStyle(state, serialized)) {
+        return;
+    }
 
-        if (registeredStyles.length < 2) return tokens;
+    runStylis(state.sheet, serialized.styles);
+};
 
-        return [...rawClasses, css(registeredStyles.join(""))];
-    };
+const cssClassName = (state: CssState, args: CSSInterpolation[]): string => {
+    const serialized = serializeStyles(args, state.registered);
+    insertStyles(state, serialized);
 
-    const injectGlobal = (...args: CSSInterpolation[]): void => {
-        insertWithoutScoping(serialize(args));
-    };
+    return getClassName(serialized);
+};
+
+const cxClassNames = (state: CssState, classNames: CxToken[]): string[] => {
+    const tokens = classNames.filter(isNonEmptyString);
+    const { rawClasses, registeredStyles } = partitionTokens(tokens, state.registered);
+
+    if (registeredStyles.length < 2) {
+        return tokens;
+    }
 
-    return { css, cx, injectGlobal };
+    return [...rawClasses, cssClassName(state, [registeredStyles.join("")])];
 };
+
+const createCss = (): Css => {
+    const state: CssState = { sheet: new StyleSheet(), inserted: new Set(), registered: {} };
+
+    return {
+        css: (...args) => cssClassName(state, args),
+        cx: (...classNames) => cxClassNames(state, classNames),
+        injectGlobal: (...args) => {
+            insertWithoutScoping(state, serializeStyles(args, state.registered));
+        },
+    };
+};
+
+export { removeLabel, createCss, type Css };

package/src/index.ts

@@ -1,19 +1,20 @@
-import { type Css, createCss } from "./create-css.js";
+import { createCss, type Css } from "./create-css.js";
 
 const instance = createCss();
-
 /**
  * Serializes the given style interpolations, inserts the resulting rules into
  * the default stylesheet, and returns the generated GTK4 CSS class name.
  */
-export const css: Css["css"] = instance.css;
+const css: Css["css"] = instance.css;
 /**
  * Combines class name tokens, filtering out falsy values and merging any
  * gtkx-registered styles into a single generated class.
  */
-export const cx: Css["cx"] = instance.cx;
+const cx: Css["cx"] = instance.cx;
 /**
  * Serializes and inserts the given styles into the default stylesheet globally,
  * without scoping them to a generated class.
  */
-export const injectGlobal: Css["injectGlobal"] = instance.injectGlobal;
+const injectGlobal: Css["injectGlobal"] = instance.injectGlobal;
+
+export { css, cx, injectGlobal };

package/src/named-colors.ts

@@ -1,14 +1,13 @@
-export const AT_RULE_KEYWORDS: Set<string> = new Set(["define-color", "import", "keyframes", "media"]);
-
+const AT_RULE_KEYWORDS: Set<string> = new Set(["define-color", "import", "keyframes", "media"]);
 const AT_IDENTIFIER_PATTERN = /@([A-Za-z_][\w-]*)/g;
+const NAMED_COLOR_TOKEN = "gtkx-named-color__";
+const NAMED_COLOR_TOKEN_PATTERN = new RegExp(String.raw`${NAMED_COLOR_TOKEN}([\w-]+)`, "g");
 
-export const NAMED_COLOR_TOKEN = "gtkx-named-color__";
-
-const NAMED_COLOR_TOKEN_PATTERN = new RegExp(`${NAMED_COLOR_TOKEN}([\\w-]+)`, "g");
-
-export const escapeNamedColors = (input: string): string =>
-    input.replace(AT_IDENTIFIER_PATTERN, (match, name: string) =>
+const escapeNamedColors = (input: string): string =>
+    input.replaceAll(AT_IDENTIFIER_PATTERN, (match, name: string) =>
         AT_RULE_KEYWORDS.has(name) ? match : `${NAMED_COLOR_TOKEN}${name}`,
     );
 
-export const restoreNamedColors = (rule: string): string => rule.replace(NAMED_COLOR_TOKEN_PATTERN, "@$1");
+const restoreNamedColors = (rule: string): string => rule.replaceAll(NAMED_COLOR_TOKEN_PATTERN, "@$1");
+
+export { AT_RULE_KEYWORDS, NAMED_COLOR_TOKEN, escapeNamedColors, restoreNamedColors };

package/src/provider.ts

@@ -1,8 +1,8 @@
+import type { Logger } from "@gtkx/utils";
 import { type Display, DisplayManager } from "@gtkx/gi/gdk";
 import { CssProvider, STYLE_PROVIDER_PRIORITY_APPLICATION, StyleContext } from "@gtkx/gi/gtk";
-import type { Logger } from "@gtkx/utils";
 
-export const registerProviderForDefaultDisplay = (
+const registerProviderForDefaultDisplay = (
     priority: number = STYLE_PROVIDER_PRIORITY_APPLICATION,
 ): CssProvider => {
     const provider = new CssProvider();
@@ -13,19 +13,24 @@ export const registerProviderForDefaultDisplay = (
     };
 
     const initialDisplay = manager.getDefaultDisplay();
+
     if (initialDisplay) {
         attach(initialDisplay);
     } else {
-        manager.once("display-opened", (openedDisplay: Display): void => attach(openedDisplay));
+        manager.once("display-opened", (openedDisplay: Display): void => {
+            attach(openedDisplay);
+        });
     }
 
     return provider;
 };
 
-export const attachParsingErrorLogger = (provider: CssProvider, log: Logger, subject: string): void => {
+const attachParsingErrorLogger = (provider: CssProvider, log: Logger, subject: string): void => {
     if (process.env.NODE_ENV !== "production") {
         provider.on("parsing-error", (section, error) => {
             log.warn(`GTK4 rejected ${subject} at ${section.toString()}: ${error.message}`);
         });
     }
 };
+
+export { registerProviderForDefaultDisplay, attachParsingErrorLogger };

package/src/stylesheet.ts

@@ -4,22 +4,30 @@ import { attachParsingErrorLogger, registerProviderForDefaultDisplay } from "./p
 
 const log = createLogger("css");
 
-export class StyleSheet {
+class StyleSheet {
     private css = "";
     private provider: Gtk.CssProvider | null = null;
     private updateScheduled = false;
 
     private ensureProvider(): Gtk.CssProvider {
-        if (this.provider) return this.provider;
+        if (this.provider) {
+            return this.provider;
+        }
+
         const provider = registerProviderForDefaultDisplay();
         this.provider = provider;
         attachParsingErrorLogger(provider, log, "CSS");
+
         return provider;
     }
 
     private scheduleUpdate(): void {
-        if (this.updateScheduled) return;
+        if (this.updateScheduled) {
+            return;
+        }
+
         this.updateScheduled = true;
+
         queueMicrotask(() => {
             this.updateScheduled = false;
             this.ensureProvider().loadFromString(this.css);
@@ -31,3 +39,5 @@ export class StyleSheet {
         this.scheduleUpdate();
     }
 }
+
+export { StyleSheet };