tokenami 0.0.89 → 0.0.90

package/dist/cli.js

@@ -696,10 +696,7 @@ function createSheet(params) {
   const tokenValues = params.tokens.values;
   const composeBlocks = parseComposeBlocks(params.tokens.composeBlocks, params.config);
   const propertyConfigsByCSSProperty = getPropertyConfigs(tokenProperties, params.config);
-  const propertyConfigs = Array.from(propertyConfigsByCSSProperty.values()).flat();
-  const selectors = propertyConfigs.flatMap((prop) => {
-    return getPropertyBaseSelectors(composeBlocks, prop, params.config);
-  });
+  let themeTokenSelectors = [];
   const styles = {
     reset: /* @__PURE__ */ new Set(),
     atomic: {},
@@ -708,70 +705,57 @@ function createSheet(params) {
     toggles: {}
   };
   for (const [cssProperty, configs] of propertyConfigsByCSSProperty) {
-    const isLogical = supportedLogicalProperties.has(cssProperty);
     const isInheritable = inheritedProperties.has(cssProperty);
-    const sortedConfigs = [...configs].sort((a, b) => a.order - b.order);
-    const variants = sortedConfigs.flatMap((config) => config.variant ? [config.variant] : []);
-    const variantValue = unique(variants).reduce((fallback, variant) => {
-      const hashedProperty = hashVariantProperty(variant, cssProperty);
-      return `var(${hashedProperty}, ${fallback})`;
-    }, "revert-layer");
+    const elementConfigs = configs.filter((c) => {
+      const selectorConfig = getPropertyConfigSelector(c.selector, params.config);
+      return !selectorConfig.some(isPseudoElementSelector);
+    });
     for (const prop of configs) {
-      const layerIndex = getAtomicLayerIndex(cssProperty, params.config);
       const toggleKey = prop.responsive || prop.selector;
       const propertyPrefix = prop.isCustom ? CUSTOM_PROP_PREFIX : "";
-      const baseSelectors = getPropertyBaseSelectors(composeBlocks, prop, params.config);
       const gridToggle = prop.isGrid ? getGridPropertyToggle(prop.tokenProperty) : "";
-      if (layerIndex === -1) continue;
+      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);
         const hashedProperty = hashVariantProperty(prop.variant, cssProperty);
         const basePropertyValue = getBasePropertyValue(prop.tokenProperty, prop, false);
         const toggleProperty = Tokenami2.parsedTokenProperty(prop.variant);
-        const toggleDeclaration = `${hashedProperty}: var(${toggleProperty}) ${basePropertyValue};`;
-        const layer = `${isLogical ? LAYERS.SELECTORS_LOGICAL : LAYERS.SELECTORS}${layerIndex}`;
-        const customPropertyFallback = `var(${Tokenami2.tokenProperty(cssProperty)})`;
-        const customPropertyValue = variantValue.replace("revert-layer", customPropertyFallback);
-        const declarationValue = prop.isCustom ? customPropertyValue : variantValue;
         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;`);
         }
-        const template = `@layer ${layer} {${SELECTOR_TAG} { ${declaration} ${gridToggle} }}`;
-        const toggleTemplate = `@layer ${layer} {${SELECTOR_TAG} { ${toggleDeclaration} }}`;
         styles.selectors[template] ??= /* @__PURE__ */ new Set();
         styles.selectors[toggleTemplate] ??= /* @__PURE__ */ new Set();
-        for (const selector of baseSelectors) {
-          styles.selectors[template].add(selector);
-          styles.selectors[toggleTemplate].add(selector);
+        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 selectors2 = getPropertySelectors(
-          composeBlocks,
-          prop.selector,
-          prop.tokenProperty,
-          params.config
-        );
-        for (const selector of selectors2) {
-          const responsiveSelectors = [responsive, ...selector].filter(Boolean);
-          const toggle = responsiveSelectors.reduceRight(
-            (declaration2, selector2) => `${selector2} { ${declaration2} }`,
-            `${toggleProperty}: ;`
-          );
+        for (const selector of selectors.all) {
+          const toggle = createToggleDeclaration(responsive, selector, toggleProperty);
           styles.toggles[toggleKey] ??= /* @__PURE__ */ new Set();
           styles.toggles[toggleKey].add(toggle);
         }
       } else {
         const propertyValue = getBasePropertyValue(prop.tokenProperty, prop);
         const declaration = `${propertyPrefix}${cssProperty}: ${propertyValue};`;
-        const layer = `${isLogical ? LAYERS.LOGICAL : LAYERS.BASE}${layerIndex}`;
+        const template = `@layer ${prop.layer} {${SELECTOR_TAG} { ${declaration} ${gridToggle} }}`;
         if (!isInheritable) styles.reset.add(`${prop.tokenProperty}: initial;`);
-        const template = `@layer ${layer} {${SELECTOR_TAG} { ${declaration} ${gridToggle} }}`;
         styles.atomic[template] ??= /* @__PURE__ */ new Set();
-        for (const selector of baseSelectors) {
+        for (const selector of selectors.base) {
           styles.atomic[template].add(selector);
         }
       }
@@ -794,7 +778,7 @@ function createSheet(params) {
 
     @layer tkb {
       ${generateKeyframeRules(tokenValues, params.config)}
-      ${generateThemeTokens(tokenValues, unique(selectors), params.config)}
+      ${generateThemeTokens(tokenValues, unique(themeTokenSelectors), params.config)}
       * { ${Array.from(styles.reset).join(" ")} }
 
       ${Object.values(styles.toggles).flatMap((set) => Array.from(set)).join(" ")}
@@ -831,24 +815,22 @@ function parseComposeBlocks(composeBlocks, config) {
   }
   return parsedComposeBlocks;
 }
-function getPropertyBaseSelectors(composeBlocks, prop, config) {
+function getPropertySelectors(composeBlocks, prop, config) {
   let selectors = [];
   const selectorConfig = getPropertyConfigSelector(prop.selector, config);
   const baseSelectors = getBaseSelectors(composeBlocks, prop.tokenProperty);
   const elemSelector = selectorConfig.find(isElementSelector);
-  if (!elemSelector) {
-    selectors.push(...baseSelectors);
-  } else {
+  if (elemSelector) {
     const parsedSelectors = getParsedSelectors(prop.selector, [elemSelector], baseSelectors);
     if (elemSelector === "&") selectors.push(...parsedSelectors.flat());
     selectors.push(...parsedSelectors.flat());
+  } else {
+    selectors.push(...baseSelectors);
   }
-  return unique(selectors);
-}
-function getPropertySelectors(composeBlocks, propertySelector, property, config) {
-  const selectorConfig = getPropertyConfigSelector(propertySelector, config);
-  const baseSelectors = getBaseSelectors(composeBlocks, property);
-  return getParsedSelectors(propertySelector, selectorConfig, baseSelectors);
+  return {
+    base: unique(selectors),
+    all: getParsedSelectors(prop.selector, selectorConfig, baseSelectors)
+  };
 }
 function getBaseSelectors(composeBlocks, property) {
   const composeSelectors = Object.entries(composeBlocks).flatMap(([selector, styles]) => {
@@ -856,6 +838,30 @@ function getBaseSelectors(composeBlocks, property) {
   });
   return [DEFAULT_SELECTOR, ...composeSelectors];
 }
+function createVariantValue(cssProperty, prop, propertyConfigs) {
+  let variantValue = "revert-layer";
+  const seen = /* @__PURE__ */ new Set();
+  for (const propertyConfig of propertyConfigs) {
+    if (!propertyConfig.variant) continue;
+    if (seen.has(propertyConfig.variant)) continue;
+    const hashedProperty = hashVariantProperty(propertyConfig.variant, cssProperty);
+    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;
+}
 function getGridPropertyToggle(property) {
   const hashGridProperty = hashVariantProperty("grid", property);
   const gridProperty3 = Tokenami2.gridProperty();
@@ -909,15 +915,20 @@ function getPropertyConfigs(tokenProperties, config) {
     const selectorOrder = parts.selector ? 2 : 0;
     const order = responsiveOrder + selectorOrder;
     for (const cssProperty of properties) {
+      const layerIndex = getAtomicLayerIndex(cssProperty, config);
+      if (layerIndex === -1) continue;
       const longhandProperty = Tokenami2.createLonghandProperty(property, cssProperty);
       const tokenProperty3 = Tokenami2.parseProperty(longhandProperty);
       const currentConfigs = propertyConfigs.get(cssProperty) || [];
       const customConfig = config.customProperties?.[cssProperty];
       const propertyConfig = config.properties?.[cssProperty];
+      const isLogical = supportedLogicalProperties.has(cssProperty);
       const isGrid = customConfig?.includes("grid") ?? propertyConfig?.includes("grid") ?? false;
       const isCustom = Boolean(customConfig);
-      const nextConfig = { ...parts, tokenProperty: tokenProperty3, order, isCustom, isGrid };
-      propertyConfigs.set(cssProperty, [...currentConfigs, nextConfig]);
+      const layer = parts.variant ? `${isLogical ? LAYERS.SELECTORS_LOGICAL : LAYERS.SELECTORS}${layerIndex}` : `${isLogical ? LAYERS.LOGICAL : LAYERS.BASE}${layerIndex}`;
+      const nextConfig = { ...parts, tokenProperty: tokenProperty3, order, layer, isCustom, isGrid };
+      const sortedConfigs = [...currentConfigs, nextConfig].sort((a, b) => a.order - b.order);
+      propertyConfigs.set(cssProperty, sortedConfigs);
     }
   }
   return propertyConfigs;
@@ -986,8 +997,8 @@ var getThemeStyles = (styleSelector, selector, tokenValues, theme, config) => {
   return themeStyles + " " + customPropertyThemeStyles;
 };
 var getElementThemeStyles = (styleSelector, selector, themeValues) => {
-  const splitChained = selector.split(",");
-  const themeStyles = splitChained.map((selector2) => {
+  const splitGroups = selector.split(",");
+  const themeStyles = splitGroups.map((selector2) => {
     const elemSelector = [styleSelector].flat().map((s) => `${selector2} ${s}`);
     return `${selector2}, ${elemSelector} { ${stringify(themeValues)} }`;
   });
@@ -1028,6 +1039,9 @@ function isCombinatorSelector(selector = "") {
 function isPseudoElementSelector(selector = "") {
   return /::/.test(selector);
 }
+function removePseudoElementSelector(selector = "") {
+  return selector.replace(/::[a-z-]+$/, "");
+}
 function isChildSelector(selector = "") {
   return /&\s(.+)/.test(selector);
 }
@@ -1054,7 +1068,7 @@ function getParsedSelectors(propertySelector, selectorConfig, elementSelectors)
 
 // package.json
 var package_default = {
-  version: "0.0.88"};
+  version: "0.0.89"};
 
 // src/ts-plugin/error-codes.ts
 var INVALID_PROPERTY = 2353;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokenami",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -45,11 +45,11 @@
   },
   "dependencies": {
     "@stitches/stringify": "^1.2.8",
-    "@tokenami/config": "0.0.89",
-    "@tokenami/ds": "0.0.89",
+    "@tokenami/config": "0.0.90",
+    "@tokenami/ds": "0.0.90",
     "acorn": "^8.11.3",
     "acorn-walk": "^8.3.2",
-    "browserslist": "^4.24.4",
+    "browserslist": "^4.26.3",
     "cac": "^6.7.14",
     "chalk": "^5.2.0",
     "chokidar": "^3.5.3",
@@ -67,5 +67,5 @@
   "peerDependencies": {
     "typescript": ">= 5"
   },
-  "gitHead": "d58887a218198093eb57fc0c7e222ec232393d6d"
+  "gitHead": "d6e7dfc673263649634b95ef9c422b845d53f584"
 }