typewritingclass 0.2.7 → 0.3.2

package/README.md

@@ -104,14 +104,6 @@ import { dcx, bg, p, dynamic } from 'typewritingclass'
 const { className, style } = dcx(p(4), bg(dynamic(userColor)))
 ```
 
-### Raw CSS escape hatch
-
-```ts
-import { css } from 'typewritingclass'
-
-cx(p(4), css({ transition: 'all 200ms ease' }))
-```
-
 ## Exports
 
 | Path | Contents |

package/dist/index.cjs

@@ -94,8 +94,8 @@ function djb2(str) {
   }
   return hash >>> 0;
 }
-function generateHash(rule, layer2) {
-  const input = JSON.stringify(rule.declarations) + JSON.stringify(rule.selectors) + JSON.stringify(rule.mediaQueries) + JSON.stringify(rule.supportsQueries) + String(layer2) + (_nullishCoalesce(rule.selectorTemplate, () => ( "")));
+function generateHash(rule, _layer) {
+  const input = JSON.stringify(rule.declarations) + JSON.stringify(rule.selectors) + JSON.stringify(rule.mediaQueries) + JSON.stringify(rule.supportsQueries) + (_nullishCoalesce(rule.selectorTemplate, () => ( "")));
   return "_" + djb2(input).toString(36);
 }
 
@@ -124,6 +124,9 @@ function cx(...args) {
   if (process.env.NODE_ENV !== "production") {
     warnConflicts(args);
   }
+  return _cxCore(args);
+}
+function _cxCore(args) {
   return args.map((arg) => {
     if (typeof arg === "string") return arg;
     if (typeof arg === "function") return String(arg);
@@ -135,16 +138,53 @@ function cx(...args) {
 }
 function warnConflicts(args) {
   const seen = /* @__PURE__ */ new Map();
+  const seenDeclCount = /* @__PURE__ */ new Map();
+  const warned = /* @__PURE__ */ new Set();
+  const propContexts = /* @__PURE__ */ new Map();
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];
     if (typeof arg === "string" || typeof arg === "function") continue;
-    for (const prop of Object.keys(arg.declarations)) {
-      if (seen.has(prop)) {
-        console.warn(
-          `[typewritingclass] cx() conflict: "${prop}" is set by arguments at index ${seen.get(prop)} and ${i}. The later value will override. If intentional, this warning can be ignored.`
-        );
+    const context = arg.mediaQueries.join("|") + "::" + arg.selectors.join("|");
+    const declKeys = Object.keys(arg.declarations);
+    for (const prop of declKeys) {
+      const key = context + "::" + prop;
+      if (seen.has(key)) {
+        const earlierCount = seenDeclCount.get(key);
+        if (earlierCount > 1 && declKeys.length === 1) {
+          seen.set(key, i);
+          seenDeclCount.set(key, declKeys.length);
+          continue;
+        }
+        const msg = `[typewritingclass] cx() conflict: "${prop}" is set by arguments at index ${seen.get(key)} and ${i}. The later value will override. If intentional, this warning can be ignored.`;
+        if (!warned.has(msg)) {
+          warned.add(msg);
+          console.warn(msg);
+        }
+      }
+      seen.set(key, i);
+      seenDeclCount.set(key, declKeys.length);
+      if (!propContexts.has(prop)) propContexts.set(prop, []);
+      propContexts.get(prop).push({ context, index: i, mediaQueries: arg.mediaQueries });
+    }
+  }
+  for (const [prop, entries] of propContexts) {
+    for (let j = 1; j < entries.length; j++) {
+      const later = entries[j];
+      if (later.mediaQueries.length === 0) continue;
+      for (let k = 0; k < j; k++) {
+        const earlier = entries[k];
+        if (earlier.context === later.context) continue;
+        if (earlier.mediaQueries.length === 0) continue;
+        const earlierSet = new Set(earlier.mediaQueries);
+        const laterSet = new Set(later.mediaQueries);
+        const isSubset = [...laterSet].every((q) => earlierSet.has(q)) || [...earlierSet].every((q) => laterSet.has(q));
+        if (isSubset) continue;
+        const msg = `[typewritingclass] cx() cascade hazard: "${prop}" is set by arg ${earlier.index} (${earlier.mediaQueries.join(" + ")}) and arg ${later.index} (${later.mediaQueries.join(" + ")}). When both queries match, arg ${later.index} wins due to source order. To fix, combine them: .sm(tw.dark(...)) instead of separate .sm(...).dark(...).`;
+        if (!warned.has(msg)) {
+          warned.add(msg);
+          console.warn(msg);
+        }
       }
-      seen.set(prop, i);
     }
   }
 }
@@ -190,46 +230,6 @@ function isDynamic(v) {
   return typeof v === "object" && v !== null && "_tag" in v && v._tag === "DynamicValue";
 }
 
-// src/css.ts
-function css(first, ...values) {
-  if (!Array.isArray(first) && !("raw" in first)) {
-    return _chunkPTY5FTFBcjs.createRule.call(void 0, first);
-  }
-  const strings = first;
-  const declarations = {};
-  let dynamicBindings;
-  let raw = "";
-  for (let i = 0; i < strings.length; i++) {
-    raw += strings[i];
-    if (i < values.length) {
-      const val = values[i];
-      if (isDynamic(val)) {
-        if (!dynamicBindings) dynamicBindings = {};
-        dynamicBindings[val.__id] = String(val.__value);
-        raw += `var(${val.__id})`;
-      } else {
-        raw += String(val);
-      }
-    }
-  }
-  const lines = raw.split(";");
-  for (const line of lines) {
-    const trimmed = line.trim();
-    if (!trimmed) continue;
-    const colonIdx = trimmed.indexOf(":");
-    if (colonIdx === -1) continue;
-    const prop = trimmed.slice(0, colonIdx).trim();
-    const value = trimmed.slice(colonIdx + 1).trim();
-    if (prop && value) {
-      declarations[prop] = value;
-    }
-  }
-  if (dynamicBindings) {
-    return _chunkPTY5FTFBcjs.createDynamicRule.call(void 0, declarations, dynamicBindings);
-  }
-  return _chunkPTY5FTFBcjs.createRule.call(void 0, declarations);
-}
-
 // src/utilities/spacing.ts
 function sp(value) {
   if (isDynamic(value)) return value;
@@ -2433,15 +2433,15 @@ function createChain(rules, pendingMods) {
       if (prop === TW_BRAND) return true;
       if (prop === "_rules") return rules;
       if (prop === Symbol.toPrimitive || prop === "toString" || prop === "valueOf" || prop === "toJSON") {
-        return () => cx(...rules);
+        return () => _cxCore(rules);
       }
       if (prop === Symbol.toStringTag) return "TwChain";
       if (prop === "value" || prop === "className") {
-        return cx(...rules);
+        return _cxCore(rules);
       }
       if (prop === Symbol.iterator) return void 0;
       if (prop === "inspect" || prop === /* @__PURE__ */ Symbol.for("nodejs.util.inspect.custom")) {
-        return () => `TwChain(${cx(...rules)})`;
+        return () => `TwChain(${_cxCore(rules)})`;
       }
       const name = prop;
       if (name in PARAM_MODS) {
@@ -2945,5 +2945,4 @@ function googleFonts(family, options) {
 
 
 
-
-exports._2xl = _2xl3; exports.absolute = absolute; exports.accentColor = accentColor; exports.active = active; exports.after = after; exports.alignContent = alignContent; exports.animate = animate; exports.antialiased = antialiased; exports.appearance = appearance; exports.aria = aria; exports.ariaChecked = ariaChecked; exports.ariaDisabled = ariaDisabled; exports.ariaExpanded = ariaExpanded; exports.ariaHidden = ariaHidden; exports.ariaPressed = ariaPressed; exports.ariaReadonly = ariaReadonly; exports.ariaRequired = ariaRequired; exports.ariaSelected = ariaSelected; exports.aspectRatio = aspectRatio; exports.autoCols = autoCols; exports.autoRows = autoRows; exports.autofill = autofill; exports.backdrop = backdrop; exports.backdropBlur = backdropBlur; exports.backdropBrightness = backdropBrightness; exports.backdropContrast = backdropContrast; exports.backdropGrayscale = backdropGrayscale; exports.backdropHueRotate = backdropHueRotate; exports.backdropInvert = backdropInvert; exports.backdropOpacity = backdropOpacity; exports.backdropSaturate = backdropSaturate; exports.backdropSepia = backdropSepia; exports.backdrop_ = backdrop_; exports.before = before; exports.bg = bg; exports.bgAttachment = bgAttachment; exports.bgBlendMode = bgBlendMode; exports.bgClip = bgClip; exports.bgGradient = bgGradient; exports.bgImage = bgImage; exports.bgOrigin = bgOrigin; exports.bgPosition = bgPosition; exports.bgRepeat = bgRepeat; exports.bgSize = bgSize; exports.blur = blur2; exports.border = border; exports.borderB = borderB; exports.borderCollapse = borderCollapse; exports.borderColor = borderColor; exports.borderE = borderE; exports.borderL = borderL; exports.borderR = borderR; exports.borderS = borderS; exports.borderSeparate = borderSeparate; exports.borderSpacing = borderSpacing; exports.borderSpacingX = borderSpacingX; exports.borderSpacingY = borderSpacingY; exports.borderStyle = borderStyle; exports.borderT = borderT; exports.borderX = borderX; exports.borderY = borderY; exports.bottom = bottom; exports.boxDecorationBreak = boxDecorationBreak; exports.boxSizing = boxSizing; exports.breakAfter = breakAfter; exports.breakBefore = breakBefore; exports.breakInside = breakInside; exports.brightness = brightness; exports.captionSide = captionSide; exports.caretColor = caretColor; exports.checked = checked; exports.clear_ = clear_; exports.colEnd = colEnd; exports.colSpan = colSpan; exports.colStart = colStart; exports.collapse_ = collapse_; exports.columns = columns; exports.container = container; exports.content_ = content_; exports.contrast = contrast; exports.contrastLess = contrastLess; exports.contrastMore = contrastMore; exports.createTheme = _chunkBAZLFQIVcjs.createTheme; exports.css = css; exports.cursor = cursor; exports.cx = cx; exports.dark = dark; exports.data = data; exports.dcx = dcx; exports.default_ = default_; exports.delay = delay; exports.diagonalFractions = diagonalFractions; exports.disabled = disabled; exports.display = display; exports.divideColor = divideColor; exports.divideStyle = divideStyle; exports.divideX = divideX; exports.divideXReverse = divideXReverse; exports.divideY = divideY; exports.divideYReverse = divideYReverse; exports.dropShadow = dropShadow2; exports.duration = duration; exports.dynamic = dynamic; exports.ease = ease; exports.empty = empty; exports.end = end; exports.even = even; exports.file_ = file_; exports.fill = fill; exports.firstChild = firstChild; exports.firstLetter = firstLetter; exports.firstLine = firstLine; exports.firstOfType = firstOfType; exports.fixed = fixed; exports.flex = flex; exports.flex1 = flex1; exports.flexAuto = flexAuto; exports.flexBasis = flexBasis; exports.flexCol = flexCol; exports.flexColReverse = flexColReverse; exports.flexInitial = flexInitial; exports.flexNone = flexNone; exports.flexNowrap = flexNowrap; exports.flexRow = flexRow; exports.flexRowReverse = flexRowReverse; exports.flexWrap = flexWrap; exports.flexWrapReverse = flexWrapReverse; exports.float_ = float_; exports.focus = focus; exports.focusVisible = focusVisible; exports.focusWithin = focusWithin; exports.font = font; exports.fontFamily = fontFamily; exports.forcedColorAdjust = forcedColorAdjust; exports.forcedColors = forcedColors; exports.gap = gap; exports.gapX = gapX; exports.gapY = gapY; exports.generateCSS = _chunkM34ZK4IVcjs.generateCSS; exports.googleFonts = googleFonts; exports.gradientFrom = gradientFrom; exports.gradientTo = gradientTo; exports.gradientVia = gradientVia; exports.grayscale = grayscale; exports.grid = grid; exports.gridCols = gridCols; exports.gridFlow = gridFlow; exports.gridRows = gridRows; exports.groupActive = groupActive; exports.groupChecked = groupChecked; exports.groupDisabled = groupDisabled; exports.groupEmpty = groupEmpty; exports.groupEven = groupEven; exports.groupFirst = groupFirst; exports.groupFocus = groupFocus; exports.groupFocusVisible = groupFocusVisible; exports.groupFocusWithin = groupFocusWithin; exports.groupHas = groupHas; exports.groupHover = groupHover; exports.groupLast = groupLast; exports.groupOdd = groupOdd; exports.groupOpen = groupOpen; exports.groupVisited = groupVisited; exports.grow = grow; exports.h = h; exports.has_ = has_; exports.hover = hover; exports.hueRotate = hueRotate; exports.hyphens = hyphens; exports.inRange = inRange; exports.indeterminate = indeterminate; exports.injectTheme = _chunk34VD2OBFcjs.injectTheme; exports.inlineFlex = inlineFlex; exports.inset = inset; exports.insetX = insetX; exports.insetY = insetY; exports.invalid = invalid; exports.invert = invert; exports.invisible = invisible; exports.isDynamic = isDynamic; exports.isolate = isolate; exports.isolationAuto = isolationAuto; exports.italic = italic; exports.items = items; exports.justify = justify; exports.justifyItems = justifyItems; exports.justifySelf = justifySelf; exports.landscape = landscape; exports.lastChild = lastChild; exports.lastOfType = lastOfType; exports.layer = layer; exports.leading = leading; exports.left = left; exports.lg = lg3; exports.lineClamp = lineClamp; exports.liningNums = liningNums; exports.listStyleImage = listStyleImage; exports.listStylePosition = listStylePosition; exports.listStyleType = listStyleType; exports.ltr = ltr; exports.m = m; exports.marker = marker; exports.max2xl = max2xl; exports.maxH = maxH; exports.maxLg = maxLg; exports.maxMd = maxMd; exports.maxSm = maxSm; exports.maxW = maxW; exports.maxXl = maxXl; exports.mb = mb; exports.md = md3; exports.me = me; exports.minH = minH; exports.minW = minW; exports.mixBlendMode = mixBlendMode; exports.ml = ml; exports.motionReduce = motionReduce; exports.motionSafe = motionSafe; exports.mr = mr; exports.ms = ms; exports.mt = mt; exports.mx = mx; exports.my = my; exports.normalNums = normalNums; exports.notItalic = notItalic; exports.notSrOnly = notSrOnly; exports.objectFit = objectFit; exports.objectPosition = objectPosition; exports.odd = odd; exports.oldstyleNums = oldstyleNums; exports.onlyChild = onlyChild; exports.onlyOfType = onlyOfType; exports.opacity = opacity; exports.open_ = open_; exports.order = order; exports.ordinal = ordinal; exports.outOfRange = outOfRange; exports.outline = outline; exports.outlineColor = outlineColor; exports.outlineNone = outlineNone; exports.outlineOffset = outlineOffset; exports.outlineStyle = outlineStyle; exports.outlineWidth = outlineWidth; exports.overflow = overflow; exports.overflowX = overflowX; exports.overflowY = overflowY; exports.overscrollBehavior = overscrollBehavior; exports.overscrollX = overscrollX; exports.overscrollY = overscrollY; exports.p = p; exports.pb = pb; exports.pe = pe; exports.peerActive = peerActive; exports.peerChecked = peerChecked; exports.peerDisabled = peerDisabled; exports.peerEmpty = peerEmpty; exports.peerEven = peerEven; exports.peerFirst = peerFirst; exports.peerFocus = peerFocus; exports.peerFocusVisible = peerFocusVisible; exports.peerFocusWithin = peerFocusWithin; exports.peerHas = peerHas; exports.peerHover = peerHover; exports.peerInvalid = peerInvalid; exports.peerLast = peerLast; exports.peerOdd = peerOdd; exports.peerOpen = peerOpen; exports.peerPlaceholderShown = peerPlaceholderShown; exports.peerRequired = peerRequired; exports.peerVisited = peerVisited; exports.pl = pl; exports.placeContent = placeContent; exports.placeItems = placeItems; exports.placeSelf = placeSelf; exports.placeholderShown = placeholderShown; exports.placeholder_ = placeholder_; exports.pointerEvents = pointerEvents; exports.portrait = portrait; exports.pr = pr; exports.print_ = print_; exports.proportionalNums = proportionalNums; exports.ps = ps; exports.pt = pt; exports.px = px; exports.py = py; exports.readOnly = readOnly; exports.relative = relative; exports.required_ = required_; exports.resize = resize; exports.right = right; exports.ring = ring; exports.ringColor = ringColor; exports.ringInset = ringInset; exports.ringOffsetColor = ringOffsetColor; exports.ringOffsetWidth = ringOffsetWidth; exports.rotate = rotate; exports.rounded = rounded; exports.roundedB = roundedB; exports.roundedBL = roundedBL; exports.roundedBR = roundedBR; exports.roundedEE = roundedEE; exports.roundedES = roundedES; exports.roundedL = roundedL; exports.roundedR = roundedR; exports.roundedSE = roundedSE; exports.roundedSS = roundedSS; exports.roundedT = roundedT; exports.roundedTL = roundedTL; exports.roundedTR = roundedTR; exports.rowEnd = rowEnd; exports.rowSpan = rowSpan; exports.rowStart = rowStart; exports.rtl = rtl; exports.saturate = saturate; exports.scale = scale; exports.scaleX = scaleX; exports.scaleY = scaleY; exports.scrollBehavior = scrollBehavior; exports.scrollMargin = scrollMargin; exports.scrollMarginB = scrollMarginB; exports.scrollMarginL = scrollMarginL; exports.scrollMarginR = scrollMarginR; exports.scrollMarginT = scrollMarginT; exports.scrollMarginX = scrollMarginX; exports.scrollMarginY = scrollMarginY; exports.scrollPadding = scrollPadding; exports.scrollPaddingB = scrollPaddingB; exports.scrollPaddingL = scrollPaddingL; exports.scrollPaddingR = scrollPaddingR; exports.scrollPaddingT = scrollPaddingT; exports.scrollPaddingX = scrollPaddingX; exports.scrollPaddingY = scrollPaddingY; exports.select = select; exports.selection_ = selection_; exports.self = self; exports.sepia = sepia; exports.setTheme = _chunk34VD2OBFcjs.setTheme; exports.shadow = shadow; exports.shadowColor = shadowColor; exports.shrink = shrink; exports.size = size; exports.skewX = skewX; exports.skewY = skewY; exports.slashedZero = slashedZero; exports.sm = sm3; exports.snapAlign = snapAlign; exports.snapStop = snapStop; exports.snapType = snapType; exports.spaceX = spaceX; exports.spaceXReverse = spaceXReverse; exports.spaceY = spaceY; exports.spaceYReverse = spaceYReverse; exports.srOnly = srOnly; exports.stackedFractions = stackedFractions; exports.start = start; exports.static_ = static_; exports.sticky = sticky; exports.stroke = stroke; exports.strokeWidth = strokeWidth; exports.subpixelAntialiased = subpixelAntialiased; exports.supports = supports; exports.tableLayout = tableLayout; exports.tabularNums = tabularNums; exports.target = target; exports.text = text; exports.textAlign = textAlign; exports.textColor = textColor; exports.textDecoration = textDecoration; exports.textDecorationColor = textDecorationColor; exports.textDecorationStyle = textDecorationStyle; exports.textDecorationThickness = textDecorationThickness; exports.textIndent = textIndent; exports.textOverflow = textOverflow; exports.textTransform = textTransform; exports.textUnderlineOffset = textUnderlineOffset; exports.textWrap = textWrap; exports.top = top; exports.touchAction = touchAction; exports.tracking = tracking; exports.transformGpu = transformGpu; exports.transformNone = transformNone; exports.transformOrigin = transformOrigin; exports.transition = transition; exports.transitionAll = transitionAll; exports.transitionColors = transitionColors; exports.transitionNone = transitionNone; exports.transitionOpacity = transitionOpacity; exports.transitionShadow = transitionShadow; exports.transitionTransform = transitionTransform; exports.translateX = translateX; exports.translateY = translateY; exports.truncate = truncate; exports.tw = tw; exports.valid = valid; exports.verticalAlign = verticalAlign; exports.visible = visible; exports.visited = visited; exports.w = w; exports.when = when; exports.whitespace = whitespace; exports.willChange = willChange; exports.wordBreak = wordBreak; exports.xl = xl3; exports.z = z;
+exports._2xl = _2xl3; exports.absolute = absolute; exports.accentColor = accentColor; exports.active = active; exports.after = after; exports.alignContent = alignContent; exports.animate = animate; exports.antialiased = antialiased; exports.appearance = appearance; exports.aria = aria; exports.ariaChecked = ariaChecked; exports.ariaDisabled = ariaDisabled; exports.ariaExpanded = ariaExpanded; exports.ariaHidden = ariaHidden; exports.ariaPressed = ariaPressed; exports.ariaReadonly = ariaReadonly; exports.ariaRequired = ariaRequired; exports.ariaSelected = ariaSelected; exports.aspectRatio = aspectRatio; exports.autoCols = autoCols; exports.autoRows = autoRows; exports.autofill = autofill; exports.backdrop = backdrop; exports.backdropBlur = backdropBlur; exports.backdropBrightness = backdropBrightness; exports.backdropContrast = backdropContrast; exports.backdropGrayscale = backdropGrayscale; exports.backdropHueRotate = backdropHueRotate; exports.backdropInvert = backdropInvert; exports.backdropOpacity = backdropOpacity; exports.backdropSaturate = backdropSaturate; exports.backdropSepia = backdropSepia; exports.backdrop_ = backdrop_; exports.before = before; exports.bg = bg; exports.bgAttachment = bgAttachment; exports.bgBlendMode = bgBlendMode; exports.bgClip = bgClip; exports.bgGradient = bgGradient; exports.bgImage = bgImage; exports.bgOrigin = bgOrigin; exports.bgPosition = bgPosition; exports.bgRepeat = bgRepeat; exports.bgSize = bgSize; exports.blur = blur2; exports.border = border; exports.borderB = borderB; exports.borderCollapse = borderCollapse; exports.borderColor = borderColor; exports.borderE = borderE; exports.borderL = borderL; exports.borderR = borderR; exports.borderS = borderS; exports.borderSeparate = borderSeparate; exports.borderSpacing = borderSpacing; exports.borderSpacingX = borderSpacingX; exports.borderSpacingY = borderSpacingY; exports.borderStyle = borderStyle; exports.borderT = borderT; exports.borderX = borderX; exports.borderY = borderY; exports.bottom = bottom; exports.boxDecorationBreak = boxDecorationBreak; exports.boxSizing = boxSizing; exports.breakAfter = breakAfter; exports.breakBefore = breakBefore; exports.breakInside = breakInside; exports.brightness = brightness; exports.captionSide = captionSide; exports.caretColor = caretColor; exports.checked = checked; exports.clear_ = clear_; exports.colEnd = colEnd; exports.colSpan = colSpan; exports.colStart = colStart; exports.collapse_ = collapse_; exports.columns = columns; exports.container = container; exports.content_ = content_; exports.contrast = contrast; exports.contrastLess = contrastLess; exports.contrastMore = contrastMore; exports.createTheme = _chunkBAZLFQIVcjs.createTheme; exports.cursor = cursor; exports.cx = cx; exports.dark = dark; exports.data = data; exports.dcx = dcx; exports.default_ = default_; exports.delay = delay; exports.diagonalFractions = diagonalFractions; exports.disabled = disabled; exports.display = display; exports.divideColor = divideColor; exports.divideStyle = divideStyle; exports.divideX = divideX; exports.divideXReverse = divideXReverse; exports.divideY = divideY; exports.divideYReverse = divideYReverse; exports.dropShadow = dropShadow2; exports.duration = duration; exports.dynamic = dynamic; exports.ease = ease; exports.empty = empty; exports.end = end; exports.even = even; exports.file_ = file_; exports.fill = fill; exports.firstChild = firstChild; exports.firstLetter = firstLetter; exports.firstLine = firstLine; exports.firstOfType = firstOfType; exports.fixed = fixed; exports.flex = flex; exports.flex1 = flex1; exports.flexAuto = flexAuto; exports.flexBasis = flexBasis; exports.flexCol = flexCol; exports.flexColReverse = flexColReverse; exports.flexInitial = flexInitial; exports.flexNone = flexNone; exports.flexNowrap = flexNowrap; exports.flexRow = flexRow; exports.flexRowReverse = flexRowReverse; exports.flexWrap = flexWrap; exports.flexWrapReverse = flexWrapReverse; exports.float_ = float_; exports.focus = focus; exports.focusVisible = focusVisible; exports.focusWithin = focusWithin; exports.font = font; exports.fontFamily = fontFamily; exports.forcedColorAdjust = forcedColorAdjust; exports.forcedColors = forcedColors; exports.gap = gap; exports.gapX = gapX; exports.gapY = gapY; exports.generateCSS = _chunkM34ZK4IVcjs.generateCSS; exports.googleFonts = googleFonts; exports.gradientFrom = gradientFrom; exports.gradientTo = gradientTo; exports.gradientVia = gradientVia; exports.grayscale = grayscale; exports.grid = grid; exports.gridCols = gridCols; exports.gridFlow = gridFlow; exports.gridRows = gridRows; exports.groupActive = groupActive; exports.groupChecked = groupChecked; exports.groupDisabled = groupDisabled; exports.groupEmpty = groupEmpty; exports.groupEven = groupEven; exports.groupFirst = groupFirst; exports.groupFocus = groupFocus; exports.groupFocusVisible = groupFocusVisible; exports.groupFocusWithin = groupFocusWithin; exports.groupHas = groupHas; exports.groupHover = groupHover; exports.groupLast = groupLast; exports.groupOdd = groupOdd; exports.groupOpen = groupOpen; exports.groupVisited = groupVisited; exports.grow = grow; exports.h = h; exports.has_ = has_; exports.hover = hover; exports.hueRotate = hueRotate; exports.hyphens = hyphens; exports.inRange = inRange; exports.indeterminate = indeterminate; exports.injectTheme = _chunk34VD2OBFcjs.injectTheme; exports.inlineFlex = inlineFlex; exports.inset = inset; exports.insetX = insetX; exports.insetY = insetY; exports.invalid = invalid; exports.invert = invert; exports.invisible = invisible; exports.isDynamic = isDynamic; exports.isolate = isolate; exports.isolationAuto = isolationAuto; exports.italic = italic; exports.items = items; exports.justify = justify; exports.justifyItems = justifyItems; exports.justifySelf = justifySelf; exports.landscape = landscape; exports.lastChild = lastChild; exports.lastOfType = lastOfType; exports.layer = layer; exports.leading = leading; exports.left = left; exports.lg = lg3; exports.lineClamp = lineClamp; exports.liningNums = liningNums; exports.listStyleImage = listStyleImage; exports.listStylePosition = listStylePosition; exports.listStyleType = listStyleType; exports.ltr = ltr; exports.m = m; exports.marker = marker; exports.max2xl = max2xl; exports.maxH = maxH; exports.maxLg = maxLg; exports.maxMd = maxMd; exports.maxSm = maxSm; exports.maxW = maxW; exports.maxXl = maxXl; exports.mb = mb; exports.md = md3; exports.me = me; exports.minH = minH; exports.minW = minW; exports.mixBlendMode = mixBlendMode; exports.ml = ml; exports.motionReduce = motionReduce; exports.motionSafe = motionSafe; exports.mr = mr; exports.ms = ms; exports.mt = mt; exports.mx = mx; exports.my = my; exports.normalNums = normalNums; exports.notItalic = notItalic; exports.notSrOnly = notSrOnly; exports.objectFit = objectFit; exports.objectPosition = objectPosition; exports.odd = odd; exports.oldstyleNums = oldstyleNums; exports.onlyChild = onlyChild; exports.onlyOfType = onlyOfType; exports.opacity = opacity; exports.open_ = open_; exports.order = order; exports.ordinal = ordinal; exports.outOfRange = outOfRange; exports.outline = outline; exports.outlineColor = outlineColor; exports.outlineNone = outlineNone; exports.outlineOffset = outlineOffset; exports.outlineStyle = outlineStyle; exports.outlineWidth = outlineWidth; exports.overflow = overflow; exports.overflowX = overflowX; exports.overflowY = overflowY; exports.overscrollBehavior = overscrollBehavior; exports.overscrollX = overscrollX; exports.overscrollY = overscrollY; exports.p = p; exports.pb = pb; exports.pe = pe; exports.peerActive = peerActive; exports.peerChecked = peerChecked; exports.peerDisabled = peerDisabled; exports.peerEmpty = peerEmpty; exports.peerEven = peerEven; exports.peerFirst = peerFirst; exports.peerFocus = peerFocus; exports.peerFocusVisible = peerFocusVisible; exports.peerFocusWithin = peerFocusWithin; exports.peerHas = peerHas; exports.peerHover = peerHover; exports.peerInvalid = peerInvalid; exports.peerLast = peerLast; exports.peerOdd = peerOdd; exports.peerOpen = peerOpen; exports.peerPlaceholderShown = peerPlaceholderShown; exports.peerRequired = peerRequired; exports.peerVisited = peerVisited; exports.pl = pl; exports.placeContent = placeContent; exports.placeItems = placeItems; exports.placeSelf = placeSelf; exports.placeholderShown = placeholderShown; exports.placeholder_ = placeholder_; exports.pointerEvents = pointerEvents; exports.portrait = portrait; exports.pr = pr; exports.print_ = print_; exports.proportionalNums = proportionalNums; exports.ps = ps; exports.pt = pt; exports.px = px; exports.py = py; exports.readOnly = readOnly; exports.relative = relative; exports.required_ = required_; exports.resize = resize; exports.right = right; exports.ring = ring; exports.ringColor = ringColor; exports.ringInset = ringInset; exports.ringOffsetColor = ringOffsetColor; exports.ringOffsetWidth = ringOffsetWidth; exports.rotate = rotate; exports.rounded = rounded; exports.roundedB = roundedB; exports.roundedBL = roundedBL; exports.roundedBR = roundedBR; exports.roundedEE = roundedEE; exports.roundedES = roundedES; exports.roundedL = roundedL; exports.roundedR = roundedR; exports.roundedSE = roundedSE; exports.roundedSS = roundedSS; exports.roundedT = roundedT; exports.roundedTL = roundedTL; exports.roundedTR = roundedTR; exports.rowEnd = rowEnd; exports.rowSpan = rowSpan; exports.rowStart = rowStart; exports.rtl = rtl; exports.saturate = saturate; exports.scale = scale; exports.scaleX = scaleX; exports.scaleY = scaleY; exports.scrollBehavior = scrollBehavior; exports.scrollMargin = scrollMargin; exports.scrollMarginB = scrollMarginB; exports.scrollMarginL = scrollMarginL; exports.scrollMarginR = scrollMarginR; exports.scrollMarginT = scrollMarginT; exports.scrollMarginX = scrollMarginX; exports.scrollMarginY = scrollMarginY; exports.scrollPadding = scrollPadding; exports.scrollPaddingB = scrollPaddingB; exports.scrollPaddingL = scrollPaddingL; exports.scrollPaddingR = scrollPaddingR; exports.scrollPaddingT = scrollPaddingT; exports.scrollPaddingX = scrollPaddingX; exports.scrollPaddingY = scrollPaddingY; exports.select = select; exports.selection_ = selection_; exports.self = self; exports.sepia = sepia; exports.setTheme = _chunk34VD2OBFcjs.setTheme; exports.shadow = shadow; exports.shadowColor = shadowColor; exports.shrink = shrink; exports.size = size; exports.skewX = skewX; exports.skewY = skewY; exports.slashedZero = slashedZero; exports.sm = sm3; exports.snapAlign = snapAlign; exports.snapStop = snapStop; exports.snapType = snapType; exports.spaceX = spaceX; exports.spaceXReverse = spaceXReverse; exports.spaceY = spaceY; exports.spaceYReverse = spaceYReverse; exports.srOnly = srOnly; exports.stackedFractions = stackedFractions; exports.start = start; exports.static_ = static_; exports.sticky = sticky; exports.stroke = stroke; exports.strokeWidth = strokeWidth; exports.subpixelAntialiased = subpixelAntialiased; exports.supports = supports; exports.tableLayout = tableLayout; exports.tabularNums = tabularNums; exports.target = target; exports.text = text; exports.textAlign = textAlign; exports.textColor = textColor; exports.textDecoration = textDecoration; exports.textDecorationColor = textDecorationColor; exports.textDecorationStyle = textDecorationStyle; exports.textDecorationThickness = textDecorationThickness; exports.textIndent = textIndent; exports.textOverflow = textOverflow; exports.textTransform = textTransform; exports.textUnderlineOffset = textUnderlineOffset; exports.textWrap = textWrap; exports.top = top; exports.touchAction = touchAction; exports.tracking = tracking; exports.transformGpu = transformGpu; exports.transformNone = transformNone; exports.transformOrigin = transformOrigin; exports.transition = transition; exports.transitionAll = transitionAll; exports.transitionColors = transitionColors; exports.transitionNone = transitionNone; exports.transitionOpacity = transitionOpacity; exports.transitionShadow = transitionShadow; exports.transitionTransform = transitionTransform; exports.translateX = translateX; exports.translateY = translateY; exports.truncate = truncate; exports.tw = tw; exports.valid = valid; exports.verticalAlign = verticalAlign; exports.visible = visible; exports.visited = visited; exports.w = w; exports.when = when; exports.whitespace = whitespace; exports.willChange = willChange; exports.wordBreak = wordBreak; exports.xl = xl3; exports.z = z;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { S as StyleRule, D as DynamicResult, M as Modifier, a as DynamicValue } from './types-FfRD4Hbd.cjs';
-export { B as Brand, C as CSSColor, b as CSSFontWeight, c as CSSLength, d as CSSShadow, e as ColorInput, R as RadiusInput, f as ShadowInput, g as SizeInput, h as SpacingInput, U as Utility, i as dynamic, j as isDynamic } from './types-FfRD4Hbd.cjs';
+import { S as StyleRule, D as DynamicResult, M as Modifier, a as DynamicValue } from './types-C2b7lqJA.cjs';
+export { B as Brand, C as CSSColor, b as CSSFontWeight, c as CSSLength, d as CSSShadow, e as ColorInput, R as RadiusInput, f as ShadowInput, g as SizeInput, h as SpacingInput, U as Utility, i as dynamic, j as isDynamic } from './types-C2b7lqJA.cjs';
 export { ThemeConfig, ThemeResult, ThemeVars, createTheme } from './theme/createTheme.cjs';
 export { i as injectTheme, s as setTheme } from './inject-theme-CTzyfQH0.cjs';
 import { T as TextSize } from './typography-C8wipcCK.cjs';
@@ -203,79 +203,6 @@ declare function dcx(...args: (StyleRule | string)[]): DynamicResult;
  */
 declare function when(...modifiers: Modifier[]): (...rules: StyleRule[]) => StyleRule;
 
-/**
- * Creates a {@link StyleRule} from a plain object of CSS declarations.
- *
- * Use this overload when you want to write raw CSS property-value pairs
- * without reaching for a specific utility function.
- *
- * @param declarations - A record mapping CSS property names to their values.
- * @returns A {@link StyleRule} containing the given declarations.
- *
- * @example Object of declarations
- * ```ts
- * import { cx, css } from 'typewritingclass'
- *
- * cx(css({ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '1rem' }))
- * // CSS: display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
- * ```
- */
-declare function css(declarations: Record<string, string>): StyleRule;
-/**
- * Creates a {@link StyleRule} from a tagged template literal of CSS declarations.
- *
- * Interpolated values can be plain strings, numbers, or {@link DynamicValue}
- * instances. Dynamic values are replaced with `var(--twc-dN)` references in
- * the generated CSS and must be applied to the element via inline styles
- * (see {@link dcx}).
- *
- * @param strings - The static portions of the template literal (provided automatically).
- * @param values - Interpolated expressions -- strings, numbers, or {@link DynamicValue}s.
- * @returns A {@link StyleRule} with parsed declarations (and `dynamicBindings`
- *          if any interpolated value was created with {@link dynamic}).
- *
- * @example Tagged template with static values
- * ```ts
- * import { cx, css } from 'typewritingclass'
- *
- * cx(css`
- *   display: flex;
- *   align-items: center;
- *   gap: 0.5rem;
- * `)
- * // CSS: display: flex; align-items: center; gap: 0.5rem;
- * ```
- *
- * @example Tagged template with interpolated values
- * ```ts
- * import { cx, css } from 'typewritingclass'
- * import { blue } from 'typewritingclass/theme/colors'
- *
- * const size = '2rem'
- * cx(css`
- *   width: ${size};
- *   height: ${size};
- *   background-color: ${blue[500]};
- * `)
- * // CSS: width: 2rem; height: 2rem; background-color: #3b82f6;
- * ```
- *
- * @example Tagged template with dynamic values
- * ```ts
- * import { dcx, css, dynamic } from 'typewritingclass'
- *
- * const color = dynamic('#e11d48')
- * const { className, style } = dcx(css`
- *   background-color: ${color};
- *   padding: 1rem;
- * `)
- * // className => "_a1b2c"
- * // style     => { '--twc-d0': '#e11d48' }
- * // CSS: ._a1b2c { background-color: var(--twc-d0); padding: 1rem; }
- * ```
- */
-declare function css(strings: TemplateStringsArray, ...values: (string | number | DynamicValue)[]): StyleRule;
-
 /**
  * Generates a complete CSS stylesheet string from all registered rules.
  *
@@ -3539,4 +3466,4 @@ declare function peerHas(selector: string): Modifier;
 declare const rtl: Modifier;
 declare const ltr: Modifier;
 
-export { DynamicResult, DynamicValue, Modifier, StyleRule, type TwChain, _2xl, absolute, accentColor, active, after, alignContent, animate, antialiased, appearance, aria, ariaChecked, ariaDisabled, ariaExpanded, ariaHidden, ariaPressed, ariaReadonly, ariaRequired, ariaSelected, aspectRatio, autoCols, autoRows, autofill, backdrop, backdropBlur, backdropBrightness, backdropContrast, backdropGrayscale, backdropHueRotate, backdropInvert, backdropOpacity, backdropSaturate, backdropSepia, backdrop_, before, bg, bgAttachment, bgBlendMode, bgClip, bgGradient, bgImage, bgOrigin, bgPosition, bgRepeat, bgSize, blur, border, borderB, borderCollapse, borderColor, borderE, borderL, borderR, borderS, borderSeparate, borderSpacing, borderSpacingX, borderSpacingY, borderStyle, borderT, borderX, borderY, bottom, boxDecorationBreak, boxSizing, breakAfter, breakBefore, breakInside, brightness, captionSide, caretColor, checked, clear_, colEnd, colSpan, colStart, collapse_, columns, container, content_, contrast, contrastLess, contrastMore, css, cursor, cx, dark, data, dcx, default_, delay, diagonalFractions, disabled, display, divideColor, divideStyle, divideX, divideXReverse, divideY, divideYReverse, dropShadow, duration, ease, empty, end, even, file_, fill, firstChild, firstLetter, firstLine, firstOfType, fixed, flex, flex1, flexAuto, flexBasis, flexCol, flexColReverse, flexInitial, flexNone, flexNowrap, flexRow, flexRowReverse, flexWrap, flexWrapReverse, float_, focus, focusVisible, focusWithin, font, fontFamily, forcedColorAdjust, forcedColors, gap, gapX, gapY, generateCSS, googleFonts, gradientFrom, gradientTo, gradientVia, grayscale, grid, gridCols, gridFlow, gridRows, groupActive, groupChecked, groupDisabled, groupEmpty, groupEven, groupFirst, groupFocus, groupFocusVisible, groupFocusWithin, groupHas, groupHover, groupLast, groupOdd, groupOpen, groupVisited, grow, h, has_, hover, hueRotate, hyphens, inRange, indeterminate, inlineFlex, inset, insetX, insetY, invalid, invert, invisible, isolate, isolationAuto, italic, items, justify, justifyItems, justifySelf, landscape, lastChild, lastOfType, layer, leading, left, lg, lineClamp, liningNums, listStyleImage, listStylePosition, listStyleType, ltr, m, marker, max2xl, maxH, maxLg, maxMd, maxSm, maxW, maxXl, mb, md, me, minH, minW, mixBlendMode, ml, motionReduce, motionSafe, mr, ms, mt, mx, my, normalNums, notItalic, notSrOnly, objectFit, objectPosition, odd, oldstyleNums, onlyChild, onlyOfType, opacity, open_, order, ordinal, outOfRange, outline, outlineColor, outlineNone, outlineOffset, outlineStyle, outlineWidth, overflow, overflowX, overflowY, overscrollBehavior, overscrollX, overscrollY, p, pb, pe, peerActive, peerChecked, peerDisabled, peerEmpty, peerEven, peerFirst, peerFocus, peerFocusVisible, peerFocusWithin, peerHas, peerHover, peerInvalid, peerLast, peerOdd, peerOpen, peerPlaceholderShown, peerRequired, peerVisited, pl, placeContent, placeItems, placeSelf, placeholderShown, placeholder_, pointerEvents, portrait, pr, print_, proportionalNums, ps, pt, px, py, readOnly, relative, required_, resize, right, ring, ringColor, ringInset, ringOffsetColor, ringOffsetWidth, rotate, rounded, roundedB, roundedBL, roundedBR, roundedEE, roundedES, roundedL, roundedR, roundedSE, roundedSS, roundedT, roundedTL, roundedTR, rowEnd, rowSpan, rowStart, rtl, saturate, scale, scaleX, scaleY, scrollBehavior, scrollMargin, scrollMarginB, scrollMarginL, scrollMarginR, scrollMarginT, scrollMarginX, scrollMarginY, scrollPadding, scrollPaddingB, scrollPaddingL, scrollPaddingR, scrollPaddingT, scrollPaddingX, scrollPaddingY, select, selection_, self, sepia, shadow, shadowColor, shrink, size, skewX, skewY, slashedZero, sm, snapAlign, snapStop, snapType, spaceX, spaceXReverse, spaceY, spaceYReverse, srOnly, stackedFractions, start, static_, sticky, stroke, strokeWidth, subpixelAntialiased, supports, tableLayout, tabularNums, target, text, textAlign, textColor, textDecoration, textDecorationColor, textDecorationStyle, textDecorationThickness, textIndent, textOverflow, textTransform, textUnderlineOffset, textWrap, top, touchAction, tracking, transformGpu, transformNone, transformOrigin, transition, transitionAll, transitionColors, transitionNone, transitionOpacity, transitionShadow, transitionTransform, translateX, translateY, truncate, tw, valid, verticalAlign, visible, visited, w, when, whitespace, willChange, wordBreak, xl, z };
+export { DynamicResult, DynamicValue, Modifier, StyleRule, type TwChain, _2xl, absolute, accentColor, active, after, alignContent, animate, antialiased, appearance, aria, ariaChecked, ariaDisabled, ariaExpanded, ariaHidden, ariaPressed, ariaReadonly, ariaRequired, ariaSelected, aspectRatio, autoCols, autoRows, autofill, backdrop, backdropBlur, backdropBrightness, backdropContrast, backdropGrayscale, backdropHueRotate, backdropInvert, backdropOpacity, backdropSaturate, backdropSepia, backdrop_, before, bg, bgAttachment, bgBlendMode, bgClip, bgGradient, bgImage, bgOrigin, bgPosition, bgRepeat, bgSize, blur, border, borderB, borderCollapse, borderColor, borderE, borderL, borderR, borderS, borderSeparate, borderSpacing, borderSpacingX, borderSpacingY, borderStyle, borderT, borderX, borderY, bottom, boxDecorationBreak, boxSizing, breakAfter, breakBefore, breakInside, brightness, captionSide, caretColor, checked, clear_, colEnd, colSpan, colStart, collapse_, columns, container, content_, contrast, contrastLess, contrastMore, cursor, cx, dark, data, dcx, default_, delay, diagonalFractions, disabled, display, divideColor, divideStyle, divideX, divideXReverse, divideY, divideYReverse, dropShadow, duration, ease, empty, end, even, file_, fill, firstChild, firstLetter, firstLine, firstOfType, fixed, flex, flex1, flexAuto, flexBasis, flexCol, flexColReverse, flexInitial, flexNone, flexNowrap, flexRow, flexRowReverse, flexWrap, flexWrapReverse, float_, focus, focusVisible, focusWithin, font, fontFamily, forcedColorAdjust, forcedColors, gap, gapX, gapY, generateCSS, googleFonts, gradientFrom, gradientTo, gradientVia, grayscale, grid, gridCols, gridFlow, gridRows, groupActive, groupChecked, groupDisabled, groupEmpty, groupEven, groupFirst, groupFocus, groupFocusVisible, groupFocusWithin, groupHas, groupHover, groupLast, groupOdd, groupOpen, groupVisited, grow, h, has_, hover, hueRotate, hyphens, inRange, indeterminate, inlineFlex, inset, insetX, insetY, invalid, invert, invisible, isolate, isolationAuto, italic, items, justify, justifyItems, justifySelf, landscape, lastChild, lastOfType, layer, leading, left, lg, lineClamp, liningNums, listStyleImage, listStylePosition, listStyleType, ltr, m, marker, max2xl, maxH, maxLg, maxMd, maxSm, maxW, maxXl, mb, md, me, minH, minW, mixBlendMode, ml, motionReduce, motionSafe, mr, ms, mt, mx, my, normalNums, notItalic, notSrOnly, objectFit, objectPosition, odd, oldstyleNums, onlyChild, onlyOfType, opacity, open_, order, ordinal, outOfRange, outline, outlineColor, outlineNone, outlineOffset, outlineStyle, outlineWidth, overflow, overflowX, overflowY, overscrollBehavior, overscrollX, overscrollY, p, pb, pe, peerActive, peerChecked, peerDisabled, peerEmpty, peerEven, peerFirst, peerFocus, peerFocusVisible, peerFocusWithin, peerHas, peerHover, peerInvalid, peerLast, peerOdd, peerOpen, peerPlaceholderShown, peerRequired, peerVisited, pl, placeContent, placeItems, placeSelf, placeholderShown, placeholder_, pointerEvents, portrait, pr, print_, proportionalNums, ps, pt, px, py, readOnly, relative, required_, resize, right, ring, ringColor, ringInset, ringOffsetColor, ringOffsetWidth, rotate, rounded, roundedB, roundedBL, roundedBR, roundedEE, roundedES, roundedL, roundedR, roundedSE, roundedSS, roundedT, roundedTL, roundedTR, rowEnd, rowSpan, rowStart, rtl, saturate, scale, scaleX, scaleY, scrollBehavior, scrollMargin, scrollMarginB, scrollMarginL, scrollMarginR, scrollMarginT, scrollMarginX, scrollMarginY, scrollPadding, scrollPaddingB, scrollPaddingL, scrollPaddingR, scrollPaddingT, scrollPaddingX, scrollPaddingY, select, selection_, self, sepia, shadow, shadowColor, shrink, size, skewX, skewY, slashedZero, sm, snapAlign, snapStop, snapType, spaceX, spaceXReverse, spaceY, spaceYReverse, srOnly, stackedFractions, start, static_, sticky, stroke, strokeWidth, subpixelAntialiased, supports, tableLayout, tabularNums, target, text, textAlign, textColor, textDecoration, textDecorationColor, textDecorationStyle, textDecorationThickness, textIndent, textOverflow, textTransform, textUnderlineOffset, textWrap, top, touchAction, tracking, transformGpu, transformNone, transformOrigin, transition, transitionAll, transitionColors, transitionNone, transitionOpacity, transitionShadow, transitionTransform, translateX, translateY, truncate, tw, valid, verticalAlign, visible, visited, w, when, whitespace, willChange, wordBreak, xl, z };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { S as StyleRule, D as DynamicResult, M as Modifier, a as DynamicValue } from './types-FfRD4Hbd.js';
-export { B as Brand, C as CSSColor, b as CSSFontWeight, c as CSSLength, d as CSSShadow, e as ColorInput, R as RadiusInput, f as ShadowInput, g as SizeInput, h as SpacingInput, U as Utility, i as dynamic, j as isDynamic } from './types-FfRD4Hbd.js';
+import { S as StyleRule, D as DynamicResult, M as Modifier, a as DynamicValue } from './types-C2b7lqJA.js';
+export { B as Brand, C as CSSColor, b as CSSFontWeight, c as CSSLength, d as CSSShadow, e as ColorInput, R as RadiusInput, f as ShadowInput, g as SizeInput, h as SpacingInput, U as Utility, i as dynamic, j as isDynamic } from './types-C2b7lqJA.js';
 export { ThemeConfig, ThemeResult, ThemeVars, createTheme } from './theme/createTheme.js';
 export { i as injectTheme, s as setTheme } from './inject-theme-CTzyfQH0.js';
 import { T as TextSize } from './typography-C8wipcCK.js';
@@ -203,79 +203,6 @@ declare function dcx(...args: (StyleRule | string)[]): DynamicResult;
  */
 declare function when(...modifiers: Modifier[]): (...rules: StyleRule[]) => StyleRule;
 
-/**
- * Creates a {@link StyleRule} from a plain object of CSS declarations.
- *
- * Use this overload when you want to write raw CSS property-value pairs
- * without reaching for a specific utility function.
- *
- * @param declarations - A record mapping CSS property names to their values.
- * @returns A {@link StyleRule} containing the given declarations.
- *
- * @example Object of declarations
- * ```ts
- * import { cx, css } from 'typewritingclass'
- *
- * cx(css({ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '1rem' }))
- * // CSS: display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
- * ```
- */
-declare function css(declarations: Record<string, string>): StyleRule;
-/**
- * Creates a {@link StyleRule} from a tagged template literal of CSS declarations.
- *
- * Interpolated values can be plain strings, numbers, or {@link DynamicValue}
- * instances. Dynamic values are replaced with `var(--twc-dN)` references in
- * the generated CSS and must be applied to the element via inline styles
- * (see {@link dcx}).
- *
- * @param strings - The static portions of the template literal (provided automatically).
- * @param values - Interpolated expressions -- strings, numbers, or {@link DynamicValue}s.
- * @returns A {@link StyleRule} with parsed declarations (and `dynamicBindings`
- *          if any interpolated value was created with {@link dynamic}).
- *
- * @example Tagged template with static values
- * ```ts
- * import { cx, css } from 'typewritingclass'
- *
- * cx(css`
- *   display: flex;
- *   align-items: center;
- *   gap: 0.5rem;
- * `)
- * // CSS: display: flex; align-items: center; gap: 0.5rem;
- * ```
- *
- * @example Tagged template with interpolated values
- * ```ts
- * import { cx, css } from 'typewritingclass'
- * import { blue } from 'typewritingclass/theme/colors'
- *
- * const size = '2rem'
- * cx(css`
- *   width: ${size};
- *   height: ${size};
- *   background-color: ${blue[500]};
- * `)
- * // CSS: width: 2rem; height: 2rem; background-color: #3b82f6;
- * ```
- *
- * @example Tagged template with dynamic values
- * ```ts
- * import { dcx, css, dynamic } from 'typewritingclass'
- *
- * const color = dynamic('#e11d48')
- * const { className, style } = dcx(css`
- *   background-color: ${color};
- *   padding: 1rem;
- * `)
- * // className => "_a1b2c"
- * // style     => { '--twc-d0': '#e11d48' }
- * // CSS: ._a1b2c { background-color: var(--twc-d0); padding: 1rem; }
- * ```
- */
-declare function css(strings: TemplateStringsArray, ...values: (string | number | DynamicValue)[]): StyleRule;
-
 /**
  * Generates a complete CSS stylesheet string from all registered rules.
  *
@@ -3539,4 +3466,4 @@ declare function peerHas(selector: string): Modifier;
 declare const rtl: Modifier;
 declare const ltr: Modifier;
 
-export { DynamicResult, DynamicValue, Modifier, StyleRule, type TwChain, _2xl, absolute, accentColor, active, after, alignContent, animate, antialiased, appearance, aria, ariaChecked, ariaDisabled, ariaExpanded, ariaHidden, ariaPressed, ariaReadonly, ariaRequired, ariaSelected, aspectRatio, autoCols, autoRows, autofill, backdrop, backdropBlur, backdropBrightness, backdropContrast, backdropGrayscale, backdropHueRotate, backdropInvert, backdropOpacity, backdropSaturate, backdropSepia, backdrop_, before, bg, bgAttachment, bgBlendMode, bgClip, bgGradient, bgImage, bgOrigin, bgPosition, bgRepeat, bgSize, blur, border, borderB, borderCollapse, borderColor, borderE, borderL, borderR, borderS, borderSeparate, borderSpacing, borderSpacingX, borderSpacingY, borderStyle, borderT, borderX, borderY, bottom, boxDecorationBreak, boxSizing, breakAfter, breakBefore, breakInside, brightness, captionSide, caretColor, checked, clear_, colEnd, colSpan, colStart, collapse_, columns, container, content_, contrast, contrastLess, contrastMore, css, cursor, cx, dark, data, dcx, default_, delay, diagonalFractions, disabled, display, divideColor, divideStyle, divideX, divideXReverse, divideY, divideYReverse, dropShadow, duration, ease, empty, end, even, file_, fill, firstChild, firstLetter, firstLine, firstOfType, fixed, flex, flex1, flexAuto, flexBasis, flexCol, flexColReverse, flexInitial, flexNone, flexNowrap, flexRow, flexRowReverse, flexWrap, flexWrapReverse, float_, focus, focusVisible, focusWithin, font, fontFamily, forcedColorAdjust, forcedColors, gap, gapX, gapY, generateCSS, googleFonts, gradientFrom, gradientTo, gradientVia, grayscale, grid, gridCols, gridFlow, gridRows, groupActive, groupChecked, groupDisabled, groupEmpty, groupEven, groupFirst, groupFocus, groupFocusVisible, groupFocusWithin, groupHas, groupHover, groupLast, groupOdd, groupOpen, groupVisited, grow, h, has_, hover, hueRotate, hyphens, inRange, indeterminate, inlineFlex, inset, insetX, insetY, invalid, invert, invisible, isolate, isolationAuto, italic, items, justify, justifyItems, justifySelf, landscape, lastChild, lastOfType, layer, leading, left, lg, lineClamp, liningNums, listStyleImage, listStylePosition, listStyleType, ltr, m, marker, max2xl, maxH, maxLg, maxMd, maxSm, maxW, maxXl, mb, md, me, minH, minW, mixBlendMode, ml, motionReduce, motionSafe, mr, ms, mt, mx, my, normalNums, notItalic, notSrOnly, objectFit, objectPosition, odd, oldstyleNums, onlyChild, onlyOfType, opacity, open_, order, ordinal, outOfRange, outline, outlineColor, outlineNone, outlineOffset, outlineStyle, outlineWidth, overflow, overflowX, overflowY, overscrollBehavior, overscrollX, overscrollY, p, pb, pe, peerActive, peerChecked, peerDisabled, peerEmpty, peerEven, peerFirst, peerFocus, peerFocusVisible, peerFocusWithin, peerHas, peerHover, peerInvalid, peerLast, peerOdd, peerOpen, peerPlaceholderShown, peerRequired, peerVisited, pl, placeContent, placeItems, placeSelf, placeholderShown, placeholder_, pointerEvents, portrait, pr, print_, proportionalNums, ps, pt, px, py, readOnly, relative, required_, resize, right, ring, ringColor, ringInset, ringOffsetColor, ringOffsetWidth, rotate, rounded, roundedB, roundedBL, roundedBR, roundedEE, roundedES, roundedL, roundedR, roundedSE, roundedSS, roundedT, roundedTL, roundedTR, rowEnd, rowSpan, rowStart, rtl, saturate, scale, scaleX, scaleY, scrollBehavior, scrollMargin, scrollMarginB, scrollMarginL, scrollMarginR, scrollMarginT, scrollMarginX, scrollMarginY, scrollPadding, scrollPaddingB, scrollPaddingL, scrollPaddingR, scrollPaddingT, scrollPaddingX, scrollPaddingY, select, selection_, self, sepia, shadow, shadowColor, shrink, size, skewX, skewY, slashedZero, sm, snapAlign, snapStop, snapType, spaceX, spaceXReverse, spaceY, spaceYReverse, srOnly, stackedFractions, start, static_, sticky, stroke, strokeWidth, subpixelAntialiased, supports, tableLayout, tabularNums, target, text, textAlign, textColor, textDecoration, textDecorationColor, textDecorationStyle, textDecorationThickness, textIndent, textOverflow, textTransform, textUnderlineOffset, textWrap, top, touchAction, tracking, transformGpu, transformNone, transformOrigin, transition, transitionAll, transitionColors, transitionNone, transitionOpacity, transitionShadow, transitionTransform, translateX, translateY, truncate, tw, valid, verticalAlign, visible, visited, w, when, whitespace, willChange, wordBreak, xl, z };
+export { DynamicResult, DynamicValue, Modifier, StyleRule, type TwChain, _2xl, absolute, accentColor, active, after, alignContent, animate, antialiased, appearance, aria, ariaChecked, ariaDisabled, ariaExpanded, ariaHidden, ariaPressed, ariaReadonly, ariaRequired, ariaSelected, aspectRatio, autoCols, autoRows, autofill, backdrop, backdropBlur, backdropBrightness, backdropContrast, backdropGrayscale, backdropHueRotate, backdropInvert, backdropOpacity, backdropSaturate, backdropSepia, backdrop_, before, bg, bgAttachment, bgBlendMode, bgClip, bgGradient, bgImage, bgOrigin, bgPosition, bgRepeat, bgSize, blur, border, borderB, borderCollapse, borderColor, borderE, borderL, borderR, borderS, borderSeparate, borderSpacing, borderSpacingX, borderSpacingY, borderStyle, borderT, borderX, borderY, bottom, boxDecorationBreak, boxSizing, breakAfter, breakBefore, breakInside, brightness, captionSide, caretColor, checked, clear_, colEnd, colSpan, colStart, collapse_, columns, container, content_, contrast, contrastLess, contrastMore, cursor, cx, dark, data, dcx, default_, delay, diagonalFractions, disabled, display, divideColor, divideStyle, divideX, divideXReverse, divideY, divideYReverse, dropShadow, duration, ease, empty, end, even, file_, fill, firstChild, firstLetter, firstLine, firstOfType, fixed, flex, flex1, flexAuto, flexBasis, flexCol, flexColReverse, flexInitial, flexNone, flexNowrap, flexRow, flexRowReverse, flexWrap, flexWrapReverse, float_, focus, focusVisible, focusWithin, font, fontFamily, forcedColorAdjust, forcedColors, gap, gapX, gapY, generateCSS, googleFonts, gradientFrom, gradientTo, gradientVia, grayscale, grid, gridCols, gridFlow, gridRows, groupActive, groupChecked, groupDisabled, groupEmpty, groupEven, groupFirst, groupFocus, groupFocusVisible, groupFocusWithin, groupHas, groupHover, groupLast, groupOdd, groupOpen, groupVisited, grow, h, has_, hover, hueRotate, hyphens, inRange, indeterminate, inlineFlex, inset, insetX, insetY, invalid, invert, invisible, isolate, isolationAuto, italic, items, justify, justifyItems, justifySelf, landscape, lastChild, lastOfType, layer, leading, left, lg, lineClamp, liningNums, listStyleImage, listStylePosition, listStyleType, ltr, m, marker, max2xl, maxH, maxLg, maxMd, maxSm, maxW, maxXl, mb, md, me, minH, minW, mixBlendMode, ml, motionReduce, motionSafe, mr, ms, mt, mx, my, normalNums, notItalic, notSrOnly, objectFit, objectPosition, odd, oldstyleNums, onlyChild, onlyOfType, opacity, open_, order, ordinal, outOfRange, outline, outlineColor, outlineNone, outlineOffset, outlineStyle, outlineWidth, overflow, overflowX, overflowY, overscrollBehavior, overscrollX, overscrollY, p, pb, pe, peerActive, peerChecked, peerDisabled, peerEmpty, peerEven, peerFirst, peerFocus, peerFocusVisible, peerFocusWithin, peerHas, peerHover, peerInvalid, peerLast, peerOdd, peerOpen, peerPlaceholderShown, peerRequired, peerVisited, pl, placeContent, placeItems, placeSelf, placeholderShown, placeholder_, pointerEvents, portrait, pr, print_, proportionalNums, ps, pt, px, py, readOnly, relative, required_, resize, right, ring, ringColor, ringInset, ringOffsetColor, ringOffsetWidth, rotate, rounded, roundedB, roundedBL, roundedBR, roundedEE, roundedES, roundedL, roundedR, roundedSE, roundedSS, roundedT, roundedTL, roundedTR, rowEnd, rowSpan, rowStart, rtl, saturate, scale, scaleX, scaleY, scrollBehavior, scrollMargin, scrollMarginB, scrollMarginL, scrollMarginR, scrollMarginT, scrollMarginX, scrollMarginY, scrollPadding, scrollPaddingB, scrollPaddingL, scrollPaddingR, scrollPaddingT, scrollPaddingX, scrollPaddingY, select, selection_, self, sepia, shadow, shadowColor, shrink, size, skewX, skewY, slashedZero, sm, snapAlign, snapStop, snapType, spaceX, spaceXReverse, spaceY, spaceYReverse, srOnly, stackedFractions, start, static_, sticky, stroke, strokeWidth, subpixelAntialiased, supports, tableLayout, tabularNums, target, text, textAlign, textColor, textDecoration, textDecorationColor, textDecorationStyle, textDecorationThickness, textIndent, textOverflow, textTransform, textUnderlineOffset, textWrap, top, touchAction, tracking, transformGpu, transformNone, transformOrigin, transition, transitionAll, transitionColors, transitionNone, transitionOpacity, transitionShadow, transitionTransform, translateX, translateY, truncate, tw, valid, verticalAlign, visible, visited, w, when, whitespace, willChange, wordBreak, xl, z };

package/dist/index.js

@@ -94,8 +94,8 @@ function djb2(str) {
   }
   return hash >>> 0;
 }
-function generateHash(rule, layer2) {
-  const input = JSON.stringify(rule.declarations) + JSON.stringify(rule.selectors) + JSON.stringify(rule.mediaQueries) + JSON.stringify(rule.supportsQueries) + String(layer2) + (rule.selectorTemplate ?? "");
+function generateHash(rule, _layer) {
+  const input = JSON.stringify(rule.declarations) + JSON.stringify(rule.selectors) + JSON.stringify(rule.mediaQueries) + JSON.stringify(rule.supportsQueries) + (rule.selectorTemplate ?? "");
   return "_" + djb2(input).toString(36);
 }
 
@@ -124,6 +124,9 @@ function cx(...args) {
   if (process.env.NODE_ENV !== "production") {
     warnConflicts(args);
   }
+  return _cxCore(args);
+}
+function _cxCore(args) {
   return args.map((arg) => {
     if (typeof arg === "string") return arg;
     if (typeof arg === "function") return String(arg);
@@ -135,16 +138,53 @@ function cx(...args) {
 }
 function warnConflicts(args) {
   const seen = /* @__PURE__ */ new Map();
+  const seenDeclCount = /* @__PURE__ */ new Map();
+  const warned = /* @__PURE__ */ new Set();
+  const propContexts = /* @__PURE__ */ new Map();
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];
     if (typeof arg === "string" || typeof arg === "function") continue;
-    for (const prop of Object.keys(arg.declarations)) {
-      if (seen.has(prop)) {
-        console.warn(
-          `[typewritingclass] cx() conflict: "${prop}" is set by arguments at index ${seen.get(prop)} and ${i}. The later value will override. If intentional, this warning can be ignored.`
-        );
+    const context = arg.mediaQueries.join("|") + "::" + arg.selectors.join("|");
+    const declKeys = Object.keys(arg.declarations);
+    for (const prop of declKeys) {
+      const key = context + "::" + prop;
+      if (seen.has(key)) {
+        const earlierCount = seenDeclCount.get(key);
+        if (earlierCount > 1 && declKeys.length === 1) {
+          seen.set(key, i);
+          seenDeclCount.set(key, declKeys.length);
+          continue;
+        }
+        const msg = `[typewritingclass] cx() conflict: "${prop}" is set by arguments at index ${seen.get(key)} and ${i}. The later value will override. If intentional, this warning can be ignored.`;
+        if (!warned.has(msg)) {
+          warned.add(msg);
+          console.warn(msg);
+        }
+      }
+      seen.set(key, i);
+      seenDeclCount.set(key, declKeys.length);
+      if (!propContexts.has(prop)) propContexts.set(prop, []);
+      propContexts.get(prop).push({ context, index: i, mediaQueries: arg.mediaQueries });
+    }
+  }
+  for (const [prop, entries] of propContexts) {
+    for (let j = 1; j < entries.length; j++) {
+      const later = entries[j];
+      if (later.mediaQueries.length === 0) continue;
+      for (let k = 0; k < j; k++) {
+        const earlier = entries[k];
+        if (earlier.context === later.context) continue;
+        if (earlier.mediaQueries.length === 0) continue;
+        const earlierSet = new Set(earlier.mediaQueries);
+        const laterSet = new Set(later.mediaQueries);
+        const isSubset = [...laterSet].every((q) => earlierSet.has(q)) || [...earlierSet].every((q) => laterSet.has(q));
+        if (isSubset) continue;
+        const msg = `[typewritingclass] cx() cascade hazard: "${prop}" is set by arg ${earlier.index} (${earlier.mediaQueries.join(" + ")}) and arg ${later.index} (${later.mediaQueries.join(" + ")}). When both queries match, arg ${later.index} wins due to source order. To fix, combine them: .sm(tw.dark(...)) instead of separate .sm(...).dark(...).`;
+        if (!warned.has(msg)) {
+          warned.add(msg);
+          console.warn(msg);
+        }
       }
-      seen.set(prop, i);
     }
   }
 }
@@ -190,46 +230,6 @@ function isDynamic(v) {
   return typeof v === "object" && v !== null && "_tag" in v && v._tag === "DynamicValue";
 }
 
-// src/css.ts
-function css(first, ...values) {
-  if (!Array.isArray(first) && !("raw" in first)) {
-    return createRule(first);
-  }
-  const strings = first;
-  const declarations = {};
-  let dynamicBindings;
-  let raw = "";
-  for (let i = 0; i < strings.length; i++) {
-    raw += strings[i];
-    if (i < values.length) {
-      const val = values[i];
-      if (isDynamic(val)) {
-        if (!dynamicBindings) dynamicBindings = {};
-        dynamicBindings[val.__id] = String(val.__value);
-        raw += `var(${val.__id})`;
-      } else {
-        raw += String(val);
-      }
-    }
-  }
-  const lines = raw.split(";");
-  for (const line of lines) {
-    const trimmed = line.trim();
-    if (!trimmed) continue;
-    const colonIdx = trimmed.indexOf(":");
-    if (colonIdx === -1) continue;
-    const prop = trimmed.slice(0, colonIdx).trim();
-    const value = trimmed.slice(colonIdx + 1).trim();
-    if (prop && value) {
-      declarations[prop] = value;
-    }
-  }
-  if (dynamicBindings) {
-    return createDynamicRule(declarations, dynamicBindings);
-  }
-  return createRule(declarations);
-}
-
 // src/utilities/spacing.ts
 function sp(value) {
   if (isDynamic(value)) return value;
@@ -2433,15 +2433,15 @@ function createChain(rules, pendingMods) {
       if (prop === TW_BRAND) return true;
       if (prop === "_rules") return rules;
       if (prop === Symbol.toPrimitive || prop === "toString" || prop === "valueOf" || prop === "toJSON") {
-        return () => cx(...rules);
+        return () => _cxCore(rules);
       }
       if (prop === Symbol.toStringTag) return "TwChain";
       if (prop === "value" || prop === "className") {
-        return cx(...rules);
+        return _cxCore(rules);
       }
       if (prop === Symbol.iterator) return void 0;
       if (prop === "inspect" || prop === /* @__PURE__ */ Symbol.for("nodejs.util.inspect.custom")) {
-        return () => `TwChain(${cx(...rules)})`;
+        return () => `TwChain(${_cxCore(rules)})`;
       }
       const name = prop;
       if (name in PARAM_MODS) {
@@ -2625,7 +2625,6 @@ export {
   contrastLess,
   contrastMore,
   createTheme,
-  css,
   cursor,
   cx,
   dark,

package/dist/rule.d.cts

@@ -1,4 +1,4 @@
-import { S as StyleRule } from './types-FfRD4Hbd.cjs';
+import { S as StyleRule } from './types-C2b7lqJA.cjs';
 
 /**
  * Creates a static {@link StyleRule} from a set of CSS declarations.

package/dist/rule.d.ts

@@ -1,4 +1,4 @@
-import { S as StyleRule } from './types-FfRD4Hbd.js';
+import { S as StyleRule } from './types-C2b7lqJA.js';
 
 /**
  * Creates a static {@link StyleRule} from a set of CSS declarations.

package/dist/runtime.d.cts

@@ -1,4 +1,4 @@
-import { D as DynamicResult } from './types-FfRD4Hbd.cjs';
+import { D as DynamicResult } from './types-C2b7lqJA.cjs';
 
 /**
  * Runtime helper injected by the compiler when `dynamic()` values are used.

package/dist/runtime.d.ts

@@ -1,4 +1,4 @@
-import { D as DynamicResult } from './types-FfRD4Hbd.js';
+import { D as DynamicResult } from './types-C2b7lqJA.js';
 
 /**
  * Runtime helper injected by the compiler when `dynamic()` values are used.

package/dist/{types-FfRD4Hbd.d.cts → types-C2b7lqJA.d.cts}

@@ -178,8 +178,8 @@ type RadiusInput = CSSLength | string | DynamicValueAny;
  */
 type ShadowInput = CSSShadow | string | DynamicValueAny;
 /**
- * A self-contained CSS rule produced by utility functions, the {@link css}
- * helper, or modifier composition.
+ * A self-contained CSS rule produced by utility functions or modifier
+ * composition.
  *
  * `StyleRule` is the fundamental unit of the typewritingclass system. Every
  * utility (`p`, `bg`, `rounded`, ...) returns a `StyleRule`, and composing
@@ -187,7 +187,7 @@ type ShadowInput = CSSShadow | string | DynamicValueAny;
  * register CSS in the global stylesheet.
  *
  * You rarely need to construct a `StyleRule` by hand -- use the provided
- * utilities or the `css` tagged-template helper instead.
+ * utilities instead.
  *
  * @example Inspecting a rule returned by a utility
  * ```ts

package/dist/{types-FfRD4Hbd.d.ts → types-C2b7lqJA.d.ts}

@@ -178,8 +178,8 @@ type RadiusInput = CSSLength | string | DynamicValueAny;
  */
 type ShadowInput = CSSShadow | string | DynamicValueAny;
 /**
- * A self-contained CSS rule produced by utility functions, the {@link css}
- * helper, or modifier composition.
+ * A self-contained CSS rule produced by utility functions or modifier
+ * composition.
  *
  * `StyleRule` is the fundamental unit of the typewritingclass system. Every
  * utility (`p`, `bg`, `rounded`, ...) returns a `StyleRule`, and composing
@@ -187,7 +187,7 @@ type ShadowInput = CSSShadow | string | DynamicValueAny;
  * register CSS in the global stylesheet.
  *
  * You rarely need to construct a `StyleRule` by hand -- use the provided
- * utilities or the `css` tagged-template helper instead.
+ * utilities instead.
  *
  * @example Inspecting a rule returned by a utility
  * ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typewritingclass",
-  "version": "0.2.7",
+  "version": "0.3.2",
   "type": "module",
   "repository": {
     "type": "git",