effcss 4.0.0 → 4.0.1
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 +22 -22
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -36,25 +36,21 @@ EffCSS is a self-confident CSS-in-JS library based only on the browser APIs. Use
|
|
|
36
36
|
- [Mozilla Firefox](https://addons.mozilla.org/ru/firefox/addon/effcss-developer-tools/)
|
|
37
37
|
- [zip for Chromium based browsers](https://storage.yandexcloud.net/effcss-devtools/chromium-based.zip), that can be installed using [chrome://extensions](https://www.geeksforgeeks.org/installation-guide/how-to-add-extensions-in-google-chrome-browser/)
|
|
38
38
|
|
|
39
|
-
##
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
- [
|
|
46
|
-
- [
|
|
47
|
-
- [
|
|
48
|
-
- [
|
|
49
|
-
- [
|
|
50
|
-
- [
|
|
51
|
-
- [
|
|
52
|
-
- [
|
|
53
|
-
- [
|
|
54
|
-
- [Preact](https://stackblitz.com/edit/effcss-3-preact-vitejs?file=index.html)
|
|
55
|
-
- [Qwik](https://stackblitz.com/edit/effcss-3-qwik-vitejs?file=index.html)
|
|
56
|
-
- [Lit](https://stackblitz.com/edit/effcss-3-lit-vitejs?file=index.html)
|
|
57
|
-
- [Astro](https://stackblitz.com/edit/effcss-3-ts-astro?file=src%2Fpages%2Findex.astro)
|
|
39
|
+
## Examples
|
|
40
|
+
|
|
41
|
+
- [Vanilla TS](https://stackblitz.com/edit/effcss-ts-vitejs?file=src%2Fmain.ts)
|
|
42
|
+
- [React](https://stackblitz.com/edit/effcss-react-vitejs?file=src%2FApp.tsx)
|
|
43
|
+
- [Svelte](https://stackblitz.com/edit/effcss-svelte-vitejs?file=src%2FApp.svelte)
|
|
44
|
+
- [Vue](https://stackblitz.com/edit/effcss-vue-vitejs?file=src%2FApp.vue)
|
|
45
|
+
- [Angular](https://stackblitz.com/edit/effcss-angular-vitejs?file=src%2Fmain.ts)
|
|
46
|
+
- [SolidJS](https://stackblitz.com/edit/effcss-solidjs-vitejs?file=src%2FApp.tsx)
|
|
47
|
+
- [Preact](https://stackblitz.com/edit/effcss-preact-vitejs?file=src%2Fapp.tsx)
|
|
48
|
+
- [Qwik](https://stackblitz.com/edit/effcss-qwik-vitejs?file=src%2Fapp.tsx)
|
|
49
|
+
- [Lit](https://stackblitz.com/edit/effcss-lit-vitejs?file=src%2Fmy-element.ts)
|
|
50
|
+
- [React SSR](https://stackblitz.com/edit/effcss-react-ssr-vitejs?file=src%2FApp.tsx)
|
|
51
|
+
- [Svelte SSR](https://stackblitz.com/edit/effcss-svelte-ssr-vitejs?file=src%2FApp.svelte)
|
|
52
|
+
- [Vue SSR](https://stackblitz.com/edit/effcss-vue-ssr-vitejs?file=src%2FApp.vue)
|
|
53
|
+
- [Astro SSG](https://stackblitz.com/edit/effcss-ts-astro?file=src%2Fpages%2Findex.astro)
|
|
58
54
|
|
|
59
55
|
## Installation
|
|
60
56
|
|
|
@@ -80,7 +76,11 @@ Just call `useStyleProvider` in your code:
|
|
|
80
76
|
```jsx
|
|
81
77
|
import { useStyleProvider } from "effcss";
|
|
82
78
|
|
|
83
|
-
const consumer = useStyleProvider(
|
|
79
|
+
const consumer = useStyleProvider({
|
|
80
|
+
attrs: {
|
|
81
|
+
min: true // to create minified selectors
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
84
|
|
|
85
85
|
const root = createRoot(document.getElementById("root"));
|
|
86
86
|
root.render(<App css={consumer} />);
|
|
@@ -137,7 +137,7 @@ export interface TCardMaker {
|
|
|
137
137
|
const myStyleSheetMaker: TStyleSheetMaker = ({ bem, pseudo, at: { keyframes }, merge, palette, coef, size }) = {
|
|
138
138
|
// specify selector variants via generic
|
|
139
139
|
const selector = bem<TCardMaker>;
|
|
140
|
-
//
|
|
140
|
+
// create unique keyframes identifier
|
|
141
141
|
const spin = keyframes({
|
|
142
142
|
from: {
|
|
143
143
|
transform: 'rotate(0deg)',
|
|
@@ -146,7 +146,7 @@ const myStyleSheetMaker: TStyleSheetMaker = ({ bem, pseudo, at: { keyframes }, m
|
|
|
146
146
|
transform: 'rotate(360deg)',
|
|
147
147
|
},
|
|
148
148
|
});
|
|
149
|
-
// deeply
|
|
149
|
+
// deeply merge objects
|
|
150
150
|
const cardLogoStyles = merge({
|
|
151
151
|
animation: `20s linear infinite ${spin}`,
|
|
152
152
|
[pseudo.h()]: {
|
package/dist/index.js
CHANGED