@csszyx/compiler 0.8.0 → 0.9.1

package/dist/shared/{compiler.BIUVmI0H.mjs → compiler.CIBwOKUt.mjs}

@@ -115,6 +115,11 @@ const PROPERTY_CATEGORY_MAP = {
   via: 1 /* COLOR */,
   to: 1 /* COLOR */,
   dropShadowColor: 1 /* COLOR */,
+  scrollbarThumb: 1 /* COLOR */,
+  scrollbarTrack: 1 /* COLOR */,
+  maskFrom: 1 /* COLOR */,
+  maskVia: 1 /* COLOR */,
+  maskTo: 1 /* COLOR */,
   // ---- UNITLESS ----
   opacity: 3 /* UNITLESS */,
   z: 3 /* UNITLESS */,
@@ -161,6 +166,8 @@ const PROPERTY_CATEGORY_MAP = {
   outline: 3 /* UNITLESS */,
   leading: 3 /* UNITLESS */,
   decorationThickness: 3 /* UNITLESS */,
+  zoom: 3 /* UNITLESS */,
+  tabSize: 3 /* UNITLESS */,
   // ---- ANGLE ----
   rotate: 4 /* ANGLE */,
   skewX: 4 /* ANGLE */,
@@ -208,10 +215,10 @@ function isValidColorString(value) {
   if (/^(rgb|hsl|oklch|color|hwb|lab|lch|oklab)\(/.test(value)) {
     return true;
   }
-  if (/^[a-zA-Z][a-zA-Z0-9]*(-[a-zA-Z0-9]+)*-\d+$/.test(value)) {
+  if (/^[a-z][a-z0-9]*(-[a-z0-9]+)*-\d+$/i.test(value)) {
     return true;
   }
-  if (/^[a-zA-Z][a-zA-Z0-9]*(-[a-zA-Z][a-zA-Z0-9]*)*$/.test(value)) {
+  if (/^[a-z][a-z0-9]*(-[a-z][a-z0-9]*)*$/i.test(value)) {
     return true;
   }
   return false;
@@ -575,7 +582,20 @@ const PROPERTY_MAP = {
   tableLayout: "table",
   caption: "caption",
   // Overflow
-  overflow: "overflow"
+  overflow: "overflow",
+  // Scrollbar (v4.3)
+  scrollbar: "scrollbar",
+  scrollbarThumb: "scrollbar-thumb",
+  scrollbarTrack: "scrollbar-track",
+  scrollbarGutter: "scrollbar-gutter",
+  // Zoom (v4.3)
+  zoom: "zoom",
+  // Tab Size (v4.3)
+  tabSize: "tab",
+  // Mask gradient color stops (v4.1)
+  maskFrom: "mask-from",
+  maskVia: "mask-via",
+  maskTo: "mask-to"
 };
 const CSS_VAR_TYPE_HINTS = {
   fontFamily: "family-name",
@@ -688,6 +708,9 @@ const SUGGESTION_MAP = {
   touchAction: "touch",
   userSelect: "select",
   captionSide: "caption",
+  // Scrollbar (v4.3)
+  scrollbarColor: "scrollbarThumb (thumb color) or scrollbarTrack (track color)",
+  scrollbarWidth: "scrollbar",
   // Boolean remaps
   flexWrapReverse: "flexWrap: 'wrap-reverse'",
   flexNowrap: "flexWrap: 'nowrap'"
@@ -721,6 +744,16 @@ const VARIANT_MAP = {
   pointerFine: "pointer-fine",
   pointerCoarse: "pointer-coarse",
   pointerNone: "pointer-none",
+  // Any-pointer variants (v4.1)
+  anyPointerFine: "any-pointer-fine",
+  anyPointerCoarse: "any-pointer-coarse",
+  anyPointerNone: "any-pointer-none",
+  // Form validation variants (v4.1)
+  userValid: "user-valid",
+  userInvalid: "user-invalid",
+  // Details / inverted-colors variants (v4.1)
+  detailsContent: "details-content",
+  invertedColors: "inverted-colors",
   // Screen orientation
   screenPortrait: "portrait",
   screenLandscape: "landscape",
@@ -826,6 +859,25 @@ const KNOWN_VARIANTS = /* @__PURE__ */ new Set([
   "pointerFine",
   "pointerCoarse",
   "pointerNone",
+  // Any-pointer (v4.1)
+  "any-pointer-fine",
+  "any-pointer-coarse",
+  "any-pointer-none",
+  "anyPointerFine",
+  "anyPointerCoarse",
+  "anyPointerNone",
+  // Form validation (v4.1)
+  "user-valid",
+  "user-invalid",
+  "userValid",
+  "userInvalid",
+  // Details / inverted-colors (v4.1)
+  "details-content",
+  "detailsContent",
+  "inverted-colors",
+  "invertedColors",
+  // Noscript (v4.1)
+  "noscript",
   // Open
   "open",
   // RTL/LTR
@@ -1223,7 +1275,7 @@ function handleGroupPeer(type, nestedObj, prefix) {
       if (result.className) {
         classes.push(result.className);
       }
-    } else if (typeof nestedValue === "object" && nestedValue !== null) {
+    } else if (typeof nestedValue === "object") {
       for (const [state, stateValue] of Object.entries(nestedValue)) {
         if (stateValue === null || stateValue === void 0 || stateValue === false) {
           continue;
@@ -1393,7 +1445,7 @@ function transform(szProp, prefix = "", mangleMap) {
       classes.push(`${prefix}${mappedKey}/${value}`);
       continue;
     }
-    if (rawKey === "bgImg" && typeof value === "object" && value !== null && !Array.isArray(value)) {
+    if (rawKey === "bgImg" && value !== null && typeof value === "object" && !Array.isArray(value)) {
       const grad = value;
       const gradType = grad.gradient;
       if (!gradType) {
@@ -1458,7 +1510,7 @@ function transform(szProp, prefix = "", mangleMap) {
       classes.push(`${prefix}${rawKey}/${value}`);
       continue;
     }
-    if (typeof value === "object" && value !== null && !Array.isArray(value) && rawKey in PROPERTY_MAP && "color" in value) {
+    if (value !== null && typeof value === "object" && !Array.isArray(value) && rawKey in PROPERTY_MAP && "color" in value) {
       const colorObj = value;
       const twPrefix = PROPERTY_MAP[rawKey] || rawKey.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
       const rawColorBase = String(colorObj.color);
@@ -1568,7 +1620,7 @@ function transform(szProp, prefix = "", mangleMap) {
             if (result.className) {
               classes.push(result.className);
             }
-          } else if ((mappedKey === "@min" || mappedKey === "@max") && typeof nestedValue === "object" && nestedValue !== null && !KNOWN_BP.has(nestedKey) && !PROPERTY_MAP[nestedKey] && !BOOLEAN_SHORTHANDS.has(nestedKey)) {
+          } else if ((mappedKey === "@min" || mappedKey === "@max") && nestedValue !== null && typeof nestedValue === "object" && !KNOWN_BP.has(nestedKey) && !PROPERTY_MAP[nestedKey] && !BOOLEAN_SHORTHANDS.has(nestedKey)) {
             const nestedPrefix2 = `${prefix}${mappedKey}-[${nestedKey}]:`;
             const result = transform(nestedValue, nestedPrefix2);
             if (result.className) {
@@ -1583,7 +1635,7 @@ function transform(szProp, prefix = "", mangleMap) {
             if (result.className) {
               classes.push(result.className);
             }
-          } else if (typeof nestedValue === "object" && nestedValue !== null) {
+          } else if (typeof nestedValue === "object") {
             const nestedPrefix2 = `${prefix}${mappedKey}/${nestedKey}:`;
             const result = transform(nestedValue, nestedPrefix2);
             if (result.className) {
@@ -2197,7 +2249,7 @@ function transform(szProp, prefix = "", mangleMap) {
         if (!FRACTION_SUPPORTED_PROPS.has(rawKey)) {
           finalValue = `[${finalValue}]`;
         }
-      } else if (key === "aspect" && /^[0-9]+(?:\.[0-9]+)?\/[0-9]+(?:\.[0-9]+)?$/.test(finalValue)) {
+      } else if (key === "aspect" && /^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/.test(finalValue)) {
         if (finalValue === "auto" || finalValue === "square" || finalValue === "video" || /^\d+\/\d+$/.test(finalValue)) ; else {
           finalValue = `[${finalValue}]`;
         }
@@ -2216,19 +2268,22 @@ function transform(szProp, prefix = "", mangleMap) {
     }
   }
   let mergedClasses = classes;
-  const textSizePattern = /^((?:[a-z0-9\-[\]@/:]*:)*)text-(xs|sm|base|lg|[2-9]?xl|\[.+\]|\(.+\))$/;
-  const leadingPattern = /^((?:[a-z0-9\-[\]@/:]*:)*)leading-(.+)$/;
+  const textSizeBaseRe = /^text-(xs|sm|base|lg|[2-9]?xl|\[[^\]]+\]|\([^)]+\))$/;
+  const leadingBaseRe = /^leading-(.+)$/;
   const textEntries = [];
   const leadingEntries = [];
   for (let i = 0; i < classes.length; i++) {
     const cls = classes[i];
-    const tm = textSizePattern.exec(cls);
+    const lastColon = cls.lastIndexOf(":");
+    const prefix2 = lastColon === -1 ? "" : cls.slice(0, lastColon + 1);
+    const base = lastColon === -1 ? cls : cls.slice(lastColon + 1);
+    const tm = textSizeBaseRe.exec(base);
     if (tm) {
-      textEntries.push({ index: i, prefix: tm[1], size: tm[2] });
+      textEntries.push({ index: i, prefix: prefix2, size: tm[1] });
     }
-    const lm = leadingPattern.exec(cls);
+    const lm = leadingBaseRe.exec(base);
     if (lm) {
-      leadingEntries.push({ index: i, prefix: lm[1], value: lm[2] });
+      leadingEntries.push({ index: i, prefix: prefix2, value: lm[1] });
     }
   }
   if (textEntries.length > 0 && leadingEntries.length > 0) {

package/dist/shared/{compiler.C6jT0mcT.cjs → compiler.DItEsgH4.cjs}

@@ -117,6 +117,11 @@ const PROPERTY_CATEGORY_MAP = {
   via: 1 /* COLOR */,
   to: 1 /* COLOR */,
   dropShadowColor: 1 /* COLOR */,
+  scrollbarThumb: 1 /* COLOR */,
+  scrollbarTrack: 1 /* COLOR */,
+  maskFrom: 1 /* COLOR */,
+  maskVia: 1 /* COLOR */,
+  maskTo: 1 /* COLOR */,
   // ---- UNITLESS ----
   opacity: 3 /* UNITLESS */,
   z: 3 /* UNITLESS */,
@@ -163,6 +168,8 @@ const PROPERTY_CATEGORY_MAP = {
   outline: 3 /* UNITLESS */,
   leading: 3 /* UNITLESS */,
   decorationThickness: 3 /* UNITLESS */,
+  zoom: 3 /* UNITLESS */,
+  tabSize: 3 /* UNITLESS */,
   // ---- ANGLE ----
   rotate: 4 /* ANGLE */,
   skewX: 4 /* ANGLE */,
@@ -210,10 +217,10 @@ function isValidColorString(value) {
   if (/^(rgb|hsl|oklch|color|hwb|lab|lch|oklab)\(/.test(value)) {
     return true;
   }
-  if (/^[a-zA-Z][a-zA-Z0-9]*(-[a-zA-Z0-9]+)*-\d+$/.test(value)) {
+  if (/^[a-z][a-z0-9]*(-[a-z0-9]+)*-\d+$/i.test(value)) {
     return true;
   }
-  if (/^[a-zA-Z][a-zA-Z0-9]*(-[a-zA-Z][a-zA-Z0-9]*)*$/.test(value)) {
+  if (/^[a-z][a-z0-9]*(-[a-z][a-z0-9]*)*$/i.test(value)) {
     return true;
   }
   return false;
@@ -577,7 +584,20 @@ const PROPERTY_MAP = {
   tableLayout: "table",
   caption: "caption",
   // Overflow
-  overflow: "overflow"
+  overflow: "overflow",
+  // Scrollbar (v4.3)
+  scrollbar: "scrollbar",
+  scrollbarThumb: "scrollbar-thumb",
+  scrollbarTrack: "scrollbar-track",
+  scrollbarGutter: "scrollbar-gutter",
+  // Zoom (v4.3)
+  zoom: "zoom",
+  // Tab Size (v4.3)
+  tabSize: "tab",
+  // Mask gradient color stops (v4.1)
+  maskFrom: "mask-from",
+  maskVia: "mask-via",
+  maskTo: "mask-to"
 };
 const CSS_VAR_TYPE_HINTS = {
   fontFamily: "family-name",
@@ -690,6 +710,9 @@ const SUGGESTION_MAP = {
   touchAction: "touch",
   userSelect: "select",
   captionSide: "caption",
+  // Scrollbar (v4.3)
+  scrollbarColor: "scrollbarThumb (thumb color) or scrollbarTrack (track color)",
+  scrollbarWidth: "scrollbar",
   // Boolean remaps
   flexWrapReverse: "flexWrap: 'wrap-reverse'",
   flexNowrap: "flexWrap: 'nowrap'"
@@ -723,6 +746,16 @@ const VARIANT_MAP = {
   pointerFine: "pointer-fine",
   pointerCoarse: "pointer-coarse",
   pointerNone: "pointer-none",
+  // Any-pointer variants (v4.1)
+  anyPointerFine: "any-pointer-fine",
+  anyPointerCoarse: "any-pointer-coarse",
+  anyPointerNone: "any-pointer-none",
+  // Form validation variants (v4.1)
+  userValid: "user-valid",
+  userInvalid: "user-invalid",
+  // Details / inverted-colors variants (v4.1)
+  detailsContent: "details-content",
+  invertedColors: "inverted-colors",
   // Screen orientation
   screenPortrait: "portrait",
   screenLandscape: "landscape",
@@ -828,6 +861,25 @@ const KNOWN_VARIANTS = /* @__PURE__ */ new Set([
   "pointerFine",
   "pointerCoarse",
   "pointerNone",
+  // Any-pointer (v4.1)
+  "any-pointer-fine",
+  "any-pointer-coarse",
+  "any-pointer-none",
+  "anyPointerFine",
+  "anyPointerCoarse",
+  "anyPointerNone",
+  // Form validation (v4.1)
+  "user-valid",
+  "user-invalid",
+  "userValid",
+  "userInvalid",
+  // Details / inverted-colors (v4.1)
+  "details-content",
+  "detailsContent",
+  "inverted-colors",
+  "invertedColors",
+  // Noscript (v4.1)
+  "noscript",
   // Open
   "open",
   // RTL/LTR
@@ -1225,7 +1277,7 @@ function handleGroupPeer(type, nestedObj, prefix) {
       if (result.className) {
         classes.push(result.className);
       }
-    } else if (typeof nestedValue === "object" && nestedValue !== null) {
+    } else if (typeof nestedValue === "object") {
       for (const [state, stateValue] of Object.entries(nestedValue)) {
         if (stateValue === null || stateValue === void 0 || stateValue === false) {
           continue;
@@ -1395,7 +1447,7 @@ function transform(szProp, prefix = "", mangleMap) {
       classes.push(`${prefix}${mappedKey}/${value}`);
       continue;
     }
-    if (rawKey === "bgImg" && typeof value === "object" && value !== null && !Array.isArray(value)) {
+    if (rawKey === "bgImg" && value !== null && typeof value === "object" && !Array.isArray(value)) {
       const grad = value;
       const gradType = grad.gradient;
       if (!gradType) {
@@ -1460,7 +1512,7 @@ function transform(szProp, prefix = "", mangleMap) {
       classes.push(`${prefix}${rawKey}/${value}`);
       continue;
     }
-    if (typeof value === "object" && value !== null && !Array.isArray(value) && rawKey in PROPERTY_MAP && "color" in value) {
+    if (value !== null && typeof value === "object" && !Array.isArray(value) && rawKey in PROPERTY_MAP && "color" in value) {
       const colorObj = value;
       const twPrefix = PROPERTY_MAP[rawKey] || rawKey.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
       const rawColorBase = String(colorObj.color);
@@ -1570,7 +1622,7 @@ function transform(szProp, prefix = "", mangleMap) {
             if (result.className) {
               classes.push(result.className);
             }
-          } else if ((mappedKey === "@min" || mappedKey === "@max") && typeof nestedValue === "object" && nestedValue !== null && !KNOWN_BP.has(nestedKey) && !PROPERTY_MAP[nestedKey] && !BOOLEAN_SHORTHANDS.has(nestedKey)) {
+          } else if ((mappedKey === "@min" || mappedKey === "@max") && nestedValue !== null && typeof nestedValue === "object" && !KNOWN_BP.has(nestedKey) && !PROPERTY_MAP[nestedKey] && !BOOLEAN_SHORTHANDS.has(nestedKey)) {
             const nestedPrefix2 = `${prefix}${mappedKey}-[${nestedKey}]:`;
             const result = transform(nestedValue, nestedPrefix2);
             if (result.className) {
@@ -1585,7 +1637,7 @@ function transform(szProp, prefix = "", mangleMap) {
             if (result.className) {
               classes.push(result.className);
             }
-          } else if (typeof nestedValue === "object" && nestedValue !== null) {
+          } else if (typeof nestedValue === "object") {
             const nestedPrefix2 = `${prefix}${mappedKey}/${nestedKey}:`;
             const result = transform(nestedValue, nestedPrefix2);
             if (result.className) {
@@ -2199,7 +2251,7 @@ function transform(szProp, prefix = "", mangleMap) {
         if (!FRACTION_SUPPORTED_PROPS.has(rawKey)) {
           finalValue = `[${finalValue}]`;
         }
-      } else if (key === "aspect" && /^[0-9]+(?:\.[0-9]+)?\/[0-9]+(?:\.[0-9]+)?$/.test(finalValue)) {
+      } else if (key === "aspect" && /^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/.test(finalValue)) {
         if (finalValue === "auto" || finalValue === "square" || finalValue === "video" || /^\d+\/\d+$/.test(finalValue)) ; else {
           finalValue = `[${finalValue}]`;
         }
@@ -2218,19 +2270,22 @@ function transform(szProp, prefix = "", mangleMap) {
     }
   }
   let mergedClasses = classes;
-  const textSizePattern = /^((?:[a-z0-9\-[\]@/:]*:)*)text-(xs|sm|base|lg|[2-9]?xl|\[.+\]|\(.+\))$/;
-  const leadingPattern = /^((?:[a-z0-9\-[\]@/:]*:)*)leading-(.+)$/;
+  const textSizeBaseRe = /^text-(xs|sm|base|lg|[2-9]?xl|\[[^\]]+\]|\([^)]+\))$/;
+  const leadingBaseRe = /^leading-(.+)$/;
   const textEntries = [];
   const leadingEntries = [];
   for (let i = 0; i < classes.length; i++) {
     const cls = classes[i];
-    const tm = textSizePattern.exec(cls);
+    const lastColon = cls.lastIndexOf(":");
+    const prefix2 = lastColon === -1 ? "" : cls.slice(0, lastColon + 1);
+    const base = lastColon === -1 ? cls : cls.slice(lastColon + 1);
+    const tm = textSizeBaseRe.exec(base);
     if (tm) {
-      textEntries.push({ index: i, prefix: tm[1], size: tm[2] });
+      textEntries.push({ index: i, prefix: prefix2, size: tm[1] });
     }
-    const lm = leadingPattern.exec(cls);
+    const lm = leadingBaseRe.exec(base);
     if (lm) {
-      leadingEntries.push({ index: i, prefix: lm[1], value: lm[2] });
+      leadingEntries.push({ index: i, prefix: prefix2, value: lm[1] });
     }
   }
   if (textEntries.length > 0 && leadingEntries.length > 0) {

package/dist/transform-core.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const transformCore = require('./shared/compiler.C6jT0mcT.cjs');
+const transformCore = require('./shared/compiler.DItEsgH4.cjs');
 
 
 

package/dist/transform-core.mjs

@@ -1 +1 @@
-export { B as BOOLEAN_SHORTHANDS, K as KNOWN_VARIANTS, P as PROPERTY_MAP, S as SUGGESTION_MAP, V as VARIANT_MAP, b as getVariantPrefix, i as isValidSzProp, e as normalizeArbitraryValue, f as normalizeArbitraryVariant, n as normalizeClassName, t as transform } from './shared/compiler.BIUVmI0H.mjs';
+export { B as BOOLEAN_SHORTHANDS, K as KNOWN_VARIANTS, P as PROPERTY_MAP, S as SUGGESTION_MAP, V as VARIANT_MAP, b as getVariantPrefix, i as isValidSzProp, e as normalizeArbitraryValue, f as normalizeArbitraryVariant, n as normalizeClassName, t as transform } from './shared/compiler.CIBwOKUt.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/compiler",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "Core compiler and transformation logic for csszyx",
   "keywords": [
     "csszyx",
@@ -65,7 +65,7 @@
     "@babel/types": "^7.23.6",
     "magic-string": "0.30.21",
     "oxc-parser": "0.131.0",
-    "@csszyx/core": "0.8.0"
+    "@csszyx/core": "0.9.1"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",