tokenami 0.0.90 → 0.0.91

package/dist/cli.js

@@ -665,7 +665,6 @@ function debug(str) {
 var UNUSED_LAYERS_REGEX = /[\n\s]*@layer[^;{]+;/g;
 var DEFAULT_SELECTOR = "[style]";
 var CUSTOM_PROP_PREFIX = "--_";
-var SELECTOR_TAG = "<selector>";
 var LAYERS = {
   BASE: "tk",
   LOGICAL: "tkl",
@@ -692,114 +691,257 @@ function generate(params) {
 }
 function createSheet(params) {
   if (!params.tokens.properties.length) return "";
-  const tokenProperties = params.tokens.properties;
-  const tokenValues = params.tokens.values;
+  const sheet = new Sheet(params.tokens.values, params.config);
   const composeBlocks = parseComposeBlocks(params.tokens.composeBlocks, params.config);
-  const propertyConfigsByCSSProperty = getPropertyConfigs(tokenProperties, params.config);
-  let themeTokenSelectors = [];
-  const styles = {
-    reset: /* @__PURE__ */ new Set(),
-    atomic: {},
-    selectors: {},
-    components: {},
-    toggles: {}
-  };
-  for (const [cssProperty, configs] of propertyConfigsByCSSProperty) {
+  const propertyConfigsByCSSProperty = getPropertyConfigs(params.tokens.properties, params.config);
+  for (const [cssProperty, propertyConfigs] of propertyConfigsByCSSProperty) {
     const isInheritable = inheritedProperties.has(cssProperty);
-    const elementConfigs = configs.filter((c) => {
-      const selectorConfig = getPropertyConfigSelector(c.selector, params.config);
+    const elementConfigs = propertyConfigs.filter((c) => {
+      const selectorConfig = getSelectorFromConfig(c.selector, params.config);
       return !selectorConfig.some(isPseudoElementSelector);
     });
-    for (const prop of configs) {
-      const toggleKey = prop.responsive || prop.selector;
-      const propertyPrefix = prop.isCustom ? CUSTOM_PROP_PREFIX : "";
-      const gridToggle = prop.isGrid ? getGridPropertyToggle(prop.tokenProperty) : "";
-      const selectors = getPropertySelectors(composeBlocks, prop, params.config);
-      themeTokenSelectors.push(...selectors.base.map(removePseudoElementSelector));
-      if (prop.variant && toggleKey) {
-        const responsive = getResponsiveSelectorFromConfig(prop.responsive, params.config);
-        const selectorConfig = getPropertyConfigSelector(prop.selector, params.config);
-        const hasChildSelector = selectorConfig.some(isChildSelector);
-        const propertyConfigs = selectorConfig.some(isPseudoElementSelector) ? configs.filter((c) => c.selector === prop.selector) : elementConfigs;
-        const declarationValue = createVariantValue(cssProperty, prop, propertyConfigs);
+    for (const prop of propertyConfigs) {
+      const baseProperty = prop.isCustom ? CUSTOM_PROP_PREFIX + cssProperty : cssProperty;
+      const gridProperty3 = hashVariantProperty("grid", prop.tokenProperty);
+      const gridToggleValue = createGridToggleValue(prop.tokenProperty);
+      const selectorConfig = getSelectorFromConfig(prop.selector, params.config);
+      const parsedSelectors = getPropertySelectors(composeBlocks, prop, selectorConfig);
+      const configs = selectorConfig.some(isPseudoElementSelector) ? propertyConfigs.filter((c) => c.selector === prop.selector) : elementConfigs;
+      sheet.addThemeTokenSelectors(parsedSelectors.elements);
+      if (!isInheritable && !selectorConfig.some(isChildSelector)) {
+        sheet.addReset(prop.tokenProperty);
+      }
+      if (prop.variant) {
+        const responsiveConfig = getResponsiveSelectorFromConfig(prop.responsive, params.config);
         const hashedProperty = hashVariantProperty(prop.variant, cssProperty);
-        const basePropertyValue = getBasePropertyValue(prop.tokenProperty, prop, false);
         const toggleProperty = Tokenami2.parsedTokenProperty(prop.variant);
-        const declaration = `${propertyPrefix}${cssProperty}: ${declarationValue};`;
-        const toggleDeclaration = `${hashedProperty}: var(${toggleProperty}) ${basePropertyValue};`;
-        const toggleTemplate = `@layer ${prop.layer} {${SELECTOR_TAG} { ${toggleDeclaration} }}`;
-        const gridToggleTemplate = `@layer ${prop.layer} {${SELECTOR_TAG} { ${gridToggle} }}`;
-        const template = `@layer ${prop.layer} {${SELECTOR_TAG} { ${declaration} }}`;
-        styles.reset.add(`${toggleProperty}: initial;`);
-        styles.reset.add(`${hashedProperty}: initial;`);
-        if (!isInheritable && !hasChildSelector) {
-          styles.reset.add(`${prop.tokenProperty}: initial;`);
-        }
-        styles.selectors[template] ??= /* @__PURE__ */ new Set();
-        styles.selectors[toggleTemplate] ??= /* @__PURE__ */ new Set();
-        styles.selectors[gridToggleTemplate] ??= /* @__PURE__ */ new Set();
-        for (const selector of selectors.base) {
-          const elemSelector = removePseudoElementSelector(selector);
-          styles.selectors[template].add(prop.isCustom ? elemSelector : selector);
-          styles.selectors[toggleTemplate].add(elemSelector);
-          styles.selectors[gridToggleTemplate].add(elemSelector);
+        const variantValue = createVariantValue(cssProperty, prop, configs);
+        const variantToggleValue = prop.isGrid ? createGridVariantToggleValue(toggleProperty, prop.tokenProperty) : createVariantToggleValue(toggleProperty, prop.tokenProperty);
+        sheet.addReset(toggleProperty);
+        sheet.addReset(hashedProperty);
+        for (const selector of parsedSelectors.all) {
+          sheet.addToggleFlagDeclaration(responsiveConfig, selector, toggleProperty);
         }
-        for (const selector of selectors.all) {
-          const toggle = createToggleDeclaration(responsive, selector, toggleProperty);
-          styles.toggles[toggleKey] ??= /* @__PURE__ */ new Set();
-          styles.toggles[toggleKey].add(toggle);
+        for (const selector of parsedSelectors.elements) {
+          const pseudoOwnerSelector = removePseudoElementSelector(selector);
+          const baseSelector = prop.isCustom ? pseudoOwnerSelector : selector;
+          sheet.addDeclaration(prop.layer, baseSelector, baseProperty, variantValue);
+          sheet.addDeclaration(prop.layer, pseudoOwnerSelector, hashedProperty, variantToggleValue);
+          if (prop.isGrid) {
+            sheet.addDeclaration(prop.layer, pseudoOwnerSelector, gridProperty3, gridToggleValue);
+          }
         }
       } else {
-        const propertyValue = getBasePropertyValue(prop.tokenProperty, prop);
-        const declaration = `${propertyPrefix}${cssProperty}: ${propertyValue};`;
-        const template = `@layer ${prop.layer} {${SELECTOR_TAG} { ${declaration} ${gridToggle} }}`;
-        if (!isInheritable) styles.reset.add(`${prop.tokenProperty}: initial;`);
-        styles.atomic[template] ??= /* @__PURE__ */ new Set();
-        for (const selector of selectors.base) {
-          styles.atomic[template].add(selector);
+        const propertyValue = prop.isGrid ? createGridPropertyValue(prop.tokenProperty, "revert-layer") : createBasePropertyValue(prop.tokenProperty, "revert-layer");
+        for (const selector of parsedSelectors.elements) {
+          sheet.addDeclaration(prop.layer, selector, baseProperty, propertyValue);
+          if (prop.isGrid) {
+            sheet.addDeclaration(prop.layer, selector, gridProperty3, gridToggleValue);
+          }
         }
       }
     }
   }
-  for (const [selector, tokenamiProperties] of Object.entries(composeBlocks)) {
-    for (let [key, value] of Object.entries(tokenamiProperties)) {
-      const atomicPair = `${key}: ${value};`;
-      styles.components[atomicPair] ??= /* @__PURE__ */ new Set();
-      styles.components[atomicPair].add(selector);
+  const composeEntries = Object.entries(composeBlocks);
+  for (const [selector, tokenamiProperties] of composeEntries) {
+    const propertyEntries = Object.entries(tokenamiProperties);
+    for (let [key, value] of propertyEntries) {
+      sheet.addDeclaration(LAYERS.COMPONENTS, selector, key, value);
     }
   }
-  const composeStyles = Object.entries(styles.components).map(([atomicPair, blocks]) => {
-    return `@layer ${LAYERS.COMPONENTS} { ${Array.from(blocks)} { ${atomicPair} } }`;
-  });
-  return `
-    @layer global {
-      ${params.config.globalStyles ? stringify(params.config.globalStyles) : ""}
+  return sheet.toString();
+}
+var SELECTOR_TAG = "<selector>";
+var CUSTOM_PROP_REGEX = /\(--[^-][\w-]+/g;
+var Sheet = class {
+  config;
+  tokenValues;
+  themeTokenSelectors = [];
+  reset = /* @__PURE__ */ new Set();
+  toggles = {};
+  layers = {};
+  constructor(tokenValues, config) {
+    this.tokenValues = tokenValues;
+    this.config = config;
+  }
+  addReset(property) {
+    this.reset.add(`${property}: initial;`);
+  }
+  addThemeTokenSelectors(baseSelectors) {
+    this.themeTokenSelectors.push(...baseSelectors.map(removePseudoElementSelector));
+  }
+  addDeclaration(layer, selector, property, value) {
+    const declaration = `${property}: ${value}`;
+    const template = `@layer ${layer} { ${SELECTOR_TAG} { ${declaration} } }`;
+    this.layers[template] ??= /* @__PURE__ */ new Set();
+    this.layers[template].add(selector);
+  }
+  addToggleFlagDeclaration(responsiveConfig, selector, toggleProperty) {
+    let toggle = `${toggleProperty}: ;`;
+    const toggleKey = responsiveConfig || selector.join();
+    const responsiveSelectors = [responsiveConfig, ...selector].reverse();
+    for (const selector2 of responsiveSelectors) {
+      if (!selector2) continue;
+      const elemSelector = removePseudoElementSelector(selector2);
+      toggle = `${elemSelector} { ${toggle} }`;
     }
-
-    @layer tkb {
-      ${generateKeyframeRules(tokenValues, params.config)}
-      ${generateThemeTokens(tokenValues, unique(themeTokenSelectors), params.config)}
-      * { ${Array.from(styles.reset).join(" ")} }
-
-      ${Object.values(styles.toggles).flatMap((set) => Array.from(set)).join(" ")}
+    this.toggles[toggleKey] ??= /* @__PURE__ */ new Set();
+    this.toggles[toggleKey].add(toggle);
+  }
+  #generateGlobalStyles() {
+    if (!this.config.globalStyles) return "";
+    return `@layer global { ${stringify(this.config.globalStyles)} }`;
+  }
+  #generateTokenamiResets() {
+    const themeTokenSelectors = unique(this.themeTokenSelectors);
+    return `
+      @layer tkb {
+        ${this.#generateKeyframeRules()}
+        ${this.#generateThemeTokens(themeTokenSelectors)}
+        * { ${Array.from(this.reset).join(" ")} }
+        ${Object.values(this.toggles).flatMap((set) => Array.from(set)).join(" ")}
+      }
+    `;
+  }
+  #generatePlaceholderLayers(prefix) {
+    return `@layer ${Array.from({ length: 20 }).map((_, layer) => `${prefix}${layer}`).join(", ")};`;
+  }
+  #generateLayerStyles() {
+    const entries = Object.entries(this.layers);
+    const groupedBySelectors = /* @__PURE__ */ new Map();
+    for (const [template, selectors] of entries) {
+      const { pseudoElements, otherSelectors } = this.#separateSelectors(selectors);
+      if (otherSelectors.length > 0) {
+        const groupedSelector = otherSelectors.sort().join(",");
+        const existingStyles = groupedBySelectors.get(groupedSelector) || "";
+        const newStyles = template.replace(SELECTOR_TAG, groupedSelector);
+        groupedBySelectors.set(groupedSelector, existingStyles + " " + newStyles);
+      }
+      for (const pseudoElement of pseudoElements) {
+        const existingStyles = groupedBySelectors.get(pseudoElement) || "";
+        const newStyles = template.replace(SELECTOR_TAG, pseudoElement);
+        groupedBySelectors.set(pseudoElement, existingStyles + " " + newStyles);
+      }
     }
-
-    ${generatePlaceholderLayers(LAYERS.BASE)}
-    ${generatePlaceholderLayers(LAYERS.LOGICAL)}
-    ${generatePlaceholderLayers(LAYERS.SELECTORS)}
-    ${generatePlaceholderLayers(LAYERS.SELECTORS_LOGICAL)}
-    ${generatePlaceholderLayers(LAYERS.COMPONENTS)}
-    ${generateLayerStyles(styles.atomic)}
-    ${generateLayerStyles(styles.selectors)}
-
-    ${composeStyles.join(" ")}
-  `;
-}
+    return Array.from(groupedBySelectors.values()).join(" ");
+  }
+  #separateSelectors(selectors) {
+    const pseudoElements = [];
+    const otherSelectors = [];
+    for (const selector of selectors) {
+      if (isPseudoElementSelector(selector)) {
+        pseudoElements.push(selector);
+      } else {
+        otherSelectors.push(selector);
+      }
+    }
+    return { pseudoElements, otherSelectors };
+  }
+  #generateKeyframeRules() {
+    const themeValues = this.tokenValues.flatMap((tokenValue2) => {
+      return Object.values(getThemeValuesByThemeMode(tokenValue2, this.config.theme));
+    });
+    const rules = Object.entries(this.config.keyframes || {}).flatMap(([name, styles]) => {
+      const nameRegex = new RegExp(`\\b${name}\\b`);
+      const isUsingKeyframeName = themeValues.some((value) => nameRegex.test(value));
+      if (!isUsingKeyframeName) return [];
+      return [[`@keyframes ${name} { ${stringify(styles)} }`]];
+    });
+    return rules.join(" ");
+  }
+  #generateThemeTokens(styleSelector) {
+    const theme = getThemeFromConfig(this.config.theme);
+    const rootSelector = this.config.themeSelector("root");
+    const gridStyles = `${rootSelector} { ${Tokenami2.gridProperty()}: ${this.config.grid}; }`;
+    const rootStyles = this.#getThemeStyles(styleSelector, rootSelector, theme.root);
+    const themeToModes = {};
+    const modeEntries = Object.entries(theme.modes || {});
+    for (const [mode, theme2] of modeEntries) {
+      const themeKey = JSON.stringify(theme2);
+      if (themeKey in themeToModes) themeToModes[themeKey].push(mode);
+      else themeToModes[themeKey] = [mode];
+    }
+    const modeStyles = Object.entries(themeToModes).map(([theme2, modes]) => {
+      const selector = modes.map(this.config.themeSelector).join(", ");
+      return this.#getThemeStyles(styleSelector, selector, JSON.parse(theme2));
+    });
+    const themeTokens = [gridStyles, rootStyles, modeStyles.join(" ")];
+    return themeTokens.join(" ");
+  }
+  #getThemeStyles(styleSelector, selector, theme) {
+    const themeValues = getThemeValuesByTokenValues(this.tokenValues, theme);
+    const customPropertyThemeValues = this.#getCustomPropertyThemeValues(themeValues);
+    const customPropertyThemeKeys = Object.keys(customPropertyThemeValues);
+    const selectors = [selector].flat();
+    const elementSelector = selectors.at(-1);
+    const parentSelectors = selectors.slice(0, -1);
+    const elementThemeStyles = this.#getElementThemeStyles(
+      styleSelector,
+      elementSelector,
+      customPropertyThemeValues
+    );
+    for (const customKey of customPropertyThemeKeys) {
+      delete themeValues[customKey];
+    }
+    const themeStyles = selectors.reduceRight(
+      (declaration, selector2) => `${selector2} { ${declaration} }`,
+      stringify(themeValues)
+    );
+    const customPropertyThemeStyles = parentSelectors.reduceRight(
+      (declaration, selector2) => `${selector2} { ${declaration} }`,
+      elementThemeStyles
+    );
+    return themeStyles + " " + customPropertyThemeStyles;
+  }
+  #getCustomPropertyThemeValues(themeValues) {
+    const entries = Object.entries(themeValues).flatMap(([key, value]) => {
+      const valueWithCustomPrefixes = this.#getPrefixedCustomPropertyValues(value);
+      return valueWithCustomPrefixes ? [[key, valueWithCustomPrefixes]] : [];
+    });
+    return Object.fromEntries(entries);
+  }
+  #getPrefixedCustomPropertyValues(themeValue) {
+    const variables = themeValue.match(CUSTOM_PROP_REGEX);
+    if (!variables) return null;
+    return themeValue.replace(CUSTOM_PROP_REGEX, (m) => {
+      const match = m.replace("(", "");
+      const tokenProperty3 = Tokenami2.TokenProperty.safeParse(match);
+      if (!tokenProperty3.success) return m;
+      const parts = Tokenami2.getTokenPropertySplit(tokenProperty3.output);
+      const isCustom = Boolean(this.config.customProperties?.[parts.alias]);
+      if (!isCustom) return m;
+      const tokenPrefix = Tokenami2.tokenProperty("");
+      const customPrefixTokenValue = tokenProperty3.output.replace(tokenPrefix, CUSTOM_PROP_PREFIX);
+      return "(" + customPrefixTokenValue;
+    });
+  }
+  #getElementThemeStyles(styleSelector, selector, themeValues) {
+    const splitGroups = selector.split(",");
+    const themeStyles = splitGroups.map((selector2) => {
+      const elemSelector = [styleSelector].flat().map((s) => `${selector2} ${s}`);
+      return `${selector2}, ${elemSelector} { ${stringify(themeValues)} }`;
+    });
+    return themeStyles.join(" ");
+  }
+  toString() {
+    return `
+      ${this.#generateGlobalStyles()}
+      ${this.#generateTokenamiResets()}
+      ${this.#generatePlaceholderLayers(LAYERS.BASE)}
+      ${this.#generatePlaceholderLayers(LAYERS.LOGICAL)}
+      ${this.#generatePlaceholderLayers(LAYERS.SELECTORS)}
+      ${this.#generatePlaceholderLayers(LAYERS.SELECTORS_LOGICAL)}
+      ${this.#generatePlaceholderLayers(LAYERS.COMPONENTS)}
+      ${this.#generateLayerStyles()}
+    `;
+  }
+};
 function parseComposeBlocks(composeBlocks, config) {
   let parsedComposeBlocks = {};
-  for (const [selector, tokenamiProperties] of Object.entries(composeBlocks)) {
-    const entries = Object.entries(tokenamiProperties);
-    const aliasProperties = Tokenami2.iterateAliasProperties(entries, config);
+  const entries = Object.entries(composeBlocks);
+  for (const [selector, tokenamiProperties] of entries) {
+    const entries2 = Object.entries(tokenamiProperties);
+    const aliasProperties = Tokenami2.iterateAliasProperties(entries2, config);
     let styles = {};
     for (let [key, value, propertyConfig] of aliasProperties) {
       const tokenProperty3 = key;
@@ -815,21 +957,22 @@ function parseComposeBlocks(composeBlocks, config) {
   }
   return parsedComposeBlocks;
 }
-function getPropertySelectors(composeBlocks, prop, config) {
+function getPropertySelectors(composeBlocks, prop, selectorConfig) {
   let selectors = [];
-  const selectorConfig = getPropertyConfigSelector(prop.selector, config);
   const baseSelectors = getBaseSelectors(composeBlocks, prop.tokenProperty);
   const elemSelector = selectorConfig.find(isElementSelector);
   if (elemSelector) {
     const parsedSelectors = getParsedSelectors(prop.selector, [elemSelector], baseSelectors);
-    if (elemSelector === "&") selectors.push(...parsedSelectors.flat());
     selectors.push(...parsedSelectors.flat());
   } else {
     selectors.push(...baseSelectors);
   }
+  const elementSelectors = unique(selectors).map((selector) => {
+    return isPseudoElementSelector(selector) ? selector : selector.replace(/:[^ ]+$/, "");
+  });
   return {
-    base: unique(selectors),
-    all: getParsedSelectors(prop.selector, selectorConfig, baseSelectors)
+    all: getParsedSelectors(prop.selector, selectorConfig, baseSelectors),
+    elements: elementSelectors
   };
 }
 function getBaseSelectors(composeBlocks, property) {
@@ -838,8 +981,17 @@ function getBaseSelectors(composeBlocks, property) {
   });
   return [DEFAULT_SELECTOR, ...composeSelectors];
 }
+function createBasePropertyValue(property, fallback) {
+  return `var(${property}${fallback ? ", " + fallback : ""})`;
+}
+function createGridPropertyValue(property, fallback) {
+  const hashGridProperty = hashVariantProperty("grid", property);
+  const baseProperty = createBasePropertyValue(property, fallback);
+  return `var(${hashGridProperty}, ${baseProperty})`;
+}
 function createVariantValue(cssProperty, prop, propertyConfigs) {
-  let variantValue = "revert-layer";
+  const customPropertyFallback = `var(${Tokenami2.tokenProperty(cssProperty)})`;
+  let variantValue = prop.isCustom ? customPropertyFallback : "revert-layer";
   const seen = /* @__PURE__ */ new Set();
   for (const propertyConfig of propertyConfigs) {
     if (!propertyConfig.variant) continue;
@@ -848,62 +1000,19 @@ function createVariantValue(cssProperty, prop, propertyConfigs) {
     variantValue = `var(${hashedProperty}, ${variantValue})`;
     seen.add(propertyConfig.variant);
   }
-  const customPropertyFallback = `var(${Tokenami2.tokenProperty(cssProperty)})`;
-  const customPropertyValue = variantValue.replace("revert-layer", customPropertyFallback);
-  return prop.isCustom ? customPropertyValue : variantValue;
-}
-function createToggleDeclaration(responsiveSelector, selector, toggleProperty) {
-  let toggle = `${toggleProperty}: ;`;
-  const responsiveSelectors = [responsiveSelector, ...selector].reverse();
-  for (const selector2 of responsiveSelectors) {
-    if (!selector2) continue;
-    const elemSelector = removePseudoElementSelector(selector2);
-    toggle = `${elemSelector} { ${toggle} }`;
-  }
-  return toggle;
+  return variantValue;
 }
-function getGridPropertyToggle(property) {
-  const hashGridProperty = hashVariantProperty("grid", property);
+function createGridToggleValue(property) {
   const gridProperty3 = Tokenami2.gridProperty();
-  return `${hashGridProperty}: var(${property}__calc) calc(var(${property}) * var(${gridProperty3}));`;
-}
-function getBasePropertyValue(property, config, revert = true) {
-  const hashGridProperty = hashVariantProperty("grid", property);
-  const baseProperty = `var(${property}${revert ? ", revert-layer" : ""})`;
-  return config.isGrid ? `var(${hashGridProperty}, ${baseProperty})` : baseProperty;
+  return `var(${property}__calc) calc(var(${property}) * var(${gridProperty3}))`;
 }
-function generatePlaceholderLayers(prefix) {
-  return `@layer ${Array.from({ length: 20 }).map((_, layer) => `${prefix}${layer}`).join(", ")};`;
+function createVariantToggleValue(toggleProperty, tokenProperty3) {
+  const basePropertyValue = createBasePropertyValue(tokenProperty3);
+  return `var(${toggleProperty}) ${basePropertyValue};`;
 }
-function generateLayerStyles(styles) {
-  const groupedBySelectors = /* @__PURE__ */ new Map();
-  for (const [template, selectors] of Object.entries(styles)) {
-    const { pseudoElements, otherSelectors } = separateSelectors(selectors);
-    if (otherSelectors.length > 0) {
-      const groupedSelector = otherSelectors.sort().join(",");
-      const existingStyles = groupedBySelectors.get(groupedSelector) || "";
-      const newStyles = template.replace(SELECTOR_TAG, groupedSelector);
-      groupedBySelectors.set(groupedSelector, existingStyles + " " + newStyles);
-    }
-    for (const pseudoElement of pseudoElements) {
-      const existingStyles = groupedBySelectors.get(pseudoElement) || "";
-      const newStyles = template.replace(SELECTOR_TAG, pseudoElement);
-      groupedBySelectors.set(pseudoElement, existingStyles + " " + newStyles);
-    }
-  }
-  return Array.from(groupedBySelectors.values()).join(" ");
-}
-function separateSelectors(selectors) {
-  const pseudoElements = [];
-  const otherSelectors = [];
-  for (const selector of selectors) {
-    if (isPseudoElementSelector(selector)) {
-      pseudoElements.push(selector);
-    } else {
-      otherSelectors.push(selector);
-    }
-  }
-  return { pseudoElements, otherSelectors };
+function createGridVariantToggleValue(toggleProperty, tokenProperty3) {
+  const basePropertyValue = createGridPropertyValue(tokenProperty3);
+  return `var(${toggleProperty}) ${basePropertyValue};`;
 }
 function getPropertyConfigs(tokenProperties, config) {
   let propertyConfigs = /* @__PURE__ */ new Map();
@@ -915,7 +1024,7 @@ function getPropertyConfigs(tokenProperties, config) {
     const selectorOrder = parts.selector ? 2 : 0;
     const order = responsiveOrder + selectorOrder;
     for (const cssProperty of properties) {
-      const layerIndex = getAtomicLayerIndex(cssProperty, config);
+      const layerIndex = getPropertyLayerIndex(cssProperty, config);
       if (layerIndex === -1) continue;
       const longhandProperty = Tokenami2.createLonghandProperty(property, cssProperty);
       const tokenProperty3 = Tokenami2.parseProperty(longhandProperty);
@@ -933,100 +1042,17 @@ function getPropertyConfigs(tokenProperties, config) {
   }
   return propertyConfigs;
 }
-var SHORTHAND_TO_LONGHAND_ENTRIES = [...Tokenami2.mapShorthandToLonghands.entries()];
-function getAtomicLayerIndex(cssProperty, config) {
+var SHORTHAND_TO_LONGHAND_ENTRIES = Array.from(Tokenami2.mapShorthandToLonghands.entries());
+function getPropertyLayerIndex(cssProperty, config) {
   const validProperties = getValidProperties(config);
   const isSupported = validProperties.has(cssProperty);
   const initialDepth = isSupported ? 1 : -1;
   if (cssProperty === "all") return 0;
   return SHORTHAND_TO_LONGHAND_ENTRIES.reduce((depth, [shorthand, longhands]) => {
     const isLonghand = longhands.includes(cssProperty);
-    return isLonghand ? depth + getAtomicLayerIndex(shorthand, config) : depth;
+    return isLonghand ? depth + getPropertyLayerIndex(shorthand, config) : depth;
   }, initialDepth);
 }
-function generateKeyframeRules(tokenValues, config) {
-  const themeValues = tokenValues.flatMap((tokenValue2) => {
-    return Object.values(getThemeValuesByThemeMode(tokenValue2, config.theme));
-  });
-  const rules = Object.entries(config.keyframes || {}).flatMap(([name, styles]) => {
-    const nameRegex = new RegExp(`\\b${name}\\b`);
-    const isUsingKeyframeName = themeValues.some((value) => nameRegex.test(value));
-    if (!isUsingKeyframeName) return [];
-    return [[`@keyframes ${name} { ${stringify(styles)} }`]];
-  });
-  return rules.join(" ");
-}
-function generateThemeTokens(tokenValues, styleSelector, config) {
-  const theme = getThemeFromConfig(config.theme);
-  const rootSelector = config.themeSelector("root");
-  const gridStyles = `${rootSelector} { ${Tokenami2.gridProperty()}: ${config.grid}; }`;
-  const rootStyles = getThemeStyles(styleSelector, rootSelector, tokenValues, theme.root, config);
-  const themeToModes = {};
-  const modeEntries = Object.entries(theme.modes || {});
-  for (const [mode, theme2] of modeEntries) {
-    const themeKey = JSON.stringify(theme2);
-    if (themeKey in themeToModes) themeToModes[themeKey].push(mode);
-    else themeToModes[themeKey] = [mode];
-  }
-  const modeStyles = Object.entries(themeToModes).map(([theme2, modes]) => {
-    const selector = modes.map(config.themeSelector).join(", ");
-    return getThemeStyles(styleSelector, selector, tokenValues, JSON.parse(theme2), config);
-  });
-  const themeTokens = [gridStyles, rootStyles, modeStyles.join(" ")];
-  return themeTokens.join(" ");
-}
-var getThemeStyles = (styleSelector, selector, tokenValues, theme, config) => {
-  const themeValues = getThemeValuesByTokenValues(tokenValues, theme);
-  const customPropertyThemeValues = getCustomPropertyThemeValues(themeValues, config);
-  const selectors = [selector].flat();
-  for (const customKey of Object.keys(customPropertyThemeValues)) {
-    delete themeValues[customKey];
-  }
-  const themeStyles = selectors.reduceRight((declaration, selector2) => {
-    return `${selector2} { ${declaration} }`;
-  }, stringify(themeValues));
-  const elementSelector = selectors.at(-1);
-  const elementThemeStyles = getElementThemeStyles(
-    styleSelector,
-    elementSelector,
-    customPropertyThemeValues
-  );
-  const customPropertyThemeStyles = selectors.slice(0, -1).reduceRight((declaration, selector2) => {
-    return `${selector2} { ${declaration} }`;
-  }, elementThemeStyles);
-  return themeStyles + " " + customPropertyThemeStyles;
-};
-var getElementThemeStyles = (styleSelector, selector, themeValues) => {
-  const splitGroups = selector.split(",");
-  const themeStyles = splitGroups.map((selector2) => {
-    const elemSelector = [styleSelector].flat().map((s) => `${selector2} ${s}`);
-    return `${selector2}, ${elemSelector} { ${stringify(themeValues)} }`;
-  });
-  return themeStyles.join(" ");
-};
-function getCustomPropertyThemeValues(themeValues, config) {
-  const entries = Object.entries(themeValues).flatMap(([key, value]) => {
-    const valueWithCustomPrefixes = getPrefixedCustomPropertyValues(value, config.customProperties);
-    return valueWithCustomPrefixes ? [[key, valueWithCustomPrefixes]] : [];
-  });
-  return Object.fromEntries(entries);
-}
-var CUSTOM_PROP_REGEX = /\(--[^-][\w-]+/g;
-var getPrefixedCustomPropertyValues = (themeValue, customProperties) => {
-  const variables = themeValue.match(CUSTOM_PROP_REGEX);
-  if (!variables) return null;
-  return themeValue.replace(CUSTOM_PROP_REGEX, (m) => {
-    const match = m.replace("(", "");
-    const tokenProperty3 = Tokenami2.TokenProperty.safeParse(match);
-    if (!tokenProperty3.success) return m;
-    const parts = Tokenami2.getTokenPropertySplit(tokenProperty3.output);
-    const isCustom = Boolean(customProperties?.[parts.alias]);
-    if (!isCustom) return m;
-    const tokenPrefix = Tokenami2.tokenProperty("");
-    const customPrefixTokenValue = tokenProperty3.output.replace(tokenPrefix, CUSTOM_PROP_PREFIX);
-    return "(" + customPrefixTokenValue;
-  });
-};
 function hashVariantProperty(variant, property) {
   return `--_${Tokenami2.hash(variant + property)}`;
 }
@@ -1048,7 +1074,7 @@ function isChildSelector(selector = "") {
 function getResponsiveSelectorFromConfig(responsiveSelector, tokenamiConfig) {
   return responsiveSelector && tokenamiConfig.responsive?.[responsiveSelector];
 }
-function getPropertyConfigSelector(propertySelector, tokenamiConfig) {
+function getSelectorFromConfig(propertySelector, tokenamiConfig) {
   const arbitrarySelector = Tokenami2.getArbitrarySelector(propertySelector);
   const configSelector = propertySelector && tokenamiConfig.selectors?.[propertySelector];
   const selector = arbitrarySelector?.replace(/_/g, " ") || configSelector;
@@ -1059,16 +1085,59 @@ function getParsedSelectors(propertySelector, selectorConfig, elementSelectors)
     throw new Error(`Selector '${propertySelector}' must include '&'`);
   }
   const isSelectionVariant = selectorConfig.includes("&::selection");
-  return elementSelectors.map((elementSelector) => {
+  const selectors = [];
+  for (const elementSelector of elementSelectors) {
     const isSelectionSelector = isSelectionVariant && elementSelector === DEFAULT_SELECTOR;
     const tkSelector = isSelectionSelector ? `[style*="${propertySelector}_"]` : elementSelector;
-    return selectorConfig.map((selector) => selector.replace(/&/g, tkSelector));
-  });
+    const selectorConfigs = expandSelectorConfigs(selectorConfig);
+    for (const selectorConfig2 of selectorConfigs) {
+      const selector = selectorConfig2.map((selector2) => selector2.replace(/&/g, tkSelector));
+      selectors.push(selector);
+    }
+  }
+  return selectors;
+}
+function expandSelectorConfigs(selectorConfig) {
+  const parts = selectorConfig.map(parseSelectorList);
+  let results = [[]];
+  for (const group of parts) {
+    const res = [];
+    for (const existing of results) {
+      for (const value of group) {
+        res.push([...existing, value]);
+      }
+    }
+    results = res;
+  }
+  return results;
+}
+function parseSelectorList(selector) {
+  const selectors = [];
+  let currentSelector = "";
+  let depth = 0;
+  for (const [index, char] of selector.split("").entries()) {
+    if (char === "(") depth++;
+    if (char === "[") depth++;
+    if (char === ")") depth--;
+    if (char === "]") depth--;
+    const nextChar = selector[index + 1];
+    if (!nextChar) {
+      currentSelector += char;
+      selectors.push(currentSelector.trim());
+      currentSelector = "";
+    } else if (char === "," && depth === 0) {
+      selectors.push(currentSelector.trim());
+      currentSelector = "";
+    } else {
+      currentSelector += char;
+    }
+  }
+  return selectors;
 }
 
 // package.json
 var package_default = {
-  version: "0.0.89"};
+  version: "0.0.90"};
 
 // src/ts-plugin/error-codes.ts
 var INVALID_PROPERTY = 2353;
@@ -1334,9 +1403,12 @@ async function findUsedTokens(cwd, config) {
     tokenProperties = [...tokenProperties, ...tokens.properties];
     tokenValues = [...tokenValues, ...tokens.values];
     for (const composeBlock of composeBlocksContents) {
-      const ast = acorn.parse(composeBlock, { ecmaVersion: "latest" });
-      const composeBlockStyles = matchBaseComposeBlocks(ast);
-      composeBlocks = { ...composeBlocks, ...composeBlockStyles };
+      try {
+        const ast = acorn.parse(composeBlock, { ecmaVersion: "latest" });
+        const composeBlockStyles = matchBaseComposeBlocks(ast);
+        composeBlocks = { ...composeBlocks, ...composeBlockStyles };
+      } catch {
+      }
     }
     if (fileContent.includes(LAYERS.COMPONENTS)) {
       const sheetComposeBlocks = findSheetComposeBlocks(fileContent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokenami",
-  "version": "0.0.90",
+  "version": "0.0.91",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -45,8 +45,8 @@
   },
   "dependencies": {
     "@stitches/stringify": "^1.2.8",
-    "@tokenami/config": "0.0.90",
-    "@tokenami/ds": "0.0.90",
+    "@tokenami/config": "0.0.91",
+    "@tokenami/ds": "0.0.91",
     "acorn": "^8.11.3",
     "acorn-walk": "^8.3.2",
     "browserslist": "^4.26.3",
@@ -67,5 +67,5 @@
   "peerDependencies": {
     "typescript": ">= 5"
   },
-  "gitHead": "d6e7dfc673263649634b95ef9c422b845d53f584"
+  "gitHead": "aec7d0e54623aaf6e174a7be514f80b5ef97a6df"
 }