effcss 1.1.1 → 1.1.3
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 +30 -18
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,16 +1,36 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://effcss.surge.sh">
|
|
3
|
+
<img alt="effcss" src="https://effcss.surge.sh/logo.svg" height="72px" />
|
|
4
|
+
</a>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<h1 align="center">Effcss</h1>
|
|
8
|
+
|
|
9
|
+
<div align="center">
|
|
10
|
+
|
|
11
|
+
[](https://gitverse.ru/msabitov/effcss/content/master/LICENSE)
|
|
12
|
+
[](https://www.npmjs.com/package/effcss)
|
|
13
|
+
|
|
14
|
+
</div>
|
|
2
15
|
|
|
3
16
|
Effcss is a next generation CSS-in-JS library based only on the browser APIs.
|
|
4
17
|
|
|
18
|
+
## Links
|
|
19
|
+
|
|
20
|
+
- [Docs](https://effcss.surge.sh)
|
|
21
|
+
- [Repository](https://gitverse.ru/msabitov/effcss)
|
|
22
|
+
- [Github mirror](https://github.com/msabitov/effcss)
|
|
23
|
+
- [React demo](https://stackblitz.com/edit/vitejs-react-effcss?file=index.html)
|
|
24
|
+
- [Svelte demo](https://stackblitz.com/edit/vitejs-svelte-effcss?file=index.html)
|
|
25
|
+
|
|
5
26
|
## Some features
|
|
6
27
|
|
|
7
28
|
- zero-dependency
|
|
8
29
|
- framework agnostic
|
|
9
|
-
- customizable
|
|
10
30
|
- runtime stylesheets generation
|
|
11
31
|
- built-in BEM support
|
|
12
|
-
-
|
|
13
|
-
- support
|
|
32
|
+
- customizable
|
|
33
|
+
- support style switching
|
|
14
34
|
|
|
15
35
|
## Installation
|
|
16
36
|
|
|
@@ -20,10 +40,6 @@ Install it from npm:
|
|
|
20
40
|
npm i effcss
|
|
21
41
|
```
|
|
22
42
|
|
|
23
|
-
## Usage example
|
|
24
|
-
|
|
25
|
-
See simple usage example in `demo` folder or open demo React project on [StackBlitz](https://stackblitz.com/edit/vitejs-react-effcss?file=index.html)
|
|
26
|
-
|
|
27
43
|
## Concepts
|
|
28
44
|
|
|
29
45
|
Effcss consists of two parts - **style provider** and **style config**.
|
|
@@ -31,18 +47,18 @@ Effcss consists of two parts - **style provider** and **style config**.
|
|
|
31
47
|
**Style provider** is the static part that defines special web component (by default, `<style-provider>`). It should be connected in separate script-tag inside html head or manually defined in page scripts. The easiest way is to use the provider script with unpkg:
|
|
32
48
|
|
|
33
49
|
```html
|
|
34
|
-
<script src="https://unpkg.com/effcss
|
|
50
|
+
<script src="https://unpkg.com/effcss/dist/build/define-provider.min.js" crossorigin="anonymous"></script>
|
|
35
51
|
```
|
|
36
52
|
|
|
37
53
|
Or you can use provider script with all library style configs included:
|
|
38
54
|
|
|
39
55
|
```html
|
|
40
|
-
<script src="https://unpkg.com/effcss
|
|
56
|
+
<script src="https://unpkg.com/effcss/dist/build/define-provider-with-configs.min.js" crossorigin="anonymous"></script>
|
|
41
57
|
```
|
|
42
58
|
|
|
43
|
-
**Style config** is the dynamic part that configures the behavior of the web component and defines the initial styles of the page. **
|
|
44
|
-
- styles - initial
|
|
45
|
-
- ext - initial expanded rules for
|
|
59
|
+
**Style config** is the dynamic part that configures the behavior of the web component and defines the initial styles of the page. **Style config** consists of 3 fields:
|
|
60
|
+
- styles - initial stylesheets configs;
|
|
61
|
+
- ext - initial expanded rules for stylesheets;
|
|
46
62
|
- params - custom global values for interpolation. Params contains style modes, the mandatory mode is `root`;
|
|
47
63
|
|
|
48
64
|
This **style config** can be defined in at least two ways:
|
|
@@ -64,7 +80,7 @@ root.render(<App styleDispatcher={styleDispatcher}/>);
|
|
|
64
80
|
|
|
65
81
|
## Customization
|
|
66
82
|
|
|
67
|
-
You can add your own
|
|
83
|
+
You can add your own stylesheets configs. While you can write arbitrary rules and selectors, the recommended way is to use the **BEM methodology**. Block key for each style config is its key inside `styles` provider settings. A style config is an object like this:
|
|
68
84
|
|
|
69
85
|
```js
|
|
70
86
|
// in style config it is in 'block' field,
|
|
@@ -156,7 +172,3 @@ export default {
|
|
|
156
172
|
}
|
|
157
173
|
}
|
|
158
174
|
```
|
|
159
|
-
|
|
160
|
-
## Docs
|
|
161
|
-
|
|
162
|
-
Coming soon
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "effcss",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"description": "Next generation CSS-in-JS library",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "rollup -c",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"type": "git",
|
|
67
67
|
"url": "https://gitverse.ru/msabitov/effcss"
|
|
68
68
|
},
|
|
69
|
-
"homepage": "https://
|
|
69
|
+
"homepage": "https://effcss.surge.sh"
|
|
70
70
|
}
|