cssints 0.1.0 → 0.2.0
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 +21 -11
- package/dist/check.mjs +2 -2
- package/dist/{contrast-BUKVao74.mjs → contrast-DhK69Xak.mjs} +2 -2
- package/dist/group-common-9zpBxfUF.d.mts +1 -0
- package/dist/group-types-9ttphdku.d.mts +55 -0
- package/dist/groups/compositing-2.d.mts +20 -0
- package/dist/groups/css-align-3.d.mts +29 -0
- package/dist/groups/css-anchor-position-1.d.mts +49 -0
- package/dist/groups/css-anchor-position-2.d.mts +50 -0
- package/dist/groups/css-animations-1.d.mts +28 -0
- package/dist/groups/css-animations-2.d.mts +29 -0
- package/dist/groups/css-backgrounds-3.d.mts +27 -0
- package/dist/groups/css-backgrounds-4.d.mts +29 -0
- package/dist/groups/css-borders-4.d.mts +95 -0
- package/dist/groups/css-box-4.d.mts +38 -0
- package/dist/groups/css-break-4.d.mts +23 -0
- package/dist/groups/css-cascade-5.d.mts +18 -0
- package/dist/groups/css-cascade-6.d.mts +18 -0
- package/dist/groups/css-color-4.d.mts +29 -0
- package/dist/groups/css-color-5.d.mts +32 -0
- package/dist/groups/css-color-6.d.mts +32 -0
- package/dist/groups/css-color-adjust-1.d.mts +20 -0
- package/dist/groups/css-color-hdr-1.d.mts +19 -0
- package/dist/groups/css-conditional-3.d.mts +17 -0
- package/dist/groups/css-conditional-4.d.mts +17 -0
- package/dist/groups/css-conditional-5.d.mts +22 -0
- package/dist/groups/css-contain-2.d.mts +19 -0
- package/dist/groups/css-content-3.d.mts +23 -0
- package/dist/groups/css-counter-styles-3.d.mts +16 -0
- package/dist/groups/css-display-4.d.mts +22 -0
- package/dist/groups/css-easing-2.d.mts +18 -0
- package/dist/groups/css-env-1.d.mts +16 -0
- package/dist/groups/css-flexbox-1.d.mts +24 -0
- package/dist/groups/css-fonts-4.d.mts +46 -0
- package/dist/groups/css-fonts-5.d.mts +44 -0
- package/dist/groups/css-forms-1.d.mts +19 -0
- package/dist/groups/css-gaps-1.d.mts +21 -0
- package/dist/groups/css-gcpm-3.d.mts +20 -0
- package/dist/groups/css-gcpm-4.d.mts +20 -0
- package/dist/groups/css-grid-2.d.mts +34 -0
- package/dist/groups/css-grid-3.d.mts +34 -0
- package/dist/groups/css-images-3.d.mts +25 -0
- package/dist/groups/css-images-4.d.mts +32 -0
- package/dist/groups/css-images-5.d.mts +33 -0
- package/dist/groups/css-inline-3.d.mts +28 -0
- package/dist/groups/css-lists-3.d.mts +26 -0
- package/dist/groups/css-logical-1.d.mts +35 -0
- package/dist/groups/css-masking-1.d.mts +37 -0
- package/dist/groups/css-multicol-2.d.mts +24 -0
- package/dist/groups/css-overflow-3.d.mts +28 -0
- package/dist/groups/css-overflow-4.d.mts +29 -0
- package/dist/groups/css-overflow-5.d.mts +31 -0
- package/dist/groups/css-overscroll-1.d.mts +22 -0
- package/dist/groups/css-page-3.d.mts +18 -0
- package/dist/groups/css-page-floats-3.d.mts +19 -0
- package/dist/groups/css-position-3.d.mts +29 -0
- package/dist/groups/css-position-4.d.mts +30 -0
- package/dist/groups/css-rhythm-1.d.mts +18 -0
- package/dist/groups/css-round-display-1.d.mts +16 -0
- package/dist/groups/css-ruby-1.d.mts +21 -0
- package/dist/groups/css-scroll-anchoring-1.d.mts +18 -0
- package/dist/groups/css-scroll-snap-1.d.mts +42 -0
- package/dist/groups/css-scroll-snap-2.d.mts +43 -0
- package/dist/groups/css-scrollbars-1.d.mts +19 -0
- package/dist/groups/css-shapes-1.d.mts +27 -0
- package/dist/groups/css-shapes-2.d.mts +27 -0
- package/dist/groups/css-size-adjust-1.d.mts +18 -0
- package/dist/groups/css-sizing-3.d.mts +34 -0
- package/dist/groups/css-sizing-4.d.mts +33 -0
- package/dist/groups/css-speech-1.d.mts +18 -0
- package/dist/groups/css-tables-3.d.mts +22 -0
- package/dist/groups/css-text-3.d.mts +36 -0
- package/dist/groups/css-text-4.d.mts +40 -0
- package/dist/groups/css-text-decor-3.d.mts +30 -0
- package/dist/groups/css-text-decor-4.d.mts +31 -0
- package/dist/groups/css-transforms-1.d.mts +31 -0
- package/dist/groups/css-transforms-2.d.mts +48 -0
- package/dist/groups/css-transitions-1.d.mts +22 -0
- package/dist/groups/css-transitions-2.d.mts +23 -0
- package/dist/groups/css-ui-4.d.mts +35 -0
- package/dist/groups/css-values-4.d.mts +38 -0
- package/dist/groups/css-values-5.d.mts +43 -0
- package/dist/groups/css-variables-2.d.mts +6 -0
- package/dist/groups/css-view-transitions-2.d.mts +20 -0
- package/dist/groups/css-viewport.d.mts +18 -0
- package/dist/groups/css-will-change-1.d.mts +18 -0
- package/dist/groups/css-writing-modes-4.d.mts +22 -0
- package/dist/groups/css2.d.mts +19 -0
- package/dist/groups/fill-stroke-3.d.mts +27 -0
- package/dist/groups/filter-effects-1.d.mts +32 -0
- package/dist/groups/filter-effects-2.d.mts +33 -0
- package/dist/groups/limited-availability.d.mts +2 -0
- package/dist/groups/mediaqueries-4.d.mts +16 -0
- package/dist/groups/mediaqueries-5.d.mts +16 -0
- package/dist/groups/motion-1.d.mts +24 -0
- package/dist/groups/newly-available.d.mts +631 -0
- package/dist/groups/not-discouraged.d.mts +727 -0
- package/dist/groups/scroll-animations-1.d.mts +30 -0
- package/dist/groups/selectors-4.d.mts +54 -0
- package/dist/groups/selectors-5.d.mts +54 -0
- package/dist/groups/widely-available.d.mts +616 -0
- package/dist/index.d.mts +19 -5
- package/dist/index.mjs +150 -13
- package/dist/instrument-gCazujmb.mjs +1624 -0
- package/dist/{lowered-CeoXbm0P.mjs → lowered-D2KusPLp.mjs} +1 -1
- package/dist/{node-CdhAGmF3.d.mts → node-OJ_w_Usj.d.mts} +4 -0
- package/dist/plugin-types.d.mts +1 -1
- package/dist/plugin.d.mts +1 -1
- package/dist/{registry-n9JCX4pl.mjs → registry-CTumHB8p.mjs} +2 -1
- package/dist/runtime-Dt4Tm0Q7.d.mts +19 -0
- package/dist/runtime.d.mts +1 -1
- package/dist/runtime.mjs +6 -2
- package/dist/{scope-oWEaWE9n.d.mts → scope-ZVhUxQH1.d.mts} +10 -4
- package/dist/{sheet-CO7a-mdA.mjs → sheet-BKsMTa0c.mjs} +2 -1
- package/dist/surface.d.mts +1 -1
- package/dist/{theme-BGEbFAYh.mjs → theme-BsP2E4LB.mjs} +31 -8
- package/dist/{theme-types-DHdtTZhz.d.mts → theme-types-Bqv0Ggz_.d.mts} +11 -6
- package/dist/tui-types.d.mts +1 -1
- package/dist/tui.d.mts +1 -8
- package/dist/tui.mjs +35 -7
- package/dist/types.d.mts +1 -1
- package/dist/vite.d.mts +17 -1
- package/dist/vite.mjs +9 -12
- package/docs/API.md +75 -30
- package/package.json +6 -2
- package/skills/cssints/SKILL.md +12 -9
- package/skills/cssints/references/errors.md +8 -7
- package/skills/cssints-plugin/SKILL.md +1 -1
- package/dist/instrument-Bdtk2INz.mjs +0 -172
- package/dist/lib-2OEIfPAE.d.mts +0 -9
- package/dist/runtime-CTvuM-Hm.d.mts +0 -5
package/dist/types.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { $ as WebkitLineClamp, $a as future, $c as outlineStyle, $d as strokeWidth, $f as top, $i as emptyCells, $l as positionVisibility, $n as borderLeftWidth, $o as isolation, $p as Part, $r as columnWrap, $s as maskMode, $t as backgroundPosition, $u as scrollMarginInline, A as Wrap, Aa as fontOpticalSizing, Ac as objectFit, Ad as shapeMargin, Af as textJustify, Ai as cornerTopShape, Al as paletteMix, An as borderEndEndRadius, Ao as imageRendering, Ap as viewTimelineName, Ar as caretColor, As as marginBottom, At as animationRange, Au as rowGap, B as media, Ba as fontVariant, Bc as oklch, Bd as src, Bf as textWrap, Bi as cy, Bl as placeContent, Bn as borderInlineEnd, Bo as insetBlockEnd, Bp as willChange, Br as colorInterpolationFilters, Bs as markerMid, Bt as atan, Bu as scaleFn, C as Keyframes, Ca as focusVisible, Cc as mixBlendMode, Cd as scrollTimelineName, Cf as textDecorationStyle, Ci as cornerLeftShape, Cl as paddingInlineStart, Cn as borderBottomColor, Co as hwb, Cp as valid, Cr as brightness, Cs as listStyleType, Ct as animationDelay, Cu as rotate, D as QueryWrap, Da as fontFeatureSettings, Dc as mr, Dd as seeking, Df as textEmphasisPosition, Di as cornerStartStartShape, Dl as page, Dn as borderBottomWidth, Do as hypot, Dp as viewTimeline, Dr as captionSide, Ds as marginBlock, Dt as animationIterationCount, Du as rotateY, E as Prop, Ea as fontFamily, Ec as modal, Ed as scrollbarWidth, Ef as textEmphasisColor, Ei as cornerStartEndShape, El as paddingTop, En as borderBottomStyle, Eo as hyphens, Ep as view, Er as calcSize, Es as margin, Et as animationFillMode, Eu as rotateX, F as cv, Fa as fontSynthesis, Fc as offsetDistance, Fd as skew, Ff as textSizeAdjust, Fi as counterSet, Fl as perspective, Fn as borderImageSlice, Fo as initialLetter, Fp as volumeLocked, Fr as clear, Fs as marginRight, Ft as animationTrigger, Fu as rx, Ga as fontVariantLigatures, Gc as open, Gd as stroke, Gf as timelineTriggerExitRange, Gi as display, Gl as pointerEvents, Gn as borderInlineStartColor, Go as insetInlineStart, Gp as x, Gr as columnGap, Gs as maskBorderOutset, Gt as backfaceVisibility, Gu as scroll, H as style, Ha as fontVariantCaps, Hc as onlyOfType, Hd as steps, Hf as textWrapStyle, Hi as defined, Hl as placeSelf, Hn as borderInlineEndStyle, Ho as insetFn, Hp as wordSpacing, Hr as colorScheme, Hs as mask, Ht as attrFn, Hu as scaleY, I as firstThatWorks, Ia as fontSynthesisPosition, Ic as offsetPath, Id as skewX, If as textSpacingTrim, Ii as counters, Il as perspectiveFn, In as borderImageSource, Io as initialLetterAlign, Ip as whiteSpace, Ir as clipPath, Is as marginTop, It as anyLink, Iu as ry, J as cx, Ja as fontVariationSettings, Jc as orphans, Jd as strokeDashoffset, Jf as timelineTriggerName, Ji as dynamicRangeLimit, Jl as position, Jn as borderInlineStyle, Jo as interestDelayEnd, Jp as zIndex, Jr as columnRuleColor, Js as maskBorderSource, Jt as backgroundBlendMode, Ju as scrollMargin, K as within, Ka as fontVariantNumeric, Kc as optional, Kd as strokeColor, Kf as timelineTriggerExitRangeEnd, Ki as dominantBaseline, Kl as polygon, Kn as borderInlineStartStyle, Ko as interactivity, Kp as xywh, Kr as columnHeight, Ks as maskBorderRepeat, Kt as background, Ku as scrollBehavior, L as global, La as fontSynthesisSmallCaps, Lc as offsetPosition, Ld as skewY, Lf as textTransform, Li as crossFade, Ll as perspectiveOrigin, Ln as borderImageWidth, Lo as inlineSize, Lp as whiteSpaceCollapse, Lr as clipRule, Ls as marginTrim, Lt as appearance, Lu as saturate, M as cn, Ma as fontSize, Mc as objectViewBox, Md as shapeRendering, Mf as textOverflow, Mi as counter, Ml as path, Mn as borderImage, Mo as imageSet, Mp as viewTransitionName, Mr as checked, Ms as marginInlineEnd, Mt as animationRangeStart, Mu as rubyMerge, N as container, Na as fontSizeAdjust, Nc as offset, Nd as sign, Nf as textRendering, Ni as counterIncrement, Nl as paused, Nn as borderImageOutset, No as inRange, Np as visibility, Nr as circle, Ns as marginInlineStart, Nt as animationTimeline, Nu as rubyOverhang, O as StateWrap, Oa as fontKerning, Oc as mt, Od as sepia, Of as textEmphasisStyle, Oi as cornerTopLeftShape, Ol as paint, On as borderCollapse, Oo as image, Op as viewTimelineAxis, Or as caret, Os as marginBlockEnd, Ot as animationName, Ou as rotateZ, P as css, Pa as fontStyle, Pc as offsetAnchor, Pd as sin, Pf as textShadow, Pi as counterReset, Pl as pb, Pn as borderImageRepeat, Po as indeterminate, Pp as visited, Pr as clamp, Ps as marginLeft, Pt as animationTimingFunction, Pu as rubyPosition, Q as WebkitBoxReflect, Qa as fullscreen, Qc as outlineOffset, Qd as strokeOpacity, Qf as timelineTriggerSource, Qi as empty, Ql as positionTryOrder, Qn as borderLeftStyle, Qo as invert, Qp as Fallback, Qr as columnWidth, Qs as maskImage, Qt as backgroundOrigin, Qu as scrollMarginBottom, R as group, Ra as fontSynthesisStyle, Rc as offsetRotate, Rd as speakAs, Rf as textUnderlineOffset, Ri as cubicBezier, Rl as pictureInPicture, Rn as borderInline, Ro as inset, Rp as widows, Rr as color, Rs as marker, Rt as asin, Ru as scale, S as CvValue, Sa as focus, Sc as minmax, Sd as scrollTimelineAxis, Sf as textDecorationSkipInk, Si as cornerInlineStartShape, Sl as paddingInlineEnd, Sn as borderBottom, So as hueRotate, Sp as userValid, Sr as breakInside, Ss as listStylePosition, St as animationComposition, Su as root, T as PositionTry, Ta as font, Tc as mod, Td as scrollbarGutter, Tf as textEmphasis, Ti as cornerShape, Tl as paddingRight, Tn as borderBottomRightRadius, To as hyphenateLimitChars, Tp as verticalAlign, Tr as calc, Ts as m, Tt as animationDuration, Tu as rotateFn, U as supports, Ua as fontVariantEastAsian, Uc as opacity, Ud as stopColor, Uf as timelineScope, Ui as direction, Ul as placeholderShown, Un as borderInlineEndWidth, Uo as insetInline, Up as wordWrap, Ur as columnCount, Us as maskBorder, Ut as autofill, Uu as scaleZ, V as positionTry, Va as fontVariantAlternates, Vc as onlyChild, Vd as stalled, Vf as textWrapMode, Vi as d, Vl as placeItems, Vn as borderInlineEndColor, Vo as insetBlockStart, Vp as wordBreak, Vr as colorMix, Vs as markerStart, Vt as atan2, Vu as scaleX, W as token, Wa as fontVariantEmoji, Wc as opacityFn, Wd as stopOpacity, Wf as timelineTrigger, Wi as disabled, Wl as playing, Wn as borderInlineStart, Wo as insetInlineEnd, Wp as writingMode, Wr as columnFill, Ws as maskBorderMode, Wt as backdropFilter, Wu as scope, X as GridMethods, Xa as fontWidth, Xc as outline, Xd as strokeLinejoin, Xf as timelineTriggerRangeEnd, Xi as element, Xl as positionArea, Xn as borderLeft, Xo as interpolateSize, Xr as columnRuleWidth, Xs as maskClip, Xt as backgroundColor, Xu as scrollMarginBlockEnd, Y as FlexMethods, Ya as fontWeight, Yc as outOfRange, Yd as strokeLinecap, Yf as timelineTriggerRange, Yi as dynamicRangeLimitMix, Yl as positionAnchor, Yn as borderInlineWidth, Yo as interestDelayStart, Yp as zoom, Yr as columnRuleStyle, Ys as maskBorderWidth, Yt as backgroundClip, Yu as scrollMarginBlock, Z as WebkitBoxOrient, Za as forcedColorAdjust, Zc as outlineColor, Zd as strokeMiterlimit, Zf as timelineTriggerRangeStart, Zi as ellipse, Zl as positionTryFallbacks, Zn as borderLeftColor, Zo as invalid, Zr as columnSpan, Zs as maskComposite, Zt as backgroundImage, Zu as scrollMarginBlockStart, _ as CSSStyleValue, _a as flexWrap, _c as min, _d as scrollSnapAlign, _f as textDecoration, _i as cornerBottomRightShape, _l as paddingBlock, _n as borderBlockStartColor, _o as hangingPunctuation, _p as triggerScope, _r as boxDecorationBreak, _s as linear, _t as anchor, _u as required, a as DtcgUnit, aa as fillOpacity, ac as mathDepth, ad as scrollMarkerGroup, af as target, ai as containIntrinsicInlineSize, al as overflowInline, an as baselineSource, ao as gridAutoFlow, ap as transition, ar as borderSpacing, as as lastOfType, at as WebkitTouchCallout, au as r, b as CvConfig, ba as floodOpacity, bc as minInlineSize, bd as scrollTargetGroup, bf as textDecorationLine, bi as cornerEndStartShape, bl as paddingBottom, bn as borderBlockStyle, bo as hsl, bp as userInvalid, br as breakAfter, bs as listStyle, bt as anchorSize, bu as rgba, c as Tokens, ca as firstChild, cc as matrix, cd as scrollPaddingBlockEnd, cf as targetText, ci as containerName, cl as overflowY, cn as blur, co as gridColumnEnd, cp as transitionDuration, cr as borderStyle, cs as leader, ct as abs, cu as readOnly, d as createTokens, da as flex, dc as maxBlockSize, dd as scrollPaddingInline, df as textAnchor, di as contentVisibility, dl as overscrollBehaviorBlock, dn as borderBlockColor, do as gridRowEnd, dp as translate, dr as borderTopLeftRadius, ds as lightDark, dt as active, du as readingOrder, ea as enabled, ec as maskOrigin, ed as scrollMarginInlineEnd, ef as superellipse, ei as columns, el as outlineWidth, em as Style, en as backgroundPositionX, eo as gap, ep as touchAction, er as borderRadius, es as justifyContent, et as WebkitTapHighlightColor, eu as pow, f as layers, fa as flexBasis, fc as maxHeight, fd as scrollPaddingInlineEnd, ff as textAutospace, fi as contrast, fl as overscrollBehaviorInline, fn as borderBlockEnd, fo as gridRowStart, fp as translate3d, fr as borderTopRightRadius, fs as lightingColor, ft as alignContent, fu as rect, g as CSSImageValue, ga as flexShrink, gc as mb, gd as scrollPaddingTop, gf as textCombineUpright, gi as cornerBottomLeftShape, gl as padding, gn as borderBlockStart, go as gridTemplateRows, gp as translateZ, gr as bottom, gs as lineHeightStep, gt as all, gu as repeatingRadialGradient, h as CSSColorValue, ha as flexGrow, hc as maxWidth, hd as scrollPaddingRight, hf as textBoxTrim, hi as cornerBlockStartShape, hl as p, hn as borderBlockEndWidth, ho as gridTemplateColumns, hp as translateY, hr as borderWidth, hs as lineHeight, ht as alignmentBaseline, hu as repeatingLinearGradient, i as DtcgShadow, ia as fill, ic as maskType, id as scrollMarginTop, if as tan, ii as containIntrinsicHeight, il as overflowClipMargin, in as baselineShift, io as gridAutoColumns, ip as transformStyle, ir as borderRightWidth, is as lastChild, it as WebkitTextStrokeWidth, iu as quotes, j as attr, ja as fontPalette, jc as objectPosition, jd as shapeOutside, jf as textOrientation, ji as cos, jl as past, jn as borderEndStartRadius, jo as imageResolution, jp as viewTransitionClass, jr as caretShape, js as marginInline, jt as animationRangeEnd, ju as rubyAlign, k as Steps, ka as fontLanguageOverride, kc as muted, kd as shapeImageThreshold, kf as textIndent, ki as cornerTopRightShape, kl as paintOrder, kn as borderColor, ko as imageOrientation, kp as viewTimelineInset, kr as caretAnimation, ks as marginBlockStart, kt as animationPlayState, ku as round, l as check, la as firstOfType, lc as matrix3d, ld as scrollPaddingBlockStart, lf as textAlign, li as containerType, ll as overlay, ln as border, lo as gridColumnStart, lp as transitionProperty, lr as borderTop, ls as left, lt as accentColor, lu as readWrite, m as CSS, ma as flexFlow, mc as maxLines, md as scrollPaddingLeft, mf as textBoxEdge, mi as cornerBlockEndShape, ml as overscrollBehaviorY, mn as borderBlockEndStyle, mo as gridTemplateAreas, mp as translateX, mr as borderTopWidth, ms as lineClamp, mt as alignSelf, mu as repeatingConicGradient, n as DtcgColor, na as exp, nc as maskRepeat, nd as scrollMarginLeft, nf as tabSize, ni as contain, nl as overflowAnchor, nn as backgroundRepeat, no as grid, np as transformBox, nr as borderRightColor, ns as justifySelf, nt as WebkitTextStroke, nu as printColorAdjust, o as DtcgValue, oa as fillRule, oc as mathShift, od as scrollPadding, of as targetCounter, oi as containIntrinsicSize, ol as overflowWrap, on as bg, oo as gridAutoRows, op as transitionBehavior, or as borderStartEndRadius, os as layer, ot as WebkitUserModify, ou as radialGradient, p as AttrOp, pa as flexDirection, pc as maxInlineSize, pd as scrollPaddingInlineStart, pf as textBox, pi as contrastColor, pl as overscrollBehaviorX, pn as borderBlockEndColor, po as gridTemplate, pp as translateFn, pr as borderTopStyle, ps as lineBreak, pt as alignItems, pu as rem, q as ClassValue, qa as fontVariantPosition, qc as order, qd as strokeDasharray, qf as timelineTriggerExitRangeStart, qi as dropShadow, ql as popoverOpen, qn as borderInlineStartWidth, qo as interestDelay, qp as y, qr as columnRule, qs as maskBorderSlice, qt as backgroundAttachment, qu as scrollInitialTarget, r as DtcgCubicBezier, ra as fieldSizing, rc as maskSize, rd as scrollMarginRight, rf as tableLayout, ri as containIntrinsicBlockSize, rl as overflowBlock, rn as backgroundSize, ro as gridArea, rp as transformOrigin, rr as borderRightStyle, rs as lab, rt as WebkitTextStrokeColor, ru as pt, s as Overrides, sa as filter, sc as mathStyle, sd as scrollPaddingBlock, sf as targetCounters, si as containIntrinsicWidth, sl as overflowX, sn as blockSize, so as gridColumn, sp as transitionDelay, sr as borderStartStartRadius, ss as lch, st as _var, su as ray, t as CheckOverrides, ta as env, tc as maskPosition, td as scrollMarginInlineStart, tf as symbols, ti as conicGradient, tl as overflow, tn as backgroundPositionY, to as grayscale, tp as transform, tr as borderRight, ts as justifyItems, tt as WebkitTextFillColor, tu as pr, u as createGlobalTheme, ua as fitContent, uc as max, ud as scrollPaddingBottom, uf as textAlignLast, ui as content, ul as overscrollBehavior, un as borderBlock, uo as gridRow, up as transitionTimingFunction, ur as borderTopColor, us as letterSpacing, ut as acos, uu as readingFlow, v as CSSUnitValue, va as float, vc as minBlockSize, vd as scrollSnapStop, vf as textDecorationColor, vi as cornerBottomShape, vl as paddingBlockEnd, vn as borderBlockStartStyle, vo as height, vp as unicodeBidi, vr as boxShadow, vs as linearGradient, vt as anchorName, vu as resize, w as Layout, wa as focusWithin, wc as ml, wd as scrollbarColor, wf as textDecorationThickness, wi as cornerRightShape, wl as paddingLeft, wn as borderBottomLeftRadius, wo as hyphenateCharacter, wp as vectorEffect, wr as buffering, ws as log, wt as animationDirection, wu as rotate3d, x as CvProps, xa as flowTolerance, xc as minWidth, xd as scrollTimeline, xf as textDecorationSkip, xi as cornerInlineEndShape, xl as paddingInline, xn as borderBlockWidth, xo as hsla, xp as userSelect, xr as breakBefore, xs as listStyleImage, xt as animation, xu as right, y as Chain, ya as floodColor, yc as minHeight, yd as scrollSnapType, yf as textDecorationInset, yi as cornerEndEndShape, yl as paddingBlockStart, yn as borderBlockStartWidth, yo as hover, yp as url, yr as boxSizing, ys as link, yt as anchorScope, yu as rgb, z as keyframes, za as fontSynthesisWeight, zc as oklab, zd as sqrt, zf as textUnderlinePosition, zi as cursor, zl as pl, zn as borderInlineColor, zo as insetBlock, zp as width, zr as colorFn, zs as markerEnd, zt as aspectRatio, zu as scale3d } from "./theme-types-DHdtTZhz.mjs";
|
|
1
|
+
import { $ as WebkitTapHighlightColor, $a as future, $c as outlineStyle, $d as strokeWidth, $f as top, $i as emptyCells, $l as positionVisibility, $n as borderRadius, $o as isolation, $r as columns, $s as maskMode, $t as backgroundPositionX, $u as scrollMarginInline, A as Wrap, Aa as fontOpticalSizing, Ac as objectFit, Ad as shapeMargin, Af as textJustify, Ai as cos, Al as paletteMix, An as borderEndStartRadius, Ao as imageRendering, Ap as viewTimelineName, Ar as caretShape, As as marginBottom, At as animationRangeEnd, Au as rowGap, B as media, Ba as fontVariant, Bc as oklch, Bd as src, Bf as textWrap, Bi as cy, Bl as placeContent, Bn as borderInlineEndColor, Bo as insetBlockEnd, Bp as willChange, Br as colorMix, Bs as markerMid, Bt as atan2, Bu as scaleFn, C as Keyframes, Ca as focusVisible, Cc as mixBlendMode, Cd as scrollTimelineName, Cf as textDecorationStyle, Ci as cornerRightShape, Cl as paddingInlineStart, Cn as borderBottomLeftRadius, Co as hwb, Cp as valid, Cr as buffering, Cs as listStyleType, Ct as animationDirection, Cu as rotate, D as QueryWrap, Da as fontFeatureSettings, Dc as mr, Dd as seeking, Df as textEmphasisPosition, Di as cornerTopLeftShape, Dl as page, Dn as borderCollapse, Do as hypot, Dp as viewTimeline, Dr as caret, Ds as marginBlock, Dt as animationName, Du as rotateY, E as Prop, Ea as fontFamily, Ec as modal, Ed as scrollbarWidth, Ef as textEmphasisColor, Ei as cornerStartStartShape, El as paddingTop, En as borderBottomWidth, Eo as hyphens, Ep as view, Er as captionSide, Es as margin, Et as animationIterationCount, Eu as rotateX, F as cv, Fa as fontSynthesis, Fc as offsetDistance, Fd as skew, Ff as textSizeAdjust, Fi as counters, Fl as perspective, Fn as borderImageSource, Fo as initialLetter, Fp as volumeLocked, Fr as clipPath, Fs as marginRight, Ft as anyLink, Fu as rx, Ga as fontVariantLigatures, Gc as open, Gd as stroke, Gf as timelineTriggerExitRange, Gi as display, Gl as pointerEvents, Gn as borderInlineStartStyle, Go as insetInlineStart, Gp as x, Gr as columnHeight, Gs as maskBorderOutset, Gt as background, Gu as scroll, H as style, Ha as fontVariantCaps, Hc as onlyOfType, Hd as steps, Hf as textWrapStyle, Hi as defined, Hl as placeSelf, Hn as borderInlineEndWidth, Ho as insetFn, Hp as wordSpacing, Hr as columnCount, Hs as mask, Ht as autofill, Hu as scaleY, I as firstThatWorks, Ia as fontSynthesisPosition, Ic as offsetPath, Id as skewX, If as textSpacingTrim, Ii as crossFade, Il as perspectiveFn, In as borderImageWidth, Io as initialLetterAlign, Ip as whiteSpace, Ir as clipRule, Is as marginTop, It as appearance, Iu as ry, J as FlexMethods, Ja as fontVariationSettings, Jc as orphans, Jd as strokeDashoffset, Jf as timelineTriggerName, Ji as dynamicRangeLimit, Jl as position, Jn as borderInlineWidth, Jo as interestDelayEnd, Jp as zIndex, Jr as columnRuleStyle, Js as maskBorderSource, Jt as backgroundClip, Ju as scrollMargin, K as within, Ka as fontVariantNumeric, Kc as optional, Kd as strokeColor, Kf as timelineTriggerExitRangeEnd, Ki as dominantBaseline, Kl as polygon, Kn as borderInlineStartWidth, Ko as interactivity, Kp as xywh, Kr as columnRule, Ks as maskBorderRepeat, Kt as backgroundAttachment, Ku as scrollBehavior, L as global, La as fontSynthesisSmallCaps, Lc as offsetPosition, Ld as skewY, Lf as textTransform, Li as cubicBezier, Ll as perspectiveOrigin, Ln as borderInline, Lo as inlineSize, Lp as whiteSpaceCollapse, Lr as color, Ls as marginTrim, Lt as asin, Lu as saturate, M as cn, Ma as fontSize, Mc as objectViewBox, Md as shapeRendering, Mf as textOverflow, Mi as counterIncrement, Ml as path, Mn as borderImageOutset, Mo as imageSet, Mp as viewTransitionName, Mr as circle, Ms as marginInlineEnd, Mt as animationTimeline, Mu as rubyMerge, N as container, Na as fontSizeAdjust, Nc as offset, Nd as sign, Nf as textRendering, Ni as counterReset, Nl as paused, Nn as borderImageRepeat, No as inRange, Np as visibility, Nr as clamp, Ns as marginInlineStart, Nt as animationTimingFunction, Nu as rubyOverhang, O as StateWrap, Oa as fontKerning, Oc as mt, Od as sepia, Of as textEmphasisStyle, Oi as cornerTopRightShape, Ol as paint, On as borderColor, Oo as image, Op as viewTimelineAxis, Or as caretAnimation, Os as marginBlockEnd, Ot as animationPlayState, Ou as rotateZ, P as css, Pa as fontStyle, Pc as offsetAnchor, Pd as sin, Pf as textShadow, Pi as counterSet, Pl as pb, Pn as borderImageSlice, Po as indeterminate, Pp as visited, Pr as clear, Ps as marginLeft, Pt as animationTrigger, Pu as rubyPosition, Q as WebkitLineClamp, Qa as fullscreen, Qc as outlineOffset, Qd as strokeOpacity, Qf as timelineTriggerSource, Qi as empty, Ql as positionTryOrder, Qn as borderLeftWidth, Qo as invert, Qr as columnWrap, Qs as maskImage, Qt as backgroundPosition, Qu as scrollMarginBottom, R as group, Ra as fontSynthesisStyle, Rc as offsetRotate, Rd as speakAs, Rf as textUnderlineOffset, Ri as cursor, Rl as pictureInPicture, Rn as borderInlineColor, Ro as inset, Rp as widows, Rr as colorFn, Rs as marker, Rt as aspectRatio, Ru as scale, S as CvValue, Sa as focus, Sc as minmax, Sd as scrollTimelineAxis, Sf as textDecorationSkipInk, Si as cornerLeftShape, Sl as paddingInlineEnd, Sn as borderBottomColor, So as hueRotate, Sp as userValid, Sr as brightness, Ss as listStylePosition, St as animationDelay, Su as root, T as PositionTry, Ta as font, Tc as mod, Td as scrollbarGutter, Tf as textEmphasis, Ti as cornerStartEndShape, Tl as paddingRight, Tn as borderBottomStyle, To as hyphenateLimitChars, Tp as verticalAlign, Tr as calcSize, Ts as m, Tt as animationFillMode, Tu as rotateFn, U as supports, Ua as fontVariantEastAsian, Uc as opacity, Ud as stopColor, Uf as timelineScope, Ui as direction, Ul as placeholderShown, Un as borderInlineStart, Uo as insetInline, Up as wordWrap, Ur as columnFill, Us as maskBorder, Ut as backdropFilter, Uu as scaleZ, V as positionTry, Va as fontVariantAlternates, Vc as onlyChild, Vd as stalled, Vf as textWrapMode, Vi as d, Vl as placeItems, Vn as borderInlineEndStyle, Vo as insetBlockStart, Vp as wordBreak, Vr as colorScheme, Vs as markerStart, Vt as attrFn, Vu as scaleX, W as token, Wa as fontVariantEmoji, Wc as opacityFn, Wd as stopOpacity, Wf as timelineTrigger, Wi as disabled, Wl as playing, Wn as borderInlineStartColor, Wo as insetInlineEnd, Wp as writingMode, Wr as columnGap, Ws as maskBorderMode, Wt as backfaceVisibility, Wu as scope, X as WebkitBoxOrient, Xa as fontWidth, Xc as outline, Xd as strokeLinejoin, Xf as timelineTriggerRangeEnd, Xi as element, Xl as positionArea, Xn as borderLeftColor, Xo as interpolateSize, Xr as columnSpan, Xs as maskClip, Xt as backgroundImage, Xu as scrollMarginBlockEnd, Y as GridMethods, Ya as fontWeight, Yc as outOfRange, Yd as strokeLinecap, Yf as timelineTriggerRange, Yi as dynamicRangeLimitMix, Yl as positionAnchor, Yn as borderLeft, Yo as interestDelayStart, Yp as zoom, Yr as columnRuleWidth, Ys as maskBorderWidth, Yt as backgroundColor, Yu as scrollMarginBlock, Z as WebkitBoxReflect, Za as forcedColorAdjust, Zc as outlineColor, Zd as strokeMiterlimit, Zf as timelineTriggerRangeStart, Zi as ellipse, Zl as positionTryFallbacks, Zn as borderLeftStyle, Zo as invalid, Zr as columnWidth, Zs as maskComposite, Zt as backgroundOrigin, Zu as scrollMarginBlockStart, _ as CSSStyleValue, _a as flexWrap, _c as min, _d as scrollSnapAlign, _f as textDecoration, _i as cornerBottomShape, _l as paddingBlock, _n as borderBlockStartStyle, _o as hangingPunctuation, _p as triggerScope, _r as boxShadow, _s as linear, _t as anchorName, _u as required, a as DtcgUnit, aa as fillOpacity, ac as mathDepth, ad as scrollMarkerGroup, af as target, ai as containIntrinsicSize, al as overflowInline, am as Fallback, an as bg, ao as gridAutoFlow, ap as transition, ar as borderStartEndRadius, as as lastOfType, at as WebkitUserModify, au as r, b as CvConfig, ba as floodOpacity, bc as minInlineSize, bd as scrollTargetGroup, bf as textDecorationLine, bi as cornerInlineEndShape, bl as paddingBottom, bn as borderBlockWidth, bo as hsl, bp as userInvalid, br as breakBefore, bs as listStyle, bt as animation, bu as rgba, c as Tokens, ca as firstChild, cc as matrix, cd as scrollPaddingBlockEnd, cf as targetText, ci as containerType, cl as overflowY, cn as border, co as gridColumnEnd, cp as transitionDuration, cr as borderTop, cs as leader, ct as accentColor, cu as readOnly, d as createTokens, da as flex, dc as maxBlockSize, dd as scrollPaddingInline, df as textAnchor, di as contrast, dl as overscrollBehaviorBlock, dn as borderBlockEnd, do as gridRowEnd, dp as translate, dr as borderTopRightRadius, ds as lightDark, dt as alignContent, du as readingOrder, ea as enabled, ec as maskOrigin, ed as scrollMarginInlineEnd, ef as superellipse, ei as conicGradient, el as outlineWidth, en as backgroundPositionY, eo as gap, ep as touchAction, er as borderRight, es as justifyContent, et as WebkitTextFillColor, eu as pow, f as layers, fa as flexBasis, fc as maxHeight, fd as scrollPaddingInlineEnd, ff as textAutospace, fi as contrastColor, fl as overscrollBehaviorInline, fn as borderBlockEndColor, fo as gridRowStart, fp as translate3d, fr as borderTopStyle, fs as lightingColor, ft as alignItems, fu as rect, g as CSSImageValue, ga as flexShrink, gc as mb, gd as scrollPaddingTop, gf as textCombineUpright, gi as cornerBottomRightShape, gl as padding, gn as borderBlockStartColor, go as gridTemplateRows, gp as translateZ, gr as boxDecorationBreak, gs as lineHeightStep, gt as anchor, gu as repeatingRadialGradient, h as CSSColorValue, ha as flexGrow, hc as maxWidth, hd as scrollPaddingRight, hf as textBoxTrim, hi as cornerBottomLeftShape, hl as p, hn as borderBlockStart, ho as gridTemplateColumns, hp as translateY, hr as bottom, hs as lineHeight, ht as all, hu as repeatingLinearGradient, i as DtcgShadow, ia as fill, ic as maskType, id as scrollMarginTop, if as tan, ii as containIntrinsicInlineSize, il as overflowClipMargin, in as baselineSource, io as gridAutoColumns, ip as transformStyle, ir as borderSpacing, is as lastChild, it as WebkitTouchCallout, iu as quotes, j as attr, ja as fontPalette, jc as objectPosition, jd as shapeOutside, jf as textOrientation, ji as counter, jl as past, jn as borderImage, jo as imageResolution, jp as viewTransitionClass, jr as checked, js as marginInline, jt as animationRangeStart, ju as rubyAlign, k as Steps, ka as fontLanguageOverride, kc as muted, kd as shapeImageThreshold, kf as textIndent, ki as cornerTopShape, kl as paintOrder, kn as borderEndEndRadius, ko as imageOrientation, kp as viewTimelineInset, kr as caretColor, ks as marginBlockStart, kt as animationRange, ku as round, l as check, la as firstOfType, lc as matrix3d, ld as scrollPaddingBlockStart, lf as textAlign, li as content, ll as overlay, ln as borderBlock, lo as gridColumnStart, lp as transitionProperty, lr as borderTopColor, ls as left, lt as acos, lu as readWrite, m as CSS, ma as flexFlow, mc as maxLines, md as scrollPaddingLeft, mf as textBoxEdge, mi as cornerBlockStartShape, ml as overscrollBehaviorY, mn as borderBlockEndWidth, mo as gridTemplateAreas, mp as translateX, mr as borderWidth, ms as lineClamp, mt as alignmentBaseline, mu as repeatingConicGradient, n as DtcgColor, na as exp, nc as maskRepeat, nd as scrollMarginLeft, nf as tabSize, ni as containIntrinsicBlockSize, nl as overflowAnchor, nn as backgroundSize, no as grid, np as transformBox, nr as borderRightStyle, ns as justifySelf, nt as WebkitTextStrokeColor, nu as printColorAdjust, o as DtcgValue, oa as fillRule, oc as mathShift, od as scrollPadding, of as targetCounter, oi as containIntrinsicWidth, ol as overflowWrap, om as Part, on as blockSize, oo as gridAutoRows, op as transitionBehavior, or as borderStartStartRadius, os as layer, ot as _var, ou as radialGradient, p as AttrOp, pa as flexDirection, pc as maxInlineSize, pd as scrollPaddingInlineStart, pf as textBox, pi as cornerBlockEndShape, pl as overscrollBehaviorX, pn as borderBlockEndStyle, po as gridTemplate, pp as translateFn, pr as borderTopWidth, ps as lineBreak, pt as alignSelf, pu as rem, q as ClassValue, qa as fontVariantPosition, qc as order, qd as strokeDasharray, qf as timelineTriggerExitRangeStart, qi as dropShadow, ql as popoverOpen, qn as borderInlineStyle, qo as interestDelay, qp as y, qr as columnRuleColor, qs as maskBorderSlice, qt as backgroundBlendMode, qu as scrollInitialTarget, r as DtcgCubicBezier, ra as fieldSizing, rc as maskSize, rd as scrollMarginRight, rf as tableLayout, ri as containIntrinsicHeight, rl as overflowBlock, rn as baselineShift, ro as gridArea, rp as transformOrigin, rr as borderRightWidth, rs as lab, rt as WebkitTextStrokeWidth, ru as pt, s as Overrides, sa as filter, sc as mathStyle, sd as scrollPaddingBlock, sf as targetCounters, si as containerName, sl as overflowX, sm as Style, sn as blur, so as gridColumn, sp as transitionDelay, sr as borderStyle, ss as lch, st as abs, su as ray, t as CheckOverrides, ta as env, tc as maskPosition, td as scrollMarginInlineStart, tf as symbols, ti as contain, tl as overflow, tn as backgroundRepeat, to as grayscale, tp as transform, tr as borderRightColor, ts as justifyItems, tt as WebkitTextStroke, tu as pr, u as createGlobalTheme, ua as fitContent, uc as max, ud as scrollPaddingBottom, uf as textAlignLast, ui as contentVisibility, ul as overscrollBehavior, un as borderBlockColor, uo as gridRow, up as transitionTimingFunction, ur as borderTopLeftRadius, us as letterSpacing, ut as active, uu as readingFlow, v as CSSUnitValue, va as float, vc as minBlockSize, vd as scrollSnapStop, vf as textDecorationColor, vi as cornerEndEndShape, vl as paddingBlockEnd, vn as borderBlockStartWidth, vo as height, vp as unicodeBidi, vr as boxSizing, vs as linearGradient, vt as anchorScope, vu as resize, w as Layout, wa as focusWithin, wc as ml, wd as scrollbarColor, wf as textDecorationThickness, wi as cornerShape, wl as paddingLeft, wn as borderBottomRightRadius, wo as hyphenateCharacter, wp as vectorEffect, wr as calc, ws as log, wt as animationDuration, wu as rotate3d, x as CvProps, xa as flowTolerance, xc as minWidth, xd as scrollTimeline, xf as textDecorationSkip, xi as cornerInlineStartShape, xl as paddingInline, xn as borderBottom, xo as hsla, xp as userSelect, xr as breakInside, xs as listStyleImage, xt as animationComposition, xu as right, y as Chain, ya as floodColor, yc as minHeight, yd as scrollSnapType, yf as textDecorationInset, yi as cornerEndStartShape, yl as paddingBlockStart, yn as borderBlockStyle, yo as hover, yp as url, yr as breakAfter, ys as link, yt as anchorSize, yu as rgb, z as keyframes, za as fontSynthesisWeight, zc as oklab, zd as sqrt, zf as textUnderlinePosition, zi as cx, zl as pl, zn as borderInlineEnd, zo as insetBlock, zp as width, zr as colorInterpolationFilters, zs as markerEnd, zt as atan, zu as scale3d } from "./theme-types-Bqv0Ggz_.mjs";
|
|
2
2
|
export { AttrOp, type CSS, type CSSColorValue, type CSSImageValue, type CSSStyleValue, type CSSUnitValue, Chain, CheckOverrides, type ClassValue, CvConfig, CvProps, CvValue, DtcgColor, DtcgCubicBezier, DtcgShadow, DtcgUnit, DtcgValue, type Fallback, FlexMethods, GridMethods, Keyframes, Layout, Overrides, type Part, PositionTry, Prop, QueryWrap, StateWrap, Steps, type Style, Tokens, WebkitBoxOrient, WebkitBoxReflect, WebkitLineClamp, WebkitTapHighlightColor, WebkitTextFillColor, WebkitTextStroke, WebkitTextStrokeColor, WebkitTextStrokeWidth, WebkitTouchCallout, WebkitUserModify, Wrap, abs, accentColor, acos, active, alignContent, alignItems, alignSelf, alignmentBaseline, all, anchor, anchorName, anchorScope, anchorSize, animation, animationComposition, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationRange, animationRangeEnd, animationRangeStart, animationTimeline, animationTimingFunction, animationTrigger, anyLink, appearance, asin, aspectRatio, atan, atan2, attr, attrFn, autofill, backdropFilter, backfaceVisibility, background, backgroundAttachment, backgroundBlendMode, backgroundClip, backgroundColor, backgroundImage, backgroundOrigin, backgroundPosition, backgroundPositionX, backgroundPositionY, backgroundRepeat, backgroundSize, baselineShift, baselineSource, bg, blockSize, blur, border, borderBlock, borderBlockColor, borderBlockEnd, borderBlockEndColor, borderBlockEndStyle, borderBlockEndWidth, borderBlockStart, borderBlockStartColor, borderBlockStartStyle, borderBlockStartWidth, borderBlockStyle, borderBlockWidth, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderEndEndRadius, borderEndStartRadius, borderImage, borderImageOutset, borderImageRepeat, borderImageSlice, borderImageSource, borderImageWidth, borderInline, borderInlineColor, borderInlineEnd, borderInlineEndColor, borderInlineEndStyle, borderInlineEndWidth, borderInlineStart, borderInlineStartColor, borderInlineStartStyle, borderInlineStartWidth, borderInlineStyle, borderInlineWidth, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRadius, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderSpacing, borderStartEndRadius, borderStartStartRadius, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxDecorationBreak, boxShadow, boxSizing, breakAfter, breakBefore, breakInside, brightness, buffering, calc, calcSize, captionSide, caret, caretAnimation, caretColor, caretShape, check, checked, circle, clamp, clear, clipPath, clipRule, cn, color, colorFn, colorInterpolationFilters, colorMix, colorScheme, columnCount, columnFill, columnGap, columnHeight, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columnWrap, columns, conicGradient, contain, containIntrinsicBlockSize, containIntrinsicHeight, containIntrinsicInlineSize, containIntrinsicSize, containIntrinsicWidth, container, containerName, containerType, content, contentVisibility, contrast, contrastColor, cornerBlockEndShape, cornerBlockStartShape, cornerBottomLeftShape, cornerBottomRightShape, cornerBottomShape, cornerEndEndShape, cornerEndStartShape, cornerInlineEndShape, cornerInlineStartShape, cornerLeftShape, cornerRightShape, cornerShape, cornerStartEndShape, cornerStartStartShape, cornerTopLeftShape, cornerTopRightShape, cornerTopShape, cos, counter, counterIncrement, counterReset, counterSet, counters, createGlobalTheme, createTokens, crossFade, css, cubicBezier, cursor, cv, cx, cy, d, defined, direction, disabled, display, dominantBaseline, dropShadow, dynamicRangeLimit, dynamicRangeLimitMix, element, ellipse, empty, emptyCells, enabled, env, exp, fieldSizing, fill, fillOpacity, fillRule, filter, firstChild, firstOfType, firstThatWorks, fitContent, flex, flexBasis, flexDirection, flexFlow, flexGrow, flexShrink, flexWrap, float, floodColor, floodOpacity, flowTolerance, focus, focusVisible, focusWithin, font, fontFamily, fontFeatureSettings, fontKerning, fontLanguageOverride, fontOpticalSizing, fontPalette, fontSize, fontSizeAdjust, fontStyle, fontSynthesis, fontSynthesisPosition, fontSynthesisSmallCaps, fontSynthesisStyle, fontSynthesisWeight, fontVariant, fontVariantAlternates, fontVariantCaps, fontVariantEastAsian, fontVariantEmoji, fontVariantLigatures, fontVariantNumeric, fontVariantPosition, fontVariationSettings, fontWeight, fontWidth, forcedColorAdjust, fullscreen, future, gap, global, grayscale, grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnStart, gridRow, gridRowEnd, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, group, hangingPunctuation, height, hover, hsl, hsla, hueRotate, hwb, hyphenateCharacter, hyphenateLimitChars, hyphens, hypot, image, imageOrientation, imageRendering, imageResolution, imageSet, inRange, indeterminate, initialLetter, initialLetterAlign, inlineSize, inset, insetBlock, insetBlockEnd, insetBlockStart, insetFn, insetInline, insetInlineEnd, insetInlineStart, interactivity, interestDelay, interestDelayEnd, interestDelayStart, interpolateSize, invalid, invert, isolation, justifyContent, justifyItems, justifySelf, keyframes, lab, lastChild, lastOfType, layer, layers, lch, leader, left, letterSpacing, lightDark, lightingColor, lineBreak, lineClamp, lineHeight, lineHeightStep, linear, linearGradient, link, listStyle, listStyleImage, listStylePosition, listStyleType, log, m, margin, marginBlock, marginBlockEnd, marginBlockStart, marginBottom, marginInline, marginInlineEnd, marginInlineStart, marginLeft, marginRight, marginTop, marginTrim, marker, markerEnd, markerMid, markerStart, mask, maskBorder, maskBorderMode, maskBorderOutset, maskBorderRepeat, maskBorderSlice, maskBorderSource, maskBorderWidth, maskClip, maskComposite, maskImage, maskMode, maskOrigin, maskPosition, maskRepeat, maskSize, maskType, mathDepth, mathShift, mathStyle, matrix, matrix3d, max, maxBlockSize, maxHeight, maxInlineSize, maxLines, maxWidth, mb, media, min, minBlockSize, minHeight, minInlineSize, minWidth, minmax, mixBlendMode, ml, mod, modal, mr, mt, muted, objectFit, objectPosition, objectViewBox, offset, offsetAnchor, offsetDistance, offsetPath, offsetPosition, offsetRotate, oklab, oklch, onlyChild, onlyOfType, opacity, opacityFn, open, optional, order, orphans, outOfRange, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, overflow, overflowAnchor, overflowBlock, overflowClipMargin, overflowInline, overflowWrap, overflowX, overflowY, overlay, overscrollBehavior, overscrollBehaviorBlock, overscrollBehaviorInline, overscrollBehaviorX, overscrollBehaviorY, p, padding, paddingBlock, paddingBlockEnd, paddingBlockStart, paddingBottom, paddingInline, paddingInlineEnd, paddingInlineStart, paddingLeft, paddingRight, paddingTop, page, paint, paintOrder, paletteMix, past, path, paused, pb, perspective, perspectiveFn, perspectiveOrigin, pictureInPicture, pl, placeContent, placeItems, placeSelf, placeholderShown, playing, pointerEvents, polygon, popoverOpen, position, positionAnchor, positionArea, positionTry, positionTryFallbacks, positionTryOrder, positionVisibility, pow, pr, printColorAdjust, pt, quotes, r, radialGradient, ray, readOnly, readWrite, readingFlow, readingOrder, rect, rem, repeatingConicGradient, repeatingLinearGradient, repeatingRadialGradient, required, resize, rgb, rgba, right, root, rotate, rotate3d, rotateFn, rotateX, rotateY, rotateZ, round, rowGap, rubyAlign, rubyMerge, rubyOverhang, rubyPosition, rx, ry, saturate, scale, scale3d, scaleFn, scaleX, scaleY, scaleZ, scope, scroll, scrollBehavior, scrollInitialTarget, scrollMargin, scrollMarginBlock, scrollMarginBlockEnd, scrollMarginBlockStart, scrollMarginBottom, scrollMarginInline, scrollMarginInlineEnd, scrollMarginInlineStart, scrollMarginLeft, scrollMarginRight, scrollMarginTop, scrollMarkerGroup, scrollPadding, scrollPaddingBlock, scrollPaddingBlockEnd, scrollPaddingBlockStart, scrollPaddingBottom, scrollPaddingInline, scrollPaddingInlineEnd, scrollPaddingInlineStart, scrollPaddingLeft, scrollPaddingRight, scrollPaddingTop, scrollSnapAlign, scrollSnapStop, scrollSnapType, scrollTargetGroup, scrollTimeline, scrollTimelineAxis, scrollTimelineName, scrollbarColor, scrollbarGutter, scrollbarWidth, seeking, sepia, shapeImageThreshold, shapeMargin, shapeOutside, shapeRendering, sign, sin, skew, skewX, skewY, speakAs, sqrt, src, stalled, steps, stopColor, stopOpacity, stroke, strokeColor, strokeDasharray, strokeDashoffset, strokeLinecap, strokeLinejoin, strokeMiterlimit, strokeOpacity, strokeWidth, style, superellipse, supports, symbols, tabSize, tableLayout, tan, target, targetCounter, targetCounters, targetText, textAlign, textAlignLast, textAnchor, textAutospace, textBox, textBoxEdge, textBoxTrim, textCombineUpright, textDecoration, textDecorationColor, textDecorationInset, textDecorationLine, textDecorationSkip, textDecorationSkipInk, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIndent, textJustify, textOrientation, textOverflow, textRendering, textShadow, textSizeAdjust, textSpacingTrim, textTransform, textUnderlineOffset, textUnderlinePosition, textWrap, textWrapMode, textWrapStyle, timelineScope, timelineTrigger, timelineTriggerExitRange, timelineTriggerExitRangeEnd, timelineTriggerExitRangeStart, timelineTriggerName, timelineTriggerRange, timelineTriggerRangeEnd, timelineTriggerRangeStart, timelineTriggerSource, token, top, touchAction, transform, transformBox, transformOrigin, transformStyle, transition, transitionBehavior, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, translate, translate3d, translateFn, translateX, translateY, translateZ, triggerScope, unicodeBidi, url, userInvalid, userSelect, userValid, valid, _var as var, vectorEffect, verticalAlign, view, viewTimeline, viewTimelineAxis, viewTimelineInset, viewTimelineName, viewTransitionClass, viewTransitionName, visibility, visited, volumeLocked, whiteSpace, whiteSpaceCollapse, widows, width, willChange, within, wordBreak, wordSpacing, wordWrap, writingMode, x, xywh, y, zIndex, zoom };
|
package/dist/vite.d.mts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { i as GlobalRule } from "./author-types-C1AhsnrT.mjs";
|
|
2
2
|
import { n as ImportError, r as MacroError } from "./errors-D4ZbcwRo.mjs";
|
|
3
|
-
import { i as RegistryState, n as At, r as LayersDecl } from "./node-
|
|
3
|
+
import { i as RegistryState, n as At, r as LayersDecl } from "./node-OJ_w_Usj.mjs";
|
|
4
4
|
import { Effect } from "effect";
|
|
5
5
|
import { ImportDeclaration } from "oxc-parser";
|
|
6
|
+
import MagicString from "magic-string";
|
|
6
7
|
import { Plugin } from "vite";
|
|
7
8
|
//#region src/devtools-server.d.ts
|
|
8
9
|
/** A `css.*` call of a client module: where it is (1-based line, 0-based column) and the class names it produced. */
|
|
@@ -57,11 +58,26 @@ interface CssImports {
|
|
|
57
58
|
locals: Set<string>;
|
|
58
59
|
decls: ImportDeclaration[];
|
|
59
60
|
}
|
|
61
|
+
/** A `cn(...)` with runtime arguments: the call is the runtime's `__cx`, which gets the runtime arguments. */
|
|
62
|
+
interface SiteGroup {
|
|
63
|
+
callee: {
|
|
64
|
+
start: number;
|
|
65
|
+
end: number;
|
|
66
|
+
};
|
|
67
|
+
args: {
|
|
68
|
+
start: number;
|
|
69
|
+
end: number;
|
|
70
|
+
runtime: boolean;
|
|
71
|
+
}[];
|
|
72
|
+
/** `[offset, site]` of the sites inside the runtime arguments, in source order: the parts that may or may not be active */
|
|
73
|
+
parts: [number, number][];
|
|
74
|
+
}
|
|
60
75
|
interface Site {
|
|
61
76
|
start: number;
|
|
62
77
|
end: number;
|
|
63
78
|
inFn: boolean;
|
|
64
79
|
locals: Set<string>;
|
|
80
|
+
group?: SiteGroup;
|
|
65
81
|
}
|
|
66
82
|
interface Instrumented {
|
|
67
83
|
code: string;
|
package/dist/vite.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { c as EvalError, d as MacroError, f as MemberError, i as forgetWarnings, l as HookError, n as forget, p as SiteMissingError, t as Registry } from "./registry-
|
|
2
|
-
import { C as fallbackEntries, T as runtimeNames, a as closeNames, b as DERIVED, c as layerEntries, f as themedEntries, l as layerStatements, m as usesDerived, n as addGlobal, o as globalEntries, r as addLayers, s as globalNames, t as LAYERS, u as renderSheet, v as kernelEntries, w as runtimeModule, x as RUNTIME_ID } from "./sheet-
|
|
3
|
-
import {
|
|
4
|
-
import { r as verifyChecks } from "./contrast-
|
|
1
|
+
import { c as EvalError, d as MacroError, f as MemberError, i as forgetWarnings, l as HookError, n as forget, p as SiteMissingError, t as Registry } from "./registry-CTumHB8p.mjs";
|
|
2
|
+
import { C as fallbackEntries, T as runtimeNames, a as closeNames, b as DERIVED, c as layerEntries, f as themedEntries, l as layerStatements, m as usesDerived, n as addGlobal, o as globalEntries, r as addLayers, s as globalNames, t as LAYERS, u as renderSheet, v as kernelEntries, w as runtimeModule, x as RUNTIME_ID } from "./sheet-BKsMTa0c.mjs";
|
|
3
|
+
import { a as runtimeImport, i as instrument, o as writeSite } from "./instrument-gCazujmb.mjs";
|
|
4
|
+
import { r as verifyChecks } from "./contrast-DhK69Xak.mjs";
|
|
5
5
|
import { createRequire } from "node:module";
|
|
6
6
|
import { targets as targets$1, useTargets } from "@cssints/css-grammar/support";
|
|
7
7
|
import { Cause, Clock, Config, Data, Effect, Exit, Formatter, Option, Predicate, Result, Schema, Semaphore } from "effect";
|
|
@@ -71,7 +71,7 @@ const failureOf = (id, registry) => (e) => {
|
|
|
71
71
|
const m = e instanceof ReferenceError ? /^(?:(\S+) is not defined|Cannot access '(\S+)' before initialization)$/.exec(e.message) : null;
|
|
72
72
|
const name = m?.[1] ?? m?.[2];
|
|
73
73
|
return new MacroError({
|
|
74
|
-
message: name ? `cssints: css arguments must be known at build time: \`${name}\` is not defined where the call is evaluated (a parameter, a prop or state). Use
|
|
74
|
+
message: name ? `cssints: css arguments must be known at build time: \`${name}\` is not defined where the call is evaluated (a parameter, a prop or state). Use cn(base, on && p(4)), a cv variant, or a token in a style prop` : message,
|
|
75
75
|
cause: e,
|
|
76
76
|
...at
|
|
77
77
|
});
|
|
@@ -80,6 +80,7 @@ const evaluateModule = Effect.fnUntraced(function* (runner, id, targets) {
|
|
|
80
80
|
const registry = yield* Registry;
|
|
81
81
|
useTargets(targets);
|
|
82
82
|
registry.sites.delete(id);
|
|
83
|
+
registry.nodes.delete(id);
|
|
83
84
|
forget(id);
|
|
84
85
|
registry.at = void 0;
|
|
85
86
|
registry.files.clear();
|
|
@@ -707,7 +708,7 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false }
|
|
|
707
708
|
}
|
|
708
709
|
const ms = new MagicString(code);
|
|
709
710
|
if (runtimes.length) ms.prepend(runtimes.map((n) => `import ${Formatter.formatJson(RUNTIME_ID + n)};\n`).join(""));
|
|
710
|
-
|
|
711
|
+
ms.prepend(runtimeImport(sites.values()));
|
|
711
712
|
for (const [n, s] of parsed.sites.entries()) {
|
|
712
713
|
const replacement = sites.get(n);
|
|
713
714
|
if (replacement === void 0) return yield* new SiteMissingError({
|
|
@@ -716,13 +717,9 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false }
|
|
|
716
717
|
site: n,
|
|
717
718
|
offset: s.start
|
|
718
719
|
});
|
|
719
|
-
ms
|
|
720
|
-
}
|
|
721
|
-
for (const decl of parsed.imp.decls) {
|
|
722
|
-
const kept = keptImport(decl, code);
|
|
723
|
-
if (kept) ms.overwrite(decl.start, decl.end, kept);
|
|
724
|
-
else ms.remove(decl.start, decl.end);
|
|
720
|
+
writeSite(ms, s, replacement);
|
|
725
721
|
}
|
|
722
|
+
for (const decl of parsed.imp.decls) ms.remove(decl.start, decl.end);
|
|
726
723
|
for (const dep of runnerDeps(env, id)) (depsOf.get(dep) ?? depsOf.set(dep, /* @__PURE__ */ new Set()).get(dep)).add(id);
|
|
727
724
|
for (const file of files) {
|
|
728
725
|
const dep = normalizePath(resolve(file));
|
package/docs/API.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
# CSS in TS
|
|
2
2
|
|
|
3
|
-
The 0.
|
|
3
|
+
The 0.x API, **alpha**: it can still change between minor versions. Setup (the Vite plugin, the stylesheet import) is in the [README](../README.md). Decisions and findings are in [wayfinder.md](wayfinder.md).
|
|
4
4
|
|
|
5
5
|
Every `ts` block here is type-checked against the workspace `cssints` types by `packages/cssints/test/docs.mjs` (`bun run test`). A line that ends in `// error` must fail to type-check. Blocks fenced `ts skip` (output) are not checked. A few blocks show a build-time error that the types cannot see; their comments give the message.
|
|
6
6
|
|
|
7
7
|
### Authoring surface (decided 2026-09-29, cssints-5dbi)
|
|
8
8
|
|
|
9
|
-
- **Import.** `with { type: "cssints" }` marks code that runs at build time: cssints itself, plugins such as icons, and your own helper modules. The plugin finds call sites by this attribute.
|
|
9
|
+
- **Import.** `with { type: "cssints" }` marks code that runs at build time: cssints itself, plugins such as icons, and your own helper modules. The plugin finds call sites by this attribute. Nothing is imported without it: the few runtime lines a module needs (`__cx` for a `cn()` with runtime arguments, `__cv` for a `cv()`) are imported by the plugin. Using a build-time member without the attribute is a build error.
|
|
10
10
|
- **Names.** Every mdn property as camelCase (`paddingLeft`, `alignItems`, `justifyContent`), plus a short set: `p pt pr pb pl`, `m mt mr mb ml`, `bg`. Everything is available both as named exports and through the namespace (`css.p`). There is no `items` or `justify`: they were ambiguous (`align-items` or `align-content`, `justify-content` or `justify-items`).
|
|
11
11
|
- **Numbers.** A bare number is a spacing step of 0.25rem in `padding*`, `margin*`, `gap*` and `inset*` (`p(4)` is `1rem`). In any other property it is a CSS `<number>`: `opacity(0.5)`, `zIndex(3)`.
|
|
12
12
|
- **Values.** A property takes one or more parts joined by a space. Each part is a string or a Typed OM value: `border("1px solid", accent)`, `padding(CSS.rem(1), CSS.rem(2))`, `padding("1rem 2rem")`. Parts are checked against the mdn grammar in types and again at build time. `CSS.px`, `rem`, `em`, `percent`, `number`, `CSSUnitValue` and `CSSColorValue` come from `cssints`, imported with the attribute.
|
|
13
13
|
- **Editor.** A bad part is marked on that part: `padding("2px", "red")` puts the error on `"red"`, with the message of the whole value. While a string is not a value yet, the editor offers the keywords of the property that the word under the cursor begins (`display("fl…")` gives `flex`, `flow`, `flow-root`; `border("1px", "so…")` gives `solid`), and all of them in an empty part (`border("1px", "")`; an empty part is an error). The offer is the keywords of the whole grammar, not only those that fit at that point, it stops once the string is valid, and functions such as `rgb(` are not offered.
|
|
14
14
|
- **Math.** `calc()`, `min()`, `max()`, `clamp()` and the other CSS Values 4 math functions are accepted wherever their type is, as strings (`width("calc(100% - 2rem)")`, checked by the build: `calc(1px + 2s)` is an error) and as calls that take tokens (`calc(t.space.md, "*", 2)`, see "Functions").
|
|
15
|
-
- **Layout contexts.** `flex()` and `grid()` without arguments set `display` and chain only their container properties. Names drop only the context prefix: `flex().direction("column").wrap("wrap").alignItems("center").justifyContent("space-between")`, `grid().templateColumns("1fr 2fr").gap(4)`. Plain styles do not chain; merge them with `cn(...)
|
|
15
|
+
- **Layout contexts.** `flex()` and `grid()` without arguments set `display` and chain only their container properties. Names drop only the context prefix: `flex().direction("column").wrap("wrap").alignItems("center").justifyContent("space-between")`, `grid().templateColumns("1fr 2fr").gap(4)`. Plain styles do not chain; merge them with `cn(...)`. Item properties (`flexGrow`, `alignSelf`, `gridColumn`, `order`) are plain functions.
|
|
16
16
|
- **`flex(...parts)` and `grid(...parts)` are the shorthand properties.** With at least one argument the call is the `flex` (or `grid`) property, checked by its grammar like any member: `flex("1")`, `flex(1)` and `flex("1 1 0")` are `flex: 1`, `flex: 1` and `flex: 1 1 0`, `grid("auto / 1fr 1fr")` is `grid: auto / 1fr 1fr`. A bare number is a `<number>` here, not a spacing step. The result is a plain style: it sets no `display` and does not chain. The types tell the two forms apart by overload.
|
|
17
17
|
- **`container` is the condition.** `container("sidebar (width < 30rem)")` is a query; the `container` shorthand property is written with its longhands `containerName` and `containerType`.
|
|
18
|
-
- **Arguments are build-time values.** The plugin runs your module at build time and replaces each call with a class string. A literal, a `const`, a token or a value from another attributed module works. A value that exists only at runtime (a prop, state) does not: `p(n)` with `n` a parameter is a build error (`css arguments must be known at build time: n is not defined where the call is evaluated`) that points at the call, also when the local is named like a global (`open`, `name`) or like a module binding. The types do not catch it: a helper module may take parameters (below), so a `string` or `number` is a fine argument there. Choose between styles with `
|
|
18
|
+
- **Arguments are build-time values.** The plugin runs your module at build time and replaces each call with a class string. A literal, a `const`, a token or a value from another attributed module works. A value that exists only at runtime (a prop, state) does not: `p(n)` with `n` a parameter is a build error (`css arguments must be known at build time: n is not defined where the call is evaluated`) that points at the call, also when the local is named like a global (`open`, `name`) or like a module binding. The types do not catch it: a helper module may take parameters (below), so a `string` or `number` is a fine argument there. Choose between styles with `cn(base, on && p(4))` (see "Runtime: `cn`, `cv`"), a `cv` variant, or a token set in a `style` prop. A helper module imported with the attribute may take parameters, because each call of it is a site with its own arguments: `stack(4)` below is a build-time call in the file that makes it.
|
|
19
19
|
- **Top-level code runs at build time.** A call the run does not reach (`false && p(4)`, a branch not taken, a ternary arm) still gets its class string: it is evaluated after the module has loaded, like a call inside a function, so its arguments may use the bindings of the module but not the locals of the branch. A `cv(...)` at the top of a module works too: during the build it is the same function the browser gets, so `button({ size: "lg" })` at the top of a module gives its classes.
|
|
20
20
|
|
|
21
21
|
```ts
|
|
@@ -30,27 +30,28 @@ export const stack = (gap: number) => css.flex().direction("column").gap(gap);
|
|
|
30
30
|
### Basic usage
|
|
31
31
|
|
|
32
32
|
```tsx
|
|
33
|
-
import {
|
|
34
|
-
import { alignItems, justifyContent, p } from "cssints" with { type: "cssints" };
|
|
33
|
+
import { alignItems, cn, justifyContent, p } from "cssints" with { type: "cssints" };
|
|
35
34
|
import * as css from "cssints" with { type: "cssints" };
|
|
36
35
|
|
|
37
36
|
export const A = () => (
|
|
38
|
-
<div className={
|
|
37
|
+
<div className={cn(css.display("flex"), alignItems("center"), justifyContent("center"), prop && p(4))}>Hello, world!</div>
|
|
39
38
|
);
|
|
40
39
|
// or with a layout context
|
|
41
40
|
export const B = () => (
|
|
42
|
-
<div className={
|
|
41
|
+
<div className={cn(css.flex().alignItems("center").justifyContent("center"), prop && css.p(4))}>Hello, world!</div>
|
|
43
42
|
);
|
|
44
43
|
```
|
|
45
44
|
|
|
46
45
|
Output for `A`:
|
|
47
46
|
|
|
48
47
|
```tsx skip
|
|
49
|
-
import {
|
|
48
|
+
import { _cx as __cx } from "cssints";
|
|
50
49
|
|
|
51
|
-
export const A = () => <div className={
|
|
50
|
+
export const A = () => <div className={__cx([], "_1s47490 _1ob5z5m _cn8dee", prop && "_lwugp7")}>Hello, world!</div>;
|
|
52
51
|
```
|
|
53
52
|
|
|
53
|
+
The static arguments of `cn` are one class string; `prop && p(4)` depends on a runtime value, so it stays an argument of the runtime call, and the `p(4)` in it is already its class.
|
|
54
|
+
|
|
54
55
|
```css
|
|
55
56
|
@layer _.k, _.a, _.b, _.c, _.d, _.e;
|
|
56
57
|
@layer _.a {
|
|
@@ -63,9 +64,9 @@ export const A = () => <div className={cx("_1s47490", "_1ob5z5m", "_cn8dee", pro
|
|
|
63
64
|
|
|
64
65
|
- **The class names** are a hash of the declaration (and its conditions), so the same declaration gives the same class in every file.
|
|
65
66
|
- **One sheet.** All rules are in `virtual:cssints.css`, each once, sorted by layer, then condition, then shorthand before longhand (`border` before `border-top`, counted from Chrome's own expansion of each shorthand), then class name. So a longhand wins over a shorthand that contains it, whatever the order of the arguments: `cn(pl(2), p(4))` keeps `padding-left: 0.5rem`.
|
|
66
|
-
- **`cn()` keeps the later of the same property.** `cn(p(4), p(2))` is `p(2)`: the earlier declaration is dropped at build time (also for an alias: `wordWrap` is `overflowWrap`). Under different conditions both stay, because they are in different layers: `cn(md(p(6)), p(2))`. Two properties that overlap without one containing the other are a build error, because the sheet cannot order them by the arguments: `cn(borderTop("1px solid red"), borderColor("blue"))` both set `border-top-color`; so do a physical and a logical side (`marginLeft` and `marginInline`, `width` and `inlineSize`), since which physical side a logical one is depends on the writing mode. A logical property inside a physical shorthand that sets every side is contained, not overlapping: `cn(border(...), borderInline(...))` is fine, and `borderInline` wins.
|
|
67
|
+
- **`cn()` keeps the later of the same property.** `cn(p(4), p(2))` is `p(2)`: the earlier declaration is dropped at build time (also for an alias: `wordWrap` is `overflowWrap`). Under different conditions both stay, because they are in different layers: `cn(md(p(6)), p(2))`. Two properties that overlap without one containing the other are a build error, because the sheet cannot order them by the arguments: `cn(borderTop("1px solid red"), borderColor("blue"))` both set `border-top-color`; so do a physical and a logical side (`marginLeft` and `marginInline`, `width` and `inlineSize`), since which physical side a logical one is depends on the writing mode. A logical property inside a physical shorthand that sets every side is contained, not overlapping: `cn(border(...), borderInline(...))` is fine, and `borderInline` wins. A style in a runtime argument is compared with the static arguments at build time, and replaces the classes it overrides while it is active (see "Runtime: `cn`, `cv`").
|
|
67
68
|
- **A layout context** gives one string: `flex().alignItems("center")` is `"_1s47490 _1ob5z5m"`.
|
|
68
|
-
- **Also exported:** `css` (the namespace as a value) and `cn`, `cv`, `firstThatWorks`, `media`, `container`, `supports`, `attr`, `within`, `group`, `global`, `token`, `style`, `createTokens`, `createGlobalTheme`, `check`.
|
|
69
|
+
- **Also exported:** `css` (the namespace as a value) and `cn`, `cv`, `firstThatWorks`, `media`, `container`, `supports`, `attr`, `within`, `group`, `global`, `token`, `style`, `createTokens`, `createGlobalTheme`, `check`. Nothing is exported for the browser: the runtime is the plugin's.
|
|
69
70
|
|
|
70
71
|
### Without runtime
|
|
71
72
|
|
|
@@ -81,14 +82,13 @@ Output:
|
|
|
81
82
|
export const C = () => <div className="_1s47490 _1ob5z5m _cn8dee _lwugp7">Hello, world!</div>;
|
|
82
83
|
```
|
|
83
84
|
|
|
84
|
-
- **`cn(...)`** merges styles at build time into one class string.
|
|
85
|
+
- **`cn(...)`** merges styles at build time into one class string. With arguments that are all known at build time nothing is left at runtime and the runtime is not imported.
|
|
85
86
|
|
|
86
87
|
### Conditions and layers (decided 2026-09-29, cssints-kpq1)
|
|
87
88
|
|
|
88
89
|
Conditions are wrapper functions. A wrapper takes styles and returns them under its condition. Wrappers nest.
|
|
89
90
|
|
|
90
91
|
```ts
|
|
91
|
-
import { cx } from "cssints";
|
|
92
92
|
import * as css from "cssints" with { type: "cssints" };
|
|
93
93
|
|
|
94
94
|
const md = css.media("(width >= 40rem)");
|
|
@@ -98,14 +98,14 @@ const dark = css.media("(prefers-color-scheme: dark)");
|
|
|
98
98
|
const narrow = css.container("sidebar (width < 30rem)");
|
|
99
99
|
const grid = css.supports("(display: grid)");
|
|
100
100
|
|
|
101
|
-
export const styles =
|
|
101
|
+
export const styles = css.cn(
|
|
102
102
|
css.p(2),
|
|
103
103
|
md(css.pl("8ch"), css.pt(4)),
|
|
104
104
|
css.hover(css.bg("#eee")),
|
|
105
105
|
md(css.hover(css.bg("#ddd"))),
|
|
106
106
|
prop && lg(css.p(8)),
|
|
107
107
|
);
|
|
108
|
-
export const forms =
|
|
108
|
+
export const forms = css.cn(dark(css.bg("#111")), narrow(css.m(0)), grid(css.display("grid")), tablet(css.m(1)), wide(css.m(2)), sm(css.m(3)));
|
|
109
109
|
```
|
|
110
110
|
|
|
111
111
|
- **Pseudo-classes** are ready-made wrappers named after the selector: `hover`, `focus`, `focusVisible`, `active`, `disabled`, and so on: 49 of them, from mdn-data `selectors.json` (standard pseudo-classes without arguments). Functional ones (`:nth-child()`) are not wrappers.
|
|
@@ -143,7 +143,6 @@ Output of `styles`; each form in `forms` gives one more rule in `_.b` (`dark`, `
|
|
|
143
143
|
### Global rules, attributes and parent states (decided 2026-10-03, cssints-635k, cssints-eaob)
|
|
144
144
|
|
|
145
145
|
```ts
|
|
146
|
-
import { cx } from "cssints";
|
|
147
146
|
import * as css from "cssints" with { type: "cssints" };
|
|
148
147
|
|
|
149
148
|
const dark = css.media("(prefers-color-scheme: dark)");
|
|
@@ -159,7 +158,7 @@ css.global("a", css.hover(css.color("red"))); // global() takes media(), contain
|
|
|
159
158
|
|
|
160
159
|
// an attribute state, and the state of a marked ancestor
|
|
161
160
|
export const row = css.cn(css.group(), css.p(2));
|
|
162
|
-
export const link =
|
|
161
|
+
export const link = css.cn(
|
|
163
162
|
css.color("gray"),
|
|
164
163
|
css.attr("aria-current", "page")(css.color("blue")),
|
|
165
164
|
css.within(css.hover)(css.textDecoration("underline")),
|
|
@@ -436,11 +435,32 @@ export const f = positionTryFallbacks(fade); // error: a keyframes name is not a
|
|
|
436
435
|
}
|
|
437
436
|
```
|
|
438
437
|
|
|
439
|
-
### Runtime: `
|
|
438
|
+
### Runtime: `cn`, `cv` (decided 2026-09-29, cssints-lo9x; `cv` without `_cv` 2026-10-07, cssints-ep2l; `cx` folded into `cn` 2026-10-11, cssints-4e9f)
|
|
439
|
+
|
|
440
|
+
- **One runtime package: `cssints` itself.** You import nothing for the browser. A module with a `cn()` that has runtime arguments, or a `cv()`, gets `import { _cx as __cx, _cv as __cv } from "cssints"` from the plugin, and those few lines are the only code that ships. `@cssints/variants` is gone.
|
|
441
|
+
- **`cn(...)` is the one function that merges.** Arguments known at build time merge into one class string, as above. An argument that depends on a runtime value is joined when the code runs, and the `css.*` calls inside it are still class strings made at build time: only the choice is left.
|
|
442
|
+
|
|
443
|
+
```ts
|
|
444
|
+
import { bg, cn, hover, p } from "cssints" with { type: "cssints" };
|
|
445
|
+
|
|
446
|
+
export const box = (props: { on: boolean; class?: string }) =>
|
|
447
|
+
cn(p(2), bg("white"), props.on && p(4), hover(bg("#eee")), props.class);
|
|
448
|
+
export const row = (kind: "a" | "b", items: boolean[]) => cn(p(1), kind === "a" ? p(2) : bg("red"), items.map((x) => x && p(3)));
|
|
449
|
+
export const bad = (n: number) => cn(p(2), p(n)); // the build refuses it: css arguments must be known at build time
|
|
450
|
+
```
|
|
451
|
+
|
|
452
|
+
```tsx skip
|
|
453
|
+
import { _cx as __cx } from "cssints";
|
|
454
|
+
|
|
455
|
+
export const box = (props) => __cx([["_lwugp7", "_1t8gqy5"]], "_1t8gqy5 _1ebepn0 _16f8jrr", props.on && "_lwugp7", props.class);
|
|
456
|
+
```
|
|
440
457
|
|
|
441
|
-
- **
|
|
442
|
-
-
|
|
443
|
-
-
|
|
458
|
+
- **What is a runtime argument.** One that needs a binding the build does not have: it names a parameter, a prop, a signal or any other local of the function or block around the call (`on && p(4)`, `cond ? a : b`, `state() && p(4)`, `props.class`, `items.map(...)`), or a string or template literal, or a call of something that is not a `css.*` member (`button({ size })`, a `cv` result: a class string at build time too). Everything else is known at build time, a module `const` too, and merges. A spread (`...list`) is judged by what it spreads. Strings, `false`, `null`, `undefined` and `0` are skipped, arrays are flattened; there are no clsx-style objects (`cond && style`). A `false`, `null` or `undefined` that is known at build time (`dev && p(4)` with a module `const dev = false`) is no style and is skipped there.
|
|
459
|
+
- **What the build settles.** Of two parts, static or runtime, the later one replaces the earlier one for a property it sets again under the same conditions (the same property, an alias, or a shorthand over it, as in `cv`): the plugin lists, per class, the classes it drops, and the runtime leaves them out while that class is active. So `cn(p(2), on && p(4))` gives `p-4` when `on` and `p-2` otherwise, and `cn(on && p(4), p(2))` always gives `p-2`. The sheet order never decides. Under another condition (`hover`, a media query) a class replaces nothing: `cn(p(2), on && hover(p(4)))` keeps both, as in a build-time `cn`. A longhand after a shorthand needs no drop. Two properties that overlap without one containing the other, in parts that can be active together, are a build error as above (`cssints: cn() padding-inline and padding-left overlap ...`); both arms of `cond ? a : b` count as active together.
|
|
460
|
+
- **Opaque strings are only appended.** `props.class`, `"legacy"` or a style held in a variable inside a runtime argument (`on && blurred`) has no declarations in the argument, so nothing is dropped for it or by it; write the call there (`on && p(4)`) to have it settled.
|
|
461
|
+
- **A style whose own argument is a runtime value is a build error.** `cn(p(2), p(n))` with `n` a parameter stays `css arguments must be known at build time: n is not defined where the call is evaluated`; choose between styles (`n > 1 ? p(2) : p(4)`), or use a `cv` variant or a token set in `style`.
|
|
462
|
+
- **The call.** `__cx(drops, ...parts)`: `drops` is a list of `[class, "classes it replaces"]`, empty when nothing conflicts; the parts are class strings, runtime values and arrays. With no static argument there is no static string: `cn(props.class)` is `__cx([], props.class)`. Nothing is imported when every argument is static.
|
|
463
|
+
- **`cx` is gone.** `import { cx } from "cssints"` is a build error in a module the plugin handles, with or without the attribute: `cssints: <file> imports cx from "cssints", which is gone: cn(...) takes runtime values now. Write cn(base, on && p(4)) with cn from "cssints" with { type: "cssints" }`, and a type error (the name is now the SVG property `cx`, which you write `css.cx(...)`). The fix is mechanical: add `cn` to the attributed import and write `cn(` for `cx(`. Arguments that were only joined are now merged and checked at build time, so `cx(p(4), p(2))` (both classes, the sheet decides) is `cn(p(4), p(2))` (`p(2)`).
|
|
444
464
|
- **`cv(config)`** takes `css.*` values, so types check them, and is the function you call: one call, no wrapper. The plugin replaces the site by a call of the small runtime (and imports it for you; `_cv` is not exported any more) with a config of class strings. The props are typed from `variants`: a name or a value that is not there is a type error, in the props and in `defaultVariants` and `compoundVariants` alike.
|
|
445
465
|
|
|
446
466
|
```ts
|
|
@@ -465,7 +485,7 @@ export const bad2 = cv({ base: "padding: 1rem" }); // error: a base is a css val
|
|
|
465
485
|
- **What ships** for `button` is `__cv({ base: "_1t8gqy5 _6tpir7", variants: { size: { sm: "_lqk467", lg: "_lwugp7 _z6yj9k" }, ... }, defaultVariants: { size: "sm", disabled: false }, ... })` with `import { _cv as __cv } from "cssints"` added to the module: class strings only. `cv()` works in a function, at the top of a module and in a library.
|
|
466
486
|
- **Old code.** `import { _cv } from "cssints"` is a type error (no such export) and, in a module the plugin handles, a build error at the import: `cssints: <file> imports _cv from "cssints", which is gone: cv({ ... }) is the function now. Write const button = cv({ base, variants }) ...`. It does not keep working for a release: `_cv(cv(...))` would hand a function to the runtime, and a shim would keep two spellings of one thing. The fix is mechanical: drop `_cv(` and its closing bracket. A library built the old way fails with the same error, naming its file.
|
|
467
487
|
- **Boolean variants.** A variant whose keys are `true` and `false` (or only one of them) takes a boolean: `button({ disabled: true })`, and a default is a boolean too. `false` is a value, not a missing one: `button({ disabled: false })` selects the `false` key even when the default is `true`. `undefined` is the default.
|
|
468
|
-
- **`compoundVariants`** as in cva: each entry names values (any of the variants, a boolean for a boolean one) and the style that is added when all of them are active. The key is `class`, as in cva, since what the entry adds is a class (a `
|
|
488
|
+
- **`compoundVariants`** as in cva: each entry names values (any of the variants, a boolean for a boolean one) and the style that is added when all of them are active. The key is `class`, as in cva, since what the entry adds is a class (a `cn` or `style()` key would suggest an inline style, and cssints has `style()` for that; `css` is the namespace). Its value is a `css.*` style like the others, not a string. The values of an entry are one value each, not a list of values.
|
|
469
489
|
- **Values** of `base` and of each variant are one property, `cn(...)`, or a `flex()`/`grid()` chain. A CSS string is a build error that shows the new form: `cv() base must be a css.* value (cn(...), a flex() chain or one property), got "padding: 1rem". CSS strings are gone: write cn(p(4), fontSize("1rem"))`.
|
|
470
490
|
|
|
471
491
|
- **The variant wins.** The function joins the base and the variants that are active at runtime, so the build compares them. Under one condition, a variant that sets what the base sets (the same property, an alias, or a shorthand over a base longhand: `pl(2)` in the base, `p(4)` in the variant) replaces it: the base class is dropped from the string while that value is active, which the runtime does from a `drops` entry in the config (`drops: { size: { lg: "_77ujlx" } }`, only where there is one). Which rule comes later in the sheet does not decide. A variant longhand inside a base shorthand needs no drop, since the sheet puts a longhand after its shorthand: base `border(...)` with `active: { yes: borderBottomColor(...) }` is fine. Under different conditions both stay, as in `cn()`.
|
|
@@ -522,7 +542,7 @@ export const clamp2 = cn(
|
|
|
522
542
|
|
|
523
543
|
### Plugins (decided 2026-09-30, cssints-zho2; `scope()` 2026-10-05, cssints-8ogz)
|
|
524
544
|
|
|
525
|
-
A plugin is a module that exports the members of a `scope()` from `cssints/plugin`: `scope("name", table).build(impl).export()`. The table says what the plugin has (syntax names, kernels, a runtime, conflicts, token sets, other scopes, and its members); the members are typed from the table, with no second file of types. User code imports the plugin with the attribute, like `cssints` itself: `import { ring } from "./ring.ts" with { type: "cssints" }`. There is no registration in `vite.config` and no type augmentation; the engine finds the sites by the attribute, and learns kernels, runtimes and conflicts from the style each member returns. In user code a member returns a class string, so it goes into `cn()
|
|
545
|
+
A plugin is a module that exports the members of a `scope()` from `cssints/plugin`: `scope("name", table).build(impl).export()`. The table says what the plugin has (syntax names, kernels, a runtime, conflicts, token sets, other scopes, and its members); the members are typed from the table, with no second file of types. User code imports the plugin with the attribute, like `cssints` itself: `import { ring } from "./ring.ts" with { type: "cssints" }`. There is no registration in `vite.config` and no type augmentation; the engine finds the sites by the attribute, and learns kernels, runtimes and conflicts from the style each member returns. In user code a member returns a class string, so it goes into `cn()` and the conditions like any `css.*` value.
|
|
526
546
|
|
|
527
547
|
```ts
|
|
528
548
|
import { cn, p } from "cssints" with { type: "cssints" };
|
|
@@ -803,7 +823,7 @@ export const own = frame().color("red"); // error: a frame chains its own method
|
|
|
803
823
|
```
|
|
804
824
|
|
|
805
825
|
- **Methods**, each once and in any order: `radius(<length>)`, `padding(<length> | step)`, `border(<length>)` (a width; the style is `solid`), `margin(<length> | step)`. `radius` is the radius of the outermost frame; inside a frame it is ignored (the radius is computed). A lone number in `padding` and `margin` is a step of the spacing scale (0.25rem). Tokens go anywhere a length does.
|
|
806
|
-
- **Build errors** (at the call site): a negative radius, padding or border, a percentage, and a `cn()` that holds `frame()` and a property it sets: `padding*`, `margin*`, `border-radius` and its corners, `border`, `border-width`, `border-style` and the border sides (`cssints: frame: frame() sets padding, margin, border-radius and the border: use its methods (this style also sets padding)`). Border colours (`borderColor`, `borderTopColor`) are plain styles and do not conflict. Conflicts
|
|
826
|
+
- **Build errors** (at the call site): a negative radius, padding or border, a percentage, and a `cn()` that holds `frame()` and a property it sets: `padding*`, `margin*`, `border-radius` and its corners, `border`, `border-width`, `border-style` and the border sides (`cssints: frame: frame() sets padding, margin, border-radius and the border: use its methods (this style also sets padding)`). Border colours (`borderColor`, `borderTopColor`) are plain styles and do not conflict. Conflicts with an opaque runtime string in `cn()` are not seen, as for any plugin.
|
|
807
827
|
- **What it emits:** the class `_frame-core` and one class per method (`._x{--frame-p:0.5rem}`, in `_.a`, or `_.b` inside a condition). The kernel `frame.core` (about 1.2 kB minified with its registrations and fallback, once, in `_.k`) is two `@container style(--frame-c: ...)` rules that alternate two names, because a property cannot read itself; the `@property` rules of its custom properties (`--frame-*`) are at the top of the sheet. The names are the scope's own (`--_x` in the source is `--frame-x`, `&` is `_frame-core`), which is why they are longer than the `--fr-*` and `_f` of the helpers it was first written on. The inputs are registered lengths, so `em`, `calc()` and tokens reach the child as exact lengths (an `em` padding is the parent's `em`, not the child's). The 24-line kernel for px and rem only was not chosen: `@property` is the floor of the runtime anyway, and the registered one costs about 0.2 kB more.
|
|
808
828
|
- **Browsers.** The kernel needs `@container style()` on custom properties (Chrome 111, Safari 18, Firefox 151) and `@property` (Chrome 85, Safari 16.4, Firefox 128). For a target that has `@property` and lacks style queries the build ships the fallback instead: `polyfills: ["css.at-rules.container.style_queries_for_custom_properties"]` and `cssints/parent-vars` (about 1 kB gzip, shared with other plugins), which copies each frame's inner radius to its frame children, and the fallback CSS. The script probes the browser and stays off where style queries work. Below `@property` (Firefox 127, Safari 16.3) the kernel is a build warning and nothing is shipped: a frame keeps no concentric radius there.
|
|
809
829
|
- **Limits of the runtime.** It costs about two or three times the style-query kernel on a first pass (190 ms for 5 500 nested frames in Firefox 128); a `transition` of your own on a frame replaces the sentinel that lets `:hover`, media and container conditions reach the script (the script still follows class and style changes); shadow roots are not crossed; a first paint before the script runs shows declared radii.
|
|
@@ -831,7 +851,7 @@ export const own = surface().radius("4px"); // error: a surface chains its own m
|
|
|
831
851
|
```
|
|
832
852
|
|
|
833
853
|
- **Methods**, each once and in any order: `color(<color> | token)` is an absolute base (without it the base is the nearest surface around, or `Canvas` for the outermost); `lighten(step)`, `darken(step)` and `contrast(step)` move the lightness of the base by a `<number [0,1]>`, and only one of the three goes in a chain; `ink()` sets the text colour to black or white by the lightness of the surface (above 0.5636 black, else white). `contrast` moves *away* from the parent: a light parent is darkened, a dark one lightened. The base may be a relative colour (`oklch(from var(--brand) l c h)`).
|
|
834
|
-
- **Build errors** (at the call site): a step outside 0 to 1, a bad colour, a method used twice or with another step, and a `cn()` that holds `surface()` and `background` or `background-color`, `bg()` included (`cssints: surface: surface() sets the background colour: use its methods (this style also sets background-color)`). `backgroundImage`, `color` and the border colours do not conflict. Conflicts
|
|
854
|
+
- **Build errors** (at the call site): a step outside 0 to 1, a bad colour, a method used twice or with another step, and a `cn()` that holds `surface()` and `background` or `background-color`, `bg()` included (`cssints: surface: surface() sets the background colour: use its methods (this style also sets background-color)`). `backgroundImage`, `color` and the border colours do not conflict. Conflicts with an opaque runtime string in `cn()` are not seen, as for any plugin.
|
|
835
855
|
- **What it emits:** the class `_surface-core` and one class per method (`._x{--surface-d:0.06}`, in `_.a`, or `_.b` inside a condition: a `hover()` or a media query moves every surface below). The kernel `surface.core` (about 1 kB minified with its registrations and fallback, once, in `_.k`) is two `@container style(--surface-p: ...)` rules that alternate two registered `<color>` properties, `--surface-e` and `--surface-o`, because a property cannot read itself; the step `--surface-d` is not registered, since it may contain `l`, which only means something inside `oklch(from …)`. Its names are `--surface-*`; frame's are `--frame-*`, so a frame and a surface can be one element, or nest in each other, with no collision.
|
|
836
856
|
- **Not a contrast guarantee.** A lightness threshold of 0.5636 gives 4.6:1 at the worst on greys, but 3.7:1 on 3 000 random chromatic colours (research, Chrome). `ink()` on a saturated surface can fall short of WCAG AA. For a ratio, declare the colours as tokens and use `css.check.contrast` (see Themes): it checks the declared pair at build time, which the kernel cannot do because it never sees the parent.
|
|
837
857
|
- **Browsers.** The kernel needs `@container style()` on custom properties (Chrome 111, Safari 18, Firefox 151), `@property` (Chrome 85, Safari 16.4, Firefox 128) and relative colour (Chrome 122, Safari 18, Firefox 128). Chrome 119 to 121 and Safari 16.4 to 17.6 have an early relative colour with other channel scales: the steps come out wrong (in Chrome `l` is a number from 0 to 100), so the kernel's `requires` asks for the whole feature (`exact`, see Plugins) and a target set that holds one of them gets the warning. Safari 17 has no style queries, so it gets the runtime as well, which does not change the steps; Chrome 120 has style queries and gets no runtime, only the warning. For a target that has `@property` and relative colour but lacks style queries (Firefox 128 to 150) the build ships the same fallback as `frame()`: the shared `cssints/parent-vars` script (one observer however many plugins use it) copies each surface's colour to its surface children. A surface that is also a frame needs both transition sentinels, so the fallback has a rule for `._surface-core._frame-core` (the surface scope embeds the frame scope for that class: `&(frame.core)`). Below `@property` or relative colour the kernel is a build warning: a surface keeps no tonal step there.
|
|
@@ -865,7 +885,7 @@ export const typo = mdi("clos"); // error: not an icon of mdi
|
|
|
865
885
|
._x1 { --icons-svg: url("data:image/svg+xml,%3Csvg …"); }
|
|
866
886
|
```
|
|
867
887
|
|
|
868
|
-
- **`icons({ provider: "iconify-json", collection })`** reads `@iconify-json/<collection>/icons.json` from the `node_modules` of the working directory, while the module runs. **`icons({ provider: "fs", dir })`** reads `<dir>/<name>.svg` (`dir` is relative to the working directory; the SVG needs a `viewBox`). The result is a function of the icon name: `mdi("home")` is a style that goes into `cn()
|
|
888
|
+
- **`icons({ provider: "iconify-json", collection })`** reads `@iconify-json/<collection>/icons.json` from the `node_modules` of the working directory, while the module runs. **`icons({ provider: "fs", dir })`** reads `<dir>/<name>.svg` (`dir` is relative to the working directory; the SVG needs a `viewBox`). The result is a function of the icon name: `mdi("home")` is a style that goes into `cn()` and the conditions like any member. Call `icons()` in a module of its own, imported with the attribute, as above.
|
|
869
889
|
- **Names.** TypeScript cannot read a module type from a string, so the names of a collection come from the type argument: `icons<typeof import("@iconify-json/mdi/icons.json")>(…)` types `mdi(name)` as the icons and aliases of that collection, and a typo is an error in the editor. Without the type argument, and for `fs`, a name is any string. In every case a name that does not exist is a build error at the call, with the nearest name when it is close: `cssints: icons: no icon "hom" in iconify-json mdi, did you mean home?`.
|
|
870
890
|
- **Mask or image.** An icon that paints with `currentColor` (every one-colour icon of a collection) gets the marker `_icons-mask` and takes the text `color`. Any other (a logo with its own colours) gets `_icons-image`, a background image. This is iconify's own rule. A non-square icon is centred on a square view box, so `width` and `height` set its size (`1em` by default).
|
|
871
891
|
- **Cost.** The kernel is printed once. Each icon adds one class, and the same icon is the same class everywhere. The kernel has no `requires`: LightningCSS adds `-webkit-mask` for targets that have only the prefixed form.
|
|
@@ -919,7 +939,7 @@ import { t } from "my-ui" with { type: "cssints" };
|
|
|
919
939
|
createGlobalTheme(t, ".dark", { color: { brand: "#ef4444" } });
|
|
920
940
|
```
|
|
921
941
|
|
|
922
|
-
- **Build with tsdown** (`vp pack`), with `cssints` external and `dts: true`. tsdown keeps the import attributes, so there is no option to set.
|
|
942
|
+
- **Build with tsdown** (`vp pack`), with `cssints` external and `dts: true`. tsdown keeps the import attributes, so there is no option to set. The built `.d.ts` types `button` as `(props?: …) => string`, with the props of its variants. Do not minify, bundle or transform the JS further with a tool that drops import attributes, and do not bundle `cssints` into it.
|
|
923
943
|
- **Keep in the package:** `cssints` in `peerDependencies` (the app needs it to build; a library that imports it must list it), the JS with the attributes, the `.d.ts` (it types `cssints` members as class strings and tokens as tokens, so the app is checked across the boundary), and no `.css` file: the library has no sheet of its own.
|
|
924
944
|
- **The app needs cssints and its plugin.** The package has no classes until the app's `cssints()` plugin has evaluated it, so an app without cssints cannot use it. Pre-compiled output (class strings plus a sheet fragment for apps without cssints) is not supported yet; it waits for a first user.
|
|
925
945
|
- **The package must be a direct dependency of the app.** `cssints/vite` reads the `package.json` of the app and of each of its dependencies, and for a dependency that lists `cssints` it adds the package to `optimizeDeps.exclude` (the dev optimizer would pre-bundle it with esbuild and drop the attributes) and to `ssr.noExternal` (the engine's runner would otherwise load it as native Node, which does not know the attribute). This is a few file reads at startup, one per dependency, and nothing else. A package that is only a dependency of another package is not found; add it to the app's own dependencies (or to those two options).
|
|
@@ -946,7 +966,7 @@ In dev the sheet has a source map: each rule with a class points at the first `c
|
|
|
946
966
|
export default defineConfig({ plugins: [cssints()], css: { devSourcemap: true } });
|
|
947
967
|
```
|
|
948
968
|
|
|
949
|
-
A class is a hash of its declaration, so a class that many calls share points at its first call in the module that comes first by path. The place is the whole site (`cn(...)`,
|
|
969
|
+
A class is a hash of its declaration, so a class that many calls share points at its first call in the module that comes first by path. The place is the whole site (`cn(...)`, a member call), not the argument inside it. Token, theme and `@property` rules carry no class and map nowhere.
|
|
950
970
|
|
|
951
971
|
A build maps the sheet too, when the app asks for maps (`build: { sourcemap: true }`, `"hidden"` or `"inline"`, as for its JS): the CSS asset that holds the sheet gets `<file>.css.map` and a `sourceMappingURL` comment (`"hidden"`: the file only; `"inline"`: a data URL). Vite writes no CSS map in a build, so cssints maps the asset as written, after LightningCSS and the minify: each rule with a class points at its call, the rest maps nowhere. Bundle analysers read it to split the sheet's bytes by module (docs/research/devtools.md: Sonda). Without `build.sourcemap` nothing is recorded and the output is unchanged. Devtools that read the CSSOM (atomic-css-devtools) see the sheet as any other; what they miss is in docs/research/devtools.md.
|
|
952
972
|
|
|
@@ -980,7 +1000,7 @@ TOKENS
|
|
|
980
1000
|
the initial value of its @property
|
|
981
1001
|
```
|
|
982
1002
|
|
|
983
|
-
- **Classes by call.** The element's classes, grouped by the `css.*` call that made them (`cn(...)`,
|
|
1003
|
+
- **Classes by call.** The element's classes, grouped by the `css.*` call that made them (`cn(...)`, a member), the call that covers most of them first; the link opens the file at that line through Vite's `/__open-in-editor`, and the call's source is shown under it. Each class shows its declarations, its conditions (green: holds now) and its layer; a marker shows its kernel (`marker of kernel frame.core`), a member's class its scope (`(frame)`); a class that is not cssints' is listed as such.
|
|
984
1004
|
- **Properties.** Per property, the winning declaration, what it beat (struck through) and what does not apply now, with the condition that fails. The winner is the highest by **layer, then specificity, then the sheet's order**, among the rules that apply: a rule applies when its selector matches the element now and each of its at-rules holds for it, which the browser decides (a probe sheet around the element, so `@container`, `@container style()`, `@supports` and `@scope` are evaluated where the element is). A shorthand counts for each of its longhands: `padding` beside a `padding-left` of a higher layer says `except padding-left`. Kernels and global rules in `_.k`, themes and looks in their layers are rules like the others.
|
|
985
1005
|
- **Checked against the browser.** Each winner is set inline on a childless clone of the element, in its place, and the clone's computed value must equal the element's: ✓. When it does not (✗), the panel says why: the element's `style` attribute, a rule of another sheet (a rule outside every layer beats every layer, cssints' too: `.mine { color: … } in src/inspect.css beats it`), or a running animation. A value that depends on the element's content (`width: auto`, grid tracks) is `?`, not checked. A custom property is checked with its declaration as the page's sheet has it, since LightningCSS reprints it (`0.04` as `.04`) and an unregistered one computes to its tokens as written (cssints-g3u1).
|
|
986
1006
|
- **Tokens.** Each custom property the element's rules read: its value on the element, its path (`color.surface`), and the rule that sets it on the element or the nearest ancestor (a theme, a look in `@scope`, a member's class).
|
|
@@ -1102,6 +1122,7 @@ setTheme("light");
|
|
|
1102
1122
|
- **Colours** are checked by the web's `color` grammar in the types, read at build time and written as `#rrggbb` (`#rrggbbaa` when translucent). `currentColor`, system colours and `light-dark()` are build errors.
|
|
1103
1123
|
- **`cn()`** merges in argument order (a later prop wins). States wrap styles and do not nest; the runtime lays `:hover`, then `:focus`, then `:active` over the props.
|
|
1104
1124
|
- **Themes.** A theme is named by its selector argument (`"light"`). Every colour token is resolved at build time, per theme, aliases and derived tokens included; the site holds the default values and, under `themes`, what each theme changes. `setTheme(name)` swaps them on every attached renderable; `""` is the default. A theme under `media()` is not read.
|
|
1125
|
+
- **Terminal tokens are not the sheet's** (cssints-0s1z, 2026-10-11). The `createTokens` and `createGlobalTheme` of `cssints/tui` keep their tokens and themes in tables of their own: no `@property` rule, no `:root` rule and no theme reaches a stylesheet, and a web token of the same name in the same build (`--color-bg` of the site and of a terminal app) is another token, with no clash. A terminal style reads terminal tokens and themes only; a web style reads web ones only. Two terminal modules that give one token name two values are an error, as on the web (`--color-bg is already declared with another @property`). A set of one `createTokens` given to the other's `createGlobalTheme` is a build error at the call that names the right import (`these are web tokens of "cssints": theme them with the createGlobalTheme of "cssints"`, and the other way round; 2026-10-11, cssints-v872). A token set still ships as `var(--name)` strings, which the system theme reads.
|
|
1105
1126
|
- **The adapter.** `attach(renderable, style)` sets the props (`color` is OpenTUI's `fg`, the text attributes are the bits of `attributes`, the caret is an editable's `cursorStyle` and `cursorColor`), follows `over`/`out`, `down`/`up` and `focused`/`blurred`, and sets the mouse pointer of `cursor` on over and `default` on out. A prop the renderable lacks is not set. A focused renderable draws colours of its own (a box `focusedBorderColor`, also while a descendant has the focus; an editable or a select `focusedBackgroundColor` and `focusedTextColor`): each follows the style's `borderColor`, `backgroundColor` and `color` in the current state, theme included, so a focused box draws its `:focus` border, not OpenTUI's `#00AAFF` (2026-10-10, cssints-pkpg). On an editable or a select, `color` is `textColor`. A text node (`<span>`, `<a>`, `<b>` of `@opentui/solid`: a `TextNodeRenderable`) takes the props (`fg`, `bg`, `attributes`) and the theme, not the states: it has no mouse events and no focus, so `:hover` belongs on the `<text>` around it; its theme listener stops when it is destroyed, as `@opentui/solid` does with what it removes (2026-10-10, cssints-5vnf). To change the style of a renderable, attach it again: `attach(r, next)` on a renderable it has attached swaps the style and keeps the states, the theme and the hooks; a prop only the old style set goes back to the renderable's own value (OpenTUI's default, or the element's own prop), the `focused*` colours follow, and under the mouse the pointer turns to the new `cursor` (or `default`). `use()` takes a style or an accessor, `use(() => (active() ? a : b))`: Solid calls a ref in a render effect, so the signals the accessor reads run it again and each run swaps the style; React calls the new ref of each render, which swaps it too and no longer stacks the hooks. The adapter imports no framework (2026-10-10, cssints-332g). `resolve(style, state, theme)` of `@cssints/tui` is the renderer-neutral part, for other adapters.
|
|
1106
1127
|
- **The bomb.sh adapter** (cssints-kotl, 2026-10-10). `@cssints/tui/bomb` is for [@bomb.sh/tty](https://bomb.sh/docs/tty/api/), where a frame is a list of ops: `createTracker()` gives `ui.open(id, style, extra?)` and `ui.text(content, style, id?, extra?)`, the ops with the options of the style in the state of that element id, and `ui.render(term, build, { pointer })`, which reads the frame's `pointerenter`/`pointerleave` events and a press of `pointer.down`, draws the frame again when a state changed, and adds the OSC 22 pointer of `cursor` and the caret (DECSCUSR, OSC 12) of the element of `ui.focus(id)`; `ui.reset()` gives them back on exit. Sizes are `fixed`, `percent`, `fit`, and `grow` for `flexGrow`; `rounded` is a corner radius; `double` and `heavy` are drawn single; margins, `flexShrink`, `flexBasis`, `flexWrap`, `alignSelf`, `opacity` and `space-*` are not drawn (the table is in research/tui.md). `openProps(props)` and `textProps(props)` are the plain mapping of `resolve()`.
|
|
1107
1128
|
|
|
@@ -1139,8 +1160,32 @@ process.stdin.on("data", (bytes) => dispatch(input.scan(follow.feed(bytes)).even
|
|
|
1139
1160
|
```
|
|
1140
1161
|
|
|
1141
1162
|
- **The theme table** (cssints-q1j3). A site holds, besides its values and static `themes`, `vars`: the token of each colour prop set to a lone token (`vars: { backgroundColor: "color-bg" }`, the name without `--`). `defineTheme(name, values, base)` of `@cssints/tui` registers a run-time theme: a colour per token name, laid over the static theme `base` for every prop with a token; `setTheme(name)` selects it, and `defineTheme` of the theme in use resolves every attached renderable again. The system theme is one; static themes stay inline, since they need no registration and no import order. A colour that is not a lone token (`color-mix()` over one) keeps its static value.
|
|
1163
|
+
- **Live in the browser** (cssints-ey13, 2026-10-11). [The TUI page](https://cssints.dev/tui) of this site runs apps/sky-tui's styles on `@cssints/tui/bomb` in a real terminal: Ghostty's emulator compiled to WebAssembly (ghostty-web) draws sky's feed and thread from its recorded fixtures, with keys and the mouse. The page is the terminal: it answers the system theme's queries (OSC 10, 11, 4, `CSI ? 996 n`) from the site's display settings and reports a change of them (mode 2031), so the theme is solved again as the palette or the mode changes. OpenTUI is not shown: its renderer is native Zig over `bun:ffi`. On a change notification, `followSystemTheme` of `@cssints/tui/bomb` asks the colours again (`COLOURS` of `@cssints/tui/system`), not the scheme report: its reply is the same sequence as a notification, and asking it looped with a terminal that answers it.
|
|
1142
1164
|
- **Cost.** A colour member costs what the same web member costs in the types (the `color` grammar); `bench/tui.ts` is 184k instantiations (tsc) for 16 calls and a token set. No terminal HMR in this version. The system theme brings culori's rgb, oklab, oklch and okhsl modes to the app (45 kB unminified in sky-tui's bundle).
|
|
1143
1165
|
|
|
1166
|
+
### Export groups: `cssints/widely-available`, `cssints/css-grid-2`, … (decided 2026-10-11, cssints-n7z3)
|
|
1167
|
+
|
|
1168
|
+
A group is a subpath of `cssints` that exports the members of `cssints` which a set of CSS features has, and refuses a value that holds a feature outside the set. It is the same import (`with { type: "cssints" }`), the same members, the same classes:
|
|
1169
|
+
|
|
1170
|
+
```ts
|
|
1171
|
+
import { color, display, media } from "cssints/widely-available" with { type: "cssints" };
|
|
1172
|
+
|
|
1173
|
+
export const card = [display("grid"), color("rebeccapurple"), media("(width >= 40rem)")(color("black"))];
|
|
1174
|
+
|
|
1175
|
+
display("grid-lanes"); // error: display: "grid-lanes" is not in cssints/widely-available
|
|
1176
|
+
color("light-dark(white, black)"); // error: color: "light-dark()" is not in cssints/widely-available
|
|
1177
|
+
media("(prefers-reduced-data: reduce)"); // error: @media: "prefers-reduced-data" is not in cssints/widely-available
|
|
1178
|
+
```
|
|
1179
|
+
|
|
1180
|
+
- **Baseline groups** (web-features 3.42, the status of each BCD key): `widely-available` is Baseline high, `newly-available` is high and low, `limited-availability` is everything (it is `cssints` itself, under its Baseline name) and `not-discouraged` is everything web-features does not mark `discouraged` (`clip`, the `page-break-*` aliases, `ime-mode`, `word-break: break-word`, `text-decoration-line: blink`, device media features). A feature web-features does not know is limited availability.
|
|
1181
|
+
- **Spec groups** are named by the W3C shortname that @webref/css uses: `cssints/css-grid-2`, `cssints/css-color-4`, `cssints/mediaqueries-4`, `cssints/selectors-4`, … (92 of them). A group holds what the spec defines, and **a level includes the levels of its series before it**: `css-color-5` has what Color 3, 4 and 5 define, `css-color-4` has Color 3 and 4. A level is a delta (Color 5 over Color 4) or a rewrite (Media Queries 4 over 3), and "I write for Color 5" means both. What only a later level defines is refused: `css-color-4` has no `colorMix` and refuses `color-mix()`, `mediaqueries-4` refuses `prefers-color-scheme`. A group has the properties, functions, pseudo-class wrappers and conditions its spec defines, so `display` is in `css-display-4` and `gridTemplateColumns` in `css-grid-2`: import from several groups in one file.
|
|
1182
|
+
- **What is a member:** the properties (and their short names), the functions, the pseudo-class wrappers, `media`, `container`, `supports`, `keyframes` and `positionTry`. Everything else (`cn`, `cv`, `firstThatWorks`, `token`, `createTokens`, `createGlobalTheme`, `check`, `style`, `global`, `layers`, `attr`, `within`, `group`, the Typed OM values) is in every group. A group has no `css` object: write `import * as css from "cssints/widely-available"`.
|
|
1183
|
+
- **What is refused**, in the types (an error on the argument) and in the build (an error at the call), with the same words: a keyword of the property, a function (as a call of a member, or as text, in a `firstThatWorks` too), a unit (`10rch`), a media feature, a `scroll-state()` or `style()` container query and a `selector()` support query, and a property, function or condition the group does not have (`flex().gap()` is checked as `gap`). A value that is not valid CSS is still the usual error.
|
|
1184
|
+
- **What is not:** the types a spec only references (`<color>` in `accent-color` is any colour of any group), a feature of a module that is not in the series of the group (`css-ui-4`'s `accentColor` takes `color-mix()` as text), and what nothing attributes to a feature: the grammar of a value that no BCD key names is not narrowed. A function with no BCD key counts as limited availability. A keyword of `cursor` has the status of `cursor` (web-features counts it limited for iOS Safari, which has no pointer).
|
|
1185
|
+
- **Cost:** a program that does not import a group pays nothing. In one that does, a call costs about 250 instantiations more (a 105-call bench: +2.9%), and the 96 declaration files add 340 KB to `dist/` (about 240 KB of `src/groups`, the tarball gains about 100 KB gzip).
|
|
1186
|
+
|
|
1187
|
+
`bun run groups` (in `packages/cssints`) regenerates `src/groups/<id>.ts` and `src/groups-data.ts` from web-features, @webref/css 6 (one file per level; 8 keeps the latest level of a series only) and BCD. Research and numbers: [research/groups.md](research/groups.md).
|
|
1188
|
+
|
|
1144
1189
|
### Browser support and what 0.1 does not have
|
|
1145
1190
|
|
|
1146
1191
|
- **Types and checks for every property** are generated from [mdn-data](https://github.com/mdn/data) and @webref/css by `packages/css-grammar` (`bun run extract`), not written by hand, so a new property or function needs no change here. 536 members: 525 properties (every standard and experimental one, except the three shorthands above) and the 11 short names.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cssints",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "CSS in TypeScript: typed css.* calls compiled to atomic CSS at build time (a Vite plugin)",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -53,10 +53,14 @@
|
|
|
53
53
|
"./tui": {
|
|
54
54
|
"types": "./dist/tui-types.d.mts",
|
|
55
55
|
"default": "./dist/tui.mjs"
|
|
56
|
+
},
|
|
57
|
+
"./*": {
|
|
58
|
+
"types": "./dist/groups/*.d.mts",
|
|
59
|
+
"default": "./dist/index.mjs"
|
|
56
60
|
}
|
|
57
61
|
},
|
|
58
62
|
"dependencies": {
|
|
59
|
-
"@cssints/css-grammar": "^0.
|
|
63
|
+
"@cssints/css-grammar": "^0.2.0",
|
|
60
64
|
"culori": "^4.0.2",
|
|
61
65
|
"effect": "4.0.0",
|
|
62
66
|
"happy-dom": "^20.14.5",
|