@jk2908/cxx 0.1.9 → 0.1.10

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.
Files changed (3) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +59 -46
  3. package/package.json +6 -2
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2024 Jerome Kenway
3
+ Copyright (c) 2026 Jerome Kenway
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,58 +1,71 @@
1
- cxx
1
+ # @jk2908/cxx
2
2
 
3
- library based on experiments with React 19 suspenseful style hoisting and deduping. `cxx` intakes CSS via a template literal arg and returns a three item tuple; the processed CSS, if configured (on by default) a CSS Modules exports object, and also optionally for usage, an id to pass to the href attribute of a style tag for deduping see [React docs](https://react.dev/reference/react-dom/components/style#noun-labs-1201738-(2)). The function actually just returns placeholders for the above items which will be replaced at build time. No string interpolation is supported within the CSS template tag.
3
+ Build-time CSS template tag utilities for React 19.
4
4
 
5
- example usage:
6
- In ui templates `cmp.tsx`:
5
+ ## Install
6
+
7
+ ```sh
8
+ npm install @jk2908/cxx lightningcss react react-dom
7
9
  ```
8
- import { cxx } from '@jk2908/cxx'
9
-
10
- const [css, styles, href] = cxx`
11
- .header {
12
- display: flex;
13
- }
14
- `
15
-
16
- function Cmp() {
17
- return (
18
- <header className={styles.header}>
19
- ...
20
-
21
- <style href={href} precedence="medium">
22
- {css}
23
- </style>
24
- </header>
25
- )
26
- }
10
+
11
+ ## Usage
12
+
13
+ ```tsx
14
+ import { cxx } from '@jk2908/cxx'
15
+
16
+ const [css, styles, href] = cxx`
17
+ .header {
18
+ display: flex;
19
+ gap: 0.75rem;
20
+ }
21
+ `
22
+
23
+ export function Header() {
24
+ return (
25
+ <header className={styles.header}>
26
+ <style href={href} precedence="medium">
27
+ {css}
28
+ </style>
29
+ </header>
30
+ )
31
+ }
27
32
  ```
28
33
 
29
- CSS is transformed using [lightningcss](https://www.npmjs.com/package/lightningcss). There is access to the full lightningcss config.
34
+ The `cxx` tag is a build-time marker. Use the Vite plugin or Next helper so the placeholders are replaced before runtime. String interpolation inside the template is not supported.
35
+
36
+ ## Vite
30
37
 
31
- vite `vite.config.ts`:
38
+ ```ts
39
+ import { defineConfig } from 'vite'
40
+ import react from '@vitejs/plugin-react'
41
+ import cxx from '@jk2908/cxx/vite-plugin-cxx'
42
+
43
+ export default defineConfig({
44
+ plugins: [react(), cxx()],
45
+ })
32
46
  ```
33
- import cxx from '@jk2908/cxx/vite-plugin-cxx'
34
-
35
- export default defineConfig({
36
- plugins: [react(), cxx({ ...optional cxx config })],
37
- })
38
-
39
- // turn off default config
40
- export default defineConfig({
41
- plugins: [cxx({
42
- lightningcss: {
43
- minify: false,
44
- cssModules: false,
45
- ...other transform options
46
- }
47
- })]
48
- })
47
+
48
+ ## Next
49
+
50
+ ```ts
51
+ import { withCxx } from '@jk2908/cxx/next'
52
+
53
+ const nextConfig = {}
54
+
55
+ export default withCxx(nextConfig)
49
56
  ```
50
57
 
51
- next `next.config.ts`:
58
+ Both integrations accept an optional config object with `lightningcss` options. The default transform enables minification and CSS Modules output.
59
+
60
+ ```ts
61
+ cxx({
62
+ lightningcss: {
63
+ minify: false,
64
+ cssModules: false,
65
+ },
66
+ })
52
67
  ```
53
- import { withCxx } from '@jk2908/cxx/next'
54
68
 
55
- const nextConfig = {}
69
+ ## License
56
70
 
57
- export default withCxx(nextConfig, { ...optional cxx config })
58
- ```
71
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jk2908/cxx",
3
- "version": "0.1.9",
3
+ "version": "0.1.10",
4
4
  "type": "module",
5
5
  "author": "Jerome Kenway",
6
6
  "repository": {
@@ -14,7 +14,9 @@
14
14
  "prepack": "npm run build"
15
15
  },
16
16
  "devDependencies": {
17
- "@biomejs/biome": "^1.8.3",
17
+ "@types/bun": "^1.3.13",
18
+ "@typescript/native-preview": "^7.0.0-dev.20260421.2",
19
+ "@types/node": "^24.0.1",
18
20
  "@types/react": "latest",
19
21
  "@types/react-dom": "latest",
20
22
  "@types/webpack": "^5.28.5",
@@ -24,6 +26,8 @@
24
26
  "next": "^15.0.0-canary.128",
25
27
  "react": "^19.0.0-rc || ^19.0.0-beta || ^19.0.0",
26
28
  "react-dom": "^19.0.0-rc || ^19.0.0-beta || ^19.0.0",
29
+ "oxfmt": "^0.35.0",
30
+ "oxlint": "^1.50.0",
27
31
  "typescript": "^5.5.4",
28
32
  "vite": "^5.4.2"
29
33
  },