@tokenami/config 0.0.51 → 0.0.53

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.
Files changed (5) hide show
  1. package/dist/index.cjs +135 -287
  2. package/dist/index.d.cts +8 -72
  3. package/dist/index.d.ts +8 -72
  4. package/dist/index.js +112 -243
  5. package/package.json +4 -4
package/dist/index.cjs CHANGED
@@ -1,46 +1,4 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/index.ts
21
- var src_exports = {};
22
- __export(src_exports, {
23
- ArbitraryValue: () => ArbitraryValue,
24
- GridProperty: () => GridProperty,
25
- GridValue: () => GridValue,
26
- TokenProperty: () => TokenProperty,
27
- TokenValue: () => TokenValue,
28
- VariantProperty: () => VariantProperty,
29
- arbitraryValue: () => arbitraryValue,
30
- createConfig: () => createConfig,
31
- defaultConfig: () => defaultConfig,
32
- getCSSPropertiesForAlias: () => getCSSPropertiesForAlias,
33
- getTokenPropertyName: () => getTokenPropertyName,
34
- getTokenPropertyParts: () => getTokenPropertyParts,
35
- getTokenPropertySplit: () => getTokenPropertySplit,
36
- getTokenValueParts: () => getTokenValueParts,
37
- gridProperty: () => gridProperty,
38
- mapShorthandToLonghands: () => mapShorthandToLonghands,
39
- tokenProperty: () => tokenProperty,
40
- tokenValue: () => tokenValue,
41
- variantProperty: () => variantProperty
42
- });
43
- module.exports = __toCommonJS(src_exports);
1
+ 'use strict';
44
2
 
45
3
  // src/config.ts
46
4
  var defaultConfig = {
@@ -215,14 +173,16 @@ var gridValueRegex = /^\d+/;
215
173
  var GridValue = {
216
174
  safeParse: (input) => validate(gridValueRegex, input)
217
175
  };
218
- var charClass = `A-Za-z0-9!#$%&()*+,./:;<=>?@[\\]^_{|}~`;
219
- var tokenPropertyRegex = new RegExp(`(?<!var\\()--[${charClass}]([${charClass}-]+)?`);
176
+ var tokenPropertyRegex = /(?<!var\()--(?:[\w-]+|\{[^\{\}]*\})+/g;
220
177
  var TokenProperty = {
221
178
  safeParse: (input) => validate(tokenPropertyRegex, input)
222
179
  };
223
180
  function tokenProperty(name) {
224
181
  return `--${name}`;
225
182
  }
183
+ function parsedTokenProperty(name) {
184
+ return parseProperty(tokenProperty(name));
185
+ }
226
186
  var variantPropertyRegex = /(?<!var\()--((\w)([\w-]+)_([\w-]+))/;
227
187
  var VariantProperty = {
228
188
  safeParse: (input) => validate(variantPropertyRegex, input)
@@ -230,6 +190,9 @@ var VariantProperty = {
230
190
  function variantProperty(variant, name) {
231
191
  return `--${variant}_${name}`;
232
192
  }
193
+ function parsedVariantProperty(variant, name) {
194
+ return parseProperty(variantProperty(variant, name));
195
+ }
233
196
  var tokenValueRegex = /var\((--([\w-]+)_([\w-]+))\)/;
234
197
  var TokenValue = {
235
198
  safeParse: (input) => validate(tokenValueRegex, input)
@@ -260,24 +223,36 @@ function getTokenPropertyName(property) {
260
223
  const propertyPrefix = tokenProperty("");
261
224
  return property.replace(propertyPrefix, "");
262
225
  }
226
+ var propertySplitRegex = /_(?![^{}]*\])/;
263
227
  function getTokenPropertySplit(property) {
264
228
  const name = getTokenPropertyName(property);
265
- const [alias, ...variants] = name.split("_").reverse();
229
+ const [alias, ...variants] = name.split(propertySplitRegex).reverse();
266
230
  return { alias, variants: variants.reverse() };
267
231
  }
268
232
  function getTokenPropertyParts(tokenProperty2, config) {
269
- var _a, _b, _c;
233
+ var _a;
270
234
  const { alias, variants } = getTokenPropertySplit(tokenProperty2);
271
235
  const [firstVariant, secondVariant] = variants;
272
- const firstSelector = ((_a = config.selectors) == null ? void 0 : _a[firstVariant]) && firstVariant;
273
- const secondSelector = ((_b = config.selectors) == null ? void 0 : _b[secondVariant]) && secondVariant;
274
- const responsive = ((_c = config.responsive) == null ? void 0 : _c[firstVariant]) && firstVariant;
236
+ const firstSelector = getValidSelector(firstVariant, config);
237
+ const secondSelector = getValidSelector(secondVariant, config);
238
+ const responsive = ((_a = config.responsive) == null ? void 0 : _a[firstVariant]) && firstVariant;
275
239
  const selector = firstSelector || secondSelector;
276
240
  const validVariant = [responsive, selector].filter(Boolean).join("_");
277
- if (firstVariant && variantProperty(validVariant, alias) !== tokenProperty2)
241
+ const variantProp = variantProperty(validVariant, alias);
242
+ if (firstVariant && variantProp !== tokenProperty2)
278
243
  return null;
279
244
  return { alias, responsive, selector, variant: validVariant };
280
245
  }
246
+ function getValidSelector(selector, config) {
247
+ var _a;
248
+ if (!selector)
249
+ return;
250
+ return (getArbitrarySelector(selector) || ((_a = config.selectors) == null ? void 0 : _a[selector])) && selector;
251
+ }
252
+ function getArbitrarySelector(selector) {
253
+ const [, arbitrarySelector] = (selector == null ? void 0 : selector.match(/^{(.+)}$/)) || [];
254
+ return arbitrarySelector ? decodeColon(arbitrarySelector) : void 0;
255
+ }
281
256
  function getTokenValueParts(tokenValue2) {
282
257
  const [, property, themeKey, token] = tokenValue2.split(tokenValueRegex);
283
258
  return { property, themeKey, token };
@@ -285,241 +260,114 @@ function getTokenValueParts(tokenValue2) {
285
260
  function getCSSPropertiesForAlias(alias, aliases) {
286
261
  return (aliases == null ? void 0 : aliases[alias]) || [alias];
287
262
  }
263
+ var escapeSpecialCharsRegex = /[&#.:;>~*[\]=,"'()+{}]/g;
264
+ function parseProperty(str, options) {
265
+ const { escapeSpecialChars = true } = options || {};
266
+ const noColon = encodeColon(str);
267
+ if (!escapeSpecialChars)
268
+ return noColon;
269
+ return noColon.replace(escapeSpecialCharsRegex, (match) => `\\${match}`);
270
+ }
271
+ var encodeColon = (str) => str.replace(/:/g, ";");
272
+ var decodeColon = (str) => str.replace(/;/g, ":");
288
273
 
289
274
  // src/shorthands.ts
290
- var mapShorthandToLonghands = {
291
- all: [],
292
- animation: [
293
- "animation-name",
294
- "animation-duration",
295
- "animation-timing-function",
296
- "animation-delay",
297
- "animation-iteration-count",
298
- "animation-direction",
299
- "animation-fill-mode",
300
- "animation-play-state",
301
- "animation-timeline"
302
- ],
303
- background: [
304
- "background-attachment",
305
- "background-clip",
306
- "background-color",
307
- "background-image",
308
- "background-position",
309
- "background-repeat",
310
- "background-size"
311
- ],
312
- "background-position": ["background-position-x", "background-position-y"],
313
- border: [
314
- "border-top",
315
- "border-right",
316
- "border-bottom",
317
- "border-left",
318
- "border-color",
319
- "border-style",
320
- "border-width",
321
- "border-image",
322
- "border-block",
323
- "border-inline"
324
- ],
325
- "border-top": ["border-top-width", "border-top-style", "border-top-color"],
326
- "border-right": ["border-right-width", "border-right-style", "border-right-color"],
327
- "border-bottom": ["border-bottom-width", "border-bottom-style", "border-bottom-color"],
328
- "border-left": ["border-left-width", "border-left-style", "border-left-color"],
329
- "border-color": [
330
- "border-top-color",
331
- "border-right-color",
332
- "border-bottom-color",
333
- "border-left-color"
334
- ],
335
- "border-style": [
336
- "border-top-style",
337
- "border-right-style",
338
- "border-bottom-style",
339
- "border-left-style"
340
- ],
341
- "border-width": [
342
- "border-top-width",
343
- "border-right-width",
344
- "border-bottom-width",
345
- "border-left-width"
346
- ],
347
- "border-image": [
348
- "border-image-source",
349
- "border-image-slice",
350
- "border-image-width",
351
- "border-image-outset",
352
- "border-image-repeat"
353
- ],
354
- "border-radius": [
355
- "border-top-left-radius",
356
- "border-top-right-radius",
357
- "border-bottom-right-radius",
358
- "border-bottom-left-radius"
359
- ],
360
- "border-block": [
361
- "border-block-width",
362
- "border-block-style",
363
- "border-block-color",
364
- "border-block-start",
365
- "border-block-end"
366
- ],
367
- "border-block-width": ["border-block-start-width", "border-block-end-width"],
368
- "border-block-style": ["border-block-start-style", "border-block-end-style"],
369
- "border-block-color": ["border-block-start-color", "border-block-end-color"],
370
- "border-block-start": [
371
- "border-block-start-width",
372
- "border-block-start-style",
373
- "border-block-start-color"
374
- ],
375
- "border-block-end": [
376
- "border-block-end-width",
377
- "border-block-end-style",
378
- "border-block-end-color"
379
- ],
380
- "border-inline": [
381
- "border-inline-width",
382
- "border-inline-style",
383
- "border-inline-color",
384
- "border-inline-start",
385
- "border-inline-end"
386
- ],
387
- "border-inline-width": ["border-inline-start-width", "border-inline-end-width"],
388
- "border-inline-style": ["border-inline-start-style", "border-inline-end-style"],
389
- "border-inline-color": ["border-inline-start-color", "border-inline-end-color"],
390
- "border-inline-start": [
391
- "border-inline-start-width",
392
- "border-inline-start-style",
393
- "border-inline-start-color"
394
- ],
395
- "border-inline-end": [
396
- "border-inline-end-width",
397
- "border-inline-end-style",
398
- "border-inline-end-color"
399
- ],
400
- "column-rule": ["column-rule-width", "column-rule-style", "column-rule-color"],
401
- columns: ["column-width", "column-count"],
402
- container: ["container-name", "container-type"],
403
- "contain-intrinsic-size": ["contain-intrinsic-width", "contain-intrinsic-height"],
404
- flex: ["flex-grow", "flex-shrink", "flex-basis"],
405
- "flex-flow": ["flex-direction", "flex-wrap"],
406
- font: [
407
- "font-style",
408
- "font-variant",
409
- "font-weight",
410
- "font-stretch",
411
- "font-size",
412
- "line-height",
413
- "font-family"
414
- ],
415
- "font-variant": [
416
- "font-variant-alternates",
417
- "font-variant-caps",
418
- "font-variant-east-asian",
419
- "font-variant-emoji",
420
- "font-variant-ligatures",
421
- "font-variant-numeric",
422
- "font-variant-position"
423
- ],
424
- gap: ["row-gap", "column-gap"],
425
- grid: [
426
- "grid-auto-columns",
427
- "grid-auto-flow",
428
- "grid-auto-rows",
429
- "grid-template-areas",
430
- "grid-template-columns",
431
- "grid-template-rows"
432
- ],
433
- "grid-area": ["grid-row-start", "grid-column-start", "grid-row-end", "grid-column-end"],
434
- "grid-column": ["grid-column-start", "grid-column-end"],
435
- "grid-row": ["grid-row-start", "grid-row-end"],
436
- "grid-template": ["grid-template-rows", "grid-template-columns", "grid-template-areas"],
437
- inset: ["top", "right", "bottom", "left"],
438
- "list-style": ["list-style-type", "list-style-position", "list-style-image"],
439
- "inset-block": ["inset-block-start", "inset-block-end"],
440
- "inset-inline": ["inset-inline-start", "inset-inline-end"],
441
- margin: ["margin-top", "margin-right", "margin-bottom", "margin-left"],
442
- "margin-block": ["margin-block-start", "margin-block-end"],
443
- "margin-inline": ["margin-inline-start", "margin-inline-end"],
444
- mask: [
445
- "mask-image",
446
- "mask-mode",
447
- "mask-position",
448
- "mask-size",
449
- "mask-repeat",
450
- "mask-origin",
451
- "mask-clip",
452
- "mask-composite",
453
- "mask-type"
454
- ],
455
- "mask-border": [
456
- "mask-border-mode",
457
- "mask-border-outset",
458
- "mask-border-repeat",
459
- "mask-border-slice",
460
- "mask-border-source",
461
- "mask-border-width"
462
- ],
463
- offset: ["offset-position", "offset-path", "offset-distance", "offset-anchor", "offset-rotate"],
464
- outline: ["outline-color", "outline-style", "outline-width"],
465
- overflow: ["overflow-x", "overflow-y"],
466
- "overscroll-behavior": ["overscroll-behavior-x", "overscroll-behavior-y"],
467
- padding: ["padding-top", "padding-right", "padding-bottom", "padding-left"],
468
- "padding-block": ["padding-block-start", "padding-block-end"],
469
- "padding-inline": ["padding-inline-start", "padding-inline-end"],
470
- "place-content": ["align-content", "justify-content"],
471
- "place-items": ["align-items", "justify-items"],
472
- "place-self": ["align-self", "justify-self"],
473
- "scroll-margin": [
474
- "scroll-margin-top",
475
- "scroll-margin-right",
476
- "scroll-margin-bottom",
477
- "scroll-margin-left"
478
- ],
479
- "scroll-margin-block": ["scroll-margin-block-start", "scroll-margin-block-end"],
480
- "scroll-margin-inline": ["scroll-margin-inline-start", "scroll-margin-inline-end"],
481
- "scroll-padding": [
482
- "scroll-padding-top",
483
- "scroll-padding-right",
484
- "scroll-padding-bottom",
485
- "scroll-padding-left"
486
- ],
487
- "scroll-padding-block": ["scroll-padding-block-start", "scroll-padding-block-end"],
488
- "scroll-padding-inline": ["scroll-padding-inline-start", "scroll-padding-inline-end"],
489
- "scroll-timeline": ["scroll-timeline-name", "scroll-timeline-axis"],
490
- "text-decoration": [
491
- "text-decoration-line",
492
- "text-decoration-style",
493
- "text-decoration-color",
494
- "text-decoration-thickness"
495
- ],
496
- "text-emphasis": ["text-emphasis-style", "text-emphasis-color"],
497
- transition: [
498
- "transition-delay",
499
- "transition-duration",
500
- "transition-property",
501
- "transition-timing-function"
502
- ]
503
- };
504
- // Annotate the CommonJS export names for ESM import in node:
505
- 0 && (module.exports = {
506
- ArbitraryValue,
507
- GridProperty,
508
- GridValue,
509
- TokenProperty,
510
- TokenValue,
511
- VariantProperty,
512
- arbitraryValue,
513
- createConfig,
514
- defaultConfig,
515
- getCSSPropertiesForAlias,
516
- getTokenPropertyName,
517
- getTokenPropertyParts,
518
- getTokenPropertySplit,
519
- getTokenValueParts,
520
- gridProperty,
521
- mapShorthandToLonghands,
522
- tokenProperty,
523
- tokenValue,
524
- variantProperty
525
- });
275
+ var shorthandsToLonghands = [
276
+ ["all", []],
277
+ ["animation", ["&-name", "&-duration", "&-timing-function", "&-delay", "&-iteration-count", "&-direction", "&-fill-mode", "&-play-state", "&-timeline"]],
278
+ ["background", ["&-attachment", "&-clip", "&-color", "&-image", "&-position", "&-repeat", "&-size"]],
279
+ ["background-position", ["&-x", "&-y"]],
280
+ ["border", ["&-top", "&-right", "&-bottom", "&-left", "&-color", "&-style", "&-width", "&-image", "&-block", "&-inline"]],
281
+ ["border-top", ["&-width", "&-style", "&-color"]],
282
+ ["border-right", ["&-width", "&-style", "&-color"]],
283
+ ["border-bottom", ["&-width", "&-style", "&-color"]],
284
+ ["border-left", ["&-width", "&-style", "&-color"]],
285
+ ["border-color", ["border-top-color", "border-right-color", "border-bottom-color", "border-left-color"]],
286
+ ["border-style", ["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"]],
287
+ ["border-width", ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width"]],
288
+ ["border-image", ["&-source", "&-slice", "&-width", "&-outset", "&-repeat"]],
289
+ ["border-radius", ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius"]],
290
+ ["border-block", ["&-width", "&-style", "&-color", "&-start", "&-end"]],
291
+ ["border-block-width", ["border-block-start-width", "border-block-end-width"]],
292
+ ["border-block-style", ["border-block-start-style", "border-block-end-style"]],
293
+ ["border-block-color", ["border-block-start-color", "border-block-end-color"]],
294
+ ["border-block-start", ["&-width", "&-style", "&-color"]],
295
+ ["border-block-end", ["&-width", "&-style", "&-color"]],
296
+ ["border-inline", ["&-width", "&-style", "&-color", "&-start", "&-end"]],
297
+ ["border-inline-width", ["border-inline-start-width", "border-inline-end-width"]],
298
+ ["border-inline-style", ["border-inline-start-style", "border-inline-end-style"]],
299
+ ["border-inline-color", ["border-inline-start-color", "border-inline-end-color"]],
300
+ ["border-inline-start", ["&-width", "&-style", "&-color"]],
301
+ ["border-inline-end", ["&-width", "&-style", "&-color"]],
302
+ ["column-rule", ["&-width", "&-style", "&-color"]],
303
+ ["columns", ["column-width", "column-count"]],
304
+ ["container", ["&-name", "&-type"]],
305
+ ["contain-intrinsic-size", ["contain-intrinsic-width", "contain-intrinsic-height"]],
306
+ ["flex", ["&-grow", "&-shrink", "&-basis"]],
307
+ ["flex-flow", ["flex-direction", "flex-wrap"]],
308
+ ["font", ["&-style", "&-variant", "&-weight", "&-stretch", "&-size", "line-height", "&-family"]],
309
+ ["font-variant", ["&-alternates", "&-caps", "&-east-asian", "&-emoji", "&-ligatures", "&-numeric", "&-position"]],
310
+ ["gap", ["row-gap", "column-gap"]],
311
+ ["grid", ["&-auto-columns", "&-auto-flow", "&-auto-rows", "&-template-areas", "&-template-columns", "&-template-rows"]],
312
+ ["grid-area", ["grid-row-start", "grid-column-start", "grid-row-end", "grid-column-end"]],
313
+ ["grid-column", ["&-start", "&-end"]],
314
+ ["grid-row", ["&-start", "&-end"]],
315
+ ["grid-template", ["&-rows", "&-columns", "&-areas"]],
316
+ ["inset", ["top", "right", "bottom", "left"]],
317
+ ["list-style", ["&-type", "&-position", "&-image"]],
318
+ ["inset-block", ["&-start", "&-end"]],
319
+ ["inset-inline", ["&-start", "&-end"]],
320
+ ["margin", ["&-top", "&-right", "&-bottom", "&-left"]],
321
+ ["margin-block", ["&-start", "&-end"]],
322
+ ["margin-inline", ["&-start", "&-end"]],
323
+ ["mask", ["&-image", "&-mode", "&-position", "&-size", "&-repeat", "&-origin", "&-clip", "&-composite", "&-type"]],
324
+ ["mask-border", ["&-mode", "&-outset", "&-repeat", "&-slice", "&-source", "&-width"]],
325
+ ["offset", ["&-position", "&-path", "&-distance", "&-anchor", "&-rotate"]],
326
+ ["outline", ["&-color", "&-style", "&-width"]],
327
+ ["overflow", ["&-x", "&-y"]],
328
+ ["overscroll-behavior", ["&-x", "&-y"]],
329
+ ["padding", ["&-top", "&-right", "&-bottom", "&-left"]],
330
+ ["padding-block", ["&-start", "&-end"]],
331
+ ["padding-inline", ["&-start", "&-end"]],
332
+ ["place-content", ["align-content", "justify-content"]],
333
+ ["place-items", ["align-items", "justify-items"]],
334
+ ["place-self", ["align-self", "justify-self"]],
335
+ ["scroll-margin", ["&-top", "&-right", "&-bottom", "&-left"]],
336
+ ["scroll-margin-block", ["&-start", "&-end"]],
337
+ ["scroll-margin-inline", ["&-start", "&-end"]],
338
+ ["scroll-padding", ["&-top", "&-right", "&-bottom", "&-left"]],
339
+ ["scroll-padding-block", ["&-start", "&-end"]],
340
+ ["scroll-padding-inline", ["&-start", "&-end"]],
341
+ ["scroll-timeline", ["&-name", "&-axis"]],
342
+ ["text-decoration", ["&-line", "&-style", "&-color", "&-thickness"]],
343
+ ["text-emphasis", ["&-style", "&-color"]],
344
+ ["transition", ["&-delay", "&-duration", "&-property", "&-timing-function"]]
345
+ ];
346
+ var replacedAmpersands = shorthandsToLonghands.map(
347
+ ([key, values]) => [key, values.map((value) => value.replace("&", key))]
348
+ );
349
+ var mapShorthandToLonghands = new Map(replacedAmpersands);
350
+
351
+ exports.ArbitraryValue = ArbitraryValue;
352
+ exports.GridProperty = GridProperty;
353
+ exports.GridValue = GridValue;
354
+ exports.TokenProperty = TokenProperty;
355
+ exports.TokenValue = TokenValue;
356
+ exports.VariantProperty = VariantProperty;
357
+ exports.arbitraryValue = arbitraryValue;
358
+ exports.createConfig = createConfig;
359
+ exports.defaultConfig = defaultConfig;
360
+ exports.getArbitrarySelector = getArbitrarySelector;
361
+ exports.getCSSPropertiesForAlias = getCSSPropertiesForAlias;
362
+ exports.getTokenPropertyName = getTokenPropertyName;
363
+ exports.getTokenPropertyParts = getTokenPropertyParts;
364
+ exports.getTokenPropertySplit = getTokenPropertySplit;
365
+ exports.getTokenValueParts = getTokenValueParts;
366
+ exports.gridProperty = gridProperty;
367
+ exports.mapShorthandToLonghands = mapShorthandToLonghands;
368
+ exports.parseProperty = parseProperty;
369
+ exports.parsedTokenProperty = parsedTokenProperty;
370
+ exports.parsedVariantProperty = parsedVariantProperty;
371
+ exports.tokenProperty = tokenProperty;
372
+ exports.tokenValue = tokenValue;
373
+ exports.variantProperty = variantProperty;
package/dist/index.d.cts CHANGED
@@ -218,11 +218,13 @@ declare const TokenProperty: {
218
218
  safeParse: (input: unknown) => Validated<`--${string}`>;
219
219
  };
220
220
  declare function tokenProperty(name: string): TokenProperty;
221
+ declare function parsedTokenProperty(name: string): TokenProperty;
221
222
  type VariantProperty<P extends string = string, V extends string = string> = `--${V}_${P}`;
222
223
  declare const VariantProperty: {
223
224
  safeParse: (input: unknown) => Validated<`--${string}_${string}`>;
224
225
  };
225
226
  declare function variantProperty(variant: string, name: string): VariantProperty;
227
+ declare function parsedVariantProperty(variant: string, name: string): VariantProperty;
226
228
  type TokenValue<TK extends string = string, V extends string = string> = `var(--${TK}_${V})`;
227
229
  declare const TokenValue: {
228
230
  safeParse: (input: unknown) => Validated<`var(--${string}_${string})`>;
@@ -251,83 +253,17 @@ type PropertyParts = {
251
253
  variant?: string;
252
254
  };
253
255
  declare function getTokenPropertyParts(tokenProperty: TokenProperty, config: Config): PropertyParts | null;
256
+ declare function getArbitrarySelector(selector: string | undefined): string | undefined;
254
257
  declare function getTokenValueParts(tokenValue: TokenValue): {
255
258
  property: string;
256
259
  themeKey: string;
257
260
  token: string;
258
261
  };
259
262
  declare function getCSSPropertiesForAlias(alias: string, aliases: Config['aliases']): string[];
263
+ declare function parseProperty<T extends string>(str: T, options?: {
264
+ escapeSpecialChars?: boolean;
265
+ }): T;
260
266
 
261
- declare const mapShorthandToLonghands: {
262
- all: never[];
263
- animation: ("animation-delay" | "animation-direction" | "animation-duration" | "animation-fill-mode" | "animation-iteration-count" | "animation-name" | "animation-play-state" | "animation-timeline" | "animation-timing-function")[];
264
- background: ("background-attachment" | "background-clip" | "background-color" | "background-image" | "background-repeat" | "background-size" | "background-position")[];
265
- 'background-position': ("background-position-x" | "background-position-y")[];
266
- border: ("border-block" | "border-bottom" | "border-color" | "border-image" | "border-inline" | "border-left" | "border-right" | "border-style" | "border-top" | "border-width")[];
267
- 'border-top': ("border-top-color" | "border-top-style" | "border-top-width")[];
268
- 'border-right': ("border-right-color" | "border-right-style" | "border-right-width")[];
269
- 'border-bottom': ("border-bottom-color" | "border-bottom-style" | "border-bottom-width")[];
270
- 'border-left': ("border-left-color" | "border-left-style" | "border-left-width")[];
271
- 'border-color': ("border-bottom-color" | "border-left-color" | "border-right-color" | "border-top-color")[];
272
- 'border-style': ("border-bottom-style" | "border-left-style" | "border-right-style" | "border-top-style")[];
273
- 'border-width': ("border-bottom-width" | "border-left-width" | "border-right-width" | "border-top-width")[];
274
- 'border-image': ("border-image-outset" | "border-image-repeat" | "border-image-slice" | "border-image-source" | "border-image-width")[];
275
- 'border-radius': ("border-bottom-left-radius" | "border-bottom-right-radius" | "border-top-left-radius" | "border-top-right-radius")[];
276
- 'border-block': ("border-block-color" | "border-block-style" | "border-block-width" | "border-block-end" | "border-block-start")[];
277
- 'border-block-width': ("border-block-end-width" | "border-block-start-width")[];
278
- 'border-block-style': ("border-block-end-style" | "border-block-start-style")[];
279
- 'border-block-color': ("border-block-end-color" | "border-block-start-color")[];
280
- 'border-block-start': ("border-block-start-color" | "border-block-start-style" | "border-block-start-width")[];
281
- 'border-block-end': ("border-block-end-color" | "border-block-end-style" | "border-block-end-width")[];
282
- 'border-inline': ("border-inline-color" | "border-inline-style" | "border-inline-width" | "border-inline-end" | "border-inline-start")[];
283
- 'border-inline-width': ("border-inline-end-width" | "border-inline-start-width")[];
284
- 'border-inline-style': ("border-inline-end-style" | "border-inline-start-style")[];
285
- 'border-inline-color': ("border-inline-end-color" | "border-inline-start-color")[];
286
- 'border-inline-start': ("border-inline-start-color" | "border-inline-start-style" | "border-inline-start-width")[];
287
- 'border-inline-end': ("border-inline-end-color" | "border-inline-end-style" | "border-inline-end-width")[];
288
- 'column-rule': ("column-rule-color" | "column-rule-style" | "column-rule-width")[];
289
- columns: ("column-count" | "column-width")[];
290
- container: ("container-name" | "container-type")[];
291
- 'contain-intrinsic-size': ("contain-intrinsic-height" | "contain-intrinsic-width")[];
292
- flex: ("flex-basis" | "flex-grow" | "flex-shrink")[];
293
- 'flex-flow': ("flex-direction" | "flex-wrap")[];
294
- font: ("font-size" | "font-family" | "font-stretch" | "font-style" | "font-variant" | "font-weight" | "line-height")[];
295
- 'font-variant': ("font-variant-alternates" | "font-variant-caps" | "font-variant-east-asian" | "font-variant-emoji" | "font-variant-ligatures" | "font-variant-numeric" | "font-variant-position")[];
296
- gap: ("column-gap" | "row-gap")[];
297
- grid: ("grid-auto-columns" | "grid-auto-flow" | "grid-auto-rows" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows")[];
298
- 'grid-area': ("grid-column-end" | "grid-column-start" | "grid-row-end" | "grid-row-start")[];
299
- 'grid-column': ("grid-column-end" | "grid-column-start")[];
300
- 'grid-row': ("grid-row-end" | "grid-row-start")[];
301
- 'grid-template': ("grid-template-areas" | "grid-template-columns" | "grid-template-rows")[];
302
- inset: ("bottom" | "left" | "right" | "top")[];
303
- 'list-style': ("list-style-image" | "list-style-position" | "list-style-type")[];
304
- 'inset-block': ("inset-block-end" | "inset-block-start")[];
305
- 'inset-inline': ("inset-inline-end" | "inset-inline-start")[];
306
- margin: ("margin-bottom" | "margin-left" | "margin-right" | "margin-top")[];
307
- 'margin-block': ("margin-block-end" | "margin-block-start")[];
308
- 'margin-inline': ("margin-inline-end" | "margin-inline-start")[];
309
- mask: ("mask-clip" | "mask-composite" | "mask-image" | "mask-mode" | "mask-origin" | "mask-position" | "mask-repeat" | "mask-size" | "mask-type")[];
310
- 'mask-border': ("mask-border-mode" | "mask-border-outset" | "mask-border-repeat" | "mask-border-slice" | "mask-border-source" | "mask-border-width")[];
311
- offset: ("offset-anchor" | "offset-distance" | "offset-path" | "offset-position" | "offset-rotate")[];
312
- outline: ("outline-color" | "outline-style" | "outline-width")[];
313
- overflow: ("overflow-x" | "overflow-y")[];
314
- 'overscroll-behavior': ("overscroll-behavior-x" | "overscroll-behavior-y")[];
315
- padding: ("padding-bottom" | "padding-left" | "padding-right" | "padding-top")[];
316
- 'padding-block': ("padding-block-end" | "padding-block-start")[];
317
- 'padding-inline': ("padding-inline-end" | "padding-inline-start")[];
318
- 'place-content': ("align-content" | "justify-content")[];
319
- 'place-items': ("align-items" | "justify-items")[];
320
- 'place-self': ("align-self" | "justify-self")[];
321
- 'scroll-margin': ("scroll-margin-bottom" | "scroll-margin-left" | "scroll-margin-right" | "scroll-margin-top")[];
322
- 'scroll-margin-block': ("scroll-margin-block-end" | "scroll-margin-block-start")[];
323
- 'scroll-margin-inline': ("scroll-margin-inline-end" | "scroll-margin-inline-start")[];
324
- 'scroll-padding': ("scroll-padding-bottom" | "scroll-padding-left" | "scroll-padding-right" | "scroll-padding-top")[];
325
- 'scroll-padding-block': ("scroll-padding-block-end" | "scroll-padding-block-start")[];
326
- 'scroll-padding-inline': ("scroll-padding-inline-end" | "scroll-padding-inline-start")[];
327
- 'scroll-timeline': ("scroll-timeline-axis" | "scroll-timeline-name")[];
328
- 'text-decoration': ("text-decoration-color" | "text-decoration-line" | "text-decoration-style" | "text-decoration-thickness")[];
329
- 'text-emphasis': ("text-emphasis-color" | "text-emphasis-style")[];
330
- transition: ("transition-delay" | "transition-duration" | "transition-property" | "transition-timing-function")[];
331
- };
267
+ declare const mapShorthandToLonghands: Map<"flex" | "grid" | "all" | "border-block-color" | "border-block-style" | "border-block-width" | "border-inline-color" | "border-inline-style" | "border-inline-width" | "border" | "transition" | "font-variant" | "animation" | "background" | "background-position" | "border-block" | "border-block-end" | "border-block-start" | "border-bottom" | "border-color" | "border-image" | "border-inline" | "border-inline-end" | "border-inline-start" | "border-left" | "border-radius" | "border-right" | "border-style" | "border-top" | "border-width" | "column-rule" | "columns" | "contain-intrinsic-size" | "container" | "flex-flow" | "font" | "gap" | "grid-area" | "grid-column" | "grid-row" | "grid-template" | "inset" | "inset-block" | "inset-inline" | "list-style" | "margin" | "margin-block" | "margin-inline" | "mask" | "mask-border" | "offset" | "outline" | "overflow" | "overscroll-behavior" | "padding" | "padding-block" | "padding-inline" | "place-content" | "place-items" | "place-self" | "scroll-margin" | "scroll-margin-block" | "scroll-margin-inline" | "scroll-padding" | "scroll-padding-block" | "scroll-padding-inline" | "scroll-timeline" | "text-decoration" | "text-emphasis", string[]>;
332
268
 
333
- export { type Aliases, ArbitraryValue, type CSSProperties, type CSSProperty, type Config, type DeepReadonly, type DefaultConfig, GridProperty, GridValue, type Theme, type ThemeModes, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, defaultConfig, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, mapShorthandToLonghands, tokenProperty, tokenValue, variantProperty };
269
+ export { type Aliases, ArbitraryValue, type CSSProperties, type CSSProperty, type Config, type DeepReadonly, type DefaultConfig, GridProperty, GridValue, type Theme, type ThemeModes, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, defaultConfig, getArbitrarySelector, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, mapShorthandToLonghands, parseProperty, parsedTokenProperty, parsedVariantProperty, tokenProperty, tokenValue, variantProperty };
package/dist/index.d.ts CHANGED
@@ -218,11 +218,13 @@ declare const TokenProperty: {
218
218
  safeParse: (input: unknown) => Validated<`--${string}`>;
219
219
  };
220
220
  declare function tokenProperty(name: string): TokenProperty;
221
+ declare function parsedTokenProperty(name: string): TokenProperty;
221
222
  type VariantProperty<P extends string = string, V extends string = string> = `--${V}_${P}`;
222
223
  declare const VariantProperty: {
223
224
  safeParse: (input: unknown) => Validated<`--${string}_${string}`>;
224
225
  };
225
226
  declare function variantProperty(variant: string, name: string): VariantProperty;
227
+ declare function parsedVariantProperty(variant: string, name: string): VariantProperty;
226
228
  type TokenValue<TK extends string = string, V extends string = string> = `var(--${TK}_${V})`;
227
229
  declare const TokenValue: {
228
230
  safeParse: (input: unknown) => Validated<`var(--${string}_${string})`>;
@@ -251,83 +253,17 @@ type PropertyParts = {
251
253
  variant?: string;
252
254
  };
253
255
  declare function getTokenPropertyParts(tokenProperty: TokenProperty, config: Config): PropertyParts | null;
256
+ declare function getArbitrarySelector(selector: string | undefined): string | undefined;
254
257
  declare function getTokenValueParts(tokenValue: TokenValue): {
255
258
  property: string;
256
259
  themeKey: string;
257
260
  token: string;
258
261
  };
259
262
  declare function getCSSPropertiesForAlias(alias: string, aliases: Config['aliases']): string[];
263
+ declare function parseProperty<T extends string>(str: T, options?: {
264
+ escapeSpecialChars?: boolean;
265
+ }): T;
260
266
 
261
- declare const mapShorthandToLonghands: {
262
- all: never[];
263
- animation: ("animation-delay" | "animation-direction" | "animation-duration" | "animation-fill-mode" | "animation-iteration-count" | "animation-name" | "animation-play-state" | "animation-timeline" | "animation-timing-function")[];
264
- background: ("background-attachment" | "background-clip" | "background-color" | "background-image" | "background-repeat" | "background-size" | "background-position")[];
265
- 'background-position': ("background-position-x" | "background-position-y")[];
266
- border: ("border-block" | "border-bottom" | "border-color" | "border-image" | "border-inline" | "border-left" | "border-right" | "border-style" | "border-top" | "border-width")[];
267
- 'border-top': ("border-top-color" | "border-top-style" | "border-top-width")[];
268
- 'border-right': ("border-right-color" | "border-right-style" | "border-right-width")[];
269
- 'border-bottom': ("border-bottom-color" | "border-bottom-style" | "border-bottom-width")[];
270
- 'border-left': ("border-left-color" | "border-left-style" | "border-left-width")[];
271
- 'border-color': ("border-bottom-color" | "border-left-color" | "border-right-color" | "border-top-color")[];
272
- 'border-style': ("border-bottom-style" | "border-left-style" | "border-right-style" | "border-top-style")[];
273
- 'border-width': ("border-bottom-width" | "border-left-width" | "border-right-width" | "border-top-width")[];
274
- 'border-image': ("border-image-outset" | "border-image-repeat" | "border-image-slice" | "border-image-source" | "border-image-width")[];
275
- 'border-radius': ("border-bottom-left-radius" | "border-bottom-right-radius" | "border-top-left-radius" | "border-top-right-radius")[];
276
- 'border-block': ("border-block-color" | "border-block-style" | "border-block-width" | "border-block-end" | "border-block-start")[];
277
- 'border-block-width': ("border-block-end-width" | "border-block-start-width")[];
278
- 'border-block-style': ("border-block-end-style" | "border-block-start-style")[];
279
- 'border-block-color': ("border-block-end-color" | "border-block-start-color")[];
280
- 'border-block-start': ("border-block-start-color" | "border-block-start-style" | "border-block-start-width")[];
281
- 'border-block-end': ("border-block-end-color" | "border-block-end-style" | "border-block-end-width")[];
282
- 'border-inline': ("border-inline-color" | "border-inline-style" | "border-inline-width" | "border-inline-end" | "border-inline-start")[];
283
- 'border-inline-width': ("border-inline-end-width" | "border-inline-start-width")[];
284
- 'border-inline-style': ("border-inline-end-style" | "border-inline-start-style")[];
285
- 'border-inline-color': ("border-inline-end-color" | "border-inline-start-color")[];
286
- 'border-inline-start': ("border-inline-start-color" | "border-inline-start-style" | "border-inline-start-width")[];
287
- 'border-inline-end': ("border-inline-end-color" | "border-inline-end-style" | "border-inline-end-width")[];
288
- 'column-rule': ("column-rule-color" | "column-rule-style" | "column-rule-width")[];
289
- columns: ("column-count" | "column-width")[];
290
- container: ("container-name" | "container-type")[];
291
- 'contain-intrinsic-size': ("contain-intrinsic-height" | "contain-intrinsic-width")[];
292
- flex: ("flex-basis" | "flex-grow" | "flex-shrink")[];
293
- 'flex-flow': ("flex-direction" | "flex-wrap")[];
294
- font: ("font-size" | "font-family" | "font-stretch" | "font-style" | "font-variant" | "font-weight" | "line-height")[];
295
- 'font-variant': ("font-variant-alternates" | "font-variant-caps" | "font-variant-east-asian" | "font-variant-emoji" | "font-variant-ligatures" | "font-variant-numeric" | "font-variant-position")[];
296
- gap: ("column-gap" | "row-gap")[];
297
- grid: ("grid-auto-columns" | "grid-auto-flow" | "grid-auto-rows" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows")[];
298
- 'grid-area': ("grid-column-end" | "grid-column-start" | "grid-row-end" | "grid-row-start")[];
299
- 'grid-column': ("grid-column-end" | "grid-column-start")[];
300
- 'grid-row': ("grid-row-end" | "grid-row-start")[];
301
- 'grid-template': ("grid-template-areas" | "grid-template-columns" | "grid-template-rows")[];
302
- inset: ("bottom" | "left" | "right" | "top")[];
303
- 'list-style': ("list-style-image" | "list-style-position" | "list-style-type")[];
304
- 'inset-block': ("inset-block-end" | "inset-block-start")[];
305
- 'inset-inline': ("inset-inline-end" | "inset-inline-start")[];
306
- margin: ("margin-bottom" | "margin-left" | "margin-right" | "margin-top")[];
307
- 'margin-block': ("margin-block-end" | "margin-block-start")[];
308
- 'margin-inline': ("margin-inline-end" | "margin-inline-start")[];
309
- mask: ("mask-clip" | "mask-composite" | "mask-image" | "mask-mode" | "mask-origin" | "mask-position" | "mask-repeat" | "mask-size" | "mask-type")[];
310
- 'mask-border': ("mask-border-mode" | "mask-border-outset" | "mask-border-repeat" | "mask-border-slice" | "mask-border-source" | "mask-border-width")[];
311
- offset: ("offset-anchor" | "offset-distance" | "offset-path" | "offset-position" | "offset-rotate")[];
312
- outline: ("outline-color" | "outline-style" | "outline-width")[];
313
- overflow: ("overflow-x" | "overflow-y")[];
314
- 'overscroll-behavior': ("overscroll-behavior-x" | "overscroll-behavior-y")[];
315
- padding: ("padding-bottom" | "padding-left" | "padding-right" | "padding-top")[];
316
- 'padding-block': ("padding-block-end" | "padding-block-start")[];
317
- 'padding-inline': ("padding-inline-end" | "padding-inline-start")[];
318
- 'place-content': ("align-content" | "justify-content")[];
319
- 'place-items': ("align-items" | "justify-items")[];
320
- 'place-self': ("align-self" | "justify-self")[];
321
- 'scroll-margin': ("scroll-margin-bottom" | "scroll-margin-left" | "scroll-margin-right" | "scroll-margin-top")[];
322
- 'scroll-margin-block': ("scroll-margin-block-end" | "scroll-margin-block-start")[];
323
- 'scroll-margin-inline': ("scroll-margin-inline-end" | "scroll-margin-inline-start")[];
324
- 'scroll-padding': ("scroll-padding-bottom" | "scroll-padding-left" | "scroll-padding-right" | "scroll-padding-top")[];
325
- 'scroll-padding-block': ("scroll-padding-block-end" | "scroll-padding-block-start")[];
326
- 'scroll-padding-inline': ("scroll-padding-inline-end" | "scroll-padding-inline-start")[];
327
- 'scroll-timeline': ("scroll-timeline-axis" | "scroll-timeline-name")[];
328
- 'text-decoration': ("text-decoration-color" | "text-decoration-line" | "text-decoration-style" | "text-decoration-thickness")[];
329
- 'text-emphasis': ("text-emphasis-color" | "text-emphasis-style")[];
330
- transition: ("transition-delay" | "transition-duration" | "transition-property" | "transition-timing-function")[];
331
- };
267
+ declare const mapShorthandToLonghands: Map<"flex" | "grid" | "all" | "border-block-color" | "border-block-style" | "border-block-width" | "border-inline-color" | "border-inline-style" | "border-inline-width" | "border" | "transition" | "font-variant" | "animation" | "background" | "background-position" | "border-block" | "border-block-end" | "border-block-start" | "border-bottom" | "border-color" | "border-image" | "border-inline" | "border-inline-end" | "border-inline-start" | "border-left" | "border-radius" | "border-right" | "border-style" | "border-top" | "border-width" | "column-rule" | "columns" | "contain-intrinsic-size" | "container" | "flex-flow" | "font" | "gap" | "grid-area" | "grid-column" | "grid-row" | "grid-template" | "inset" | "inset-block" | "inset-inline" | "list-style" | "margin" | "margin-block" | "margin-inline" | "mask" | "mask-border" | "offset" | "outline" | "overflow" | "overscroll-behavior" | "padding" | "padding-block" | "padding-inline" | "place-content" | "place-items" | "place-self" | "scroll-margin" | "scroll-margin-block" | "scroll-margin-inline" | "scroll-padding" | "scroll-padding-block" | "scroll-padding-inline" | "scroll-timeline" | "text-decoration" | "text-emphasis", string[]>;
332
268
 
333
- export { type Aliases, ArbitraryValue, type CSSProperties, type CSSProperty, type Config, type DeepReadonly, type DefaultConfig, GridProperty, GridValue, type Theme, type ThemeModes, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, defaultConfig, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, mapShorthandToLonghands, tokenProperty, tokenValue, variantProperty };
269
+ export { type Aliases, ArbitraryValue, type CSSProperties, type CSSProperty, type Config, type DeepReadonly, type DefaultConfig, GridProperty, GridValue, type Theme, type ThemeModes, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, defaultConfig, getArbitrarySelector, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, mapShorthandToLonghands, parseProperty, parsedTokenProperty, parsedVariantProperty, tokenProperty, tokenValue, variantProperty };
package/dist/index.js CHANGED
@@ -171,14 +171,16 @@ var gridValueRegex = /^\d+/;
171
171
  var GridValue = {
172
172
  safeParse: (input) => validate(gridValueRegex, input)
173
173
  };
174
- var charClass = `A-Za-z0-9!#$%&()*+,./:;<=>?@[\\]^_{|}~`;
175
- var tokenPropertyRegex = new RegExp(`(?<!var\\()--[${charClass}]([${charClass}-]+)?`);
174
+ var tokenPropertyRegex = /(?<!var\()--(?:[\w-]+|\{[^\{\}]*\})+/g;
176
175
  var TokenProperty = {
177
176
  safeParse: (input) => validate(tokenPropertyRegex, input)
178
177
  };
179
178
  function tokenProperty(name) {
180
179
  return `--${name}`;
181
180
  }
181
+ function parsedTokenProperty(name) {
182
+ return parseProperty(tokenProperty(name));
183
+ }
182
184
  var variantPropertyRegex = /(?<!var\()--((\w)([\w-]+)_([\w-]+))/;
183
185
  var VariantProperty = {
184
186
  safeParse: (input) => validate(variantPropertyRegex, input)
@@ -186,6 +188,9 @@ var VariantProperty = {
186
188
  function variantProperty(variant, name) {
187
189
  return `--${variant}_${name}`;
188
190
  }
191
+ function parsedVariantProperty(variant, name) {
192
+ return parseProperty(variantProperty(variant, name));
193
+ }
189
194
  var tokenValueRegex = /var\((--([\w-]+)_([\w-]+))\)/;
190
195
  var TokenValue = {
191
196
  safeParse: (input) => validate(tokenValueRegex, input)
@@ -216,24 +221,36 @@ function getTokenPropertyName(property) {
216
221
  const propertyPrefix = tokenProperty("");
217
222
  return property.replace(propertyPrefix, "");
218
223
  }
224
+ var propertySplitRegex = /_(?![^{}]*\])/;
219
225
  function getTokenPropertySplit(property) {
220
226
  const name = getTokenPropertyName(property);
221
- const [alias, ...variants] = name.split("_").reverse();
227
+ const [alias, ...variants] = name.split(propertySplitRegex).reverse();
222
228
  return { alias, variants: variants.reverse() };
223
229
  }
224
230
  function getTokenPropertyParts(tokenProperty2, config) {
225
- var _a, _b, _c;
231
+ var _a;
226
232
  const { alias, variants } = getTokenPropertySplit(tokenProperty2);
227
233
  const [firstVariant, secondVariant] = variants;
228
- const firstSelector = ((_a = config.selectors) == null ? void 0 : _a[firstVariant]) && firstVariant;
229
- const secondSelector = ((_b = config.selectors) == null ? void 0 : _b[secondVariant]) && secondVariant;
230
- const responsive = ((_c = config.responsive) == null ? void 0 : _c[firstVariant]) && firstVariant;
234
+ const firstSelector = getValidSelector(firstVariant, config);
235
+ const secondSelector = getValidSelector(secondVariant, config);
236
+ const responsive = ((_a = config.responsive) == null ? void 0 : _a[firstVariant]) && firstVariant;
231
237
  const selector = firstSelector || secondSelector;
232
238
  const validVariant = [responsive, selector].filter(Boolean).join("_");
233
- if (firstVariant && variantProperty(validVariant, alias) !== tokenProperty2)
239
+ const variantProp = variantProperty(validVariant, alias);
240
+ if (firstVariant && variantProp !== tokenProperty2)
234
241
  return null;
235
242
  return { alias, responsive, selector, variant: validVariant };
236
243
  }
244
+ function getValidSelector(selector, config) {
245
+ var _a;
246
+ if (!selector)
247
+ return;
248
+ return (getArbitrarySelector(selector) || ((_a = config.selectors) == null ? void 0 : _a[selector])) && selector;
249
+ }
250
+ function getArbitrarySelector(selector) {
251
+ const [, arbitrarySelector] = (selector == null ? void 0 : selector.match(/^{(.+)}$/)) || [];
252
+ return arbitrarySelector ? decodeColon(arbitrarySelector) : void 0;
253
+ }
237
254
  function getTokenValueParts(tokenValue2) {
238
255
  const [, property, themeKey, token] = tokenValue2.split(tokenValueRegex);
239
256
  return { property, themeKey, token };
@@ -241,240 +258,92 @@ function getTokenValueParts(tokenValue2) {
241
258
  function getCSSPropertiesForAlias(alias, aliases) {
242
259
  return (aliases == null ? void 0 : aliases[alias]) || [alias];
243
260
  }
261
+ var escapeSpecialCharsRegex = /[&#.:;>~*[\]=,"'()+{}]/g;
262
+ function parseProperty(str, options) {
263
+ const { escapeSpecialChars = true } = options || {};
264
+ const noColon = encodeColon(str);
265
+ if (!escapeSpecialChars)
266
+ return noColon;
267
+ return noColon.replace(escapeSpecialCharsRegex, (match) => `\\${match}`);
268
+ }
269
+ var encodeColon = (str) => str.replace(/:/g, ";");
270
+ var decodeColon = (str) => str.replace(/;/g, ":");
244
271
 
245
272
  // src/shorthands.ts
246
- var mapShorthandToLonghands = {
247
- all: [],
248
- animation: [
249
- "animation-name",
250
- "animation-duration",
251
- "animation-timing-function",
252
- "animation-delay",
253
- "animation-iteration-count",
254
- "animation-direction",
255
- "animation-fill-mode",
256
- "animation-play-state",
257
- "animation-timeline"
258
- ],
259
- background: [
260
- "background-attachment",
261
- "background-clip",
262
- "background-color",
263
- "background-image",
264
- "background-position",
265
- "background-repeat",
266
- "background-size"
267
- ],
268
- "background-position": ["background-position-x", "background-position-y"],
269
- border: [
270
- "border-top",
271
- "border-right",
272
- "border-bottom",
273
- "border-left",
274
- "border-color",
275
- "border-style",
276
- "border-width",
277
- "border-image",
278
- "border-block",
279
- "border-inline"
280
- ],
281
- "border-top": ["border-top-width", "border-top-style", "border-top-color"],
282
- "border-right": ["border-right-width", "border-right-style", "border-right-color"],
283
- "border-bottom": ["border-bottom-width", "border-bottom-style", "border-bottom-color"],
284
- "border-left": ["border-left-width", "border-left-style", "border-left-color"],
285
- "border-color": [
286
- "border-top-color",
287
- "border-right-color",
288
- "border-bottom-color",
289
- "border-left-color"
290
- ],
291
- "border-style": [
292
- "border-top-style",
293
- "border-right-style",
294
- "border-bottom-style",
295
- "border-left-style"
296
- ],
297
- "border-width": [
298
- "border-top-width",
299
- "border-right-width",
300
- "border-bottom-width",
301
- "border-left-width"
302
- ],
303
- "border-image": [
304
- "border-image-source",
305
- "border-image-slice",
306
- "border-image-width",
307
- "border-image-outset",
308
- "border-image-repeat"
309
- ],
310
- "border-radius": [
311
- "border-top-left-radius",
312
- "border-top-right-radius",
313
- "border-bottom-right-radius",
314
- "border-bottom-left-radius"
315
- ],
316
- "border-block": [
317
- "border-block-width",
318
- "border-block-style",
319
- "border-block-color",
320
- "border-block-start",
321
- "border-block-end"
322
- ],
323
- "border-block-width": ["border-block-start-width", "border-block-end-width"],
324
- "border-block-style": ["border-block-start-style", "border-block-end-style"],
325
- "border-block-color": ["border-block-start-color", "border-block-end-color"],
326
- "border-block-start": [
327
- "border-block-start-width",
328
- "border-block-start-style",
329
- "border-block-start-color"
330
- ],
331
- "border-block-end": [
332
- "border-block-end-width",
333
- "border-block-end-style",
334
- "border-block-end-color"
335
- ],
336
- "border-inline": [
337
- "border-inline-width",
338
- "border-inline-style",
339
- "border-inline-color",
340
- "border-inline-start",
341
- "border-inline-end"
342
- ],
343
- "border-inline-width": ["border-inline-start-width", "border-inline-end-width"],
344
- "border-inline-style": ["border-inline-start-style", "border-inline-end-style"],
345
- "border-inline-color": ["border-inline-start-color", "border-inline-end-color"],
346
- "border-inline-start": [
347
- "border-inline-start-width",
348
- "border-inline-start-style",
349
- "border-inline-start-color"
350
- ],
351
- "border-inline-end": [
352
- "border-inline-end-width",
353
- "border-inline-end-style",
354
- "border-inline-end-color"
355
- ],
356
- "column-rule": ["column-rule-width", "column-rule-style", "column-rule-color"],
357
- columns: ["column-width", "column-count"],
358
- container: ["container-name", "container-type"],
359
- "contain-intrinsic-size": ["contain-intrinsic-width", "contain-intrinsic-height"],
360
- flex: ["flex-grow", "flex-shrink", "flex-basis"],
361
- "flex-flow": ["flex-direction", "flex-wrap"],
362
- font: [
363
- "font-style",
364
- "font-variant",
365
- "font-weight",
366
- "font-stretch",
367
- "font-size",
368
- "line-height",
369
- "font-family"
370
- ],
371
- "font-variant": [
372
- "font-variant-alternates",
373
- "font-variant-caps",
374
- "font-variant-east-asian",
375
- "font-variant-emoji",
376
- "font-variant-ligatures",
377
- "font-variant-numeric",
378
- "font-variant-position"
379
- ],
380
- gap: ["row-gap", "column-gap"],
381
- grid: [
382
- "grid-auto-columns",
383
- "grid-auto-flow",
384
- "grid-auto-rows",
385
- "grid-template-areas",
386
- "grid-template-columns",
387
- "grid-template-rows"
388
- ],
389
- "grid-area": ["grid-row-start", "grid-column-start", "grid-row-end", "grid-column-end"],
390
- "grid-column": ["grid-column-start", "grid-column-end"],
391
- "grid-row": ["grid-row-start", "grid-row-end"],
392
- "grid-template": ["grid-template-rows", "grid-template-columns", "grid-template-areas"],
393
- inset: ["top", "right", "bottom", "left"],
394
- "list-style": ["list-style-type", "list-style-position", "list-style-image"],
395
- "inset-block": ["inset-block-start", "inset-block-end"],
396
- "inset-inline": ["inset-inline-start", "inset-inline-end"],
397
- margin: ["margin-top", "margin-right", "margin-bottom", "margin-left"],
398
- "margin-block": ["margin-block-start", "margin-block-end"],
399
- "margin-inline": ["margin-inline-start", "margin-inline-end"],
400
- mask: [
401
- "mask-image",
402
- "mask-mode",
403
- "mask-position",
404
- "mask-size",
405
- "mask-repeat",
406
- "mask-origin",
407
- "mask-clip",
408
- "mask-composite",
409
- "mask-type"
410
- ],
411
- "mask-border": [
412
- "mask-border-mode",
413
- "mask-border-outset",
414
- "mask-border-repeat",
415
- "mask-border-slice",
416
- "mask-border-source",
417
- "mask-border-width"
418
- ],
419
- offset: ["offset-position", "offset-path", "offset-distance", "offset-anchor", "offset-rotate"],
420
- outline: ["outline-color", "outline-style", "outline-width"],
421
- overflow: ["overflow-x", "overflow-y"],
422
- "overscroll-behavior": ["overscroll-behavior-x", "overscroll-behavior-y"],
423
- padding: ["padding-top", "padding-right", "padding-bottom", "padding-left"],
424
- "padding-block": ["padding-block-start", "padding-block-end"],
425
- "padding-inline": ["padding-inline-start", "padding-inline-end"],
426
- "place-content": ["align-content", "justify-content"],
427
- "place-items": ["align-items", "justify-items"],
428
- "place-self": ["align-self", "justify-self"],
429
- "scroll-margin": [
430
- "scroll-margin-top",
431
- "scroll-margin-right",
432
- "scroll-margin-bottom",
433
- "scroll-margin-left"
434
- ],
435
- "scroll-margin-block": ["scroll-margin-block-start", "scroll-margin-block-end"],
436
- "scroll-margin-inline": ["scroll-margin-inline-start", "scroll-margin-inline-end"],
437
- "scroll-padding": [
438
- "scroll-padding-top",
439
- "scroll-padding-right",
440
- "scroll-padding-bottom",
441
- "scroll-padding-left"
442
- ],
443
- "scroll-padding-block": ["scroll-padding-block-start", "scroll-padding-block-end"],
444
- "scroll-padding-inline": ["scroll-padding-inline-start", "scroll-padding-inline-end"],
445
- "scroll-timeline": ["scroll-timeline-name", "scroll-timeline-axis"],
446
- "text-decoration": [
447
- "text-decoration-line",
448
- "text-decoration-style",
449
- "text-decoration-color",
450
- "text-decoration-thickness"
451
- ],
452
- "text-emphasis": ["text-emphasis-style", "text-emphasis-color"],
453
- transition: [
454
- "transition-delay",
455
- "transition-duration",
456
- "transition-property",
457
- "transition-timing-function"
458
- ]
459
- };
460
- export {
461
- ArbitraryValue,
462
- GridProperty,
463
- GridValue,
464
- TokenProperty,
465
- TokenValue,
466
- VariantProperty,
467
- arbitraryValue,
468
- createConfig,
469
- defaultConfig,
470
- getCSSPropertiesForAlias,
471
- getTokenPropertyName,
472
- getTokenPropertyParts,
473
- getTokenPropertySplit,
474
- getTokenValueParts,
475
- gridProperty,
476
- mapShorthandToLonghands,
477
- tokenProperty,
478
- tokenValue,
479
- variantProperty
480
- };
273
+ var shorthandsToLonghands = [
274
+ ["all", []],
275
+ ["animation", ["&-name", "&-duration", "&-timing-function", "&-delay", "&-iteration-count", "&-direction", "&-fill-mode", "&-play-state", "&-timeline"]],
276
+ ["background", ["&-attachment", "&-clip", "&-color", "&-image", "&-position", "&-repeat", "&-size"]],
277
+ ["background-position", ["&-x", "&-y"]],
278
+ ["border", ["&-top", "&-right", "&-bottom", "&-left", "&-color", "&-style", "&-width", "&-image", "&-block", "&-inline"]],
279
+ ["border-top", ["&-width", "&-style", "&-color"]],
280
+ ["border-right", ["&-width", "&-style", "&-color"]],
281
+ ["border-bottom", ["&-width", "&-style", "&-color"]],
282
+ ["border-left", ["&-width", "&-style", "&-color"]],
283
+ ["border-color", ["border-top-color", "border-right-color", "border-bottom-color", "border-left-color"]],
284
+ ["border-style", ["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"]],
285
+ ["border-width", ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width"]],
286
+ ["border-image", ["&-source", "&-slice", "&-width", "&-outset", "&-repeat"]],
287
+ ["border-radius", ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius"]],
288
+ ["border-block", ["&-width", "&-style", "&-color", "&-start", "&-end"]],
289
+ ["border-block-width", ["border-block-start-width", "border-block-end-width"]],
290
+ ["border-block-style", ["border-block-start-style", "border-block-end-style"]],
291
+ ["border-block-color", ["border-block-start-color", "border-block-end-color"]],
292
+ ["border-block-start", ["&-width", "&-style", "&-color"]],
293
+ ["border-block-end", ["&-width", "&-style", "&-color"]],
294
+ ["border-inline", ["&-width", "&-style", "&-color", "&-start", "&-end"]],
295
+ ["border-inline-width", ["border-inline-start-width", "border-inline-end-width"]],
296
+ ["border-inline-style", ["border-inline-start-style", "border-inline-end-style"]],
297
+ ["border-inline-color", ["border-inline-start-color", "border-inline-end-color"]],
298
+ ["border-inline-start", ["&-width", "&-style", "&-color"]],
299
+ ["border-inline-end", ["&-width", "&-style", "&-color"]],
300
+ ["column-rule", ["&-width", "&-style", "&-color"]],
301
+ ["columns", ["column-width", "column-count"]],
302
+ ["container", ["&-name", "&-type"]],
303
+ ["contain-intrinsic-size", ["contain-intrinsic-width", "contain-intrinsic-height"]],
304
+ ["flex", ["&-grow", "&-shrink", "&-basis"]],
305
+ ["flex-flow", ["flex-direction", "flex-wrap"]],
306
+ ["font", ["&-style", "&-variant", "&-weight", "&-stretch", "&-size", "line-height", "&-family"]],
307
+ ["font-variant", ["&-alternates", "&-caps", "&-east-asian", "&-emoji", "&-ligatures", "&-numeric", "&-position"]],
308
+ ["gap", ["row-gap", "column-gap"]],
309
+ ["grid", ["&-auto-columns", "&-auto-flow", "&-auto-rows", "&-template-areas", "&-template-columns", "&-template-rows"]],
310
+ ["grid-area", ["grid-row-start", "grid-column-start", "grid-row-end", "grid-column-end"]],
311
+ ["grid-column", ["&-start", "&-end"]],
312
+ ["grid-row", ["&-start", "&-end"]],
313
+ ["grid-template", ["&-rows", "&-columns", "&-areas"]],
314
+ ["inset", ["top", "right", "bottom", "left"]],
315
+ ["list-style", ["&-type", "&-position", "&-image"]],
316
+ ["inset-block", ["&-start", "&-end"]],
317
+ ["inset-inline", ["&-start", "&-end"]],
318
+ ["margin", ["&-top", "&-right", "&-bottom", "&-left"]],
319
+ ["margin-block", ["&-start", "&-end"]],
320
+ ["margin-inline", ["&-start", "&-end"]],
321
+ ["mask", ["&-image", "&-mode", "&-position", "&-size", "&-repeat", "&-origin", "&-clip", "&-composite", "&-type"]],
322
+ ["mask-border", ["&-mode", "&-outset", "&-repeat", "&-slice", "&-source", "&-width"]],
323
+ ["offset", ["&-position", "&-path", "&-distance", "&-anchor", "&-rotate"]],
324
+ ["outline", ["&-color", "&-style", "&-width"]],
325
+ ["overflow", ["&-x", "&-y"]],
326
+ ["overscroll-behavior", ["&-x", "&-y"]],
327
+ ["padding", ["&-top", "&-right", "&-bottom", "&-left"]],
328
+ ["padding-block", ["&-start", "&-end"]],
329
+ ["padding-inline", ["&-start", "&-end"]],
330
+ ["place-content", ["align-content", "justify-content"]],
331
+ ["place-items", ["align-items", "justify-items"]],
332
+ ["place-self", ["align-self", "justify-self"]],
333
+ ["scroll-margin", ["&-top", "&-right", "&-bottom", "&-left"]],
334
+ ["scroll-margin-block", ["&-start", "&-end"]],
335
+ ["scroll-margin-inline", ["&-start", "&-end"]],
336
+ ["scroll-padding", ["&-top", "&-right", "&-bottom", "&-left"]],
337
+ ["scroll-padding-block", ["&-start", "&-end"]],
338
+ ["scroll-padding-inline", ["&-start", "&-end"]],
339
+ ["scroll-timeline", ["&-name", "&-axis"]],
340
+ ["text-decoration", ["&-line", "&-style", "&-color", "&-thickness"]],
341
+ ["text-emphasis", ["&-style", "&-color"]],
342
+ ["transition", ["&-delay", "&-duration", "&-property", "&-timing-function"]]
343
+ ];
344
+ var replacedAmpersands = shorthandsToLonghands.map(
345
+ ([key, values]) => [key, values.map((value) => value.replace("&", key))]
346
+ );
347
+ var mapShorthandToLonghands = new Map(replacedAmpersands);
348
+
349
+ export { ArbitraryValue, GridProperty, GridValue, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, defaultConfig, getArbitrarySelector, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, mapShorthandToLonghands, parseProperty, parsedTokenProperty, parsedVariantProperty, tokenProperty, tokenValue, variantProperty };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tokenami/config",
3
- "version": "0.0.51",
3
+ "version": "0.0.53",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -24,14 +24,14 @@
24
24
  "dist"
25
25
  ],
26
26
  "scripts": {
27
- "build": "tsup src/index.ts --format=esm,cjs --dts",
27
+ "build": "tsup",
28
28
  "typecheck": "tsc --noEmit",
29
- "typecheck:ci": "pnpm typecheck"
29
+ "typecheck:ci": "tsc --noEmit"
30
30
  },
31
31
  "devDependencies": {
32
32
  "csstype": "^3.1.2",
33
33
  "tsup": "^7.0.0",
34
34
  "typescript": "^5.1.3"
35
35
  },
36
- "gitHead": "036480fda66fa088d822d7c07efdbf676bd3d395"
36
+ "gitHead": "7b292164afcd54fe34906e099682ddc294d0f535"
37
37
  }