@plumeria/core 0.15.0 → 0.15.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 +14 -13
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @plumeria/core
|
|
2
2
|
|
|
3
|
-
Plumeria is a JavaScript library for
|
|
3
|
+
Plumeria is a JavaScript library for scalable and optimized styling.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -10,16 +10,14 @@ To get started with Plumeria, install the core package:
|
|
|
10
10
|
npm install @plumeria/core
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
### Compiler
|
|
13
|
+
### Compiler
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
Install the `css` command to extract styles at build time:
|
|
16
16
|
|
|
17
17
|
```sh
|
|
18
18
|
npm install --save-dev @plumeria/compiler
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
More at: [@plumeria/compiler on npm](https://www.npmjs.com/package/@plumeria/compiler)
|
|
22
|
-
|
|
23
21
|
### Stylesheet Import
|
|
24
22
|
|
|
25
23
|
In your app entry point, import the compiled CSS file:
|
|
@@ -51,28 +49,31 @@ const styles = css.create({
|
|
|
51
49
|
### css.props()
|
|
52
50
|
|
|
53
51
|
Use `css.props()` to combine multiple styles or switch between them conditionally.
|
|
54
|
-
css.props is compiled and style properties to the right take precedence.
|
|
55
|
-
The same goes for shorthand and longhand rules.
|
|
52
|
+
css.props is compiled and style properties to the right take precedence.
|
|
56
53
|
|
|
57
54
|
```jsx
|
|
58
55
|
<div className={css.props(styles.text, styles.box)} />
|
|
59
56
|
// className="zxxxxxx1 zxxxxxx2 zxxxxxx3"
|
|
60
57
|
```
|
|
61
58
|
|
|
62
|
-
|
|
59
|
+
Shorthand and longhand property rules follow the same principles as CSS rules.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
It supports media query pseudo-classes and elements in a familiar syntax.
|
|
63
64
|
|
|
64
65
|
```ts
|
|
65
|
-
import { css
|
|
66
|
+
import { css } from '@plumeria/core';
|
|
66
67
|
|
|
67
68
|
const styles = css.create({
|
|
68
69
|
box: {
|
|
69
|
-
|
|
70
|
+
'@media (max-width: 768px)': {
|
|
70
71
|
width: '100%',
|
|
71
72
|
},
|
|
72
73
|
},
|
|
73
74
|
text: {
|
|
74
75
|
color: '#333',
|
|
75
|
-
|
|
76
|
+
':hover': {
|
|
76
77
|
color: 'skyblue',
|
|
77
78
|
opacity: 0.9,
|
|
78
79
|
},
|
|
@@ -82,7 +83,7 @@ const styles = css.create({
|
|
|
82
83
|
|
|
83
84
|
## ESLint Support
|
|
84
85
|
|
|
85
|
-
|
|
86
|
+
The [@plumeria/eslint-plugin](https://www.npmjs.com/package/@plumeria/eslint-plugin) provides recommended rules:
|
|
86
87
|
|
|
87
88
|
### Rules: recommended
|
|
88
89
|
|
|
@@ -94,7 +95,7 @@ Use [@plumeria/eslint-plugin](https://www.npmjs.com/package/@plumeria/eslint-plu
|
|
|
94
95
|
- validate-values: warn
|
|
95
96
|
```
|
|
96
97
|
|
|
97
|
-
|
|
98
|
+
It plugin provides autocomplete and validation support.
|
|
98
99
|
|
|
99
100
|
## License
|
|
100
101
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plumeria/core",
|
|
3
|
-
"version": "0.15.
|
|
4
|
-
"description": "A library for
|
|
3
|
+
"version": "0.15.2",
|
|
4
|
+
"description": "A library for scalable and optimized styling",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "git+https://github.com/zss-in-js/plumeria.git",
|