@linaria/atomic 4.1.5 → 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/dist/index.js +46 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +17 -0
- package/dist/index.mjs.map +1 -0
- package/dist/processors/css.js +372 -0
- package/dist/processors/css.js.map +1 -0
- package/dist/processors/css.mjs +344 -0
- package/dist/processors/css.mjs.map +1 -0
- package/dist/processors/styled.js +387 -0
- package/dist/processors/styled.js.map +1 -0
- package/dist/processors/styled.mjs +359 -0
- package/dist/processors/styled.mjs.map +1 -0
- package/package.json +33 -12
- package/processors/css.js +1 -1
- package/processors/styled.js +1 -1
- package/esm/CSSProperties.js +0 -2
- package/esm/CSSProperties.js.map +0 -1
- package/esm/css.js +0 -5
- package/esm/css.js.map +0 -1
- package/esm/index.js +0 -4
- package/esm/index.js.map +0 -1
- package/esm/processors/css.js +0 -39
- package/esm/processors/css.js.map +0 -1
- package/esm/processors/helpers/atomize.js +0 -100
- package/esm/processors/helpers/atomize.js.map +0 -1
- package/esm/processors/helpers/propertyPriority.js +0 -67
- package/esm/processors/helpers/propertyPriority.js.map +0 -1
- package/esm/processors/styled.js +0 -56
- package/esm/processors/styled.js.map +0 -1
- package/lib/CSSProperties.js +0 -2
- package/lib/CSSProperties.js.map +0 -1
- package/lib/css.js +0 -13
- package/lib/css.js.map +0 -1
- package/lib/index.js +0 -19
- package/lib/index.js.map +0 -1
- package/lib/processors/css.js +0 -55
- package/lib/processors/css.js.map +0 -1
- package/lib/processors/helpers/atomize.js +0 -116
- package/lib/processors/helpers/atomize.js.map +0 -1
- package/lib/processors/helpers/propertyPriority.js +0 -73
- package/lib/processors/helpers/propertyPriority.js.map +0 -1
- package/lib/processors/styled.js +0 -73
- package/lib/processors/styled.js.map +0 -1
|
@@ -0,0 +1,387 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
var __accessCheck = (obj, member, msg) => {
|
|
26
|
+
if (!member.has(obj))
|
|
27
|
+
throw TypeError("Cannot " + msg);
|
|
28
|
+
};
|
|
29
|
+
var __privateGet = (obj, member, getter) => {
|
|
30
|
+
__accessCheck(obj, member, "read from private field");
|
|
31
|
+
return getter ? getter.call(obj) : member.get(obj);
|
|
32
|
+
};
|
|
33
|
+
var __privateAdd = (obj, member, value) => {
|
|
34
|
+
if (member.has(obj))
|
|
35
|
+
throw TypeError("Cannot add the same private member more than once");
|
|
36
|
+
member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
37
|
+
};
|
|
38
|
+
var __privateSet = (obj, member, value, setter) => {
|
|
39
|
+
__accessCheck(obj, member, "write to private field");
|
|
40
|
+
setter ? setter.call(obj, value) : member.set(obj, value);
|
|
41
|
+
return value;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
// src/processors/styled.ts
|
|
45
|
+
var styled_exports = {};
|
|
46
|
+
__export(styled_exports, {
|
|
47
|
+
default: () => AtomicStyledProcessor
|
|
48
|
+
});
|
|
49
|
+
module.exports = __toCommonJS(styled_exports);
|
|
50
|
+
var import_logger = require("@linaria/logger");
|
|
51
|
+
var import_styled = __toESM(require("@linaria/react/processors/styled"));
|
|
52
|
+
var import_tags = require("@linaria/tags");
|
|
53
|
+
|
|
54
|
+
// src/processors/helpers/atomize.ts
|
|
55
|
+
var import_known_css_properties = require("known-css-properties");
|
|
56
|
+
var import_postcss = __toESM(require("postcss"));
|
|
57
|
+
var import_stylis = __toESM(require("stylis"));
|
|
58
|
+
var import_utils = require("@linaria/utils");
|
|
59
|
+
|
|
60
|
+
// src/processors/helpers/propertyPriority.ts
|
|
61
|
+
var shorthandProperties = {
|
|
62
|
+
animation: [
|
|
63
|
+
"animation-name",
|
|
64
|
+
"animation-duration",
|
|
65
|
+
"animation-timing-function",
|
|
66
|
+
"animation-delay",
|
|
67
|
+
"animation-iteration-count",
|
|
68
|
+
"animation-direction",
|
|
69
|
+
"animation-fill-mode",
|
|
70
|
+
"animation-play-state"
|
|
71
|
+
],
|
|
72
|
+
background: [
|
|
73
|
+
"background-attachment",
|
|
74
|
+
"background-clip",
|
|
75
|
+
"background-color",
|
|
76
|
+
"background-image",
|
|
77
|
+
"background-origin",
|
|
78
|
+
"background-position",
|
|
79
|
+
"background-repeat",
|
|
80
|
+
"background-size"
|
|
81
|
+
],
|
|
82
|
+
border: ["border-color", "border-style", "border-width"],
|
|
83
|
+
"border-block-end": [
|
|
84
|
+
"border-block-end-color",
|
|
85
|
+
"border-block-end-style",
|
|
86
|
+
"border-block-end-width"
|
|
87
|
+
],
|
|
88
|
+
"border-block-start": [
|
|
89
|
+
"border-block-start-color",
|
|
90
|
+
"border-block-start-style",
|
|
91
|
+
"border-block-start-width"
|
|
92
|
+
],
|
|
93
|
+
"border-bottom": [
|
|
94
|
+
"border-bottom-color",
|
|
95
|
+
"border-bottom-style",
|
|
96
|
+
"border-bottom-width"
|
|
97
|
+
],
|
|
98
|
+
"border-color": [
|
|
99
|
+
"border-bottom-color",
|
|
100
|
+
"border-left-color",
|
|
101
|
+
"border-right-color",
|
|
102
|
+
"border-top-color"
|
|
103
|
+
],
|
|
104
|
+
"border-image": [
|
|
105
|
+
"border-image-outset",
|
|
106
|
+
"border-image-repeat",
|
|
107
|
+
"border-image-slice",
|
|
108
|
+
"border-image-source",
|
|
109
|
+
"border-image-width"
|
|
110
|
+
],
|
|
111
|
+
"border-inline-end": [
|
|
112
|
+
"border-inline-end-color",
|
|
113
|
+
"border-inline-end-style",
|
|
114
|
+
"border-inline-end-width"
|
|
115
|
+
],
|
|
116
|
+
"border-inline-start": [
|
|
117
|
+
"border-inline-start-color",
|
|
118
|
+
"border-inline-start-style",
|
|
119
|
+
"border-inline-start-width"
|
|
120
|
+
],
|
|
121
|
+
"border-left": [
|
|
122
|
+
"border-left-color",
|
|
123
|
+
"border-left-style",
|
|
124
|
+
"border-left-width"
|
|
125
|
+
],
|
|
126
|
+
"border-radius": [
|
|
127
|
+
"border-top-left-radius",
|
|
128
|
+
"border-top-right-radius",
|
|
129
|
+
"border-bottom-right-radius",
|
|
130
|
+
"border-bottom-left-radius"
|
|
131
|
+
],
|
|
132
|
+
"border-right": [
|
|
133
|
+
"border-right-color",
|
|
134
|
+
"border-right-style",
|
|
135
|
+
"border-right-width"
|
|
136
|
+
],
|
|
137
|
+
"border-style": [
|
|
138
|
+
"border-bottom-style",
|
|
139
|
+
"border-left-style",
|
|
140
|
+
"border-right-style",
|
|
141
|
+
"border-top-style"
|
|
142
|
+
],
|
|
143
|
+
"border-top": ["border-top-color", "border-top-style", "border-top-width"],
|
|
144
|
+
"border-width": [
|
|
145
|
+
"border-bottom-width",
|
|
146
|
+
"border-left-width",
|
|
147
|
+
"border-right-width",
|
|
148
|
+
"border-top-width"
|
|
149
|
+
],
|
|
150
|
+
"column-rule": [
|
|
151
|
+
"column-rule-width",
|
|
152
|
+
"column-rule-style",
|
|
153
|
+
"column-rule-color"
|
|
154
|
+
],
|
|
155
|
+
columns: ["column-count", "column-width"],
|
|
156
|
+
flex: ["flex-grow", "flex-shrink", "flex-basis"],
|
|
157
|
+
"flex-flow": ["flex-direction", "flex-wrap"],
|
|
158
|
+
font: [
|
|
159
|
+
"font-family",
|
|
160
|
+
"font-size",
|
|
161
|
+
"font-stretch",
|
|
162
|
+
"font-style",
|
|
163
|
+
"font-variant",
|
|
164
|
+
"font-weight",
|
|
165
|
+
"line-height"
|
|
166
|
+
],
|
|
167
|
+
gap: ["row-gap", "column-gap"],
|
|
168
|
+
grid: [
|
|
169
|
+
"grid-auto-columns",
|
|
170
|
+
"grid-auto-flow",
|
|
171
|
+
"grid-auto-rows",
|
|
172
|
+
"grid-template-areas",
|
|
173
|
+
"grid-template-columns",
|
|
174
|
+
"grid-template-rows"
|
|
175
|
+
],
|
|
176
|
+
"grid-area": [
|
|
177
|
+
"grid-row-start",
|
|
178
|
+
"grid-column-start",
|
|
179
|
+
"grid-row-end",
|
|
180
|
+
"grid-column-end"
|
|
181
|
+
],
|
|
182
|
+
"grid-column": ["grid-column-end", "grid-column-start"],
|
|
183
|
+
"grid-row": ["grid-row-end", "grid-row-start"],
|
|
184
|
+
"grid-template": [
|
|
185
|
+
"grid-template-areas",
|
|
186
|
+
"grid-template-columns",
|
|
187
|
+
"grid-template-rows"
|
|
188
|
+
],
|
|
189
|
+
"list-style": ["list-style-image", "list-style-position", "list-style-type"],
|
|
190
|
+
margin: ["margin-bottom", "margin-left", "margin-right", "margin-top"],
|
|
191
|
+
mask: [
|
|
192
|
+
"mask-clip",
|
|
193
|
+
"mask-composite",
|
|
194
|
+
"mask-image",
|
|
195
|
+
"mask-mode",
|
|
196
|
+
"mask-origin",
|
|
197
|
+
"mask-position",
|
|
198
|
+
"mask-repeat",
|
|
199
|
+
"mask-size"
|
|
200
|
+
],
|
|
201
|
+
offset: [
|
|
202
|
+
"offset-anchor",
|
|
203
|
+
"offset-distance",
|
|
204
|
+
"offset-path",
|
|
205
|
+
"offset-position",
|
|
206
|
+
"offset-rotate"
|
|
207
|
+
],
|
|
208
|
+
outline: ["outline-color", "outline-style", "outline-width"],
|
|
209
|
+
overflow: ["overflow-x", "overflow-y"],
|
|
210
|
+
padding: ["padding-bottom", "padding-left", "padding-right", "padding-top"],
|
|
211
|
+
"place-content": ["align-content", "justify-content"],
|
|
212
|
+
"place-items": ["align-items", "justify-items"],
|
|
213
|
+
"place-self": ["align-self", "justify-self"],
|
|
214
|
+
"scroll-margin": [
|
|
215
|
+
"scroll-margin-bottom",
|
|
216
|
+
"scroll-margin-left",
|
|
217
|
+
"scroll-margin-right",
|
|
218
|
+
"scroll-margin-top"
|
|
219
|
+
],
|
|
220
|
+
"scroll-padding": [
|
|
221
|
+
"scroll-padding-bottom",
|
|
222
|
+
"scroll-padding-left",
|
|
223
|
+
"scroll-padding-right",
|
|
224
|
+
"scroll-padding-top"
|
|
225
|
+
],
|
|
226
|
+
"text-decoration": [
|
|
227
|
+
"text-decoration-color",
|
|
228
|
+
"text-decoration-line",
|
|
229
|
+
"text-decoration-style",
|
|
230
|
+
"text-decoration-thickness"
|
|
231
|
+
],
|
|
232
|
+
"text-emphasis": ["text-emphasis-color", "text-emphasis-style"],
|
|
233
|
+
transition: [
|
|
234
|
+
"transition-delay",
|
|
235
|
+
"transition-duration",
|
|
236
|
+
"transition-property",
|
|
237
|
+
"transition-timing-function"
|
|
238
|
+
]
|
|
239
|
+
};
|
|
240
|
+
function getPropertyPriority(property) {
|
|
241
|
+
const longhands = Object.values(shorthandProperties).reduce(
|
|
242
|
+
(a, b) => [...a, ...b],
|
|
243
|
+
[]
|
|
244
|
+
);
|
|
245
|
+
return longhands.includes(property) ? 2 : 1;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
// src/processors/helpers/atomize.ts
|
|
249
|
+
var knownPropertiesMap = import_known_css_properties.all.reduce(
|
|
250
|
+
(acc, property, i) => {
|
|
251
|
+
acc[property] = i;
|
|
252
|
+
return acc;
|
|
253
|
+
},
|
|
254
|
+
{}
|
|
255
|
+
);
|
|
256
|
+
function hashProperty(property) {
|
|
257
|
+
const index = knownPropertiesMap[property];
|
|
258
|
+
if (index !== void 0) {
|
|
259
|
+
return index.toString(36);
|
|
260
|
+
}
|
|
261
|
+
return (0, import_utils.slugify)(property);
|
|
262
|
+
}
|
|
263
|
+
var parseCss = (cssText) => {
|
|
264
|
+
try {
|
|
265
|
+
return import_postcss.default.parse(cssText);
|
|
266
|
+
} catch (e) {
|
|
267
|
+
if (e instanceof Error) {
|
|
268
|
+
throw new Error(`Error parsing CSS: ${e.message}
|
|
269
|
+
CSS:
|
|
270
|
+
${cssText}`);
|
|
271
|
+
}
|
|
272
|
+
throw new Error(`Unknown error parsing CSS.
|
|
273
|
+
CSS:
|
|
274
|
+
${cssText}`);
|
|
275
|
+
}
|
|
276
|
+
};
|
|
277
|
+
function atomize(cssText, hasPriority = false) {
|
|
278
|
+
import_stylis.default.set({
|
|
279
|
+
prefix: false,
|
|
280
|
+
keyframe: false
|
|
281
|
+
});
|
|
282
|
+
const atomicRules = [];
|
|
283
|
+
const stylesheet = parseCss(cssText);
|
|
284
|
+
stylesheet.walkAtRules("keyframes", (atRule) => {
|
|
285
|
+
atRule.remove();
|
|
286
|
+
atomicRules.push({
|
|
287
|
+
property: atRule.name,
|
|
288
|
+
cssText: atRule.toString()
|
|
289
|
+
});
|
|
290
|
+
});
|
|
291
|
+
stylesheet.walkDecls((decl) => {
|
|
292
|
+
let thisParent = decl.parent;
|
|
293
|
+
const parents = [];
|
|
294
|
+
const atomicProperty = [decl.prop];
|
|
295
|
+
let hasAtRule = false;
|
|
296
|
+
while (thisParent && thisParent !== stylesheet) {
|
|
297
|
+
parents.unshift(thisParent);
|
|
298
|
+
if (thisParent.type === "atrule") {
|
|
299
|
+
hasAtRule = true;
|
|
300
|
+
atomicProperty.push(
|
|
301
|
+
thisParent.name,
|
|
302
|
+
thisParent.params
|
|
303
|
+
);
|
|
304
|
+
} else if (thisParent.type === "rule") {
|
|
305
|
+
atomicProperty.push(thisParent.selector);
|
|
306
|
+
}
|
|
307
|
+
thisParent = thisParent.parent;
|
|
308
|
+
}
|
|
309
|
+
const root = import_postcss.default.root();
|
|
310
|
+
let container = root;
|
|
311
|
+
parents.forEach((parent) => {
|
|
312
|
+
const newNode = parent.clone();
|
|
313
|
+
newNode.removeAll();
|
|
314
|
+
container.append(newNode);
|
|
315
|
+
container = newNode;
|
|
316
|
+
});
|
|
317
|
+
container.append(decl.clone());
|
|
318
|
+
const css = root.toString();
|
|
319
|
+
const propertySlug = hashProperty([...atomicProperty].join(";"));
|
|
320
|
+
const valueSlug = (0, import_utils.slugify)(decl.value);
|
|
321
|
+
const className = `atm_${propertySlug}_${valueSlug}`;
|
|
322
|
+
const propertyPriority = getPropertyPriority(decl.prop) + (hasAtRule ? 1 : 0) + (hasPriority ? 1 : 0);
|
|
323
|
+
const processedCss = (0, import_stylis.default)(`.${className}`.repeat(propertyPriority), css);
|
|
324
|
+
atomicRules.push({
|
|
325
|
+
property: atomicProperty.join(" "),
|
|
326
|
+
className,
|
|
327
|
+
cssText: processedCss
|
|
328
|
+
});
|
|
329
|
+
});
|
|
330
|
+
return atomicRules;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
// src/processors/styled.ts
|
|
334
|
+
var _classes;
|
|
335
|
+
var AtomicStyledProcessor = class extends import_styled.default {
|
|
336
|
+
constructor() {
|
|
337
|
+
super(...arguments);
|
|
338
|
+
__privateAdd(this, _classes, void 0);
|
|
339
|
+
}
|
|
340
|
+
get classes() {
|
|
341
|
+
if (__privateGet(this, _classes)) {
|
|
342
|
+
return __privateGet(this, _classes);
|
|
343
|
+
}
|
|
344
|
+
throw new Error(
|
|
345
|
+
"Styles are not extracted yet. Please call `extractRules` first."
|
|
346
|
+
);
|
|
347
|
+
}
|
|
348
|
+
extractRules(valueCache, cssText, loc) {
|
|
349
|
+
const rules = {};
|
|
350
|
+
const wrappedValue = typeof this.component === "string" ? null : valueCache.get(this.component.node.name);
|
|
351
|
+
const atomicRules = atomize(cssText, (0, import_tags.hasMeta)(wrappedValue));
|
|
352
|
+
atomicRules.forEach((rule) => {
|
|
353
|
+
rules[rule.cssText] = {
|
|
354
|
+
cssText: rule.cssText,
|
|
355
|
+
start: (loc == null ? void 0 : loc.start) ?? null,
|
|
356
|
+
className: this.className,
|
|
357
|
+
displayName: this.displayName,
|
|
358
|
+
atom: true
|
|
359
|
+
};
|
|
360
|
+
(0, import_logger.debug)(
|
|
361
|
+
"evaluator:template-processor:extracted-atomic-rule",
|
|
362
|
+
`
|
|
363
|
+
${rule.cssText}`
|
|
364
|
+
);
|
|
365
|
+
});
|
|
366
|
+
__privateSet(this, _classes, atomicRules.filter((rule) => !!rule.className).map((rule) => rule.className).join(" "));
|
|
367
|
+
return rules;
|
|
368
|
+
}
|
|
369
|
+
getProps() {
|
|
370
|
+
const props = super.getProps();
|
|
371
|
+
props.class = [this.classes, this.className].filter(Boolean).join(" ");
|
|
372
|
+
props.atomic = true;
|
|
373
|
+
return props;
|
|
374
|
+
}
|
|
375
|
+
getVariableId(source, unit, precedingCss) {
|
|
376
|
+
const id = this.getCustomVariableId(source, unit, precedingCss);
|
|
377
|
+
if (id) {
|
|
378
|
+
return id;
|
|
379
|
+
}
|
|
380
|
+
const context = this.getVariableContext(source, unit, precedingCss);
|
|
381
|
+
return context.valueSlug;
|
|
382
|
+
}
|
|
383
|
+
};
|
|
384
|
+
_classes = new WeakMap();
|
|
385
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
386
|
+
0 && (module.exports = {});
|
|
387
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/processors/styled.ts","../../src/processors/helpers/atomize.ts","../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport { debug } from '@linaria/logger';\nimport type { IProps } from '@linaria/react/processors/styled';\nimport StyledProcessor from '@linaria/react/processors/styled';\nimport { hasMeta } from '@linaria/tags';\nimport type { Rules, ValueCache } from '@linaria/tags';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicStyledProcessor extends StyledProcessor {\n #classes: string | undefined;\n\n private get classes(): string {\n if (this.#classes) {\n return this.#classes;\n }\n\n throw new Error(\n 'Styles are not extracted yet. Please call `extractRules` first.'\n );\n }\n\n public override extractRules(\n valueCache: ValueCache,\n cssText: string,\n loc?: SourceLocation | null\n ): Rules {\n const rules: Rules = {};\n\n const wrappedValue =\n typeof this.component === 'string'\n ? null\n : valueCache.get(this.component.node.name);\n\n const atomicRules = atomize(cssText, hasMeta(wrappedValue));\n atomicRules.forEach((rule) => {\n // eslint-disable-next-line no-param-reassign\n rules[rule.cssText] = {\n cssText: rule.cssText,\n start: loc?.start ?? null,\n className: this.className,\n displayName: this.displayName,\n atom: true,\n };\n\n debug(\n 'evaluator:template-processor:extracted-atomic-rule',\n `\\n${rule.cssText}`\n );\n });\n\n this.#classes = atomicRules\n // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n .filter((rule) => !!rule.className)\n .map((rule) => rule.className!)\n .join(' ');\n\n return rules;\n }\n\n protected override getProps(): IProps {\n const props = super.getProps();\n props.class = [this.classes, this.className].filter(Boolean).join(' ');\n props.atomic = true;\n return props;\n }\n\n protected override getVariableId(\n source: string,\n unit: string,\n precedingCss: string\n ): string {\n const id = this.getCustomVariableId(source, unit, precedingCss);\n if (id) {\n return id;\n }\n\n const context = this.getVariableContext(source, unit, precedingCss);\n // id is based on the slugified value\n return context.valueSlug;\n }\n}\n","import { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport stylis from 'stylis';\n\nimport { slugify } from '@linaria/utils';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n (acc: { [property: string]: number }, property, i) => {\n acc[property] = i;\n return acc;\n },\n {}\n);\n\nfunction hashProperty(property: string) {\n const index = knownPropertiesMap[property];\n // If it's a known property, let's use the index to cut down the length of the hash.\n // otherwise, slugify\n if (index !== undefined) {\n return index.toString(36); // base 36 so that we get a-z,0-9\n }\n return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n try {\n return postcss.parse(cssText);\n } catch (e) {\n if (e instanceof Error) {\n throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n }\n\n throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n stylis.set({\n prefix: false,\n keyframe: false,\n });\n const atomicRules: {\n className?: string;\n cssText: string;\n property: string;\n }[] = [];\n\n const stylesheet = parseCss(cssText);\n\n // We want to extract all keyframes and leave them as-is.\n // This isn't scoped locally yet\n stylesheet.walkAtRules('keyframes', (atRule) => {\n atRule.remove();\n atomicRules.push({\n property: atRule.name,\n cssText: atRule.toString(),\n });\n });\n\n stylesheet.walkDecls((decl) => {\n let thisParent: Document | Container | undefined = decl.parent;\n const parents: (Document | Container)[] = [];\n const atomicProperty = [decl.prop];\n let hasAtRule = false;\n\n // Traverse the declarations parents, and collect them all.\n while (thisParent && thisParent !== stylesheet) {\n parents.unshift(thisParent);\n if (thisParent.type === 'atrule') {\n hasAtRule = true;\n // @media queries, @supports etc.\n atomicProperty.push(\n (thisParent as AtRule).name,\n (thisParent as AtRule).params\n );\n } else if (thisParent.type === 'rule') {\n // pseudo classes etc.\n atomicProperty.push((thisParent as Rule).selector);\n }\n\n thisParent = thisParent.parent;\n }\n\n // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n // `@media (max-width: 400px) { background: red; }`, or\n // `&:hover { background: red; }`, or\n // `background: red;`\n // We do this so we can run it through stylis, to produce a full atom, eg.\n // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n const root = postcss.root();\n let container: Document | Container = root;\n parents.forEach((parent) => {\n const newNode = parent.clone();\n newNode.removeAll();\n container.append(newNode);\n container = newNode;\n });\n container.append(decl.clone());\n\n const css = root.toString();\n const propertySlug = hashProperty([...atomicProperty].join(';'));\n const valueSlug = slugify(decl.value);\n const className = `atm_${propertySlug}_${valueSlug}`;\n\n const propertyPriority =\n getPropertyPriority(decl.prop) +\n (hasAtRule ? 1 : 0) +\n (hasPriority ? 1 : 0);\n const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);\n\n atomicRules.push({\n property: atomicProperty.join(' '),\n className,\n cssText: processedCss,\n });\n });\n\n return atomicRules;\n}\n","const shorthandProperties = {\n // The `all` property resets everything, and should effectively have priority zero.\n // In practice, this can be achieved by using: div { all: ... } to have even less specificity, but to avoid duplicating all selectors, we just let it be\n // 'all': []\n animation: [\n 'animation-name',\n 'animation-duration',\n 'animation-timing-function',\n 'animation-delay',\n 'animation-iteration-count',\n 'animation-direction',\n 'animation-fill-mode',\n 'animation-play-state',\n ],\n background: [\n 'background-attachment',\n 'background-clip',\n 'background-color',\n 'background-image',\n 'background-origin',\n 'background-position',\n 'background-repeat',\n 'background-size',\n ],\n border: ['border-color', 'border-style', 'border-width'],\n 'border-block-end': [\n 'border-block-end-color',\n 'border-block-end-style',\n 'border-block-end-width',\n ],\n 'border-block-start': [\n 'border-block-start-color',\n 'border-block-start-style',\n 'border-block-start-width',\n ],\n 'border-bottom': [\n 'border-bottom-color',\n 'border-bottom-style',\n 'border-bottom-width',\n ],\n 'border-color': [\n 'border-bottom-color',\n 'border-left-color',\n 'border-right-color',\n 'border-top-color',\n ],\n 'border-image': [\n 'border-image-outset',\n 'border-image-repeat',\n 'border-image-slice',\n 'border-image-source',\n 'border-image-width',\n ],\n 'border-inline-end': [\n 'border-inline-end-color',\n 'border-inline-end-style',\n 'border-inline-end-width',\n ],\n 'border-inline-start': [\n 'border-inline-start-color',\n 'border-inline-start-style',\n 'border-inline-start-width',\n ],\n 'border-left': [\n 'border-left-color',\n 'border-left-style',\n 'border-left-width',\n ],\n 'border-radius': [\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n 'border-right': [\n 'border-right-color',\n 'border-right-style',\n 'border-right-width',\n ],\n 'border-style': [\n 'border-bottom-style',\n 'border-left-style',\n 'border-right-style',\n 'border-top-style',\n ],\n 'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n 'border-width': [\n 'border-bottom-width',\n 'border-left-width',\n 'border-right-width',\n 'border-top-width',\n ],\n 'column-rule': [\n 'column-rule-width',\n 'column-rule-style',\n 'column-rule-color',\n ],\n columns: ['column-count', 'column-width'],\n flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n 'flex-flow': ['flex-direction', 'flex-wrap'],\n font: [\n 'font-family',\n 'font-size',\n 'font-stretch',\n 'font-style',\n 'font-variant',\n 'font-weight',\n 'line-height',\n ],\n gap: ['row-gap', 'column-gap'],\n grid: [\n 'grid-auto-columns',\n 'grid-auto-flow',\n 'grid-auto-rows',\n 'grid-template-areas',\n 'grid-template-columns',\n 'grid-template-rows',\n ],\n 'grid-area': [\n 'grid-row-start',\n 'grid-column-start',\n 'grid-row-end',\n 'grid-column-end',\n ],\n 'grid-column': ['grid-column-end', 'grid-column-start'],\n 'grid-row': ['grid-row-end', 'grid-row-start'],\n 'grid-template': [\n 'grid-template-areas',\n 'grid-template-columns',\n 'grid-template-rows',\n ],\n 'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n mask: [\n 'mask-clip',\n 'mask-composite',\n 'mask-image',\n 'mask-mode',\n 'mask-origin',\n 'mask-position',\n 'mask-repeat',\n 'mask-size',\n ],\n offset: [\n 'offset-anchor',\n 'offset-distance',\n 'offset-path',\n 'offset-position',\n 'offset-rotate',\n ],\n outline: ['outline-color', 'outline-style', 'outline-width'],\n overflow: ['overflow-x', 'overflow-y'],\n padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n 'place-content': ['align-content', 'justify-content'],\n 'place-items': ['align-items', 'justify-items'],\n 'place-self': ['align-self', 'justify-self'],\n 'scroll-margin': [\n 'scroll-margin-bottom',\n 'scroll-margin-left',\n 'scroll-margin-right',\n 'scroll-margin-top',\n ],\n 'scroll-padding': [\n 'scroll-padding-bottom',\n 'scroll-padding-left',\n 'scroll-padding-right',\n 'scroll-padding-top',\n ],\n 'text-decoration': [\n 'text-decoration-color',\n 'text-decoration-line',\n 'text-decoration-style',\n 'text-decoration-thickness',\n ],\n 'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n transition: [\n 'transition-delay',\n 'transition-duration',\n 'transition-property',\n 'transition-timing-function',\n ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n// background-color: blue;\n// background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n const longhands = Object.values(shorthandProperties).reduce(\n (a, b) => [...a, ...b],\n []\n );\n\n return longhands.includes(property) ? 2 : 1;\n}\n"],"mappings":"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","names":["knownProperties","postcss","stylis","StyledProcessor"]}
|