@gtkx/css 1.0.0-rc.3 → 1.0.0-rc.4
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 +4 -5
- 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/package.json +3 -3
- package/src/create-css.ts +11 -0
- package/src/index.ts +2 -2
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 the comparison in full.
|
|
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
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gtkx/css",
|
|
3
|
-
"version": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.4",
|
|
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-rc.
|
|
47
|
+
"@gtkx/utils": "1.0.0-rc.4"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/stylis": "^4.2.7",
|
|
51
|
-
"@gtkx/vitest": "1.0.0-rc.
|
|
51
|
+
"@gtkx/vitest": "1.0.0-rc.4"
|
|
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
|
/**
|