@plumeria/core 0.19.2 → 0.19.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/README.md +15 -43
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,49 +1,23 @@
|
|
|
1
1
|
# @plumeria/core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The atomic on-demand CSS-in-JS.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
To get started with Plumeria, install the core package:
|
|
8
|
-
|
|
9
|
-
```sh
|
|
10
|
-
npm install @plumeria/core
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
### Compiler
|
|
14
|
-
|
|
15
|
-
Install the `css` command to extract styles at build time:
|
|
16
|
-
|
|
17
|
-
```sh
|
|
18
|
-
npm install --save-dev @plumeria/compiler
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### Stylesheet Import
|
|
22
|
-
|
|
23
|
-
In your app entry point, import the compiled CSS file:
|
|
24
|
-
|
|
25
|
-
```ts
|
|
26
|
-
import '@plumeria/core/stylesheet.css';
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## API
|
|
30
|
-
|
|
31
|
-
### css.create()
|
|
5
|
+
### Quick Example
|
|
32
6
|
|
|
33
7
|
```ts
|
|
34
8
|
import { css } from '@plumeria/core';
|
|
35
9
|
|
|
36
10
|
const styles = css.create({
|
|
37
11
|
text: {
|
|
38
|
-
|
|
12
|
+
fontSize: 12,
|
|
13
|
+
color: 'navy',
|
|
39
14
|
},
|
|
40
|
-
|
|
41
|
-
width:
|
|
42
|
-
background: 'rgb(60,60,60)',
|
|
15
|
+
size: {
|
|
16
|
+
width: 120,
|
|
43
17
|
},
|
|
44
18
|
});
|
|
45
19
|
|
|
46
|
-
const className = css.props(styles.text, styles.
|
|
20
|
+
const className = css.props(styles.text, styles.size);
|
|
47
21
|
```
|
|
48
22
|
|
|
49
23
|
Plumeria compiles each style property into a unique, **atomic**, and **hashed** class name. This prevents style collisions and maximizes reusability.
|
|
@@ -51,28 +25,28 @@ Plumeria compiles each style property into a unique, **atomic**, and **hashed**
|
|
|
51
25
|
**Generated CSS:**
|
|
52
26
|
|
|
53
27
|
```css
|
|
54
|
-
.
|
|
55
|
-
|
|
28
|
+
.x1p2jzyu {
|
|
29
|
+
font-size: 12px;
|
|
56
30
|
}
|
|
57
|
-
.
|
|
58
|
-
|
|
31
|
+
.xzie71ek {
|
|
32
|
+
color: navy;
|
|
59
33
|
}
|
|
60
|
-
.
|
|
61
|
-
|
|
34
|
+
.xgpw2mmc {
|
|
35
|
+
width: 120px;
|
|
62
36
|
}
|
|
63
37
|
```
|
|
64
38
|
|
|
65
39
|
**Resulting:**
|
|
66
40
|
|
|
67
41
|
```
|
|
68
|
-
className: "
|
|
42
|
+
className: "x1p2jzyu xzie71ek xgpw2mmc"
|
|
69
43
|
```
|
|
70
44
|
|
|
71
45
|
## Documentation
|
|
72
46
|
|
|
73
47
|
Read the [documentation](https://plumeria.dev/) for more details.
|
|
74
48
|
|
|
75
|
-
##
|
|
49
|
+
## Installation
|
|
76
50
|
|
|
77
51
|
- [Vite](https://plumeria.dev/docs/integration/vite)
|
|
78
52
|
- [Next](https://plumeria.dev/docs/integration/next)
|
|
@@ -84,8 +58,6 @@ Read the [documentation](https://plumeria.dev/) for more details.
|
|
|
84
58
|
|
|
85
59
|
Plumeria is made possible thanks to the inspirations from the following projects:
|
|
86
60
|
|
|
87
|
-
> in alphabetical order
|
|
88
|
-
|
|
89
61
|
- [Linaria](https://linaria.dev/)
|
|
90
62
|
- [React Native](https://reactnative.dev/docs/stylesheet)
|
|
91
63
|
- [React Native for Web](https://necolas.github.io/react-native-web/)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plumeria/core",
|
|
3
|
-
"version": "0.19.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.19.4",
|
|
4
|
+
"description": "The atomic on-demand CSS-in-JS.",
|
|
5
5
|
"author": "Refirst 11",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"funding": "https://github.com/sponsors/refirst11",
|