@plumeria/core 0.7.2 → 0.7.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/package.json +3 -2
- package/readme.md +39 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plumeria/core",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.4",
|
|
4
4
|
"description": "Near Zero-runtime CSS-in-JS for efficient design systems.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
"styling"
|
|
11
11
|
],
|
|
12
12
|
"repository": "github:zss-in-js/plumeria",
|
|
13
|
+
"author": "refirst",
|
|
13
14
|
"license": "MIT",
|
|
14
15
|
"sideEffects": false,
|
|
15
16
|
"exports": {
|
|
@@ -38,7 +39,7 @@
|
|
|
38
39
|
"types/"
|
|
39
40
|
],
|
|
40
41
|
"dependencies": {
|
|
41
|
-
"@plumeria/collection": "",
|
|
42
|
+
"@plumeria/collection": "0.4.1",
|
|
42
43
|
"zss-engine": "0.2.15"
|
|
43
44
|
},
|
|
44
45
|
"publishConfig": {
|
package/readme.md
CHANGED
|
@@ -89,6 +89,37 @@ const styles = css.create({
|
|
|
89
89
|
});
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
+
### rx
|
|
93
|
+
|
|
94
|
+
### React JSX only features
|
|
95
|
+
|
|
96
|
+
React `inline-style` are **offloaded** using only static sheet the css variables.
|
|
97
|
+
It is can pass states to multiple variables at once.
|
|
98
|
+
|
|
99
|
+
```ts
|
|
100
|
+
'use client';
|
|
101
|
+
|
|
102
|
+
import { useState } from 'react';
|
|
103
|
+
import { css, rx } from '@plumeria/core';
|
|
104
|
+
|
|
105
|
+
const styles = css.create({
|
|
106
|
+
bar: {
|
|
107
|
+
width: 'var(--width)',
|
|
108
|
+
background: 'aqua',
|
|
109
|
+
},
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
export const Component = () => {
|
|
113
|
+
const [state, setState] = useState(0);
|
|
114
|
+
return (
|
|
115
|
+
<di>
|
|
116
|
+
<button onClick={() => setState((prev) => prev + 10)}>count</button>
|
|
117
|
+
<div {...rx(styles.bar, { '--width': state + 'px' })} />
|
|
118
|
+
</di>
|
|
119
|
+
);
|
|
120
|
+
};
|
|
121
|
+
```
|
|
122
|
+
|
|
92
123
|
### css.keyframes()
|
|
93
124
|
|
|
94
125
|
Define @keyframes and set the return value directly to animationName.
|
|
@@ -144,8 +175,14 @@ css.colors.darken('skyblue', '12%');
|
|
|
144
175
|
|
|
145
176
|
## Linter
|
|
146
177
|
|
|
147
|
-
[eslint-plugin-
|
|
148
|
-
|
|
178
|
+
[eslint-plugin-zss-lint](https://www.npmjs.com/package/eslint-plugin-zss-lint) is a linter built for CSS-in-JS libraries built with zss-engine.
|
|
179
|
+
|
|
180
|
+
Rules:
|
|
181
|
+
\- sort-properties
|
|
182
|
+
\- validate-values
|
|
183
|
+
\- no-unused-keys
|
|
184
|
+
|
|
185
|
+
Type safety relies on this eslint-plugin. It includes all properties, excluding deprecated and experimental.
|
|
149
186
|
|
|
150
187
|
## How Plumeria works
|
|
151
188
|
|