@plumeria/core 0.9.5 → 0.9.7
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 +18 -15
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -54,7 +54,8 @@ Also, any properties that are not wrapped will conform to that className.
|
|
|
54
54
|
```ts
|
|
55
55
|
const styles = css.create({
|
|
56
56
|
box: {
|
|
57
|
-
|
|
57
|
+
// 900px
|
|
58
|
+
[css.media.maxWidth(900)]: {
|
|
58
59
|
width: '100%',
|
|
59
60
|
color: 'rgb(60,60,60)',
|
|
60
61
|
},
|
|
@@ -88,12 +89,6 @@ css.global({
|
|
|
88
89
|
h1: {
|
|
89
90
|
fontSize: 32,
|
|
90
91
|
},
|
|
91
|
-
h2: {
|
|
92
|
-
fontSize: 24,
|
|
93
|
-
},
|
|
94
|
-
h3: {
|
|
95
|
-
fontSize: 16,
|
|
96
|
-
},
|
|
97
92
|
});
|
|
98
93
|
```
|
|
99
94
|
|
|
@@ -130,7 +125,7 @@ const tokens = css.defineVars({
|
|
|
130
125
|
sm: 360,
|
|
131
126
|
md: 480,
|
|
132
127
|
lg: 600,
|
|
133
|
-
xl:
|
|
128
|
+
xl: 720,
|
|
134
129
|
});
|
|
135
130
|
```
|
|
136
131
|
|
|
@@ -159,11 +154,17 @@ const themes = css.defineTheme({
|
|
|
159
154
|
Mixes #000 or #FFF into the color.
|
|
160
155
|
The first argument takes the color and the second argument takes the same value as opacity (string % or number).
|
|
161
156
|
|
|
157
|
+
You can also retrieve the complement of the color property from an color object.
|
|
158
|
+
|
|
162
159
|
```ts
|
|
163
160
|
color: css.color.darken('skyblue', 0.12),
|
|
164
161
|
color: css.color.lighten('navy', 0.6),
|
|
162
|
+
|
|
165
163
|
color: css.color.skyblue,
|
|
166
|
-
color: css.color.
|
|
164
|
+
color: css.color.aqua,
|
|
165
|
+
// ...many more colors
|
|
166
|
+
color: css.color.*...,
|
|
167
|
+
|
|
167
168
|
```
|
|
168
169
|
|
|
169
170
|
### cx
|
|
@@ -171,8 +172,10 @@ color: css.color.navy,
|
|
|
171
172
|
Merges strings such as class names and pseudo.
|
|
172
173
|
|
|
173
174
|
```tsx
|
|
174
|
-
|
|
175
|
-
cx(
|
|
175
|
+
// ":hover::after"
|
|
176
|
+
cx(css.pseudo.hover, css.pseudo.after);
|
|
177
|
+
// "text_hash box_hash"
|
|
178
|
+
cx(styles.text, styles, box);
|
|
176
179
|
```
|
|
177
180
|
|
|
178
181
|
## ESLint
|
|
@@ -181,10 +184,10 @@ cx(styles.text, styles, box); // "text_hash box_hash"
|
|
|
181
184
|
|
|
182
185
|
### Rules: recommended
|
|
183
186
|
|
|
184
|
-
\-
|
|
185
|
-
\-
|
|
186
|
-
\-
|
|
187
|
-
\-
|
|
187
|
+
\- no-inner-call:(error)
|
|
188
|
+
\- no-unused-keys:(warn)
|
|
189
|
+
\- sort-properties:(warn)
|
|
190
|
+
\- validate-values:(warn)
|
|
188
191
|
|
|
189
192
|
It is recommended to use it in conjunction with TypeScript completion, which is one of the big advantages of using plumeria.
|
|
190
193
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plumeria/core",
|
|
3
|
-
"version": "0.9.
|
|
4
|
-
"description": "Zero-runtime CSS in JS
|
|
3
|
+
"version": "0.9.7",
|
|
4
|
+
"description": "Zero-runtime CSS in JS - Compile at build-time. No runtime overhead.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
7
7
|
"css-in-js",
|