Utilities for generating styles in React 19
npm install @jk2908/cxxcxx
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). 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 input at the moment.
example usage:
In ui templates cmp.tsx:
``
import { cxx } from '@jk2908/cxx'
const [css, styles, href] = cxx
.header {
display: flex;
}
...
function Cmp() {
return (
...
)
}
// without CSS Modules exports but with href
const [css,, href] = cxx
...
// plain CSS
const [css] = cxx
`
vite.config.ts
CSS is transformed using lightningcss. There is access to the full lightningcss config.
vite :
`
`
import cxx from '@jk2908/cxx/vite-plugin-cxx'
export default defineConfig({
plugins: [react(), cxx({ ...optional cxx config })],
})
// turn off default config
export default defineConfig({
plugins: [cxx({
lightningcss: {
minify: false,
cssModules: false,
...other transform options
}
})]
})
next.config.ts
next :
`
``
import { withCxx } from '@jk2908/cxx/next'
const nextConfig = {}
export default withCxx(nextConfig, { ...optional cxx config })
with inspiration from:
- https://github.com/bluskript/vite-plugin-inline-css-modules/
using:
- https://github.com/bryc/code/blob/master/jshash/experimental/cyrb53.js
- https://www.npmjs.com/package/lightningcss