simplestyle-js 4.1.2 → 4.2.0
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 +1 -1
- package/dist/cjs/createStyles.cjs +6 -6
- package/dist/cjs/createStyles.d.ts +2 -2
- package/dist/cjs/react/useCreateStyles.cjs +2 -2
- package/dist/esm/createStyles.d.ts +2 -2
- package/dist/esm/createStyles.mjs +6 -6
- package/dist/esm/react/useCreateStyles.mjs +2 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -94,7 +94,7 @@ Rules support nested selectors via `&`, media queries, and `$className` back-ref
|
|
|
94
94
|
|
|
95
95
|
- `keyframes(ruleId, frames, options?)`
|
|
96
96
|
- Generates a unique animation name and accompanying `@keyframes` CSS.
|
|
97
|
-
- Returns `
|
|
97
|
+
- Returns `{ keyframe: string; stylesheet: string; }`. Respects `flush` and `insertBefore/After` options.
|
|
98
98
|
|
|
99
99
|
- `rawStyles(ruleId, rules, options?)`
|
|
100
100
|
- Writes rules without generating new class names. Keys must already be selectors (e.g., `html`, `body *`, `.app`).
|
|
@@ -181,16 +181,16 @@ function makeRawStyles(registry) {
|
|
|
181
181
|
}
|
|
182
182
|
function keyframes(ruleId, frames, options) {
|
|
183
183
|
const coerced = coerceCreateStylesOptions(options);
|
|
184
|
-
const
|
|
185
|
-
const { sheetBuffer: keyframesContents } = execCreateStyles(
|
|
186
|
-
const stylesheet = `@keyframes ${
|
|
184
|
+
const keyframeId = (0, _generateClassName.generateClassName)(`${ruleId}_keyframes`);
|
|
185
|
+
const { sheetBuffer: keyframesContents } = execCreateStyles(keyframeId, frames, coerced, null, true);
|
|
186
|
+
const stylesheet = `@keyframes ${keyframeId}{${keyframesContents}}`;
|
|
187
187
|
if (options?.registry) {
|
|
188
|
-
options.registry.add(
|
|
188
|
+
options.registry.add(keyframeId, stylesheet);
|
|
189
189
|
} else if (coerced.flush) {
|
|
190
|
-
flushSheetContents(
|
|
190
|
+
flushSheetContents(keyframeId, stylesheet);
|
|
191
191
|
}
|
|
192
192
|
return {
|
|
193
|
-
|
|
193
|
+
keyframe: keyframeId,
|
|
194
194
|
stylesheet
|
|
195
195
|
};
|
|
196
196
|
}
|
|
@@ -29,11 +29,11 @@ export type CreateStylesOptions = Partial<{
|
|
|
29
29
|
export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): string;
|
|
30
30
|
export declare function makeRawStyles(registry: SimpleStyleRegistry): <T extends SimpleStyleRules>(ruleId: string, rules: T) => string;
|
|
31
31
|
export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, frames: T, options?: CreateStylesOptions): {
|
|
32
|
-
|
|
32
|
+
keyframe: string;
|
|
33
33
|
stylesheet: string;
|
|
34
34
|
};
|
|
35
35
|
export declare function makeKeyframes(registry: SimpleStyleRegistry): <T extends Record<string, Properties>>(ruleId: string, rules: T) => {
|
|
36
|
-
|
|
36
|
+
keyframe: string;
|
|
37
37
|
stylesheet: string;
|
|
38
38
|
};
|
|
39
39
|
export declare function makeCreateStyles(registry: SimpleStyleRegistry): <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T) => {
|
|
@@ -9,8 +9,8 @@ Object.defineProperty(exports, "useCreateStyles", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _react = require("react");
|
|
12
|
-
const _createStyles = /*#__PURE__*/ _interop_require_default(require("
|
|
13
|
-
const _index = require("
|
|
12
|
+
const _createStyles = /*#__PURE__*/ _interop_require_default(require("..\createStyles.cjs"));
|
|
13
|
+
const _index = require("..\util\index.cjs");
|
|
14
14
|
function _interop_require_default(obj) {
|
|
15
15
|
return obj && obj.__esModule ? obj : {
|
|
16
16
|
default: obj
|
|
@@ -29,11 +29,11 @@ export type CreateStylesOptions = Partial<{
|
|
|
29
29
|
export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): string;
|
|
30
30
|
export declare function makeRawStyles(registry: SimpleStyleRegistry): <T extends SimpleStyleRules>(ruleId: string, rules: T) => string;
|
|
31
31
|
export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, frames: T, options?: CreateStylesOptions): {
|
|
32
|
-
|
|
32
|
+
keyframe: string;
|
|
33
33
|
stylesheet: string;
|
|
34
34
|
};
|
|
35
35
|
export declare function makeKeyframes(registry: SimpleStyleRegistry): <T extends Record<string, Properties>>(ruleId: string, rules: T) => {
|
|
36
|
-
|
|
36
|
+
keyframe: string;
|
|
37
37
|
stylesheet: string;
|
|
38
38
|
};
|
|
39
39
|
export declare function makeCreateStyles(registry: SimpleStyleRegistry): <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T) => {
|
|
@@ -146,16 +146,16 @@ export function makeRawStyles(registry) {
|
|
|
146
146
|
}
|
|
147
147
|
export function keyframes(ruleId, frames, options) {
|
|
148
148
|
const coerced = coerceCreateStylesOptions(options);
|
|
149
|
-
const
|
|
150
|
-
const { sheetBuffer: keyframesContents } = execCreateStyles(
|
|
151
|
-
const stylesheet = `@keyframes ${
|
|
149
|
+
const keyframeId = generateClassName(`${ruleId}_keyframes`);
|
|
150
|
+
const { sheetBuffer: keyframesContents } = execCreateStyles(keyframeId, frames, coerced, null, true);
|
|
151
|
+
const stylesheet = `@keyframes ${keyframeId}{${keyframesContents}}`;
|
|
152
152
|
if (options?.registry) {
|
|
153
|
-
options.registry.add(
|
|
153
|
+
options.registry.add(keyframeId, stylesheet);
|
|
154
154
|
} else if (coerced.flush) {
|
|
155
|
-
flushSheetContents(
|
|
155
|
+
flushSheetContents(keyframeId, stylesheet);
|
|
156
156
|
}
|
|
157
157
|
return {
|
|
158
|
-
|
|
158
|
+
keyframe: keyframeId,
|
|
159
159
|
stylesheet
|
|
160
160
|
};
|
|
161
161
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
-
import createStyles from '
|
|
3
|
-
import { deepEqual } from '
|
|
2
|
+
import createStyles from '..\createStyles.mjs';
|
|
3
|
+
import { deepEqual } from '..\util\index.mjs';
|
|
4
4
|
export function useCreateStyles(ruleId, rules, options) {
|
|
5
5
|
// cache rules to compare later
|
|
6
6
|
const [cachedRules, setCachedRules] = useState(()=>rules);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "simplestyle-js",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"postcss": "^8.5.6",
|
|
48
48
|
"react": ">=18",
|
|
49
49
|
"react-dom": ">=18",
|
|
50
|
-
"@better-builds/ts-duality": "
|
|
50
|
+
"@better-builds/ts-duality": "^0.6.0",
|
|
51
51
|
"typescript": "^5.9.3",
|
|
52
52
|
"vite": "^7.2.6",
|
|
53
53
|
"vitest": "^4.0.14"
|
|
@@ -175,4 +175,4 @@
|
|
|
175
175
|
"module": "./dist/esm/index.mjs",
|
|
176
176
|
"types": "./dist/cjs/index.d.ts",
|
|
177
177
|
"main": "./dist/cjs/index.cjs"
|
|
178
|
-
}
|
|
178
|
+
}
|