@plumeria/core 16.2.7 → 16.2.9
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 +38 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,14 +7,21 @@
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
**Plumeria** is a **zero-cost abstraction layer** for styling React components
|
|
10
|
+
**Plumeria** is a **zero-cost abstraction layer** for styling React components. You write type-safe styles in TypeScript, and the compiler resolves them into atomic CSS at build time — leaving no runtime JavaScript behind. Its axioms are grounded in category theory, making styles self-evident, predictable, and composable by construction, while strict syntax and linting keep the cognitive overhead low.
|
|
11
11
|
|
|
12
|
-
##
|
|
12
|
+
## Installation
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
`@plumeria/core` contains type definitions only. Styles are compiled away at build time by a bundler integration — [`@plumeria/next-plugin`](https://www.npmjs.com/package/@plumeria/next-plugin) for Next.js, or [`@plumeria/unplugin`](https://www.npmjs.com/package/@plumeria/unplugin) for Vite, Webpack, and others.
|
|
15
|
+
|
|
16
|
+
```sh
|
|
17
|
+
pnpm add -D @plumeria/core
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
See the [installation guide](https://plumeria.dev/docs/getting-started/installation) for full setup, and [`@plumeria/eslint-plugin`](https://www.npmjs.com/package/@plumeria/eslint-plugin) for the linting rules.
|
|
15
21
|
|
|
16
22
|
## Example
|
|
17
|
-
|
|
23
|
+
|
|
24
|
+
Styles can be passed to the `styleName` prop. That prop accepts static and dynamic styles as an array. At build time, the compiler resolves `styleName` into a static `className`; dynamic values are passed as CSS variables through the `style` attribute — no runtime library is involved.
|
|
18
25
|
|
|
19
26
|
```tsx
|
|
20
27
|
import * as css from '@plumeria/core';
|
|
@@ -36,7 +43,7 @@ export default function App({ cond }) {
|
|
|
36
43
|
return (
|
|
37
44
|
<div
|
|
38
45
|
styleName={[
|
|
39
|
-
styles.text,
|
|
46
|
+
styles.text,
|
|
40
47
|
cond && styles.cond,
|
|
41
48
|
styles.scale(scale)
|
|
42
49
|
]}
|
|
@@ -45,6 +52,31 @@ export default function App({ cond }) {
|
|
|
45
52
|
}
|
|
46
53
|
```
|
|
47
54
|
|
|
55
|
+
**Compiled:**
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
<div
|
|
59
|
+
className={'xhrr6ses ' + (cond ? 'xj00ajs1' : '') + ' xnoo1byz'}
|
|
60
|
+
style={{ '--scale-value': scale }}
|
|
61
|
+
/>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
**Generated CSS:**
|
|
65
|
+
|
|
66
|
+
```css
|
|
67
|
+
.xhrr6ses:not(#\#) {
|
|
68
|
+
font-size: 12px;
|
|
69
|
+
}
|
|
70
|
+
.xj00ajs1 {
|
|
71
|
+
background: navy;
|
|
72
|
+
}
|
|
73
|
+
.xnoo1byz {
|
|
74
|
+
scale: var(--scale-value);
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Explore the [documentation](https://plumeria.dev/) for the core principles, full API reference, and integrations.
|
|
79
|
+
|
|
48
80
|
## License
|
|
49
81
|
|
|
50
|
-
Plumeria is MIT licensed.
|
|
82
|
+
Plumeria is [MIT licensed](https://github.com/zss-in-js/plumeria/blob/main/LICENSE).
|