@gtkx/css 1.2.2 → 1.4.0

package/README.md

@@ -5,9 +5,9 @@
 <h1 align="center">GTKX</h1>
 
 <p align="center">
-  The React framework for Linux.<br />
-  Write native Linux applications with React and TypeScript.
-  Built on the GNOME stack and standard web tooling.
+  The React framework for Linux, built on GTK.<br />
+  Write native GTK4 desktop applications with React and TypeScript.
+  Real GTK widgets, the GNOME stack, and standard web tooling.
 </p>
 
 <p align="center">
@@ -98,7 +98,7 @@ GTK4 is mature, and GtkBuilder XML can lay out a static interface, but nothing r
 - a React reconciler that exposes every GObject as a JSX element,
 - a CLI for scaffolding, development, and production builds,
 - a dev server with Fast Refresh that patches your running UI in place,
-- CSS-in-JS styling and high-level list, grid, and dialog components,
+- CSS-in-JS styling, React Spring animations, React Navigation stack, tab, drawer, and split view navigators, and high-level list, grid, and dialog components,
 - a Testing Library-style API for querying and driving your widgets in tests,
 - and a Model Context Protocol (MCP) server that exposes your live app to AI agents.
 
@@ -157,6 +157,8 @@ Explore the [example apps](https://github.com/gtkx-org/gtkx/tree/main/examples):
 - [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/hello-world): the counter above.
 - [`gtk-demo`](https://github.com/gtkx-org/gtkx/tree/main/examples/gtk-demo): a React port of the official GTK4 widget showcase, covering lists, dialogs, gestures, CSS, and OpenGL.
 - [`browser`](https://github.com/gtkx-org/gtkx/tree/main/examples/browser): a WebKitWebView-based web browser.
+- [`animations`](https://github.com/gtkx-org/gtkx/tree/main/examples/animations): a tour of `@gtkx/animated`, React Spring animations driven by the GTK frame clock.
+- [`navigation`](https://github.com/gtkx-org/gtkx/tree/main/examples/navigation): a tour of `@gtkx/navigation`, React Navigation's stack, tab, and drawer navigators rendered with libadwaita.
 - [`tutorial`](https://github.com/gtkx-org/gtkx/tree/main/examples/tutorial): the Tasks app the documentation builds.
 
 ## Status

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;AAO9F,8FAA8F;AAC9F,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;AAEnD,gHAAgH;AAChH,KAAK,GAAG,GAAG;IACP;;;OAGG;IACH,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,gBAAgB,EAAE,KAAK,MAAM,CAAC;IAC7C;;;OAGG;IACH,EAAE,EAAE,CAAC,GAAG,UAAU,EAAE,OAAO,EAAE,KAAK,MAAM,EAAE,CAAC;IAC3C,mGAAmG;IACnG,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AA+GF,QAAA,MAAM,SAAS,QAAO,GAUrB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,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;AAK9F,8FAA8F;AAC9F,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;AAEnD,gHAAgH;AAChH,KAAK,GAAG,GAAG;IACP;;;OAGG;IACH,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,gBAAgB,EAAE,KAAK,MAAM,CAAC;IAC7C;;;OAGG;IACH,EAAE,EAAE,CAAC,GAAG,UAAU,EAAE,OAAO,EAAE,KAAK,MAAM,EAAE,CAAC;IAC3C,mGAAmG;IACnG,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AAgFF,QAAA,MAAM,SAAS,QAAO,GAUrB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,CAAC"}

package/dist/create-css.js

@@ -1,27 +1,8 @@
 import { serializeStyles } from "@emotion/serialize";
-import { compile, middleware, rulesheet, stringify, serialize as stylisSerialize } from "stylis";
-import { escapeNamedColors, restoreNamedColors } from "./named-colors.js";
+import { eachRule, terminateDeclarations } from "./serialize-rule.js";
 import { StyleSheet } from "./stylesheet.js";
 const KEY = "gtkx";
-const LABEL_DECL_FIRST_CHAR = 108;
-const LABEL_DECL_THIRD_CHAR = 98;
-const removeLabel = (element) => {
-    if (!(element.type === "decl" &&
-        element.value.codePointAt(0) === LABEL_DECL_FIRST_CHAR &&
-        element.value.codePointAt(2) === LABEL_DECL_THIRD_CHAR)) {
-        return;
-    }
-    element.return = "";
-    element.value = "";
-};
 const getClassName = (serialized) => `${KEY}-${serialized.name}`;
-const terminateDeclarations = (styles) => {
-    const trimmed = styles.trimEnd();
-    if (trimmed.length === 0 || trimmed.endsWith(";") || trimmed.endsWith("}")) {
-        return trimmed;
-    }
-    return `${trimmed};`;
-};
 const isNonEmptyString = (token) => typeof token === "string" && token.length > 0;
 const partitionTokens = (tokens, registered) => {
     const rawClasses = [];
@@ -37,14 +18,10 @@ const partitionTokens = (tokens, registered) => {
     }
     return { rawClasses, registeredStyles };
 };
-const runStylis = (sheet, input) => {
-    stylisSerialize(compile(escapeNamedColors(input)), middleware([
-        removeLabel,
-        stringify,
-        rulesheet((rule) => {
-            sheet.insert(restoreNamedColors(rule));
-        }),
-    ]));
+const insertRules = (state, input) => {
+    eachRule(input, (rule) => {
+        state.sheet.insert(rule);
+    });
 };
 const didMarkNewStyle = (state, serialized) => {
     if (state.inserted.has(serialized.name)) {
@@ -59,14 +36,14 @@ const insertStyles = (state, serialized) => {
     }
     const className = getClassName(serialized);
     const styles = terminateDeclarations(serialized.styles);
-    runStylis(state.sheet, `.${className}{${styles}}`);
+    insertRules(state, `.${className}{${styles}}`);
     state.registered[className] = styles;
 };
 const insertWithoutScoping = (state, serialized) => {
     if (!didMarkNewStyle(state, serialized)) {
         return;
     }
-    runStylis(state.sheet, serialized.styles);
+    insertRules(state, serialized.styles);
 };
 const cssClassName = (state, args) => {
     const serialized = serializeStyles(args, state.registered);

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 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\n/** A `cx` argument: a non-empty class name, or a boolean or nullish value that is dropped. */\ntype CxToken = string | boolean | undefined | null;\n\n/** The `css`, `cx` and `injectGlobal` helpers bound to one GTK4 stylesheet and its cache of inserted styles. */\ntype Css = {\n    /**\n     * Serializes the given style interpolations, inserts the resulting rules into the stylesheet, and\n     * returns the generated GTK4 CSS class name.\n     */\n    css: (...args: CSSInterpolation[]) => string;\n    /**\n     * Filters out falsy tokens and returns the remaining class names, collapsing two or more\n     * GTKX-generated classes into one merged class where later styles win.\n     */\n    cx: (...classNames: CxToken[]) => string[];\n    /** Serializes and inserts the given styles into the stylesheet globally, unscoped by any class. */\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}`;\n\nconst terminateDeclarations = (styles: string): string => {\n    const trimmed = styles.trimEnd();\n\n    if (trimmed.length === 0 || trimmed.endsWith(\";\") || trimmed.endsWith(\"}\")) {\n        return trimmed;\n    }\n\n    return `${trimmed};`;\n};\n\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    const styles = terminateDeclarations(serialized.styles);\n    runStylis(state.sheet, `.${className}{${styles}}`);\n    state.registered[className] = 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 { createCss, type Css };\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 { serializeStyles } from \"@emotion/serialize\";\nimport { eachRule, terminateDeclarations } from \"./serialize-rule.js\";\nimport { StyleSheet } from \"./stylesheet.js\";\n\n/** A `cx` argument: a non-empty class name, or a boolean or nullish value that is dropped. */\ntype CxToken = string | boolean | undefined | null;\n\n/** The `css`, `cx` and `injectGlobal` helpers bound to one GTK4 stylesheet and its cache of inserted styles. */\ntype Css = {\n    /**\n     * Serializes the given style interpolations, inserts the resulting rules into the stylesheet, and\n     * returns the generated GTK4 CSS class name.\n     */\n    css: (...args: CSSInterpolation[]) => string;\n    /**\n     * Filters out falsy tokens and returns the remaining class names, collapsing two or more\n     * GTKX-generated classes into one merged class where later styles win.\n     */\n    cx: (...classNames: CxToken[]) => string[];\n    /** Serializes and inserts the given styles into the stylesheet globally, unscoped by any class. */\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\";\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 insertRules = (state: CssState, input: string): void => {\n    eachRule(input, (rule) => {\n        state.sheet.insert(rule);\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    const styles = terminateDeclarations(serialized.styles);\n    insertRules(state, `.${className}{${styles}}`);\n    state.registered[className] = styles;\n};\n\nconst insertWithoutScoping = (state: CssState, serialized: SerializedStyles): void => {\n    if (!didMarkNewStyle(state, serialized)) {\n        return;\n    }\n\n    insertRules(state, 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 { createCss, type Css };\n"]}

package/dist/internal.d.ts

@@ -0,0 +1,3 @@
+export { attachParsingErrorLogger, type ProviderOptions, registerProviderForDefaultDisplay, } from "./provider.js";
+export { scopedRule } from "./scoped-rule.js";
+//# sourceMappingURL=internal.d.ts.map

package/dist/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../src/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,wBAAwB,EACxB,KAAK,eAAe,EACpB,iCAAiC,GACpC,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/internal.js

@@ -0,0 +1,3 @@
+export { attachParsingErrorLogger, registerProviderForDefaultDisplay, } from "./provider.js";
+export { scopedRule } from "./scoped-rule.js";
+//# sourceMappingURL=internal.js.map

package/dist/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../src/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,wBAAwB,EAExB,iCAAiC,GACpC,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export {\n    attachParsingErrorLogger,\n    type ProviderOptions,\n    registerProviderForDefaultDisplay,\n} from \"./provider.js\";\nexport { scopedRule } from \"./scoped-rule.js\";\n"]}

package/dist/provider.d.ts

@@ -1,6 +1,10 @@
 import type { Logger } from "@gtkx/utils";
 import { CssProvider } from "@gtkx/gi/gtk";
-declare const registerProviderForDefaultDisplay: (priority?: number) => CssProvider;
+type ProviderOptions = {
+    priority: number;
+    followsPreferences: boolean;
+};
+declare const registerProviderForDefaultDisplay: (options?: Partial<ProviderOptions>) => CssProvider;
 declare const attachParsingErrorLogger: (provider: CssProvider, log: Logger, subject: string) => void;
-export { registerProviderForDefaultDisplay, attachParsingErrorLogger };
+export { type ProviderOptions, 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":"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,WAoBF,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"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAEH,WAAW,EAId,MAAM,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,kBAAkB,EAAE,OAAO,CAAA;CAAE,CAAC;AAoCzE,QAAA,MAAM,iCAAiC,GAAI,UAAU,OAAO,CAAC,eAAe,CAAC,KAAG,WAyB/E,CAAC;AAEF,QAAA,MAAM,wBAAwB,GAAI,UAAU,WAAW,EAAE,KAAK,MAAM,EAAE,SAAS,MAAM,KAAG,IAMvF,CAAC;AAEF,OAAO,EAAE,KAAK,eAAe,EAAE,iCAAiC,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/provider.js

@@ -1,11 +1,40 @@
 import { DisplayManager } from "@gtkx/gi/gdk";
-import { CssProvider, STYLE_PROVIDER_PRIORITY_APPLICATION, StyleContext } from "@gtkx/gi/gtk";
-const registerProviderForDefaultDisplay = (priority = STYLE_PROVIDER_PRIORITY_APPLICATION) => {
+import { checkVersion, CssProvider, Settings, STYLE_PROVIDER_PRIORITY_APPLICATION, StyleContext, } from "@gtkx/gi/gtk";
+const REDUCED_MOTION_MINOR = 22;
+const DEFAULT_OPTIONS = {
+    priority: STYLE_PROVIDER_PRIORITY_APPLICATION,
+    followsPreferences: true,
+};
+const hasReducedMotion = () => checkVersion(4, REDUCED_MOTION_MINOR, 0) === null;
+const applyPreferences = (provider, settings) => {
+    provider.prefersColorScheme = settings.gtkInterfaceColorScheme;
+    provider.prefersContrast = settings.gtkInterfaceContrast;
+    if (hasReducedMotion()) {
+        provider.prefersReducedMotion = settings.gtkInterfaceReducedMotion;
+    }
+};
+const followSystemPreferences = (provider, display) => {
+    const settings = Settings.getForDisplay(display);
+    const sync = () => {
+        applyPreferences(provider, settings);
+    };
+    sync();
+    settings.on("notify::gtk-interface-color-scheme", sync);
+    settings.on("notify::gtk-interface-contrast", sync);
+    if (hasReducedMotion()) {
+        settings.on("notify::gtk-interface-reduced-motion", sync);
+    }
+};
+const registerProviderForDefaultDisplay = (options) => {
+    const { priority, followsPreferences } = { ...DEFAULT_OPTIONS, ...options };
     const provider = new CssProvider();
     const manager = DisplayManager.get();
     const attach = (display) => {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         StyleContext.addProviderForDisplay(display, provider, priority);
+        if (followsPreferences) {
+            followSystemPreferences(provider, display);
+        }
     };
     const initialDisplay = manager.getDefaultDisplay();
     if (initialDisplay) {

package/dist/provider.js.map

@@ -1 +1 @@
-{"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,4DAA4D;QAC5D,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        // eslint-disable-next-line @typescript-eslint/no-deprecated\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"]}
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Logger } from \"@gtkx/utils\";\nimport { type Display, DisplayManager } from \"@gtkx/gi/gdk\";\nimport {\n    checkVersion,\n    CssProvider,\n    Settings,\n    STYLE_PROVIDER_PRIORITY_APPLICATION,\n    StyleContext,\n} from \"@gtkx/gi/gtk\";\n\ntype ProviderOptions = { priority: number; followsPreferences: boolean };\n\nconst REDUCED_MOTION_MINOR = 22;\n\nconst DEFAULT_OPTIONS: ProviderOptions = {\n    priority: STYLE_PROVIDER_PRIORITY_APPLICATION,\n    followsPreferences: true,\n};\n\nconst hasReducedMotion = (): boolean => checkVersion(4, REDUCED_MOTION_MINOR, 0) === null;\n\nconst applyPreferences = (provider: CssProvider, settings: Settings): void => {\n    provider.prefersColorScheme = settings.gtkInterfaceColorScheme;\n    provider.prefersContrast = settings.gtkInterfaceContrast;\n\n    if (hasReducedMotion()) {\n        provider.prefersReducedMotion = settings.gtkInterfaceReducedMotion;\n    }\n};\n\nconst followSystemPreferences = (provider: CssProvider, display: Display): void => {\n    const settings = Settings.getForDisplay(display);\n\n    const sync = (): void => {\n        applyPreferences(provider, settings);\n    };\n\n    sync();\n    settings.on(\"notify::gtk-interface-color-scheme\", sync);\n    settings.on(\"notify::gtk-interface-contrast\", sync);\n\n    if (hasReducedMotion()) {\n        settings.on(\"notify::gtk-interface-reduced-motion\", sync);\n    }\n};\n\nconst registerProviderForDefaultDisplay = (options?: Partial<ProviderOptions>): CssProvider => {\n    const { priority, followsPreferences } = { ...DEFAULT_OPTIONS, ...options };\n    const provider = new CssProvider();\n    const manager = DisplayManager.get();\n\n    const attach = (display: Display): void => {\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        StyleContext.addProviderForDisplay(display, provider, priority);\n\n        if (followsPreferences) {\n            followSystemPreferences(provider, display);\n        }\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 { type ProviderOptions, registerProviderForDefaultDisplay, attachParsingErrorLogger };\n"]}

package/dist/rule-text.d.ts

@@ -0,0 +1,5 @@
+declare const NUL_REASON = "carries a NUL byte, which GTK4 cannot load";
+declare const hasNul: (rule: string) => boolean;
+declare const printableRule: (rule: string) => string;
+export { hasNul, NUL_REASON, printableRule };
+//# sourceMappingURL=rule-text.d.ts.map

package/dist/rule-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rule-text.d.ts","sourceRoot":"","sources":["../src/rule-text.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,UAAU,+CAA+C,CAAC;AAEhE,QAAA,MAAM,MAAM,GAAI,MAAM,MAAM,KAAG,OAA6B,CAAC;AAC7D,QAAA,MAAM,aAAa,GAAI,MAAM,MAAM,KAAG,MAA8C,CAAC;AAErF,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC"}

package/dist/rule-text.js

@@ -0,0 +1,6 @@
+const NUL = "\u{0}";
+const NUL_REASON = "carries a NUL byte, which GTK4 cannot load";
+const hasNul = (rule) => rule.includes(NUL);
+const printableRule = (rule) => rule.replaceAll(NUL, String.raw `\0`);
+export { hasNul, NUL_REASON, printableRule };
+//# sourceMappingURL=rule-text.js.map

package/dist/rule-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rule-text.js","sourceRoot":"","sources":["../src/rule-text.ts"],"names":[],"mappings":"AAAA,MAAM,GAAG,GAAG,OAAO,CAAC;AACpB,MAAM,UAAU,GAAG,4CAA4C,CAAC;AAEhE,MAAM,MAAM,GAAG,CAAC,IAAY,EAAW,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC7D,MAAM,aAAa,GAAG,CAAC,IAAY,EAAU,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAA,IAAI,CAAC,CAAC;AAErF,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC","sourcesContent":["const NUL = \"\\u{0}\";\nconst NUL_REASON = \"carries a NUL byte, which GTK4 cannot load\";\n\nconst hasNul = (rule: string): boolean => rule.includes(NUL);\nconst printableRule = (rule: string): string => rule.replaceAll(NUL, String.raw`\\0`);\n\nexport { hasNul, NUL_REASON, printableRule };\n"]}

package/dist/scoped-rule.d.ts

@@ -0,0 +1,3 @@
+declare const scopedRule: (className: string, style: object) => string;
+export { scopedRule };
+//# sourceMappingURL=scoped-rule.d.ts.map

package/dist/scoped-rule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scoped-rule.d.ts","sourceRoot":"","sources":["../src/scoped-rule.ts"],"names":[],"mappings":"AA4CA,QAAA,MAAM,UAAU,GAAI,WAAW,MAAM,EAAE,OAAO,MAAM,KAAG,MActD,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/scoped-rule.js

@@ -0,0 +1,42 @@
+import { serializeStyles } from "@emotion/serialize";
+import { createLogger } from "@gtkx/utils";
+import { hasNul, NUL_REASON, printableRule } from "./rule-text.js";
+import { eachRule, terminateDeclarations } from "./serialize-rule.js";
+const log = createLogger("css");
+const ESCAPE_REASON = "does not start from the widget it belongs to";
+const NAME_CHAR = /[\w-]/;
+const isScoped = (rule, className) => {
+    const prefix = `.${className}`;
+    if (!rule.startsWith(prefix)) {
+        return false;
+    }
+    const next = rule.charAt(prefix.length);
+    return next !== "" && !NAME_CHAR.test(next);
+};
+const unusableReason = (rule, className) => {
+    if (hasNul(rule)) {
+        return NUL_REASON;
+    }
+    return isScoped(rule, className) ? null : ESCAPE_REASON;
+};
+const collect = (scope, rule) => {
+    const reason = unusableReason(rule, scope.className);
+    if (reason !== null) {
+        log.warn(`Dropped a style rule that ${reason}: ${printableRule(rule)}`);
+        return;
+    }
+    scope.rules.push(rule);
+};
+const scopedRule = (className, style) => {
+    const declarations = terminateDeclarations(serializeStyles([style], {}).styles);
+    if (declarations.length === 0) {
+        return "";
+    }
+    const scope = { className, rules: [] };
+    eachRule(`.${className}{${declarations}}`, (rule) => {
+        collect(scope, rule);
+    });
+    return scope.rules.join("");
+};
+export { scopedRule };
+//# sourceMappingURL=scoped-rule.js.map

package/dist/scoped-rule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scoped-rule.js","sourceRoot":"","sources":["../src/scoped-rule.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAItE,MAAM,GAAG,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;AAChC,MAAM,aAAa,GAAG,8CAA8C,CAAC;AACrE,MAAM,SAAS,GAAG,OAAO,CAAC;AAE1B,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAE,SAAiB,EAAW,EAAE;IAC1D,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;IAE/B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;QAC3B,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAExC,OAAO,IAAI,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChD,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,IAAY,EAAE,SAAiB,EAAiB,EAAE;IACtE,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;QACf,OAAO,UAAU,CAAC;IACtB,CAAC;IAED,OAAO,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC;AAC5D,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,KAAY,EAAE,IAAY,EAAQ,EAAE;IACjD,MAAM,MAAM,GAAG,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAErD,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QAClB,GAAG,CAAC,IAAI,CAAC,6BAA6B,MAAM,KAAK,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAExE,OAAO;IACX,CAAC;IAED,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,SAAiB,EAAE,KAAa,EAAU,EAAE;IAC5D,MAAM,YAAY,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC,KAAkB,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IAE7F,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,EAAE,CAAC;IACd,CAAC;IAED,MAAM,KAAK,GAAU,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;IAE9C,QAAQ,CAAC,IAAI,SAAS,IAAI,YAAY,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QAChD,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChC,CAAC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import type { CSSObject } from \"@emotion/serialize\";\nimport { serializeStyles } from \"@emotion/serialize\";\nimport { createLogger } from \"@gtkx/utils\";\nimport { hasNul, NUL_REASON, printableRule } from \"./rule-text.js\";\nimport { eachRule, terminateDeclarations } from \"./serialize-rule.js\";\n\ntype Scope = { className: string; rules: string[] };\n\nconst log = createLogger(\"css\");\nconst ESCAPE_REASON = \"does not start from the widget it belongs to\";\nconst NAME_CHAR = /[\\w-]/;\n\nconst isScoped = (rule: string, className: string): boolean => {\n    const prefix = `.${className}`;\n\n    if (!rule.startsWith(prefix)) {\n        return false;\n    }\n\n    const next = rule.charAt(prefix.length);\n\n    return next !== \"\" && !NAME_CHAR.test(next);\n};\n\nconst unusableReason = (rule: string, className: string): string | null => {\n    if (hasNul(rule)) {\n        return NUL_REASON;\n    }\n\n    return isScoped(rule, className) ? null : ESCAPE_REASON;\n};\n\nconst collect = (scope: Scope, rule: string): void => {\n    const reason = unusableReason(rule, scope.className);\n\n    if (reason !== null) {\n        log.warn(`Dropped a style rule that ${reason}: ${printableRule(rule)}`);\n\n        return;\n    }\n\n    scope.rules.push(rule);\n};\n\nconst scopedRule = (className: string, style: object): string => {\n    const declarations = terminateDeclarations(serializeStyles([style as CSSObject], {}).styles);\n\n    if (declarations.length === 0) {\n        return \"\";\n    }\n\n    const scope: Scope = { className, rules: [] };\n\n    eachRule(`.${className}{${declarations}}`, (rule) => {\n        collect(scope, rule);\n    });\n\n    return scope.rules.join(\"\");\n};\n\nexport { scopedRule };\n"]}

package/dist/serialize-rule.d.ts

@@ -0,0 +1,4 @@
+declare const terminateDeclarations: (styles: string) => string;
+declare const eachRule: (input: string, visit: (rule: string) => void) => void;
+export { eachRule, terminateDeclarations };
+//# sourceMappingURL=serialize-rule.d.ts.map

package/dist/serialize-rule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialize-rule.d.ts","sourceRoot":"","sources":["../src/serialize-rule.ts"],"names":[],"mappings":"AAkBA,QAAA,MAAM,qBAAqB,GAAI,QAAQ,MAAM,KAAG,MAQ/C,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,OAAO,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,KAAG,IAWhE,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/serialize-rule.js

@@ -0,0 +1,31 @@
+import { compile, middleware, rulesheet, stringify, serialize as stylisSerialize } from "stylis";
+import { escapeNamedColors, restoreNamedColors } from "./named-colors.js";
+const LABEL_DECL_FIRST_CHAR = 108;
+const LABEL_DECL_THIRD_CHAR = 98;
+const removeLabel = (element) => {
+    if (!(element.type === "decl" &&
+        element.value.codePointAt(0) === LABEL_DECL_FIRST_CHAR &&
+        element.value.codePointAt(2) === LABEL_DECL_THIRD_CHAR)) {
+        return;
+    }
+    element.return = "";
+    element.value = "";
+};
+const terminateDeclarations = (styles) => {
+    const trimmed = styles.trimEnd();
+    if (trimmed.length === 0 || trimmed.endsWith(";") || trimmed.endsWith("}")) {
+        return trimmed;
+    }
+    return `${trimmed};`;
+};
+const eachRule = (input, visit) => {
+    stylisSerialize(compile(escapeNamedColors(input)), middleware([
+        removeLabel,
+        stringify,
+        rulesheet((rule) => {
+            visit(restoreNamedColors(rule));
+        }),
+    ]));
+};
+export { eachRule, terminateDeclarations };
+//# sourceMappingURL=serialize-rule.js.map

package/dist/serialize-rule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialize-rule.js","sourceRoot":"","sources":["../src/serialize-rule.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,QAAQ,CAAC;AACjG,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAClC,MAAM,qBAAqB,GAAG,EAAE,CAAC;AAEjC,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAQ,EAAE;IAC3C,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM;QACzB,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,qBAAqB;QACtD,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,qBAAqB,CAAC,EAAE,CAAC;QAC1D,OAAO;IACX,CAAC;IAED,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC;IACpB,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,MAAc,EAAU,EAAE;IACrD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC;IAEjC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACzE,OAAO,OAAO,CAAC;IACnB,CAAC;IAED,OAAO,GAAG,OAAO,GAAG,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,KAA6B,EAAQ,EAAE;IACpE,eAAe,CACX,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EACjC,UAAU,CAAC;QACP,WAAW;QACX,SAAS;QACT,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE;YACf,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;QACpC,CAAC,CAAC;KACL,CAAC,CACL,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,CAAC","sourcesContent":["import type { Element } from \"stylis\";\nimport { compile, middleware, rulesheet, stringify, serialize as stylisSerialize } from \"stylis\";\nimport { escapeNamedColors, restoreNamedColors } from \"./named-colors.js\";\n\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 terminateDeclarations = (styles: string): string => {\n    const trimmed = styles.trimEnd();\n\n    if (trimmed.length === 0 || trimmed.endsWith(\";\") || trimmed.endsWith(\"}\")) {\n        return trimmed;\n    }\n\n    return `${trimmed};`;\n};\n\nconst eachRule = (input: string, visit: (rule: string) => void): void => {\n    stylisSerialize(\n        compile(escapeNamedColors(input)),\n        middleware([\n            removeLabel,\n            stringify,\n            rulesheet((rule) => {\n                visit(restoreNamedColors(rule));\n            }),\n        ]),\n    );\n};\n\nexport { eachRule, terminateDeclarations };\n"]}

package/dist/stylesheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../src/stylesheet.ts"],"names":[],"mappings":"AAcA,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;CAY7B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../src/stylesheet.ts"],"names":[],"mappings":"AAUA,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;CAY7B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/stylesheet.js

@@ -1,11 +1,9 @@
 import { createLogger } from "@gtkx/utils";
 import { attachParsingErrorLogger, registerProviderForDefaultDisplay } from "./provider.js";
+import { hasNul, NUL_REASON, printableRule } from "./rule-text.js";
 import { containmentFailure } from "./self-contained.js";
 const log = createLogger("css");
-const NUL = "\u{0}";
-const NUL_REASON = "carries a NUL byte, which GTK4 cannot load";
-const unusableReason = (rule) => rule.includes(NUL) ? NUL_REASON : containmentFailure(rule);
-const printableRule = (rule) => rule.replaceAll(NUL, String.raw `\0`);
+const unusableReason = (rule) => (hasNul(rule) ? NUL_REASON : containmentFailure(rule));
 class StyleSheet {
     css = "";
     provider = null;

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;AAC5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,MAAM,GAAG,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;AAChC,MAAM,GAAG,GAAG,OAAO,CAAC;AACpB,MAAM,UAAU,GAAG,4CAA4C,CAAC;AAEhE,MAAM,cAAc,GAAG,CAAC,IAAY,EAAiB,EAAE,CACnD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAM,aAAa,GAAG,CAAC,IAAY,EAAU,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAA,IAAI,CAAC,CAAC;AAErF,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,MAAM,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;QAEpC,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;YAClB,GAAG,CAAC,IAAI,CAAC,qCAAqC,MAAM,KAAK,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAEhF,OAAO;QACX,CAAC;QAED,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\";\nimport { containmentFailure } from \"./self-contained.js\";\n\nconst log = createLogger(\"css\");\nconst NUL = \"\\u{0}\";\nconst NUL_REASON = \"carries a NUL byte, which GTK4 cannot load\";\n\nconst unusableReason = (rule: string): string | null =>\n    rule.includes(NUL) ? NUL_REASON : containmentFailure(rule);\n\nconst printableRule = (rule: string): string => rule.replaceAll(NUL, String.raw`\\0`);\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        const reason = unusableReason(rule);\n\n        if (reason !== null) {\n            log.warn(`Dropped a malformed CSS rule that ${reason}: ${printableRule(rule)}`);\n\n            return;\n        }\n\n        this.css += this.css.length > 0 ? `\\n${rule}` : rule;\n        this.scheduleUpdate();\n    }\n}\n\nexport { StyleSheet };\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;AAC5F,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,MAAM,GAAG,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;AAEhC,MAAM,cAAc,GAAG,CAAC,IAAY,EAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;AAE/G,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,MAAM,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;QAEpC,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;YAClB,GAAG,CAAC,IAAI,CAAC,qCAAqC,MAAM,KAAK,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAEhF,OAAO;QACX,CAAC;QAED,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\";\nimport { hasNul, NUL_REASON, printableRule } from \"./rule-text.js\";\nimport { containmentFailure } from \"./self-contained.js\";\n\nconst log = createLogger(\"css\");\n\nconst unusableReason = (rule: string): string | null => (hasNul(rule) ? NUL_REASON : containmentFailure(rule));\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        const reason = unusableReason(rule);\n\n        if (reason !== null) {\n            log.warn(`Dropped a malformed CSS rule that ${reason}: ${printableRule(rule)}`);\n\n            return;\n        }\n\n        this.css += this.css.length > 0 ? `\\n${rule}` : rule;\n        this.scheduleUpdate();\n    }\n}\n\nexport { StyleSheet };\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gtkx/css",
-  "version": "1.2.2",
-  "description": "Emotion-flavored CSS-in-JS that compiles to real GTK4 CSS and installs it on the default display",
+  "version": "1.4.0",
+  "description": "CSS-in-JS for GTK that compiles to real GTK4 CSS.",
   "keywords": [
     "gtkx",
     "gtk",
@@ -31,6 +31,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./internal": {
+      "types": "./dist/internal.d.ts",
+      "default": "./dist/internal.js"
     }
   },
   "sideEffects": false,
@@ -54,11 +58,11 @@
   "dependencies": {
     "@emotion/serialize": "^1.3.3",
     "stylis": "^4.4.0",
-    "@gtkx/utils": "1.2.2"
+    "@gtkx/utils": "1.4.0"
   },
   "devDependencies": {
     "@types/stylis": "^4.2.7",
-    "@gtkx/vitest": "1.2.2"
+    "@gtkx/vitest": "1.4.0"
   },
   "scripts": {
     "release": "tsx ../../scripts/release-package.ts"

package/src/create-css.ts

@@ -1,8 +1,6 @@
 import type { CSSInterpolation, RegisteredCache, SerializedStyles } 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 { eachRule, terminateDeclarations } from "./serialize-rule.js";
 import { StyleSheet } from "./stylesheet.js";
 
 /** A `cx` argument: a non-empty class name, or a boolean or nullish value that is dropped. */
@@ -28,32 +26,8 @@ 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)) {
-        return;
-    }
-
-    element.return = "";
-    element.value = "";
-};
 
 const getClassName = (serialized: SerializedStyles): string => `${KEY}-${serialized.name}`;
-
-const terminateDeclarations = (styles: string): string => {
-    const trimmed = styles.trimEnd();
-
-    if (trimmed.length === 0 || trimmed.endsWith(";") || trimmed.endsWith("}")) {
-        return trimmed;
-    }
-
-    return `${trimmed};`;
-};
-
 const isNonEmptyString = (token: CxToken): token is string => typeof token === "string" && token.length > 0;
 
 const partitionTokens = (tokens: string[], registered: RegisteredCache): TokenPartition => {
@@ -73,17 +47,10 @@ const partitionTokens = (tokens: string[], registered: RegisteredCache): TokenPa
     return { rawClasses, registeredStyles };
 };
 
-const runStylis = (sheet: StyleSheet, input: string): void => {
-    stylisSerialize(
-        compile(escapeNamedColors(input)),
-        middleware([
-            removeLabel,
-            stringify,
-            rulesheet((rule) => {
-                sheet.insert(restoreNamedColors(rule));
-            }),
-        ]),
-    );
+const insertRules = (state: CssState, input: string): void => {
+    eachRule(input, (rule) => {
+        state.sheet.insert(rule);
+    });
 };
 
 const didMarkNewStyle = (state: CssState, serialized: SerializedStyles): boolean => {
@@ -103,7 +70,7 @@ const insertStyles = (state: CssState, serialized: SerializedStyles): void => {
 
     const className = getClassName(serialized);
     const styles = terminateDeclarations(serialized.styles);
-    runStylis(state.sheet, `.${className}{${styles}}`);
+    insertRules(state, `.${className}{${styles}}`);
     state.registered[className] = styles;
 };
 
@@ -112,7 +79,7 @@ const insertWithoutScoping = (state: CssState, serialized: SerializedStyles): vo
         return;
     }
 
-    runStylis(state.sheet, serialized.styles);
+    insertRules(state, serialized.styles);
 };
 
 const cssClassName = (state: CssState, args: CSSInterpolation[]): string => {

package/src/internal.ts

@@ -0,0 +1,6 @@
+export {
+    attachParsingErrorLogger,
+    type ProviderOptions,
+    registerProviderForDefaultDisplay,
+} from "./provider.js";
+export { scopedRule } from "./scoped-rule.js";

package/src/provider.ts

@@ -1,16 +1,61 @@
 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 {
+    checkVersion,
+    CssProvider,
+    Settings,
+    STYLE_PROVIDER_PRIORITY_APPLICATION,
+    StyleContext,
+} from "@gtkx/gi/gtk";
 
-const registerProviderForDefaultDisplay = (
-    priority: number = STYLE_PROVIDER_PRIORITY_APPLICATION,
-): CssProvider => {
+type ProviderOptions = { priority: number; followsPreferences: boolean };
+
+const REDUCED_MOTION_MINOR = 22;
+
+const DEFAULT_OPTIONS: ProviderOptions = {
+    priority: STYLE_PROVIDER_PRIORITY_APPLICATION,
+    followsPreferences: true,
+};
+
+const hasReducedMotion = (): boolean => checkVersion(4, REDUCED_MOTION_MINOR, 0) === null;
+
+const applyPreferences = (provider: CssProvider, settings: Settings): void => {
+    provider.prefersColorScheme = settings.gtkInterfaceColorScheme;
+    provider.prefersContrast = settings.gtkInterfaceContrast;
+
+    if (hasReducedMotion()) {
+        provider.prefersReducedMotion = settings.gtkInterfaceReducedMotion;
+    }
+};
+
+const followSystemPreferences = (provider: CssProvider, display: Display): void => {
+    const settings = Settings.getForDisplay(display);
+
+    const sync = (): void => {
+        applyPreferences(provider, settings);
+    };
+
+    sync();
+    settings.on("notify::gtk-interface-color-scheme", sync);
+    settings.on("notify::gtk-interface-contrast", sync);
+
+    if (hasReducedMotion()) {
+        settings.on("notify::gtk-interface-reduced-motion", sync);
+    }
+};
+
+const registerProviderForDefaultDisplay = (options?: Partial<ProviderOptions>): CssProvider => {
+    const { priority, followsPreferences } = { ...DEFAULT_OPTIONS, ...options };
     const provider = new CssProvider();
     const manager = DisplayManager.get();
 
     const attach = (display: Display): void => {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         StyleContext.addProviderForDisplay(display, provider, priority);
+
+        if (followsPreferences) {
+            followSystemPreferences(provider, display);
+        }
     };
 
     const initialDisplay = manager.getDefaultDisplay();
@@ -34,4 +79,4 @@ const attachParsingErrorLogger = (provider: CssProvider, log: Logger, subject: s
     }
 };
 
-export { registerProviderForDefaultDisplay, attachParsingErrorLogger };
+export { type ProviderOptions, registerProviderForDefaultDisplay, attachParsingErrorLogger };

package/src/rule-text.ts

@@ -0,0 +1,7 @@
+const NUL = "\u{0}";
+const NUL_REASON = "carries a NUL byte, which GTK4 cannot load";
+
+const hasNul = (rule: string): boolean => rule.includes(NUL);
+const printableRule = (rule: string): string => rule.replaceAll(NUL, String.raw`\0`);
+
+export { hasNul, NUL_REASON, printableRule };

package/src/scoped-rule.ts

@@ -0,0 +1,61 @@
+import type { CSSObject } from "@emotion/serialize";
+import { serializeStyles } from "@emotion/serialize";
+import { createLogger } from "@gtkx/utils";
+import { hasNul, NUL_REASON, printableRule } from "./rule-text.js";
+import { eachRule, terminateDeclarations } from "./serialize-rule.js";
+
+type Scope = { className: string; rules: string[] };
+
+const log = createLogger("css");
+const ESCAPE_REASON = "does not start from the widget it belongs to";
+const NAME_CHAR = /[\w-]/;
+
+const isScoped = (rule: string, className: string): boolean => {
+    const prefix = `.${className}`;
+
+    if (!rule.startsWith(prefix)) {
+        return false;
+    }
+
+    const next = rule.charAt(prefix.length);
+
+    return next !== "" && !NAME_CHAR.test(next);
+};
+
+const unusableReason = (rule: string, className: string): string | null => {
+    if (hasNul(rule)) {
+        return NUL_REASON;
+    }
+
+    return isScoped(rule, className) ? null : ESCAPE_REASON;
+};
+
+const collect = (scope: Scope, rule: string): void => {
+    const reason = unusableReason(rule, scope.className);
+
+    if (reason !== null) {
+        log.warn(`Dropped a style rule that ${reason}: ${printableRule(rule)}`);
+
+        return;
+    }
+
+    scope.rules.push(rule);
+};
+
+const scopedRule = (className: string, style: object): string => {
+    const declarations = terminateDeclarations(serializeStyles([style as CSSObject], {}).styles);
+
+    if (declarations.length === 0) {
+        return "";
+    }
+
+    const scope: Scope = { className, rules: [] };
+
+    eachRule(`.${className}{${declarations}}`, (rule) => {
+        collect(scope, rule);
+    });
+
+    return scope.rules.join("");
+};
+
+export { scopedRule };

package/src/serialize-rule.ts

@@ -0,0 +1,42 @@
+import type { Element } from "stylis";
+import { compile, middleware, rulesheet, stringify, serialize as stylisSerialize } from "stylis";
+import { escapeNamedColors, restoreNamedColors } from "./named-colors.js";
+
+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)) {
+        return;
+    }
+
+    element.return = "";
+    element.value = "";
+};
+
+const terminateDeclarations = (styles: string): string => {
+    const trimmed = styles.trimEnd();
+
+    if (trimmed.length === 0 || trimmed.endsWith(";") || trimmed.endsWith("}")) {
+        return trimmed;
+    }
+
+    return `${trimmed};`;
+};
+
+const eachRule = (input: string, visit: (rule: string) => void): void => {
+    stylisSerialize(
+        compile(escapeNamedColors(input)),
+        middleware([
+            removeLabel,
+            stringify,
+            rulesheet((rule) => {
+                visit(restoreNamedColors(rule));
+            }),
+        ]),
+    );
+};
+
+export { eachRule, terminateDeclarations };

package/src/stylesheet.ts

@@ -1,16 +1,12 @@
 import type * as Gtk from "@gtkx/gi/gtk";
 import { createLogger } from "@gtkx/utils";
 import { attachParsingErrorLogger, registerProviderForDefaultDisplay } from "./provider.js";
+import { hasNul, NUL_REASON, printableRule } from "./rule-text.js";
 import { containmentFailure } from "./self-contained.js";
 
 const log = createLogger("css");
-const NUL = "\u{0}";
-const NUL_REASON = "carries a NUL byte, which GTK4 cannot load";
 
-const unusableReason = (rule: string): string | null =>
-    rule.includes(NUL) ? NUL_REASON : containmentFailure(rule);
-
-const printableRule = (rule: string): string => rule.replaceAll(NUL, String.raw`\0`);
+const unusableReason = (rule: string): string | null => (hasNul(rule) ? NUL_REASON : containmentFailure(rule));
 
 class StyleSheet {
     private css = "";