typewritingclass 0.2.7 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -8
- package/dist/index.cjs +9 -47
- package/dist/index.d.cts +3 -76
- package/dist/index.d.ts +3 -76
- package/dist/index.js +8 -46
- package/dist/rule.d.cts +1 -1
- package/dist/rule.d.ts +1 -1
- package/dist/runtime.d.cts +1 -1
- package/dist/runtime.d.ts +1 -1
- package/dist/{types-FfRD4Hbd.d.cts → types-C2b7lqJA.d.cts} +3 -3
- package/dist/{types-FfRD4Hbd.d.ts → types-C2b7lqJA.d.ts} +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -104,14 +104,6 @@ import { dcx, bg, p, dynamic } from 'typewritingclass'
|
|
|
104
104
|
const { className, style } = dcx(p(4), bg(dynamic(userColor)))
|
|
105
105
|
```
|
|
106
106
|
|
|
107
|
-
### Raw CSS escape hatch
|
|
108
|
-
|
|
109
|
-
```ts
|
|
110
|
-
import { css } from 'typewritingclass'
|
|
111
|
-
|
|
112
|
-
cx(p(4), css({ transition: 'all 200ms ease' }))
|
|
113
|
-
```
|
|
114
|
-
|
|
115
107
|
## Exports
|
|
116
108
|
|
|
117
109
|
| Path | Contents |
|
package/dist/index.cjs
CHANGED
|
@@ -94,8 +94,8 @@ function djb2(str) {
|
|
|
94
94
|
}
|
|
95
95
|
return hash >>> 0;
|
|
96
96
|
}
|
|
97
|
-
function generateHash(rule,
|
|
98
|
-
const input = JSON.stringify(rule.declarations) + JSON.stringify(rule.selectors) + JSON.stringify(rule.mediaQueries) + JSON.stringify(rule.supportsQueries) +
|
|
97
|
+
function generateHash(rule, _layer) {
|
|
98
|
+
const input = JSON.stringify(rule.declarations) + JSON.stringify(rule.selectors) + JSON.stringify(rule.mediaQueries) + JSON.stringify(rule.supportsQueries) + (_nullishCoalesce(rule.selectorTemplate, () => ( "")));
|
|
99
99
|
return "_" + djb2(input).toString(36);
|
|
100
100
|
}
|
|
101
101
|
|
|
@@ -124,6 +124,9 @@ function cx(...args) {
|
|
|
124
124
|
if (process.env.NODE_ENV !== "production") {
|
|
125
125
|
warnConflicts(args);
|
|
126
126
|
}
|
|
127
|
+
return _cxCore(args);
|
|
128
|
+
}
|
|
129
|
+
function _cxCore(args) {
|
|
127
130
|
return args.map((arg) => {
|
|
128
131
|
if (typeof arg === "string") return arg;
|
|
129
132
|
if (typeof arg === "function") return String(arg);
|
|
@@ -190,46 +193,6 @@ function isDynamic(v) {
|
|
|
190
193
|
return typeof v === "object" && v !== null && "_tag" in v && v._tag === "DynamicValue";
|
|
191
194
|
}
|
|
192
195
|
|
|
193
|
-
// src/css.ts
|
|
194
|
-
function css(first, ...values) {
|
|
195
|
-
if (!Array.isArray(first) && !("raw" in first)) {
|
|
196
|
-
return _chunkPTY5FTFBcjs.createRule.call(void 0, first);
|
|
197
|
-
}
|
|
198
|
-
const strings = first;
|
|
199
|
-
const declarations = {};
|
|
200
|
-
let dynamicBindings;
|
|
201
|
-
let raw = "";
|
|
202
|
-
for (let i = 0; i < strings.length; i++) {
|
|
203
|
-
raw += strings[i];
|
|
204
|
-
if (i < values.length) {
|
|
205
|
-
const val = values[i];
|
|
206
|
-
if (isDynamic(val)) {
|
|
207
|
-
if (!dynamicBindings) dynamicBindings = {};
|
|
208
|
-
dynamicBindings[val.__id] = String(val.__value);
|
|
209
|
-
raw += `var(${val.__id})`;
|
|
210
|
-
} else {
|
|
211
|
-
raw += String(val);
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
const lines = raw.split(";");
|
|
216
|
-
for (const line of lines) {
|
|
217
|
-
const trimmed = line.trim();
|
|
218
|
-
if (!trimmed) continue;
|
|
219
|
-
const colonIdx = trimmed.indexOf(":");
|
|
220
|
-
if (colonIdx === -1) continue;
|
|
221
|
-
const prop = trimmed.slice(0, colonIdx).trim();
|
|
222
|
-
const value = trimmed.slice(colonIdx + 1).trim();
|
|
223
|
-
if (prop && value) {
|
|
224
|
-
declarations[prop] = value;
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
if (dynamicBindings) {
|
|
228
|
-
return _chunkPTY5FTFBcjs.createDynamicRule.call(void 0, declarations, dynamicBindings);
|
|
229
|
-
}
|
|
230
|
-
return _chunkPTY5FTFBcjs.createRule.call(void 0, declarations);
|
|
231
|
-
}
|
|
232
|
-
|
|
233
196
|
// src/utilities/spacing.ts
|
|
234
197
|
function sp(value) {
|
|
235
198
|
if (isDynamic(value)) return value;
|
|
@@ -2433,15 +2396,15 @@ function createChain(rules, pendingMods) {
|
|
|
2433
2396
|
if (prop === TW_BRAND) return true;
|
|
2434
2397
|
if (prop === "_rules") return rules;
|
|
2435
2398
|
if (prop === Symbol.toPrimitive || prop === "toString" || prop === "valueOf" || prop === "toJSON") {
|
|
2436
|
-
return () =>
|
|
2399
|
+
return () => _cxCore(rules);
|
|
2437
2400
|
}
|
|
2438
2401
|
if (prop === Symbol.toStringTag) return "TwChain";
|
|
2439
2402
|
if (prop === "value" || prop === "className") {
|
|
2440
|
-
return
|
|
2403
|
+
return _cxCore(rules);
|
|
2441
2404
|
}
|
|
2442
2405
|
if (prop === Symbol.iterator) return void 0;
|
|
2443
2406
|
if (prop === "inspect" || prop === /* @__PURE__ */ Symbol.for("nodejs.util.inspect.custom")) {
|
|
2444
|
-
return () => `TwChain(${
|
|
2407
|
+
return () => `TwChain(${_cxCore(rules)})`;
|
|
2445
2408
|
}
|
|
2446
2409
|
const name = prop;
|
|
2447
2410
|
if (name in PARAM_MODS) {
|
|
@@ -2945,5 +2908,4 @@ function googleFonts(family, options) {
|
|
|
2945
2908
|
|
|
2946
2909
|
|
|
2947
2910
|
|
|
2948
|
-
|
|
2949
|
-
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;
|
|
2911
|
+
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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { S as StyleRule, D as DynamicResult, M as Modifier, a as DynamicValue } from './types-
|
|
2
|
-
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-
|
|
1
|
+
import { S as StyleRule, D as DynamicResult, M as Modifier, a as DynamicValue } from './types-C2b7lqJA.cjs';
|
|
2
|
+
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';
|
|
3
3
|
export { ThemeConfig, ThemeResult, ThemeVars, createTheme } from './theme/createTheme.cjs';
|
|
4
4
|
export { i as injectTheme, s as setTheme } from './inject-theme-CTzyfQH0.cjs';
|
|
5
5
|
import { T as TextSize } from './typography-C8wipcCK.cjs';
|
|
@@ -203,79 +203,6 @@ declare function dcx(...args: (StyleRule | string)[]): DynamicResult;
|
|
|
203
203
|
*/
|
|
204
204
|
declare function when(...modifiers: Modifier[]): (...rules: StyleRule[]) => StyleRule;
|
|
205
205
|
|
|
206
|
-
/**
|
|
207
|
-
* Creates a {@link StyleRule} from a plain object of CSS declarations.
|
|
208
|
-
*
|
|
209
|
-
* Use this overload when you want to write raw CSS property-value pairs
|
|
210
|
-
* without reaching for a specific utility function.
|
|
211
|
-
*
|
|
212
|
-
* @param declarations - A record mapping CSS property names to their values.
|
|
213
|
-
* @returns A {@link StyleRule} containing the given declarations.
|
|
214
|
-
*
|
|
215
|
-
* @example Object of declarations
|
|
216
|
-
* ```ts
|
|
217
|
-
* import { cx, css } from 'typewritingclass'
|
|
218
|
-
*
|
|
219
|
-
* cx(css({ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '1rem' }))
|
|
220
|
-
* // CSS: display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
|
|
221
|
-
* ```
|
|
222
|
-
*/
|
|
223
|
-
declare function css(declarations: Record<string, string>): StyleRule;
|
|
224
|
-
/**
|
|
225
|
-
* Creates a {@link StyleRule} from a tagged template literal of CSS declarations.
|
|
226
|
-
*
|
|
227
|
-
* Interpolated values can be plain strings, numbers, or {@link DynamicValue}
|
|
228
|
-
* instances. Dynamic values are replaced with `var(--twc-dN)` references in
|
|
229
|
-
* the generated CSS and must be applied to the element via inline styles
|
|
230
|
-
* (see {@link dcx}).
|
|
231
|
-
*
|
|
232
|
-
* @param strings - The static portions of the template literal (provided automatically).
|
|
233
|
-
* @param values - Interpolated expressions -- strings, numbers, or {@link DynamicValue}s.
|
|
234
|
-
* @returns A {@link StyleRule} with parsed declarations (and `dynamicBindings`
|
|
235
|
-
* if any interpolated value was created with {@link dynamic}).
|
|
236
|
-
*
|
|
237
|
-
* @example Tagged template with static values
|
|
238
|
-
* ```ts
|
|
239
|
-
* import { cx, css } from 'typewritingclass'
|
|
240
|
-
*
|
|
241
|
-
* cx(css`
|
|
242
|
-
* display: flex;
|
|
243
|
-
* align-items: center;
|
|
244
|
-
* gap: 0.5rem;
|
|
245
|
-
* `)
|
|
246
|
-
* // CSS: display: flex; align-items: center; gap: 0.5rem;
|
|
247
|
-
* ```
|
|
248
|
-
*
|
|
249
|
-
* @example Tagged template with interpolated values
|
|
250
|
-
* ```ts
|
|
251
|
-
* import { cx, css } from 'typewritingclass'
|
|
252
|
-
* import { blue } from 'typewritingclass/theme/colors'
|
|
253
|
-
*
|
|
254
|
-
* const size = '2rem'
|
|
255
|
-
* cx(css`
|
|
256
|
-
* width: ${size};
|
|
257
|
-
* height: ${size};
|
|
258
|
-
* background-color: ${blue[500]};
|
|
259
|
-
* `)
|
|
260
|
-
* // CSS: width: 2rem; height: 2rem; background-color: #3b82f6;
|
|
261
|
-
* ```
|
|
262
|
-
*
|
|
263
|
-
* @example Tagged template with dynamic values
|
|
264
|
-
* ```ts
|
|
265
|
-
* import { dcx, css, dynamic } from 'typewritingclass'
|
|
266
|
-
*
|
|
267
|
-
* const color = dynamic('#e11d48')
|
|
268
|
-
* const { className, style } = dcx(css`
|
|
269
|
-
* background-color: ${color};
|
|
270
|
-
* padding: 1rem;
|
|
271
|
-
* `)
|
|
272
|
-
* // className => "_a1b2c"
|
|
273
|
-
* // style => { '--twc-d0': '#e11d48' }
|
|
274
|
-
* // CSS: ._a1b2c { background-color: var(--twc-d0); padding: 1rem; }
|
|
275
|
-
* ```
|
|
276
|
-
*/
|
|
277
|
-
declare function css(strings: TemplateStringsArray, ...values: (string | number | DynamicValue)[]): StyleRule;
|
|
278
|
-
|
|
279
206
|
/**
|
|
280
207
|
* Generates a complete CSS stylesheet string from all registered rules.
|
|
281
208
|
*
|
|
@@ -3539,4 +3466,4 @@ declare function peerHas(selector: string): Modifier;
|
|
|
3539
3466
|
declare const rtl: Modifier;
|
|
3540
3467
|
declare const ltr: Modifier;
|
|
3541
3468
|
|
|
3542
|
-
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,
|
|
3469
|
+
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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { S as StyleRule, D as DynamicResult, M as Modifier, a as DynamicValue } from './types-
|
|
2
|
-
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-
|
|
1
|
+
import { S as StyleRule, D as DynamicResult, M as Modifier, a as DynamicValue } from './types-C2b7lqJA.js';
|
|
2
|
+
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';
|
|
3
3
|
export { ThemeConfig, ThemeResult, ThemeVars, createTheme } from './theme/createTheme.js';
|
|
4
4
|
export { i as injectTheme, s as setTheme } from './inject-theme-CTzyfQH0.js';
|
|
5
5
|
import { T as TextSize } from './typography-C8wipcCK.js';
|
|
@@ -203,79 +203,6 @@ declare function dcx(...args: (StyleRule | string)[]): DynamicResult;
|
|
|
203
203
|
*/
|
|
204
204
|
declare function when(...modifiers: Modifier[]): (...rules: StyleRule[]) => StyleRule;
|
|
205
205
|
|
|
206
|
-
/**
|
|
207
|
-
* Creates a {@link StyleRule} from a plain object of CSS declarations.
|
|
208
|
-
*
|
|
209
|
-
* Use this overload when you want to write raw CSS property-value pairs
|
|
210
|
-
* without reaching for a specific utility function.
|
|
211
|
-
*
|
|
212
|
-
* @param declarations - A record mapping CSS property names to their values.
|
|
213
|
-
* @returns A {@link StyleRule} containing the given declarations.
|
|
214
|
-
*
|
|
215
|
-
* @example Object of declarations
|
|
216
|
-
* ```ts
|
|
217
|
-
* import { cx, css } from 'typewritingclass'
|
|
218
|
-
*
|
|
219
|
-
* cx(css({ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '1rem' }))
|
|
220
|
-
* // CSS: display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
|
|
221
|
-
* ```
|
|
222
|
-
*/
|
|
223
|
-
declare function css(declarations: Record<string, string>): StyleRule;
|
|
224
|
-
/**
|
|
225
|
-
* Creates a {@link StyleRule} from a tagged template literal of CSS declarations.
|
|
226
|
-
*
|
|
227
|
-
* Interpolated values can be plain strings, numbers, or {@link DynamicValue}
|
|
228
|
-
* instances. Dynamic values are replaced with `var(--twc-dN)` references in
|
|
229
|
-
* the generated CSS and must be applied to the element via inline styles
|
|
230
|
-
* (see {@link dcx}).
|
|
231
|
-
*
|
|
232
|
-
* @param strings - The static portions of the template literal (provided automatically).
|
|
233
|
-
* @param values - Interpolated expressions -- strings, numbers, or {@link DynamicValue}s.
|
|
234
|
-
* @returns A {@link StyleRule} with parsed declarations (and `dynamicBindings`
|
|
235
|
-
* if any interpolated value was created with {@link dynamic}).
|
|
236
|
-
*
|
|
237
|
-
* @example Tagged template with static values
|
|
238
|
-
* ```ts
|
|
239
|
-
* import { cx, css } from 'typewritingclass'
|
|
240
|
-
*
|
|
241
|
-
* cx(css`
|
|
242
|
-
* display: flex;
|
|
243
|
-
* align-items: center;
|
|
244
|
-
* gap: 0.5rem;
|
|
245
|
-
* `)
|
|
246
|
-
* // CSS: display: flex; align-items: center; gap: 0.5rem;
|
|
247
|
-
* ```
|
|
248
|
-
*
|
|
249
|
-
* @example Tagged template with interpolated values
|
|
250
|
-
* ```ts
|
|
251
|
-
* import { cx, css } from 'typewritingclass'
|
|
252
|
-
* import { blue } from 'typewritingclass/theme/colors'
|
|
253
|
-
*
|
|
254
|
-
* const size = '2rem'
|
|
255
|
-
* cx(css`
|
|
256
|
-
* width: ${size};
|
|
257
|
-
* height: ${size};
|
|
258
|
-
* background-color: ${blue[500]};
|
|
259
|
-
* `)
|
|
260
|
-
* // CSS: width: 2rem; height: 2rem; background-color: #3b82f6;
|
|
261
|
-
* ```
|
|
262
|
-
*
|
|
263
|
-
* @example Tagged template with dynamic values
|
|
264
|
-
* ```ts
|
|
265
|
-
* import { dcx, css, dynamic } from 'typewritingclass'
|
|
266
|
-
*
|
|
267
|
-
* const color = dynamic('#e11d48')
|
|
268
|
-
* const { className, style } = dcx(css`
|
|
269
|
-
* background-color: ${color};
|
|
270
|
-
* padding: 1rem;
|
|
271
|
-
* `)
|
|
272
|
-
* // className => "_a1b2c"
|
|
273
|
-
* // style => { '--twc-d0': '#e11d48' }
|
|
274
|
-
* // CSS: ._a1b2c { background-color: var(--twc-d0); padding: 1rem; }
|
|
275
|
-
* ```
|
|
276
|
-
*/
|
|
277
|
-
declare function css(strings: TemplateStringsArray, ...values: (string | number | DynamicValue)[]): StyleRule;
|
|
278
|
-
|
|
279
206
|
/**
|
|
280
207
|
* Generates a complete CSS stylesheet string from all registered rules.
|
|
281
208
|
*
|
|
@@ -3539,4 +3466,4 @@ declare function peerHas(selector: string): Modifier;
|
|
|
3539
3466
|
declare const rtl: Modifier;
|
|
3540
3467
|
declare const ltr: Modifier;
|
|
3541
3468
|
|
|
3542
|
-
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,
|
|
3469
|
+
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
CHANGED
|
@@ -94,8 +94,8 @@ function djb2(str) {
|
|
|
94
94
|
}
|
|
95
95
|
return hash >>> 0;
|
|
96
96
|
}
|
|
97
|
-
function generateHash(rule,
|
|
98
|
-
const input = JSON.stringify(rule.declarations) + JSON.stringify(rule.selectors) + JSON.stringify(rule.mediaQueries) + JSON.stringify(rule.supportsQueries) +
|
|
97
|
+
function generateHash(rule, _layer) {
|
|
98
|
+
const input = JSON.stringify(rule.declarations) + JSON.stringify(rule.selectors) + JSON.stringify(rule.mediaQueries) + JSON.stringify(rule.supportsQueries) + (rule.selectorTemplate ?? "");
|
|
99
99
|
return "_" + djb2(input).toString(36);
|
|
100
100
|
}
|
|
101
101
|
|
|
@@ -124,6 +124,9 @@ function cx(...args) {
|
|
|
124
124
|
if (process.env.NODE_ENV !== "production") {
|
|
125
125
|
warnConflicts(args);
|
|
126
126
|
}
|
|
127
|
+
return _cxCore(args);
|
|
128
|
+
}
|
|
129
|
+
function _cxCore(args) {
|
|
127
130
|
return args.map((arg) => {
|
|
128
131
|
if (typeof arg === "string") return arg;
|
|
129
132
|
if (typeof arg === "function") return String(arg);
|
|
@@ -190,46 +193,6 @@ function isDynamic(v) {
|
|
|
190
193
|
return typeof v === "object" && v !== null && "_tag" in v && v._tag === "DynamicValue";
|
|
191
194
|
}
|
|
192
195
|
|
|
193
|
-
// src/css.ts
|
|
194
|
-
function css(first, ...values) {
|
|
195
|
-
if (!Array.isArray(first) && !("raw" in first)) {
|
|
196
|
-
return createRule(first);
|
|
197
|
-
}
|
|
198
|
-
const strings = first;
|
|
199
|
-
const declarations = {};
|
|
200
|
-
let dynamicBindings;
|
|
201
|
-
let raw = "";
|
|
202
|
-
for (let i = 0; i < strings.length; i++) {
|
|
203
|
-
raw += strings[i];
|
|
204
|
-
if (i < values.length) {
|
|
205
|
-
const val = values[i];
|
|
206
|
-
if (isDynamic(val)) {
|
|
207
|
-
if (!dynamicBindings) dynamicBindings = {};
|
|
208
|
-
dynamicBindings[val.__id] = String(val.__value);
|
|
209
|
-
raw += `var(${val.__id})`;
|
|
210
|
-
} else {
|
|
211
|
-
raw += String(val);
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
const lines = raw.split(";");
|
|
216
|
-
for (const line of lines) {
|
|
217
|
-
const trimmed = line.trim();
|
|
218
|
-
if (!trimmed) continue;
|
|
219
|
-
const colonIdx = trimmed.indexOf(":");
|
|
220
|
-
if (colonIdx === -1) continue;
|
|
221
|
-
const prop = trimmed.slice(0, colonIdx).trim();
|
|
222
|
-
const value = trimmed.slice(colonIdx + 1).trim();
|
|
223
|
-
if (prop && value) {
|
|
224
|
-
declarations[prop] = value;
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
if (dynamicBindings) {
|
|
228
|
-
return createDynamicRule(declarations, dynamicBindings);
|
|
229
|
-
}
|
|
230
|
-
return createRule(declarations);
|
|
231
|
-
}
|
|
232
|
-
|
|
233
196
|
// src/utilities/spacing.ts
|
|
234
197
|
function sp(value) {
|
|
235
198
|
if (isDynamic(value)) return value;
|
|
@@ -2433,15 +2396,15 @@ function createChain(rules, pendingMods) {
|
|
|
2433
2396
|
if (prop === TW_BRAND) return true;
|
|
2434
2397
|
if (prop === "_rules") return rules;
|
|
2435
2398
|
if (prop === Symbol.toPrimitive || prop === "toString" || prop === "valueOf" || prop === "toJSON") {
|
|
2436
|
-
return () =>
|
|
2399
|
+
return () => _cxCore(rules);
|
|
2437
2400
|
}
|
|
2438
2401
|
if (prop === Symbol.toStringTag) return "TwChain";
|
|
2439
2402
|
if (prop === "value" || prop === "className") {
|
|
2440
|
-
return
|
|
2403
|
+
return _cxCore(rules);
|
|
2441
2404
|
}
|
|
2442
2405
|
if (prop === Symbol.iterator) return void 0;
|
|
2443
2406
|
if (prop === "inspect" || prop === /* @__PURE__ */ Symbol.for("nodejs.util.inspect.custom")) {
|
|
2444
|
-
return () => `TwChain(${
|
|
2407
|
+
return () => `TwChain(${_cxCore(rules)})`;
|
|
2445
2408
|
}
|
|
2446
2409
|
const name = prop;
|
|
2447
2410
|
if (name in PARAM_MODS) {
|
|
@@ -2625,7 +2588,6 @@ export {
|
|
|
2625
2588
|
contrastLess,
|
|
2626
2589
|
contrastMore,
|
|
2627
2590
|
createTheme,
|
|
2628
|
-
css,
|
|
2629
2591
|
cursor,
|
|
2630
2592
|
cx,
|
|
2631
2593
|
dark,
|
package/dist/rule.d.cts
CHANGED
package/dist/rule.d.ts
CHANGED
package/dist/runtime.d.cts
CHANGED
package/dist/runtime.d.ts
CHANGED
|
@@ -178,8 +178,8 @@ type RadiusInput = CSSLength | string | DynamicValueAny;
|
|
|
178
178
|
*/
|
|
179
179
|
type ShadowInput = CSSShadow | string | DynamicValueAny;
|
|
180
180
|
/**
|
|
181
|
-
* A self-contained CSS rule produced by utility functions
|
|
182
|
-
*
|
|
181
|
+
* A self-contained CSS rule produced by utility functions or modifier
|
|
182
|
+
* composition.
|
|
183
183
|
*
|
|
184
184
|
* `StyleRule` is the fundamental unit of the typewritingclass system. Every
|
|
185
185
|
* utility (`p`, `bg`, `rounded`, ...) returns a `StyleRule`, and composing
|
|
@@ -187,7 +187,7 @@ type ShadowInput = CSSShadow | string | DynamicValueAny;
|
|
|
187
187
|
* register CSS in the global stylesheet.
|
|
188
188
|
*
|
|
189
189
|
* You rarely need to construct a `StyleRule` by hand -- use the provided
|
|
190
|
-
* utilities
|
|
190
|
+
* utilities instead.
|
|
191
191
|
*
|
|
192
192
|
* @example Inspecting a rule returned by a utility
|
|
193
193
|
* ```ts
|
|
@@ -178,8 +178,8 @@ type RadiusInput = CSSLength | string | DynamicValueAny;
|
|
|
178
178
|
*/
|
|
179
179
|
type ShadowInput = CSSShadow | string | DynamicValueAny;
|
|
180
180
|
/**
|
|
181
|
-
* A self-contained CSS rule produced by utility functions
|
|
182
|
-
*
|
|
181
|
+
* A self-contained CSS rule produced by utility functions or modifier
|
|
182
|
+
* composition.
|
|
183
183
|
*
|
|
184
184
|
* `StyleRule` is the fundamental unit of the typewritingclass system. Every
|
|
185
185
|
* utility (`p`, `bg`, `rounded`, ...) returns a `StyleRule`, and composing
|
|
@@ -187,7 +187,7 @@ type ShadowInput = CSSShadow | string | DynamicValueAny;
|
|
|
187
187
|
* register CSS in the global stylesheet.
|
|
188
188
|
*
|
|
189
189
|
* You rarely need to construct a `StyleRule` by hand -- use the provided
|
|
190
|
-
* utilities
|
|
190
|
+
* utilities instead.
|
|
191
191
|
*
|
|
192
192
|
* @example Inspecting a rule returned by a utility
|
|
193
193
|
* ```ts
|