@stylex-variants/core 0.0.1 → 0.0.2
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 +84 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# StyleX Variants
|
|
2
|
+
|
|
3
|
+
Typed, compile-time variants for [StyleX](https://stylexjs.com/), inspired by
|
|
4
|
+
[Tailwind Variants](https://www.tailwind-variants.org/).
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
```sh
|
|
9
|
+
npm install @stylex-variants/core @stylexjs/stylex
|
|
10
|
+
npm install -D @babel/core@^8 @rolldown/plugin-babel @stylexjs/unplugin
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
The library targets ESM consumers and is verified with Vite 8, Babel 8 and
|
|
14
|
+
StyleX 0.19.1.
|
|
15
|
+
|
|
16
|
+
## Configuration
|
|
17
|
+
|
|
18
|
+
Run the variants Babel plugin before the StyleX plugin:
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import babel from "@rolldown/plugin-babel";
|
|
22
|
+
import stylex from "@stylexjs/unplugin/vite";
|
|
23
|
+
import variants from "@stylex-variants/core/babel";
|
|
24
|
+
import react from "@vitejs/plugin-react";
|
|
25
|
+
import { defineConfig } from "vite";
|
|
26
|
+
|
|
27
|
+
export default defineConfig({
|
|
28
|
+
plugins: [react(), babel({ plugins: [variants] }), stylex({ useCSSLayers: true })],
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Import a CSS asset from the application entry point so Vite has an asset where
|
|
33
|
+
StyleX can emit its generated rules:
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import "./index.css";
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Usage
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import { sxv, type VariantProps } from "@stylex-variants/core";
|
|
43
|
+
|
|
44
|
+
const button = sxv({
|
|
45
|
+
base: { display: "inline-flex", borderRadius: 8 },
|
|
46
|
+
variants: {
|
|
47
|
+
tone: { primary: { backgroundColor: "blue" }, neutral: { backgroundColor: "gray" } },
|
|
48
|
+
size: { sm: { padding: 8 }, lg: { padding: 16 } },
|
|
49
|
+
fullWidth: { true: { width: "100%" }, false: { width: "auto" } },
|
|
50
|
+
},
|
|
51
|
+
defaultVariants: { tone: "primary", size: "sm", fullWidth: false },
|
|
52
|
+
compoundVariants: [{ tone: "primary", size: "lg", style: { fontWeight: 700 } }],
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
type ButtonVariants = VariantProps<typeof button>;
|
|
56
|
+
export function Button(props: ButtonVariants) {
|
|
57
|
+
return <button {...button(props)}>Continue</button>;
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
`button()` accepts variant selections, `className` and `style`. Defaults are
|
|
62
|
+
used when a selection is omitted; explicit `false` overrides a boolean default.
|
|
63
|
+
Custom classes are concatenated and inline styles are merged with StyleX props.
|
|
64
|
+
|
|
65
|
+
## Current limitations
|
|
66
|
+
|
|
67
|
+
- Configuration and styles must be static inline literals.
|
|
68
|
+
- Spreads, computed keys, external style objects and dynamic style functions are rejected.
|
|
69
|
+
- Boolean variants use `true` and `false` keys.
|
|
70
|
+
- ESM only; Babel 8 is required for the plugin.
|
|
71
|
+
- Slots, extension and composition APIs are not implemented yet.
|
|
72
|
+
|
|
73
|
+
Calling `sxv()` without the Babel transform throws a configuration error.
|
|
74
|
+
|
|
75
|
+
## Development
|
|
76
|
+
|
|
77
|
+
```sh
|
|
78
|
+
pnpm install
|
|
79
|
+
pnpm check-types
|
|
80
|
+
pnpm --filter @stylex-variants/core test:run
|
|
81
|
+
pnpm build
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
See [CONTRIBUTING.md](./CONTRIBUTING.md) for development and release workflow.
|