@gtkx/css 1.0.0-rc.3 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -9
- package/dist/create-css.d.ts +11 -0
- package/dist/create-css.d.ts.map +1 -1
- package/dist/create-css.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/provider.d.ts.map +1 -1
- package/dist/provider.js +1 -0
- package/dist/provider.js.map +1 -1
- package/package.json +3 -3
- package/src/create-css.ts +11 -0
- package/src/index.ts +2 -2
- package/src/provider.ts +1 -0
package/README.md
CHANGED
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
8
|
The React framework for Linux.<br />
|
|
9
|
-
|
|
9
|
+
Write native Linux applications with React and TypeScript.
|
|
10
|
+
Built on the GNOME stack and standard web tooling.
|
|
10
11
|
</p>
|
|
11
12
|
|
|
12
13
|
<p align="center">
|
|
@@ -20,15 +21,13 @@
|
|
|
20
21
|
|
|
21
22
|
<p align="center">
|
|
22
23
|
<a href="https://gtkx.dev">Homepage</a> ·
|
|
23
|
-
<a href="https://gtkx.dev/guide/
|
|
24
|
+
<a href="https://gtkx.dev/guide/getting-started">Documentation</a> ·
|
|
24
25
|
<a href="https://github.com/gtkx-org/gtkx/tree/main/examples">Examples</a> ·
|
|
25
26
|
<a href="https://github.com/gtkx-org/gtkx/blob/main/CONTRIBUTING.md">Contributing</a>
|
|
26
27
|
</p>
|
|
27
28
|
|
|
28
29
|
---
|
|
29
30
|
|
|
30
|
-
GTKX generates fully typed bindings for the entire GTK4 and Adwaita surface directly from GObject-Introspection. On top of those bindings you get the React programming model: components and hooks driving GObject instances, with Fast Refresh while you develop.
|
|
31
|
-
|
|
32
31
|
<p align="center">
|
|
33
32
|
<img src="https://raw.githubusercontent.com/gtkx-org/gtkx/main/examples/tutorial/assets/screenshot.png" alt="The Tasks app: an Adwaita window with a sidebar of smart views and colored lists on the left, and a boxed task list on the right." />
|
|
34
33
|
</p>
|
|
@@ -109,7 +108,7 @@ React Native and similar frameworks hide the native toolkit so one API can run e
|
|
|
109
108
|
|
|
110
109
|
### Why Node.js, and why generated bindings
|
|
111
110
|
|
|
112
|
-
GTKX runs on Node.js, which puts native modules, the npm ecosystem, and the tooling built for Node.js APIs within reach. GJS is GNOME's own runtime, built on SpiderMonkey rather than V8; node-gtk runs on Node.js but is lightly maintained, on the older nan/V8 ABI rather than N-API, and still centered on GTK3. The [
|
|
111
|
+
GTKX runs on Node.js, which puts native modules, the npm ecosystem, and the tooling built for Node.js APIs within reach. GJS is GNOME's own runtime, built on SpiderMonkey rather than V8; node-gtk runs on Node.js but is lightly maintained, on the older nan/V8 ABI rather than N-API, and still centered on GTK3. The [Why GTKX guide](https://gtkx.dev/guide/why-gtkx) covers what running on Node.js means day to day.
|
|
113
112
|
|
|
114
113
|
GTKX generates the TypeScript types and the native FFI calls from the same GObject-Introspection data, so the types cannot drift from the calls they back. Codegen covers the whole GTK4 and Adwaita surface.
|
|
115
114
|
|
|
@@ -122,10 +121,10 @@ GTKX is Linux-only and needs Node.js 24 or later. See [Requirements](#requiremen
|
|
|
122
121
|
Scaffold a new app with the `create-gtkx` initializer:
|
|
123
122
|
|
|
124
123
|
```sh
|
|
125
|
-
npm create gtkx
|
|
124
|
+
npm create gtkx
|
|
126
125
|
```
|
|
127
126
|
|
|
128
|
-
The same command works with other package managers: `pnpm create gtkx
|
|
127
|
+
The same command works with other package managers: `pnpm create gtkx` or `yarn create gtkx`.
|
|
129
128
|
|
|
130
129
|
Then run your new app:
|
|
131
130
|
|
|
@@ -146,7 +145,7 @@ The documentation at **[gtkx.dev](https://gtkx.dev)** includes a step-by-step tu
|
|
|
146
145
|
|
|
147
146
|
GTKX is Linux-only. You need:
|
|
148
147
|
|
|
149
|
-
- Linux with the GTK4 (4.20 or later), Adwaita (1.8 or later)
|
|
148
|
+
- Linux with the GTK4 (4.20 or later) and GLib development libraries, plus Adwaita (1.8 or later) once your project binds `Adw-1`
|
|
150
149
|
- Node.js 24 or later
|
|
151
150
|
|
|
152
151
|
The `@gtkx/native` addon ships prebuilt for x64 and arm64 glibc Linux; other targets need to build it from the GTKX repository, which requires a Rust toolchain.
|
|
@@ -162,7 +161,7 @@ Explore the [example apps](https://github.com/gtkx-org/gtkx/tree/main/examples):
|
|
|
162
161
|
|
|
163
162
|
## Status
|
|
164
163
|
|
|
165
|
-
GTKX 1.0 is
|
|
164
|
+
GTKX 1.0 is released.
|
|
166
165
|
|
|
167
166
|
## Contributing
|
|
168
167
|
|
package/dist/create-css.d.ts
CHANGED
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
import type { CSSInterpolation } from "@emotion/serialize";
|
|
2
2
|
import type { Element } from "stylis";
|
|
3
|
+
/** A `cx` argument: a non-empty class name, or a boolean or nullish value that is dropped. */
|
|
3
4
|
type CxToken = string | boolean | undefined | null;
|
|
5
|
+
/** The `css`, `cx` and `injectGlobal` trio bound to one GTK4 stylesheet and its cache of inserted styles. */
|
|
4
6
|
type Css = {
|
|
7
|
+
/**
|
|
8
|
+
* Serializes the given style interpolations, inserts the resulting rules into the stylesheet, and
|
|
9
|
+
* returns the generated GTK4 CSS class name.
|
|
10
|
+
*/
|
|
5
11
|
css: (...args: CSSInterpolation[]) => string;
|
|
12
|
+
/**
|
|
13
|
+
* Filters out falsy tokens and returns the remaining class names, collapsing two or more
|
|
14
|
+
* GTKX-generated classes into one merged class where later styles win.
|
|
15
|
+
*/
|
|
6
16
|
cx: (...classNames: CxToken[]) => string[];
|
|
17
|
+
/** Serializes and inserts the given styles into the stylesheet globally, unscoped by any class. */
|
|
7
18
|
injectGlobal: (...args: CSSInterpolation[]) => void;
|
|
8
19
|
};
|
|
9
20
|
declare const removeLabel: (element: Element) => void;
|
package/dist/create-css.d.ts.map
CHANGED
|
@@ -1 +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;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"}
|
|
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;AAC9F,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,8FAA8F;AAC9F,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;AAEnD,6GAA6G;AAC7G,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;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.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-css.js","sourceRoot":"","sources":["../src/create-css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,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;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;
|
|
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` trio 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}`;\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
CHANGED
|
@@ -5,8 +5,8 @@ import { type Css } from "./create-css.js";
|
|
|
5
5
|
*/
|
|
6
6
|
declare const css: Css["css"];
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
8
|
+
* Filters out falsy tokens and returns the remaining class names, collapsing two or
|
|
9
|
+
* more GTKX-generated classes into one merged class where later styles win.
|
|
10
10
|
*/
|
|
11
11
|
declare const cx: Css["cx"];
|
|
12
12
|
/**
|
package/dist/index.js
CHANGED
|
@@ -6,8 +6,8 @@ const instance = createCss();
|
|
|
6
6
|
*/
|
|
7
7
|
const css = instance.css;
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
9
|
+
* Filters out falsy tokens and returns the remaining class names, collapsing two or
|
|
10
|
+
* more GTKX-generated classes into one merged class where later styles win.
|
|
11
11
|
*/
|
|
12
12
|
const cx = instance.cx;
|
|
13
13
|
/**
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 *
|
|
1
|
+
{"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 * Filters out falsy tokens and returns the remaining class names, collapsing two or\n * more GTKX-generated classes into one merged class where later styles win.\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/provider.d.ts.map
CHANGED
|
@@ -1 +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,
|
|
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"}
|
package/dist/provider.js
CHANGED
|
@@ -4,6 +4,7 @@ const registerProviderForDefaultDisplay = (priority = STYLE_PROVIDER_PRIORITY_AP
|
|
|
4
4
|
const provider = new CssProvider();
|
|
5
5
|
const manager = DisplayManager.get();
|
|
6
6
|
const attach = (display) => {
|
|
7
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
7
8
|
StyleContext.addProviderForDisplay(display, provider, priority);
|
|
8
9
|
};
|
|
9
10
|
const initialDisplay = manager.getDefaultDisplay();
|
package/dist/provider.js.map
CHANGED
|
@@ -1 +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,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"]}
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gtkx/css",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Emotion-flavored CSS-in-JS that compiles to real GTK4 CSS and installs it on the default display",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"gtkx",
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/serialize": "^1.3.3",
|
|
46
46
|
"stylis": "^4.4.0",
|
|
47
|
-
"@gtkx/utils": "1.0.0
|
|
47
|
+
"@gtkx/utils": "1.0.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/stylis": "^4.2.7",
|
|
51
|
-
"@gtkx/vitest": "1.0.0
|
|
51
|
+
"@gtkx/vitest": "1.0.0"
|
|
52
52
|
},
|
|
53
53
|
"scripts": {
|
|
54
54
|
"release": "tsx ../../scripts/release-package.ts"
|
package/src/create-css.ts
CHANGED
|
@@ -5,11 +5,22 @@ import { compile, middleware, rulesheet, stringify, serialize as stylisSerialize
|
|
|
5
5
|
import { escapeNamedColors, restoreNamedColors } from "./named-colors.js";
|
|
6
6
|
import { StyleSheet } from "./stylesheet.js";
|
|
7
7
|
|
|
8
|
+
/** A `cx` argument: a non-empty class name, or a boolean or nullish value that is dropped. */
|
|
8
9
|
type CxToken = string | boolean | undefined | null;
|
|
9
10
|
|
|
11
|
+
/** The `css`, `cx` and `injectGlobal` trio bound to one GTK4 stylesheet and its cache of inserted styles. */
|
|
10
12
|
type Css = {
|
|
13
|
+
/**
|
|
14
|
+
* Serializes the given style interpolations, inserts the resulting rules into the stylesheet, and
|
|
15
|
+
* returns the generated GTK4 CSS class name.
|
|
16
|
+
*/
|
|
11
17
|
css: (...args: CSSInterpolation[]) => string;
|
|
18
|
+
/**
|
|
19
|
+
* Filters out falsy tokens and returns the remaining class names, collapsing two or more
|
|
20
|
+
* GTKX-generated classes into one merged class where later styles win.
|
|
21
|
+
*/
|
|
12
22
|
cx: (...classNames: CxToken[]) => string[];
|
|
23
|
+
/** Serializes and inserts the given styles into the stylesheet globally, unscoped by any class. */
|
|
13
24
|
injectGlobal: (...args: CSSInterpolation[]) => void;
|
|
14
25
|
};
|
|
15
26
|
|
package/src/index.ts
CHANGED
|
@@ -7,8 +7,8 @@ const instance = createCss();
|
|
|
7
7
|
*/
|
|
8
8
|
const css: Css["css"] = instance.css;
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
10
|
+
* Filters out falsy tokens and returns the remaining class names, collapsing two or
|
|
11
|
+
* more GTKX-generated classes into one merged class where later styles win.
|
|
12
12
|
*/
|
|
13
13
|
const cx: Css["cx"] = instance.cx;
|
|
14
14
|
/**
|
package/src/provider.ts
CHANGED
|
@@ -9,6 +9,7 @@ const registerProviderForDefaultDisplay = (
|
|
|
9
9
|
const manager = DisplayManager.get();
|
|
10
10
|
|
|
11
11
|
const attach = (display: Display): void => {
|
|
12
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
12
13
|
StyleContext.addProviderForDisplay(display, provider, priority);
|
|
13
14
|
};
|
|
14
15
|
|