@pikacss/core 0.0.37 → 0.0.39
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 +200 -0
- package/dist/index.cjs +33 -39
- package/dist/index.d.cts +188 -166
- package/dist/index.d.mts +188 -166
- package/dist/index.mjs +33 -40
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,201 @@
|
|
|
1
1
|
# @pikacss/core
|
|
2
|
+
|
|
3
|
+
The core Atomic CSS-in-JS engine of PikaCSS.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @pikacss/core
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
**pika.config.ts**:
|
|
14
|
+
```typescript
|
|
15
|
+
import { defineEngineConfig } from '@pikacss/core'
|
|
16
|
+
|
|
17
|
+
export default defineEngineConfig({
|
|
18
|
+
// Your configuration
|
|
19
|
+
})
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
**Your code**:
|
|
23
|
+
```typescript
|
|
24
|
+
import { createEngine, defineEngineConfig } from '@pikacss/core'
|
|
25
|
+
|
|
26
|
+
const config = defineEngineConfig({
|
|
27
|
+
// Engine configuration
|
|
28
|
+
prefix: 'pk-',
|
|
29
|
+
defaultSelector: '.%',
|
|
30
|
+
plugins: []
|
|
31
|
+
})
|
|
32
|
+
|
|
33
|
+
const engine = createEngine(config)
|
|
34
|
+
await engine.setup()
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Features
|
|
38
|
+
|
|
39
|
+
- ⚡ High-performance Atomic CSS-in-JS engine
|
|
40
|
+
- 🎯 Type-safe with full TypeScript support
|
|
41
|
+
- 🔌 Extensible plugin system
|
|
42
|
+
- 🎨 Built-in support for shortcuts, selectors, variables, keyframes
|
|
43
|
+
- 📦 Works at build-time, zero runtime overhead
|
|
44
|
+
- 🔧 Fully configurable
|
|
45
|
+
- 🌐 Framework-agnostic core
|
|
46
|
+
|
|
47
|
+
## Usage for Integration Developers
|
|
48
|
+
|
|
49
|
+
### Creating an Engine
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
import { createEngine, defineEngineConfig } from '@pikacss/core'
|
|
53
|
+
|
|
54
|
+
const config = defineEngineConfig({
|
|
55
|
+
// Prefix for generated atomic CSS class names
|
|
56
|
+
prefix: 'pk-',
|
|
57
|
+
|
|
58
|
+
// Default selector format (% will be replaced with atomic ID)
|
|
59
|
+
defaultSelector: '.%',
|
|
60
|
+
|
|
61
|
+
// Plugins to extend functionality
|
|
62
|
+
plugins: [],
|
|
63
|
+
|
|
64
|
+
// Global CSS preflights
|
|
65
|
+
preflights: [],
|
|
66
|
+
})
|
|
67
|
+
|
|
68
|
+
const engine = createEngine(config)
|
|
69
|
+
await engine.setup()
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Engine Methods
|
|
73
|
+
|
|
74
|
+
The engine provides methods for managing CSS generation:
|
|
75
|
+
|
|
76
|
+
```typescript
|
|
77
|
+
// Add global CSS
|
|
78
|
+
engine.addPreflight('* { box-sizing: border-box; }')
|
|
79
|
+
|
|
80
|
+
// Access sub-systems
|
|
81
|
+
engine.variables // CSS variables management
|
|
82
|
+
engine.keyframes // CSS keyframes management
|
|
83
|
+
engine.selectors // CSS selectors management
|
|
84
|
+
engine.shortcuts // CSS shortcuts management
|
|
85
|
+
engine.important // Important rules management
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Configuration
|
|
89
|
+
|
|
90
|
+
Use `defineEngineConfig` for type-safe configuration:
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
import { defineEngineConfig } from '@pikacss/core'
|
|
94
|
+
|
|
95
|
+
export default defineEngineConfig({
|
|
96
|
+
// Prefix for atomic class IDs
|
|
97
|
+
prefix: 'pk-',
|
|
98
|
+
|
|
99
|
+
// Default selector format (% = atomic ID)
|
|
100
|
+
defaultSelector: '.%',
|
|
101
|
+
|
|
102
|
+
// Global CSS preflights
|
|
103
|
+
preflights: [
|
|
104
|
+
':root { --primary: #3b82f6; }',
|
|
105
|
+
// Or function:
|
|
106
|
+
({ engine, isFormatted }) => '/* Generated CSS */'
|
|
107
|
+
],
|
|
108
|
+
|
|
109
|
+
// Shortcuts configuration
|
|
110
|
+
shortcuts: {
|
|
111
|
+
shortcuts: [
|
|
112
|
+
['flex-center', {
|
|
113
|
+
display: 'flex',
|
|
114
|
+
alignItems: 'center',
|
|
115
|
+
justifyContent: 'center'
|
|
116
|
+
}],
|
|
117
|
+
]
|
|
118
|
+
},
|
|
119
|
+
|
|
120
|
+
// Plugins to extend functionality
|
|
121
|
+
plugins: []
|
|
122
|
+
})
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## API
|
|
126
|
+
|
|
127
|
+
### Main Exports
|
|
128
|
+
|
|
129
|
+
```typescript
|
|
130
|
+
// Engine creation
|
|
131
|
+
export function createEngine(config: EngineConfig): Engine
|
|
132
|
+
|
|
133
|
+
// Type-safe config helpers
|
|
134
|
+
export function defineEngineConfig(config: EngineConfig): EngineConfig
|
|
135
|
+
export function defineEnginePlugin(plugin: EnginePlugin): EnginePlugin
|
|
136
|
+
export function defineStyleDefinition(def: StyleDefinition): StyleDefinition
|
|
137
|
+
export function definePreflight(preflight: Preflight): Preflight
|
|
138
|
+
export function defineKeyframes(keyframes: Keyframes): Keyframes
|
|
139
|
+
export function defineSelector(selector: Selector): Selector
|
|
140
|
+
export function defineShortcut(shortcut: Shortcut): Shortcut
|
|
141
|
+
export function defineVariables(variables: VariablesDefinition): VariablesDefinition
|
|
142
|
+
|
|
143
|
+
// Utilities
|
|
144
|
+
export { log, createLogger } from './internal/utils'
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### Engine Instance
|
|
148
|
+
|
|
149
|
+
The `Engine` instance provides methods for managing the CSS generation:
|
|
150
|
+
|
|
151
|
+
- `engine.setup()` - Initialize the engine with plugins
|
|
152
|
+
- `engine.addPreflight(css)` - Add global CSS
|
|
153
|
+
- `engine.variables` - Manage CSS variables
|
|
154
|
+
- `engine.keyframes` - Manage CSS keyframes
|
|
155
|
+
- `engine.selectors` - Manage CSS selectors
|
|
156
|
+
- `engine.shortcuts` - Manage CSS shortcuts
|
|
157
|
+
- `engine.important` - Manage important rules
|
|
158
|
+
|
|
159
|
+
## Plugin Development
|
|
160
|
+
|
|
161
|
+
Create custom plugins to extend PikaCSS:
|
|
162
|
+
|
|
163
|
+
```typescript
|
|
164
|
+
import type { Plugin } from '@pikacss/core'
|
|
165
|
+
|
|
166
|
+
export function myPlugin(): Plugin {
|
|
167
|
+
return {
|
|
168
|
+
name: 'my-plugin',
|
|
169
|
+
|
|
170
|
+
setup(api) {
|
|
171
|
+
// Add preflights
|
|
172
|
+
api.addPreflight({
|
|
173
|
+
css: '/* your global CSS */'
|
|
174
|
+
})
|
|
175
|
+
|
|
176
|
+
// Add rules
|
|
177
|
+
api.addRule({
|
|
178
|
+
/* rule configuration */
|
|
179
|
+
})
|
|
180
|
+
|
|
181
|
+
// Add shortcuts
|
|
182
|
+
api.addShortcut({
|
|
183
|
+
/* shortcut configuration */
|
|
184
|
+
})
|
|
185
|
+
|
|
186
|
+
// Add variants
|
|
187
|
+
api.addVariant({
|
|
188
|
+
/* variant configuration */
|
|
189
|
+
})
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
## Documentation
|
|
196
|
+
|
|
197
|
+
For complete documentation, visit: [PikaCSS Documentation](https://pikacss.github.io/pikacss/)
|
|
198
|
+
|
|
199
|
+
## License
|
|
200
|
+
|
|
201
|
+
MIT © DevilTea
|
package/dist/index.cjs
CHANGED
|
@@ -119,14 +119,6 @@ function renderCSSStyleBlocks(blocks, isFormatted, depth = 0) {
|
|
|
119
119
|
});
|
|
120
120
|
return lines.join(lineEnd);
|
|
121
121
|
}
|
|
122
|
-
/* c8 ignore start */
|
|
123
|
-
function defineEngineConfig(config) {
|
|
124
|
-
return config;
|
|
125
|
-
}
|
|
126
|
-
function definePreflight(preflight) {
|
|
127
|
-
return preflight;
|
|
128
|
-
}
|
|
129
|
-
/* c8 ignore end */
|
|
130
122
|
|
|
131
123
|
//#endregion
|
|
132
124
|
//#region src/internal/extractor.ts
|
|
@@ -356,21 +348,14 @@ function createResolveConfigFn({ pruneUnused: defaultPruneUnused = true } = {})
|
|
|
356
348
|
};
|
|
357
349
|
};
|
|
358
350
|
}
|
|
359
|
-
/* c8 ignore start */
|
|
360
|
-
function defineKeyframes(keyframes$1) {
|
|
361
|
-
return keyframes$1;
|
|
362
|
-
}
|
|
363
|
-
/* c8 ignore end */
|
|
364
351
|
|
|
365
352
|
//#endregion
|
|
366
353
|
//#region src/internal/resolver.ts
|
|
367
354
|
var AbstractResolver = class {
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
this.onResolved = () => {};
|
|
373
|
-
}
|
|
355
|
+
_resolvedResultsMap = /* @__PURE__ */ new Map();
|
|
356
|
+
staticRulesMap = /* @__PURE__ */ new Map();
|
|
357
|
+
dynamicRulesMap = /* @__PURE__ */ new Map();
|
|
358
|
+
onResolved = () => {};
|
|
374
359
|
get staticRules() {
|
|
375
360
|
return [...this.staticRulesMap.values()];
|
|
376
361
|
}
|
|
@@ -553,11 +538,6 @@ function resolveSelectorConfig(config) {
|
|
|
553
538
|
};
|
|
554
539
|
}
|
|
555
540
|
}
|
|
556
|
-
/* c8 ignore start */
|
|
557
|
-
function defineSelector(selector) {
|
|
558
|
-
return selector;
|
|
559
|
-
}
|
|
560
|
-
/* c8 ignore end */
|
|
561
541
|
|
|
562
542
|
//#endregion
|
|
563
543
|
//#region src/internal/plugins/shortcuts.ts
|
|
@@ -680,11 +660,6 @@ function resolveShortcutConfig(config) {
|
|
|
680
660
|
};
|
|
681
661
|
}
|
|
682
662
|
}
|
|
683
|
-
/* c8 ignore start */
|
|
684
|
-
function defineShortcut(shortcut) {
|
|
685
|
-
return shortcut;
|
|
686
|
-
}
|
|
687
|
-
/* c8 ignore end */
|
|
688
663
|
|
|
689
664
|
//#endregion
|
|
690
665
|
//#region src/internal/plugins/variables.ts
|
|
@@ -774,11 +749,6 @@ function normalizeVariableName(name) {
|
|
|
774
749
|
if (name.startsWith("--")) return name;
|
|
775
750
|
return `--${name}`;
|
|
776
751
|
}
|
|
777
|
-
/* c8 ignore start */
|
|
778
|
-
function defineVariables(variables$1) {
|
|
779
|
-
return variables$1;
|
|
780
|
-
}
|
|
781
|
-
/* c8 ignore end */
|
|
782
752
|
|
|
783
753
|
//#endregion
|
|
784
754
|
//#region src/internal/engine.ts
|
|
@@ -807,12 +777,14 @@ async function createEngine(config = {}) {
|
|
|
807
777
|
return engine;
|
|
808
778
|
}
|
|
809
779
|
var Engine = class {
|
|
780
|
+
config;
|
|
781
|
+
pluginHooks = hooks;
|
|
782
|
+
extract;
|
|
783
|
+
store = {
|
|
784
|
+
atomicStyleIds: /* @__PURE__ */ new Map(),
|
|
785
|
+
atomicStyles: /* @__PURE__ */ new Map()
|
|
786
|
+
};
|
|
810
787
|
constructor(config) {
|
|
811
|
-
this.pluginHooks = hooks;
|
|
812
|
-
this.store = {
|
|
813
|
-
atomicStyleIds: /* @__PURE__ */ new Map(),
|
|
814
|
-
atomicStyles: /* @__PURE__ */ new Map()
|
|
815
|
-
};
|
|
816
788
|
this.config = config;
|
|
817
789
|
this.extract = createExtractFn({
|
|
818
790
|
defaultSelector: this.config.defaultSelector,
|
|
@@ -1057,6 +1029,27 @@ async function renderPreflightDefinition(payload) {
|
|
|
1057
1029
|
|
|
1058
1030
|
//#endregion
|
|
1059
1031
|
//#region src/index.ts
|
|
1032
|
+
function defineEngineConfig(config) {
|
|
1033
|
+
return config;
|
|
1034
|
+
}
|
|
1035
|
+
function defineStyleDefinition(styleDefinition) {
|
|
1036
|
+
return styleDefinition;
|
|
1037
|
+
}
|
|
1038
|
+
function definePreflight(preflight) {
|
|
1039
|
+
return preflight;
|
|
1040
|
+
}
|
|
1041
|
+
function defineKeyframes(keyframes$1) {
|
|
1042
|
+
return keyframes$1;
|
|
1043
|
+
}
|
|
1044
|
+
function defineSelector(selector) {
|
|
1045
|
+
return selector;
|
|
1046
|
+
}
|
|
1047
|
+
function defineShortcut(shortcut) {
|
|
1048
|
+
return shortcut;
|
|
1049
|
+
}
|
|
1050
|
+
function defineVariables(variables$1) {
|
|
1051
|
+
return variables$1;
|
|
1052
|
+
}
|
|
1060
1053
|
/* c8 ignore end */
|
|
1061
1054
|
|
|
1062
1055
|
//#endregion
|
|
@@ -1074,6 +1067,7 @@ exports.defineKeyframes = defineKeyframes;
|
|
|
1074
1067
|
exports.definePreflight = definePreflight;
|
|
1075
1068
|
exports.defineSelector = defineSelector;
|
|
1076
1069
|
exports.defineShortcut = defineShortcut;
|
|
1070
|
+
exports.defineStyleDefinition = defineStyleDefinition;
|
|
1077
1071
|
exports.defineVariables = defineVariables;
|
|
1078
1072
|
exports.log = log;
|
|
1079
1073
|
exports.renderCSSStyleBlocks = renderCSSStyleBlocks;
|