@pikacss/core 0.0.13 → 0.0.14
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/dist/index.cjs +243 -218
- package/dist/index.d.cts +359 -282
- package/dist/index.d.mts +359 -282
- package/dist/index.d.ts +359 -282
- package/dist/index.mjs +244 -217
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,90 +1,281 @@
|
|
|
1
1
|
import * as CSS from 'csstype';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
interface ImportantConfig {
|
|
4
|
+
default?: boolean;
|
|
5
|
+
}
|
|
6
|
+
declare module '@pikacss/core' {
|
|
7
|
+
interface EngineConfig {
|
|
8
|
+
important?: ImportantConfig;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
4
11
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
12
|
+
interface Progress {
|
|
13
|
+
from?: ResolvedProperties;
|
|
14
|
+
to?: ResolvedProperties;
|
|
15
|
+
[K: `${number}%`]: ResolvedProperties;
|
|
16
|
+
}
|
|
17
|
+
type Keyframes = string | [name: string, frames?: Progress, autocomplete?: string[], pruneUnused?: boolean] | {
|
|
18
|
+
name: string;
|
|
19
|
+
frames?: Progress;
|
|
20
|
+
autocomplete?: string[];
|
|
21
|
+
pruneUnused?: boolean;
|
|
22
|
+
};
|
|
23
|
+
interface KeyframesConfig {
|
|
24
|
+
/**
|
|
25
|
+
* Define CSS @keyframes animations with support for frame definitions
|
|
26
|
+
* and autocomplete suggestions.
|
|
27
|
+
*
|
|
28
|
+
* @default []
|
|
29
|
+
* @example
|
|
30
|
+
* ```ts
|
|
31
|
+
* {
|
|
32
|
+
* keyframes: [
|
|
33
|
+
* // Basic animation
|
|
34
|
+
* ['fade', {
|
|
35
|
+
* from: { opacity: 0 },
|
|
36
|
+
* to: { opacity: 1 }
|
|
37
|
+
* }],
|
|
38
|
+
* // With autocomplete suggestions
|
|
39
|
+
* ['slide', {
|
|
40
|
+
* from: { transform: 'translateX(-100%)' },
|
|
41
|
+
* to: { transform: 'translateX(0)' }
|
|
42
|
+
* }, ['slide 0.3s ease']]
|
|
43
|
+
* ]
|
|
44
|
+
* }
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
keyframes: Keyframes[];
|
|
48
|
+
/**
|
|
49
|
+
* Whether to prune unused keyframes from the final CSS.
|
|
50
|
+
*
|
|
51
|
+
* @default true
|
|
52
|
+
*/
|
|
53
|
+
pruneUnused?: boolean;
|
|
54
|
+
}
|
|
55
|
+
declare module '@pikacss/core' {
|
|
56
|
+
interface EngineConfig {
|
|
57
|
+
keyframes?: KeyframesConfig;
|
|
58
|
+
}
|
|
59
|
+
interface Engine {
|
|
60
|
+
keyframes: {
|
|
61
|
+
store: Map<string, ResolvedKeyframesConfig>;
|
|
62
|
+
add: (...list: Keyframes[]) => void;
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
interface ResolvedKeyframesConfig {
|
|
67
|
+
name: string;
|
|
68
|
+
frames: Progress | Nullish;
|
|
69
|
+
pruneUnused: boolean;
|
|
70
|
+
autocomplete: string[];
|
|
29
71
|
}
|
|
30
72
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
73
|
+
interface ResolvedResult<T> {
|
|
74
|
+
value: T;
|
|
75
|
+
}
|
|
76
|
+
interface StaticRule<T> {
|
|
77
|
+
key: string;
|
|
78
|
+
string: string;
|
|
79
|
+
resolved: T;
|
|
80
|
+
}
|
|
81
|
+
interface DynamicRule<T> {
|
|
82
|
+
key: string;
|
|
83
|
+
stringPattern: RegExp;
|
|
84
|
+
createResolved: (matched: RegExpMatchArray) => Awaitable<T>;
|
|
85
|
+
}
|
|
86
|
+
declare abstract class AbstractResolver<T> {
|
|
87
|
+
protected _resolvedResultsMap: Map<string, ResolvedResult<T>>;
|
|
88
|
+
staticRulesMap: Map<string, StaticRule<T>>;
|
|
89
|
+
dynamicRulesMap: Map<string, DynamicRule<T>>;
|
|
90
|
+
onResolved: (string: string, type: 'static' | 'dynamic', result: ResolvedResult<T>) => void;
|
|
91
|
+
get staticRules(): StaticRule<T>[];
|
|
92
|
+
get dynamicRules(): DynamicRule<T>[];
|
|
93
|
+
addStaticRule(rule: StaticRule<T>): this;
|
|
94
|
+
removeStaticRule(key: string): this;
|
|
95
|
+
addDynamicRule(rule: DynamicRule<T>): this;
|
|
96
|
+
removeDynamicRule(key: string): this;
|
|
97
|
+
_resolve(string: string): Promise<ResolvedResult<T> | Nullish>;
|
|
98
|
+
_setResolvedResult(string: string, resolved: T): void;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
type Selector = string | [selector: RegExp, value: (matched: RegExpMatchArray) => Awaitable<Arrayable<UnionString | ResolvedSelector>>, autocomplete?: Arrayable<string>] | [selector: string, value: Arrayable<UnionString | ResolvedSelector>] | {
|
|
102
|
+
selector: RegExp;
|
|
103
|
+
value: (matched: RegExpMatchArray) => Awaitable<Arrayable<UnionString | ResolvedSelector>>;
|
|
104
|
+
autocomplete?: Arrayable<string>;
|
|
105
|
+
} | {
|
|
106
|
+
selector: string;
|
|
107
|
+
value: Arrayable<UnionString | ResolvedSelector>;
|
|
46
108
|
};
|
|
47
|
-
interface
|
|
109
|
+
interface SelectorsConfig {
|
|
110
|
+
/**
|
|
111
|
+
* Define custom selectors with support for dynamic and static selectors.
|
|
112
|
+
*
|
|
113
|
+
* @default []
|
|
114
|
+
* @example
|
|
115
|
+
* ```ts
|
|
116
|
+
* {
|
|
117
|
+
* selectors: [
|
|
118
|
+
* // Static selector
|
|
119
|
+
* ['hover', '$:hover'],
|
|
120
|
+
* // Dynamic selector
|
|
121
|
+
* [/^screen-(\d+)$/, m => `@media (min-width: ${m[1]}px)`,
|
|
122
|
+
* ['screen-768', 'screen-1024']], // Autocomplete suggestions
|
|
123
|
+
* ]
|
|
124
|
+
* }
|
|
125
|
+
* ```
|
|
126
|
+
*/
|
|
127
|
+
selectors: Selector[];
|
|
128
|
+
}
|
|
129
|
+
declare module '@pikacss/core' {
|
|
130
|
+
interface EngineConfig {
|
|
131
|
+
selectors?: SelectorsConfig;
|
|
132
|
+
}
|
|
133
|
+
interface Engine {
|
|
134
|
+
selectors: {
|
|
135
|
+
resolver: SelectorResolver;
|
|
136
|
+
add: (...list: Selector[]) => void;
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
declare class SelectorResolver extends AbstractResolver<string[]> {
|
|
141
|
+
resolve(selector: string): Promise<string[]>;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
type Shortcut = string | [shortcut: RegExp, value: (matched: RegExpMatchArray) => Awaitable<Arrayable<ResolvedStyleItem>>, autocomplete?: Arrayable<string>] | {
|
|
145
|
+
shortcut: RegExp;
|
|
146
|
+
value: (matched: RegExpMatchArray) => Awaitable<Arrayable<ResolvedStyleItem>>;
|
|
147
|
+
autocomplete?: Arrayable<string>;
|
|
148
|
+
} | [shortcut: string, value: Arrayable<ResolvedStyleItem>] | {
|
|
149
|
+
shortcut: string;
|
|
150
|
+
value: Arrayable<ResolvedStyleItem>;
|
|
151
|
+
};
|
|
152
|
+
interface ShortcutsConfig {
|
|
153
|
+
/**
|
|
154
|
+
* Define style shortcuts for reusable style combinations.
|
|
155
|
+
*
|
|
156
|
+
* @default []
|
|
157
|
+
* @example
|
|
158
|
+
* ```ts
|
|
159
|
+
* {
|
|
160
|
+
* shortcuts: [
|
|
161
|
+
* // Static shortcut
|
|
162
|
+
* ['flex-center', {
|
|
163
|
+
* display: 'flex',
|
|
164
|
+
* alignItems: 'center',
|
|
165
|
+
* justifyContent: 'center'
|
|
166
|
+
* }],
|
|
167
|
+
* // Dynamic shortcut
|
|
168
|
+
* [/^m-(\d+)$/, m => ({ margin: `${m[1]}px` }),
|
|
169
|
+
* ['m-4', 'm-8']] // Autocomplete suggestions
|
|
170
|
+
* ]
|
|
171
|
+
* }
|
|
172
|
+
* ```
|
|
173
|
+
*/
|
|
174
|
+
shortcuts: Shortcut[];
|
|
175
|
+
}
|
|
176
|
+
declare module '@pikacss/core' {
|
|
177
|
+
interface EngineConfig {
|
|
178
|
+
shortcuts?: ShortcutsConfig;
|
|
179
|
+
}
|
|
180
|
+
interface Engine {
|
|
181
|
+
shortcuts: {
|
|
182
|
+
resolver: ShortcutResolver;
|
|
183
|
+
add: (...list: Shortcut[]) => void;
|
|
184
|
+
};
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
declare class ShortcutResolver extends AbstractResolver<StyleItem$1[]> {
|
|
188
|
+
resolve(shortcut: string): Promise<StyleItem$1[]>;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
interface VariableAutocomplete {
|
|
192
|
+
/**
|
|
193
|
+
* Specify the properties that the variable can be used as a value of.
|
|
194
|
+
*
|
|
195
|
+
* @default ['*']
|
|
196
|
+
*/
|
|
197
|
+
asValueOf?: Arrayable<UnionString | '*' | '-' | ResolvedCSSProperty>;
|
|
198
|
+
/**
|
|
199
|
+
* Whether to add the variable as a CSS property.
|
|
200
|
+
*
|
|
201
|
+
* @default true
|
|
202
|
+
*/
|
|
203
|
+
asProperty?: boolean;
|
|
204
|
+
}
|
|
205
|
+
type Variable = string | [name: string, value?: string, autocomplete?: VariableAutocomplete, pruneUnused?: boolean] | {
|
|
48
206
|
name: string;
|
|
49
|
-
|
|
207
|
+
value?: string;
|
|
208
|
+
autocomplete?: VariableAutocomplete;
|
|
209
|
+
pruneUnused?: boolean;
|
|
210
|
+
};
|
|
211
|
+
interface VariablesConfig {
|
|
212
|
+
/**
|
|
213
|
+
* Define CSS variables with support for static values and autocomplete configuration.
|
|
214
|
+
*
|
|
215
|
+
* @default []
|
|
216
|
+
* @example
|
|
217
|
+
* ```ts
|
|
218
|
+
* {
|
|
219
|
+
* variables: [
|
|
220
|
+
* // Basic usage
|
|
221
|
+
* ['primary', '#ff0000'],
|
|
222
|
+
* // With autocomplete configuration
|
|
223
|
+
* ['accent', '#00ff00', {
|
|
224
|
+
* asValueOf: ['color', 'background-color'],
|
|
225
|
+
* asProperty: true
|
|
226
|
+
* }]
|
|
227
|
+
* ]
|
|
228
|
+
* }
|
|
229
|
+
* ```
|
|
230
|
+
*/
|
|
231
|
+
variables: Variable[];
|
|
232
|
+
/**
|
|
233
|
+
* Whether to prune unused variables from the final CSS.
|
|
234
|
+
*
|
|
235
|
+
* @default true
|
|
236
|
+
*/
|
|
237
|
+
pruneUnused?: boolean;
|
|
238
|
+
}
|
|
239
|
+
declare module '@pikacss/core' {
|
|
240
|
+
interface EngineConfig {
|
|
241
|
+
variables?: VariablesConfig;
|
|
242
|
+
}
|
|
243
|
+
interface Engine {
|
|
244
|
+
variables: {
|
|
245
|
+
store: Map<string, ResolvedVariableConfig>;
|
|
246
|
+
add: (...list: Variable[]) => void;
|
|
247
|
+
};
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
interface ResolvedVariableConfig {
|
|
251
|
+
name: string;
|
|
252
|
+
value: string | Nullish;
|
|
253
|
+
pruneUnused: boolean;
|
|
254
|
+
autocomplete: {
|
|
255
|
+
asValueOf: string[];
|
|
256
|
+
asProperty: boolean;
|
|
257
|
+
};
|
|
50
258
|
}
|
|
51
259
|
|
|
260
|
+
type Nullish = null | undefined;
|
|
52
261
|
type UnionString = string & {};
|
|
53
262
|
type UnionNumber = number & {};
|
|
54
263
|
type Arrayable<T> = T | T[];
|
|
55
264
|
type Awaitable<T> = T | Promise<T>;
|
|
56
265
|
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
|
|
57
266
|
type IsEqual<X, Y> = (<T>() => T extends X ? 1 : 2) extends (<T>() => T extends Y ? 1 : 2) ? true : false;
|
|
267
|
+
type IsNever<T> = [T] extends [never] ? true : false;
|
|
58
268
|
type Simplify<T> = {
|
|
59
269
|
[K in keyof T]: T[K];
|
|
60
270
|
} & {};
|
|
61
271
|
type ToKebab<T extends string> = T extends `${infer A}${infer B}` ? [A extends Uppercase<A> ? 1 : 0, A extends Lowercase<A> ? 1 : 0] extends [1, 0] ? `-${Lowercase<A>}${ToKebab<`${B}`>}` : `${A}${ToKebab<`${B}`>}` : T;
|
|
62
272
|
type FromKebab<T extends string> = T extends `--${string}` ? T : T extends `-${infer A}${infer B}` ? `${Uppercase<A>}${FromKebab<`${B}`>}` : T extends `${infer A}${infer B}` ? `${A}${FromKebab<`${B}`>}` : T;
|
|
63
273
|
type GetValue<Obj extends Record<string, any>, K extends string> = (IsEqual<Obj, object> | IsEqual<Obj, {}> | IsEqual<Obj[K], unknown>) extends false ? Obj[K] : never;
|
|
64
|
-
type
|
|
65
|
-
|
|
66
|
-
interface AutocompleteConfig {
|
|
67
|
-
selectors?: string[];
|
|
68
|
-
styleItemStrings?: string[];
|
|
69
|
-
extraProperties?: string[];
|
|
70
|
-
extraCssProperties?: string[];
|
|
71
|
-
properties?: [property: string, tsType: Arrayable<string>][];
|
|
72
|
-
cssProperties?: [property: string, value: Arrayable<string | number>][];
|
|
73
|
-
}
|
|
74
|
-
interface ResolvedAutocompleteConfig {
|
|
75
|
-
selectors: Set<string>;
|
|
76
|
-
styleItemStrings: Set<string>;
|
|
77
|
-
extraProperties: Set<string>;
|
|
78
|
-
extraCssProperties: Set<string>;
|
|
79
|
-
properties: Map<string, string[]>;
|
|
80
|
-
cssProperties: Map<string, (string | number)[]>;
|
|
81
|
-
}
|
|
274
|
+
type ResolveFrom<T, Key extends string, I, Fallback extends I> = Key extends keyof T ? T[Key] extends I ? T[Key] : Fallback : Fallback;
|
|
82
275
|
|
|
83
|
-
interface
|
|
84
|
-
default?: boolean;
|
|
276
|
+
interface PikaAugment {
|
|
85
277
|
}
|
|
86
|
-
|
|
87
|
-
type PropertyValue = string | number | [value: string | number, fallback: (string | number)[]] | null | undefined;
|
|
278
|
+
type PropertyValue = string | number | [value: string | number, fallback: (string | number)[]] | Nullish;
|
|
88
279
|
type Properties$1 = Record<string, PropertyValue>;
|
|
89
280
|
interface StyleDefinition$1 {
|
|
90
281
|
[K: string]: PropertyValue | StyleDefinition$1 | StyleItem$1[];
|
|
@@ -93,7 +284,7 @@ type StyleItem$1 = string | StyleDefinition$1;
|
|
|
93
284
|
interface ExtractedAtomicStyleContent {
|
|
94
285
|
selector: string[];
|
|
95
286
|
property: string;
|
|
96
|
-
value: string[] |
|
|
287
|
+
value: string[] | Nullish;
|
|
97
288
|
}
|
|
98
289
|
interface AtomicStyleContent {
|
|
99
290
|
selector: string[];
|
|
@@ -112,17 +303,60 @@ interface CSSStyleBlockBody {
|
|
|
112
303
|
children?: CSSStyleBlocks;
|
|
113
304
|
}
|
|
114
305
|
type CSSStyleBlocks = Map<string, CSSStyleBlockBody>;
|
|
306
|
+
type ResolvedSelector = ResolveFrom<PikaAugment, 'Selector', string, string>;
|
|
307
|
+
type ResolvedCSSProperty = ResolveFrom<PikaAugment, 'CSSProperty', string, string>;
|
|
308
|
+
type ResolvedProperties = ResolveFrom<PikaAugment, 'Properties', any, Properties$1>;
|
|
309
|
+
type ResolvedStyleDefinition = ResolveFrom<PikaAugment, 'StyleDefinition', any, StyleDefinition$1>;
|
|
310
|
+
type ResolvedStyleItem = ResolveFrom<PikaAugment, 'StyleItem', any, StyleItem$1>;
|
|
115
311
|
|
|
116
|
-
interface
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
312
|
+
interface ResolvedAutocompleteConfig {
|
|
313
|
+
selectors: Set<string>;
|
|
314
|
+
styleItemStrings: Set<string>;
|
|
315
|
+
extraProperties: Set<string>;
|
|
316
|
+
extraCssProperties: Set<string>;
|
|
317
|
+
properties: Map<string, string[]>;
|
|
318
|
+
cssProperties: Map<string, (string | number)[]>;
|
|
120
319
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
320
|
+
interface _Autocomplete {
|
|
321
|
+
Selector: UnionString;
|
|
322
|
+
StyleItemString: UnionString;
|
|
323
|
+
ExtraProperty: UnionString;
|
|
324
|
+
ExtraCssProperty: UnionString;
|
|
325
|
+
PropertiesValue: Record<string, unknown>;
|
|
326
|
+
CssPropertiesValue: Record<string, UnionString | UnionNumber>;
|
|
327
|
+
}
|
|
328
|
+
type DefineAutocomplete<A extends _Autocomplete> = A;
|
|
329
|
+
type EmptyAutocomplete = DefineAutocomplete<{
|
|
330
|
+
Selector: never;
|
|
331
|
+
StyleItemString: never;
|
|
332
|
+
ExtraProperty: never;
|
|
333
|
+
ExtraCssProperty: never;
|
|
334
|
+
PropertiesValue: never;
|
|
335
|
+
CssPropertiesValue: never;
|
|
336
|
+
}>;
|
|
337
|
+
type ResolvedAutocomplete = ResolveFrom<PikaAugment, 'Autocomplete', _Autocomplete, EmptyAutocomplete>;
|
|
338
|
+
|
|
339
|
+
type DefineHooks<Hooks extends Record<string, [type: 'sync' | 'async', payload: any, returnValue?: any]>> = Hooks;
|
|
340
|
+
type EngineHooksDefinition = DefineHooks<{
|
|
341
|
+
configureRawConfig: ['async', config: EngineConfig];
|
|
342
|
+
rawConfigConfigured: ['sync', config: EngineConfig, void];
|
|
343
|
+
configureResolvedConfig: ['async', resolvedConfig: ResolvedEngineConfig];
|
|
344
|
+
configureEngine: ['async', engine: Engine];
|
|
345
|
+
transformSelectors: ['async', selectors: string[]];
|
|
346
|
+
transformStyleItems: ['async', styleItems: ResolvedStyleItem[]];
|
|
347
|
+
transformStyleDefinitions: ['async', styleDefinitions: ResolvedStyleDefinition[]];
|
|
348
|
+
preflightUpdated: ['sync', void];
|
|
349
|
+
atomicStyleAdded: ['sync', AtomicStyle];
|
|
350
|
+
autocompleteConfigUpdated: ['sync', void];
|
|
351
|
+
}>;
|
|
352
|
+
type EnginePluginHooksOptions = {
|
|
353
|
+
[K in keyof EngineHooksDefinition]?: EngineHooksDefinition[K][0] extends 'async' ? (...params: EngineHooksDefinition[K][1] extends void ? [] : [payload: EngineHooksDefinition[K][1]]) => Awaitable<EngineHooksDefinition[K][1] | void> : (...params: EngineHooksDefinition[K][1] extends void ? [] : [payload: EngineHooksDefinition[K][1]]) => EngineHooksDefinition[K][1] | void;
|
|
125
354
|
};
|
|
355
|
+
interface EnginePlugin extends EnginePluginHooksOptions {
|
|
356
|
+
name: string;
|
|
357
|
+
order?: 'pre' | 'post';
|
|
358
|
+
}
|
|
359
|
+
declare function defineEnginePlugin(plugin: EnginePlugin): EnginePlugin;
|
|
126
360
|
|
|
127
361
|
type PreflightFn = (engine: Engine, isFormatted: boolean) => string;
|
|
128
362
|
/**
|
|
@@ -131,47 +365,9 @@ type PreflightFn = (engine: Engine, isFormatted: boolean) => string;
|
|
|
131
365
|
* 1. A string is a static preflight style.
|
|
132
366
|
* 2. A function is a dynamic preflight style that can use the engine instance to generate styles.
|
|
133
367
|
*/
|
|
134
|
-
type
|
|
135
|
-
|
|
136
|
-
type SelectorConfig<_Selector extends string = string> = string | [selector: RegExp, value: (matched: RegExpMatchArray) => Awaitable<Arrayable<UnionString | _Selector>>, autocomplete?: Arrayable<string>] | [selector: string, value: Arrayable<UnionString | _Selector>] | {
|
|
137
|
-
selector: RegExp;
|
|
138
|
-
value: (matched: RegExpMatchArray) => Awaitable<Arrayable<UnionString | _Selector>>;
|
|
139
|
-
autocomplete?: Arrayable<string>;
|
|
140
|
-
} | {
|
|
141
|
-
selector: string;
|
|
142
|
-
value: Arrayable<UnionString | _Selector>;
|
|
143
|
-
};
|
|
368
|
+
type Preflight = string | PreflightFn;
|
|
144
369
|
|
|
145
|
-
|
|
146
|
-
shortcut: RegExp;
|
|
147
|
-
value: (matched: RegExpMatchArray) => Awaitable<Arrayable<_StyleItem>>;
|
|
148
|
-
autocomplete?: Arrayable<string>;
|
|
149
|
-
} | [shortcut: string, value: Arrayable<_StyleItem>] | {
|
|
150
|
-
shortcut: string;
|
|
151
|
-
value: Arrayable<_StyleItem>;
|
|
152
|
-
};
|
|
153
|
-
|
|
154
|
-
interface VariableAutocomplete<_CSSProperty extends string = string> {
|
|
155
|
-
/**
|
|
156
|
-
* Specify the properties that the variable can be used as a value of.
|
|
157
|
-
*
|
|
158
|
-
* @default ['*']
|
|
159
|
-
*/
|
|
160
|
-
asValueOf?: Arrayable<UnionString | '*' | _CSSProperty>;
|
|
161
|
-
/**
|
|
162
|
-
* Whether to add the variable as a CSS property.
|
|
163
|
-
*
|
|
164
|
-
* @default true
|
|
165
|
-
*/
|
|
166
|
-
asProperty?: boolean;
|
|
167
|
-
}
|
|
168
|
-
type VariableConfig<_CSSProperty extends string = string> = string | [name: string, value?: string, autocomplete?: VariableAutocomplete<_CSSProperty>] | {
|
|
169
|
-
name: string;
|
|
170
|
-
value?: string;
|
|
171
|
-
autocomplete?: VariableAutocomplete<_CSSProperty>;
|
|
172
|
-
};
|
|
173
|
-
|
|
174
|
-
interface EngineConfig<_Plugins extends EnginePlugin[] = EnginePlugin[], _Selector extends string = string, _CSSProperty extends string = string, _Properties = Properties$1, _StyleDefinition = StyleDefinition$1, _StyleItem = StyleItem$1> {
|
|
370
|
+
interface EngineConfig {
|
|
175
371
|
/**
|
|
176
372
|
* Register plugins to extend PikaCSS functionality.
|
|
177
373
|
*
|
|
@@ -185,7 +381,7 @@ interface EngineConfig<_Plugins extends EnginePlugin[] = EnginePlugin[], _Select
|
|
|
185
381
|
* }
|
|
186
382
|
* ```
|
|
187
383
|
*/
|
|
188
|
-
plugins?: [
|
|
384
|
+
plugins?: EnginePlugin[];
|
|
189
385
|
/**
|
|
190
386
|
* Set the prefix for generated atomic style id.
|
|
191
387
|
*
|
|
@@ -229,135 +425,7 @@ interface EngineConfig<_Plugins extends EnginePlugin[] = EnginePlugin[], _Select
|
|
|
229
425
|
* }
|
|
230
426
|
* ```
|
|
231
427
|
*/
|
|
232
|
-
preflights?:
|
|
233
|
-
/**
|
|
234
|
-
* Configure autocomplete functionality, including suggestions for selectors,
|
|
235
|
-
* style item strings, extra properties, etc.
|
|
236
|
-
*
|
|
237
|
-
* @example
|
|
238
|
-
* ```ts
|
|
239
|
-
* {
|
|
240
|
-
* autocomplete: {
|
|
241
|
-
* selectors: ['hover', 'focus'],
|
|
242
|
-
* styleItemStrings: ['flex-center'],
|
|
243
|
-
* extraProperties: ['customProp'],
|
|
244
|
-
* properties: [['color', 'string']]
|
|
245
|
-
* }
|
|
246
|
-
* }
|
|
247
|
-
* ```
|
|
248
|
-
*/
|
|
249
|
-
autocomplete?: AutocompleteConfig;
|
|
250
|
-
/**
|
|
251
|
-
* Configure !important usage.
|
|
252
|
-
*
|
|
253
|
-
* @default { default: false }
|
|
254
|
-
* @example
|
|
255
|
-
* ```ts
|
|
256
|
-
* {
|
|
257
|
-
* important: {
|
|
258
|
-
* default: true // All styles will be marked as !important
|
|
259
|
-
* }
|
|
260
|
-
* }
|
|
261
|
-
* ```
|
|
262
|
-
*/
|
|
263
|
-
important?: ImportantConfig;
|
|
264
|
-
/**
|
|
265
|
-
* Set the prefix for CSS variables.
|
|
266
|
-
*
|
|
267
|
-
* @example
|
|
268
|
-
* ```ts
|
|
269
|
-
* {
|
|
270
|
-
* variablesPrefix: 'theme',
|
|
271
|
-
* variables: [['color', 'blue']] // Generates: --theme-color: blue
|
|
272
|
-
* }
|
|
273
|
-
* ```
|
|
274
|
-
*/
|
|
275
|
-
variablesPrefix?: string;
|
|
276
|
-
/**
|
|
277
|
-
* Define CSS variables with support for static values and autocomplete configuration.
|
|
278
|
-
*
|
|
279
|
-
* @default []
|
|
280
|
-
* @example
|
|
281
|
-
* ```ts
|
|
282
|
-
* {
|
|
283
|
-
* variables: [
|
|
284
|
-
* // Basic usage
|
|
285
|
-
* ['primary', '#ff0000'],
|
|
286
|
-
* // With autocomplete configuration
|
|
287
|
-
* ['accent', '#00ff00', {
|
|
288
|
-
* asValueOf: ['color', 'background-color'],
|
|
289
|
-
* asProperty: true
|
|
290
|
-
* }]
|
|
291
|
-
* ]
|
|
292
|
-
* }
|
|
293
|
-
* ```
|
|
294
|
-
*/
|
|
295
|
-
variables?: VariableConfig<_CSSProperty>[];
|
|
296
|
-
/**
|
|
297
|
-
* Define CSS @keyframes animations with support for frame definitions
|
|
298
|
-
* and autocomplete suggestions.
|
|
299
|
-
*
|
|
300
|
-
* @default []
|
|
301
|
-
* @example
|
|
302
|
-
* ```ts
|
|
303
|
-
* {
|
|
304
|
-
* keyframes: [
|
|
305
|
-
* // Basic animation
|
|
306
|
-
* ['fade', {
|
|
307
|
-
* from: { opacity: 0 },
|
|
308
|
-
* to: { opacity: 1 }
|
|
309
|
-
* }],
|
|
310
|
-
* // With autocomplete suggestions
|
|
311
|
-
* ['slide', {
|
|
312
|
-
* from: { transform: 'translateX(-100%)' },
|
|
313
|
-
* to: { transform: 'translateX(0)' }
|
|
314
|
-
* }, ['slide 0.3s ease']]
|
|
315
|
-
* ]
|
|
316
|
-
* }
|
|
317
|
-
* ```
|
|
318
|
-
*/
|
|
319
|
-
keyframes?: KeyframesConfig<_Properties>[];
|
|
320
|
-
/**
|
|
321
|
-
* Define selector transformation rules with support for static and dynamic rules.
|
|
322
|
-
*
|
|
323
|
-
* @default []
|
|
324
|
-
* @example
|
|
325
|
-
* ```ts
|
|
326
|
-
* {
|
|
327
|
-
* selectors: [
|
|
328
|
-
* // Static selector
|
|
329
|
-
* ['hover', '$:hover'],
|
|
330
|
-
* // Dynamic selector
|
|
331
|
-
* [/^screen-(\d+)$/, m => `@media (min-width: ${m[1]}px)`,
|
|
332
|
-
* ['screen-768', 'screen-1024']], // Autocomplete suggestions
|
|
333
|
-
* ]
|
|
334
|
-
* }
|
|
335
|
-
* ```
|
|
336
|
-
*/
|
|
337
|
-
selectors?: SelectorConfig<_Selector>[];
|
|
338
|
-
/**
|
|
339
|
-
* Define style shortcuts for reusable style combinations.
|
|
340
|
-
*
|
|
341
|
-
* @default []
|
|
342
|
-
* @example
|
|
343
|
-
* ```ts
|
|
344
|
-
* {
|
|
345
|
-
* shortcuts: [
|
|
346
|
-
* // Static shortcut
|
|
347
|
-
* ['flex-center', {
|
|
348
|
-
* display: 'flex',
|
|
349
|
-
* alignItems: 'center',
|
|
350
|
-
* justifyContent: 'center'
|
|
351
|
-
* }],
|
|
352
|
-
* // Dynamic shortcut
|
|
353
|
-
* [/^m-(\d+)$/, m => ({ margin: `${m[1]}px` }),
|
|
354
|
-
* ['m-4', 'm-8']] // Autocomplete suggestions
|
|
355
|
-
* ]
|
|
356
|
-
* }
|
|
357
|
-
* ```
|
|
358
|
-
*/
|
|
359
|
-
shortcuts?: ShortcutConfig<_StyleItem>[];
|
|
360
|
-
[key: string]: any;
|
|
428
|
+
preflights?: Preflight[];
|
|
361
429
|
}
|
|
362
430
|
interface ResolvedEngineConfig {
|
|
363
431
|
rawConfig: EngineConfig;
|
|
@@ -368,41 +436,35 @@ interface ResolvedEngineConfig {
|
|
|
368
436
|
autocomplete: ResolvedAutocompleteConfig;
|
|
369
437
|
}
|
|
370
438
|
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
439
|
+
type ExtractFn = (styleDefinition: StyleDefinition$1) => Promise<ExtractedAtomicStyleContent[]>;
|
|
440
|
+
|
|
441
|
+
declare function defineEngineConfig(config: EngineConfig): EngineConfig;
|
|
442
|
+
declare function createEngine(config?: EngineConfig): Promise<Engine>;
|
|
443
|
+
declare class Engine {
|
|
444
|
+
config: ResolvedEngineConfig;
|
|
445
|
+
extract: ExtractFn;
|
|
446
|
+
store: {
|
|
447
|
+
atomicStyleIds: Map<string, string>;
|
|
448
|
+
atomicStyles: Map<string, AtomicStyle>;
|
|
449
|
+
};
|
|
450
|
+
constructor(config: ResolvedEngineConfig);
|
|
451
|
+
notifyPreflightUpdated(): void;
|
|
452
|
+
notifyAtomicStyleAdded(atomicStyle: AtomicStyle): void;
|
|
453
|
+
notifyAutocompleteConfigUpdated(): void;
|
|
454
|
+
appendAutocompleteSelectors(...selectors: string[]): void;
|
|
455
|
+
appendAutocompleteStyleItemStrings(...styleItemStrings: string[]): void;
|
|
456
|
+
appendAutocompleteExtraProperties(...properties: string[]): void;
|
|
457
|
+
appendAutocompleteExtraCssProperties(...properties: string[]): void;
|
|
458
|
+
appendAutocompletePropertyValues(property: string, ...tsTypes: string[]): void;
|
|
459
|
+
appendAutocompleteCssPropertyValues(property: string, ...values: (string | number)[]): void;
|
|
460
|
+
addPreflight(preflight: Preflight): void;
|
|
461
|
+
use(...itemList: StyleItem$1[]): Promise<string[]>;
|
|
462
|
+
renderPreflights(isFormatted: boolean): string;
|
|
463
|
+
renderAtomicStyles(isFormatted: boolean, options?: {
|
|
464
|
+
atomicStyleIds?: string[];
|
|
465
|
+
isPreview?: boolean;
|
|
466
|
+
}): string;
|
|
391
467
|
}
|
|
392
|
-
type CSSProperty = keyof CSSProperties;
|
|
393
|
-
type MakePropertyValue<T> = T | [value: T, fallback: T[]] | null | undefined;
|
|
394
|
-
type Properties<Autocomplete_ extends Autocomplete = EmptyAutocomplete> = {
|
|
395
|
-
[Key in keyof CSSProperties | Autocomplete_['ExtraCssProperty'] | Autocomplete_['ExtraProperty']]?: Key extends Autocomplete_['ExtraProperty'] ? GetValue<Autocomplete_['PropertiesValue'], Key> : MakePropertyValue<Exclude<UnionString | UnionNumber | GetValue<CSSProperties, Key> | GetValue<Autocomplete_['CssPropertiesValue'], ToKebab<Key>> | GetValue<Autocomplete_['CssPropertiesValue'], FromKebab<Key>> | GetValue<Autocomplete_['CssPropertiesValue'], '*'>, undefined | null>>;
|
|
396
|
-
};
|
|
397
|
-
type CSSPseudos = `${'$'}${CSS.Pseudos}`;
|
|
398
|
-
type CSSBlockAtRules = Exclude<CSS.AtRules, '@charset' | 'import' | '@namespace'>;
|
|
399
|
-
type CSSSelectors = CSSBlockAtRules | CSSPseudos;
|
|
400
|
-
type WrapWithSelector<Autocomplete_ extends Autocomplete, T> = {
|
|
401
|
-
[S in UnionString | Autocomplete_['Selector'] | CSSSelectors]?: T | StyleItem<Autocomplete_>[];
|
|
402
|
-
};
|
|
403
|
-
type MakeStyleDefinition<Autocomplete_ extends Autocomplete, MaxDepth extends number, Tuple extends any[] = []> = Tuple['length'] extends MaxDepth ? Tuple[number] : Tuple['length'] extends 0 ? MakeStyleDefinition<Autocomplete_, MaxDepth, [Properties<Autocomplete_>]> : MakeStyleDefinition<Autocomplete_, MaxDepth, [...Tuple, WrapWithSelector<Autocomplete_, [0, ...Tuple][Tuple['length']]>]>;
|
|
404
|
-
type StyleDefinition<Autocomplete_ extends Autocomplete = EmptyAutocomplete> = MakeStyleDefinition<Autocomplete_, 5>;
|
|
405
|
-
type StyleItem<Autocomplete_ extends Autocomplete = EmptyAutocomplete> = UnionString | Autocomplete_['StyleItemString'] | StyleDefinition<Autocomplete_>;
|
|
406
468
|
|
|
407
469
|
declare function setWarnFn(fn: (...args: any[]) => void): void;
|
|
408
470
|
declare function warn(...args: any[]): void;
|
|
@@ -414,9 +476,24 @@ declare function appendAutocompletePropertyValues(config: Pick<ResolvedEngineCon
|
|
|
414
476
|
declare function appendAutocompleteCssPropertyValues(config: Pick<ResolvedEngineConfig, 'autocomplete'>, property: string, ...values: (string | number)[]): void;
|
|
415
477
|
declare function renderCSSStyleBlocks(blocks: CSSStyleBlocks, isFormatted: boolean, depth?: number): string;
|
|
416
478
|
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
479
|
+
interface CSSVariables {
|
|
480
|
+
[K: (`--${string}` & {})]: UnionString | UnionNumber;
|
|
481
|
+
}
|
|
482
|
+
interface CSSProperties extends CSS.Properties, CSS.PropertiesHyphen, CSSVariables {
|
|
483
|
+
}
|
|
484
|
+
type CSSProperty = keyof CSSProperties;
|
|
485
|
+
type MakePropertyValue<T> = T | [value: T, fallback: T[]] | Nullish;
|
|
486
|
+
type Properties = {
|
|
487
|
+
[Key in keyof CSSProperties | ResolvedAutocomplete['ExtraCssProperty'] | ResolvedAutocomplete['ExtraProperty']]?: Key extends ResolvedAutocomplete['ExtraProperty'] ? GetValue<ResolvedAutocomplete['PropertiesValue'], Key> : MakePropertyValue<Exclude<UnionString | UnionNumber | GetValue<CSSProperties, Key> | GetValue<ResolvedAutocomplete['CssPropertiesValue'], ToKebab<Key>> | GetValue<ResolvedAutocomplete['CssPropertiesValue'], FromKebab<Key>> | GetValue<ResolvedAutocomplete['CssPropertiesValue'], '*'>, Nullish>>;
|
|
488
|
+
};
|
|
489
|
+
type CSSPseudos = `${'$'}${CSS.Pseudos}`;
|
|
490
|
+
type CSSBlockAtRules = Exclude<CSS.AtRules, '@charset' | 'import' | '@namespace'>;
|
|
491
|
+
type CSSSelectors = CSSBlockAtRules | CSSPseudos;
|
|
492
|
+
type WrapWithSelector<T> = {
|
|
493
|
+
[S in UnionString | ResolvedAutocomplete['Selector'] | CSSSelectors]?: T | StyleItem[];
|
|
494
|
+
};
|
|
495
|
+
type MakeStyleDefinition<MaxDepth extends number, Tuple extends any[] = []> = Tuple['length'] extends MaxDepth ? Tuple[number] : Tuple['length'] extends 0 ? MakeStyleDefinition<MaxDepth, [Properties]> : MakeStyleDefinition<MaxDepth, [...Tuple, WrapWithSelector<[0, ...Tuple][Tuple['length']]>]>;
|
|
496
|
+
type StyleDefinition = MakeStyleDefinition<5>;
|
|
497
|
+
type StyleItem = UnionString | ResolvedAutocomplete['StyleItemString'] | StyleDefinition;
|
|
421
498
|
|
|
422
|
-
export { type Arrayable, type
|
|
499
|
+
export { type Arrayable, type Awaitable, type CSSProperty, type CSSSelectors, type CSSStyleBlockBody, type CSSStyleBlocks, type DefineAutocomplete, Engine, type EngineConfig, type EnginePlugin, type FromKebab, type GetValue, type IsEqual, type IsNever, type Nullish, type PikaAugment, type Properties, type ResolveFrom, type Simplify, type StyleDefinition, type StyleItem, type ToKebab, type UnionNumber, type UnionString, type UnionToIntersection, appendAutocompleteCssPropertyValues, appendAutocompleteExtraCssProperties, appendAutocompleteExtraProperties, appendAutocompletePropertyValues, appendAutocompleteSelectors, appendAutocompleteStyleItemStrings, createEngine, defineEngineConfig, defineEnginePlugin, renderCSSStyleBlocks, setWarnFn, warn };
|