@mochi-css/vanilla 1.1.0 → 2.0.0

package/dist/index.mjs

@@ -1,4 +1,3 @@
-import properties from "known-css-properties";
 import clsx from "clsx";
 import { createElement } from "react";
 
@@ -381,15 +380,757 @@ const propertyUnits = {
 	zoom: "%"
 };
 
+//#endregion
+//#region src/knownProperties.generated.ts
+const knownPropertyNames = new Set([
+	"accentColor",
+	"alignContent",
+	"alignItems",
+	"alignSelf",
+	"alignmentBaseline",
+	"all",
+	"anchorName",
+	"anchorScope",
+	"animation",
+	"animationComposition",
+	"animationDelay",
+	"animationDirection",
+	"animationDuration",
+	"animationFillMode",
+	"animationIterationCount",
+	"animationName",
+	"animationPlayState",
+	"animationRange",
+	"animationRangeCenter",
+	"animationRangeEnd",
+	"animationRangeStart",
+	"animationTimeline",
+	"animationTimingFunction",
+	"animationTrigger",
+	"appearance",
+	"aspectRatio",
+	"backdropFilter",
+	"backfaceVisibility",
+	"background",
+	"backgroundAttachment",
+	"backgroundBlendMode",
+	"backgroundClip",
+	"backgroundColor",
+	"backgroundImage",
+	"backgroundOrigin",
+	"backgroundPosition",
+	"backgroundPositionBlock",
+	"backgroundPositionInline",
+	"backgroundPositionX",
+	"backgroundPositionY",
+	"backgroundRepeat",
+	"backgroundRepeatBlock",
+	"backgroundRepeatInline",
+	"backgroundRepeatX",
+	"backgroundRepeatY",
+	"backgroundSize",
+	"backgroundTbd",
+	"baselineShift",
+	"baselineSource",
+	"blockEllipsis",
+	"blockSize",
+	"blockStep",
+	"blockStepAlign",
+	"blockStepInsert",
+	"blockStepRound",
+	"blockStepSize",
+	"bookmarkLabel",
+	"bookmarkLevel",
+	"bookmarkState",
+	"border",
+	"borderBlock",
+	"borderBlockClip",
+	"borderBlockColor",
+	"borderBlockEnd",
+	"borderBlockEndClip",
+	"borderBlockEndColor",
+	"borderBlockEndRadius",
+	"borderBlockEndStyle",
+	"borderBlockEndWidth",
+	"borderBlockStart",
+	"borderBlockStartClip",
+	"borderBlockStartColor",
+	"borderBlockStartRadius",
+	"borderBlockStartStyle",
+	"borderBlockStartWidth",
+	"borderBlockStyle",
+	"borderBlockWidth",
+	"borderBottom",
+	"borderBottomClip",
+	"borderBottomColor",
+	"borderBottomLeftRadius",
+	"borderBottomRadius",
+	"borderBottomRightRadius",
+	"borderBottomStyle",
+	"borderBottomWidth",
+	"borderBoundary",
+	"borderClip",
+	"borderCollapse",
+	"borderColor",
+	"borderEndEndRadius",
+	"borderEndStartRadius",
+	"borderImage",
+	"borderImageOutset",
+	"borderImageRepeat",
+	"borderImageSlice",
+	"borderImageSource",
+	"borderImageWidth",
+	"borderInline",
+	"borderInlineClip",
+	"borderInlineColor",
+	"borderInlineEnd",
+	"borderInlineEndClip",
+	"borderInlineEndColor",
+	"borderInlineEndRadius",
+	"borderInlineEndStyle",
+	"borderInlineEndWidth",
+	"borderInlineStart",
+	"borderInlineStartClip",
+	"borderInlineStartColor",
+	"borderInlineStartRadius",
+	"borderInlineStartStyle",
+	"borderInlineStartWidth",
+	"borderInlineStyle",
+	"borderInlineWidth",
+	"borderLeft",
+	"borderLeftClip",
+	"borderLeftColor",
+	"borderLeftRadius",
+	"borderLeftStyle",
+	"borderLeftWidth",
+	"borderLimit",
+	"borderRadius",
+	"borderRight",
+	"borderRightClip",
+	"borderRightColor",
+	"borderRightRadius",
+	"borderRightStyle",
+	"borderRightWidth",
+	"borderShape",
+	"borderSpacing",
+	"borderStartEndRadius",
+	"borderStartStartRadius",
+	"borderStyle",
+	"borderTop",
+	"borderTopClip",
+	"borderTopColor",
+	"borderTopLeftRadius",
+	"borderTopRadius",
+	"borderTopRightRadius",
+	"borderTopStyle",
+	"borderTopWidth",
+	"borderWidth",
+	"bottom",
+	"boxDecorationBreak",
+	"boxShadow",
+	"boxShadowBlur",
+	"boxShadowColor",
+	"boxShadowOffset",
+	"boxShadowPosition",
+	"boxShadowSpread",
+	"boxSizing",
+	"boxSnap",
+	"breakAfter",
+	"breakBefore",
+	"breakInside",
+	"captionSide",
+	"caret",
+	"caretAnimation",
+	"caretColor",
+	"caretShape",
+	"clear",
+	"clip",
+	"clipPath",
+	"clipRule",
+	"color",
+	"colorAdjust",
+	"colorInterpolation",
+	"colorInterpolationFilters",
+	"colorScheme",
+	"columnCount",
+	"columnFill",
+	"columnGap",
+	"columnHeight",
+	"columnRule",
+	"columnRuleBreak",
+	"columnRuleColor",
+	"columnRuleEdgeInset",
+	"columnRuleEdgeInsetEnd",
+	"columnRuleEdgeInsetStart",
+	"columnRuleInset",
+	"columnRuleInsetEnd",
+	"columnRuleInsetStart",
+	"columnRuleInteriorInset",
+	"columnRuleInteriorInsetEnd",
+	"columnRuleInteriorInsetStart",
+	"columnRuleStyle",
+	"columnRuleWidth",
+	"columnSpan",
+	"columnWidth",
+	"columnWrap",
+	"columns",
+	"contain",
+	"containIntrinsicBlockSize",
+	"containIntrinsicHeight",
+	"containIntrinsicInlineSize",
+	"containIntrinsicSize",
+	"containIntrinsicWidth",
+	"container",
+	"containerName",
+	"containerType",
+	"content",
+	"contentVisibility",
+	"continue",
+	"copyInto",
+	"corner",
+	"cornerBlockEnd",
+	"cornerBlockEndShape",
+	"cornerBlockStart",
+	"cornerBlockStartShape",
+	"cornerBottom",
+	"cornerBottomLeft",
+	"cornerBottomLeftShape",
+	"cornerBottomRight",
+	"cornerBottomRightShape",
+	"cornerBottomShape",
+	"cornerEndEnd",
+	"cornerEndEndShape",
+	"cornerEndStart",
+	"cornerEndStartShape",
+	"cornerInlineEnd",
+	"cornerInlineEndShape",
+	"cornerInlineStart",
+	"cornerInlineStartShape",
+	"cornerLeft",
+	"cornerLeftShape",
+	"cornerRight",
+	"cornerRightShape",
+	"cornerShape",
+	"cornerStartEnd",
+	"cornerStartEndShape",
+	"cornerStartStart",
+	"cornerStartStartShape",
+	"cornerTop",
+	"cornerTopLeft",
+	"cornerTopLeftShape",
+	"cornerTopRight",
+	"cornerTopRightShape",
+	"cornerTopShape",
+	"counterIncrement",
+	"counterReset",
+	"counterSet",
+	"cue",
+	"cueAfter",
+	"cueBefore",
+	"cursor",
+	"cx",
+	"cy",
+	"d",
+	"direction",
+	"display",
+	"dominantBaseline",
+	"dynamicRangeLimit",
+	"emptyCells",
+	"eventTrigger",
+	"eventTriggerName",
+	"eventTriggerSource",
+	"fieldSizing",
+	"fill",
+	"fillBreak",
+	"fillColor",
+	"fillImage",
+	"fillOpacity",
+	"fillOrigin",
+	"fillPosition",
+	"fillRepeat",
+	"fillRule",
+	"fillSize",
+	"filter",
+	"flex",
+	"flexBasis",
+	"flexDirection",
+	"flexFlow",
+	"flexGrow",
+	"flexShrink",
+	"flexWrap",
+	"float",
+	"floatDefer",
+	"floatOffset",
+	"floatReference",
+	"floodColor",
+	"floodOpacity",
+	"flowFrom",
+	"flowInto",
+	"flowTolerance",
+	"font",
+	"fontFamily",
+	"fontFeatureSettings",
+	"fontKerning",
+	"fontLanguageOverride",
+	"fontOpticalSizing",
+	"fontPalette",
+	"fontSize",
+	"fontSizeAdjust",
+	"fontStretch",
+	"fontStyle",
+	"fontSynthesis",
+	"fontSynthesisPosition",
+	"fontSynthesisSmallCaps",
+	"fontSynthesisStyle",
+	"fontSynthesisWeight",
+	"fontVariant",
+	"fontVariantAlternates",
+	"fontVariantCaps",
+	"fontVariantEastAsian",
+	"fontVariantEmoji",
+	"fontVariantLigatures",
+	"fontVariantNumeric",
+	"fontVariantPosition",
+	"fontVariationSettings",
+	"fontWeight",
+	"fontWidth",
+	"footnoteDisplay",
+	"footnotePolicy",
+	"forcedColorAdjust",
+	"gap",
+	"glyphOrientationVertical",
+	"grid",
+	"gridArea",
+	"gridAutoColumns",
+	"gridAutoFlow",
+	"gridAutoRows",
+	"gridColumn",
+	"gridColumnEnd",
+	"gridColumnGap",
+	"gridColumnStart",
+	"gridGap",
+	"gridRow",
+	"gridRowEnd",
+	"gridRowGap",
+	"gridRowStart",
+	"gridTemplate",
+	"gridTemplateAreas",
+	"gridTemplateColumns",
+	"gridTemplateRows",
+	"hangingPunctuation",
+	"height",
+	"hyphenateCharacter",
+	"hyphenateLimitChars",
+	"hyphenateLimitLast",
+	"hyphenateLimitLines",
+	"hyphenateLimitZone",
+	"hyphens",
+	"imageOrientation",
+	"imageRendering",
+	"imageResolution",
+	"initialLetter",
+	"initialLetterAlign",
+	"initialLetterWrap",
+	"inlineSize",
+	"inlineSizing",
+	"inputSecurity",
+	"inset",
+	"insetBlock",
+	"insetBlockEnd",
+	"insetBlockStart",
+	"insetInline",
+	"insetInlineEnd",
+	"insetInlineStart",
+	"interactivity",
+	"interestDelay",
+	"interestDelayEnd",
+	"interestDelayStart",
+	"interpolateSize",
+	"isolation",
+	"itemCross",
+	"itemDirection",
+	"itemFlow",
+	"itemPack",
+	"itemTrack",
+	"itemWrap",
+	"justifyContent",
+	"justifyItems",
+	"justifySelf",
+	"left",
+	"letterSpacing",
+	"lightingColor",
+	"lineBreak",
+	"lineClamp",
+	"lineFitEdge",
+	"lineGrid",
+	"lineHeight",
+	"lineHeightStep",
+	"linePadding",
+	"lineSnap",
+	"linkParameters",
+	"listStyle",
+	"listStyleImage",
+	"listStylePosition",
+	"listStyleType",
+	"margin",
+	"marginBlock",
+	"marginBlockEnd",
+	"marginBlockStart",
+	"marginBottom",
+	"marginBreak",
+	"marginInline",
+	"marginInlineEnd",
+	"marginInlineStart",
+	"marginLeft",
+	"marginRight",
+	"marginTop",
+	"marginTrim",
+	"marker",
+	"markerEnd",
+	"markerMid",
+	"markerSide",
+	"markerStart",
+	"mask",
+	"maskBorder",
+	"maskBorderMode",
+	"maskBorderOutset",
+	"maskBorderRepeat",
+	"maskBorderSlice",
+	"maskBorderSource",
+	"maskBorderWidth",
+	"maskClip",
+	"maskComposite",
+	"maskImage",
+	"maskMode",
+	"maskOrigin",
+	"maskPosition",
+	"maskRepeat",
+	"maskSize",
+	"maskType",
+	"mathDepth",
+	"mathShift",
+	"mathStyle",
+	"maxBlockSize",
+	"maxHeight",
+	"maxInlineSize",
+	"maxLines",
+	"maxWidth",
+	"minBlockSize",
+	"minHeight",
+	"minInlineSize",
+	"minIntrinsicSizing",
+	"minWidth",
+	"mixBlendMode",
+	"navDown",
+	"navLeft",
+	"navRight",
+	"navUp",
+	"objectFit",
+	"objectPosition",
+	"objectViewBox",
+	"offset",
+	"offsetAnchor",
+	"offsetDistance",
+	"offsetPath",
+	"offsetPosition",
+	"offsetRotate",
+	"opacity",
+	"order",
+	"orphans",
+	"outline",
+	"outlineColor",
+	"outlineOffset",
+	"outlineStyle",
+	"outlineWidth",
+	"overflow",
+	"overflowAnchor",
+	"overflowBlock",
+	"overflowClipMargin",
+	"overflowClipMarginBlock",
+	"overflowClipMarginBlockEnd",
+	"overflowClipMarginBlockStart",
+	"overflowClipMarginBottom",
+	"overflowClipMarginInline",
+	"overflowClipMarginInlineEnd",
+	"overflowClipMarginInlineStart",
+	"overflowClipMarginLeft",
+	"overflowClipMarginRight",
+	"overflowClipMarginTop",
+	"overflowInline",
+	"overflowWrap",
+	"overflowX",
+	"overflowY",
+	"overlay",
+	"overscrollBehavior",
+	"overscrollBehaviorBlock",
+	"overscrollBehaviorInline",
+	"overscrollBehaviorX",
+	"overscrollBehaviorY",
+	"padding",
+	"paddingBlock",
+	"paddingBlockEnd",
+	"paddingBlockStart",
+	"paddingBottom",
+	"paddingInline",
+	"paddingInlineEnd",
+	"paddingInlineStart",
+	"paddingLeft",
+	"paddingRight",
+	"paddingTop",
+	"page",
+	"pageBreakAfter",
+	"pageBreakBefore",
+	"pageBreakInside",
+	"paintOrder",
+	"pause",
+	"pauseAfter",
+	"pauseBefore",
+	"perspective",
+	"perspectiveOrigin",
+	"placeContent",
+	"placeItems",
+	"placeSelf",
+	"pointerEvents",
+	"pointerTimeline",
+	"pointerTimelineAxis",
+	"pointerTimelineName",
+	"position",
+	"positionAnchor",
+	"positionArea",
+	"positionTry",
+	"positionTryFallbacks",
+	"positionTryOrder",
+	"positionVisibility",
+	"printColorAdjust",
+	"quotes",
+	"r",
+	"readingFlow",
+	"readingOrder",
+	"regionFragment",
+	"resize",
+	"rest",
+	"restAfter",
+	"restBefore",
+	"right",
+	"rotate",
+	"rowGap",
+	"rowRule",
+	"rowRuleBreak",
+	"rowRuleColor",
+	"rowRuleEdgeInset",
+	"rowRuleEdgeInsetEnd",
+	"rowRuleEdgeInsetStart",
+	"rowRuleInset",
+	"rowRuleInsetEnd",
+	"rowRuleInsetStart",
+	"rowRuleInteriorInset",
+	"rowRuleInteriorInsetEnd",
+	"rowRuleInteriorInsetStart",
+	"rowRuleStyle",
+	"rowRuleWidth",
+	"rubyAlign",
+	"rubyMerge",
+	"rubyOverhang",
+	"rubyPosition",
+	"rule",
+	"ruleBreak",
+	"ruleColor",
+	"ruleEdgeInset",
+	"ruleInset",
+	"ruleInsetEnd",
+	"ruleInsetStart",
+	"ruleInteriorInset",
+	"ruleOverlap",
+	"ruleStyle",
+	"ruleWidth",
+	"rx",
+	"ry",
+	"scale",
+	"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",
+	"shapeImageThreshold",
+	"shapeInside",
+	"shapeMargin",
+	"shapeOutside",
+	"shapePadding",
+	"shapeRendering",
+	"shapeSubtract",
+	"sliderOrientation",
+	"spatialNavigationAction",
+	"spatialNavigationContain",
+	"spatialNavigationFunction",
+	"speak",
+	"speakAs",
+	"stopColor",
+	"stopOpacity",
+	"stringSet",
+	"stroke",
+	"strokeAlign",
+	"strokeAlignment",
+	"strokeBreak",
+	"strokeColor",
+	"strokeDashCorner",
+	"strokeDashJustify",
+	"strokeDashadjust",
+	"strokeDasharray",
+	"strokeDashcorner",
+	"strokeDashoffset",
+	"strokeImage",
+	"strokeLinecap",
+	"strokeLinejoin",
+	"strokeMiterlimit",
+	"strokeOpacity",
+	"strokeOrigin",
+	"strokePosition",
+	"strokeRepeat",
+	"strokeSize",
+	"strokeWidth",
+	"tabSize",
+	"tableLayout",
+	"textAlign",
+	"textAlignAll",
+	"textAlignLast",
+	"textAnchor",
+	"textAutospace",
+	"textBox",
+	"textBoxEdge",
+	"textBoxTrim",
+	"textCombineUpright",
+	"textDecoration",
+	"textDecorationColor",
+	"textDecorationInset",
+	"textDecorationLine",
+	"textDecorationSkip",
+	"textDecorationSkipBox",
+	"textDecorationSkipInk",
+	"textDecorationSkipSelf",
+	"textDecorationSkipSpaces",
+	"textDecorationStyle",
+	"textDecorationThickness",
+	"textEmphasis",
+	"textEmphasisColor",
+	"textEmphasisPosition",
+	"textEmphasisSkip",
+	"textEmphasisStyle",
+	"textGroupAlign",
+	"textIndent",
+	"textJustify",
+	"textOrientation",
+	"textOverflow",
+	"textRendering",
+	"textShadow",
+	"textSizeAdjust",
+	"textSpacing",
+	"textSpacingTrim",
+	"textTransform",
+	"textUnderlineOffset",
+	"textUnderlinePosition",
+	"textWrap",
+	"textWrapMode",
+	"textWrapStyle",
+	"timelineScope",
+	"timelineTrigger",
+	"timelineTriggerExitRange",
+	"timelineTriggerExitRangeEnd",
+	"timelineTriggerExitRangeStart",
+	"timelineTriggerName",
+	"timelineTriggerRange",
+	"timelineTriggerRangeEnd",
+	"timelineTriggerRangeStart",
+	"timelineTriggerSource",
+	"top",
+	"touchAction",
+	"transform",
+	"transformBox",
+	"transformOrigin",
+	"transformStyle",
+	"transition",
+	"transitionBehavior",
+	"transitionDelay",
+	"transitionDuration",
+	"transitionProperty",
+	"transitionTimingFunction",
+	"translate",
+	"triggerScope",
+	"unicodeBidi",
+	"userSelect",
+	"vectorEffect",
+	"verticalAlign",
+	"viewTimeline",
+	"viewTimelineAxis",
+	"viewTimelineInset",
+	"viewTimelineName",
+	"viewTransitionClass",
+	"viewTransitionGroup",
+	"viewTransitionName",
+	"viewTransitionScope",
+	"visibility",
+	"voiceBalance",
+	"voiceDuration",
+	"voiceFamily",
+	"voicePitch",
+	"voiceRange",
+	"voiceRate",
+	"voiceStress",
+	"voiceVolume",
+	"whiteSpace",
+	"whiteSpaceCollapse",
+	"whiteSpaceTrim",
+	"widows",
+	"width",
+	"willChange",
+	"wordBreak",
+	"wordSpaceTransform",
+	"wordSpacing",
+	"wordWrap",
+	"wrapAfter",
+	"wrapBefore",
+	"wrapFlow",
+	"wrapInside",
+	"wrapThrough",
+	"writingMode",
+	"x",
+	"y",
+	"zIndex",
+	"zoom"
+]);
+
 //#endregion
 //#region src/props.ts
 /**
-* Converts a kebab-case string to camelCase.
-*/
-function kebabToCamel(str) {
-	return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-}
-/**
 * Converts a camelCase string to kebab-case.
 */
 function camelToKebab(str) {
@@ -413,7 +1154,6 @@ function formatValue(value, propertyName, maxDepth = 10) {
 	}
 	return formatValue(value.value, propertyName, maxDepth - 1);
 }
-const knownPropertySet = new Set(properties.all.map(kebabToCamel));
 /**
 * Checks if a property name is a CSS custom property (variable).
 */
@@ -438,7 +1178,7 @@ function asVar(value, maxDepth = 10) {
 * Checks if a property name is a known CSS property.
 */
 function isKnownPropertyName(key) {
-	return knownPropertySet.has(key);
+	return knownPropertyNames.has(key);
 }
 /**
 * Converts a value to a CSS property string.
@@ -456,11 +1196,18 @@ function asKnownProp(value, key) {
 function isNestedSelector(key) {
 	return key.includes("&");
 }
+/** Known at-rule prefixes that mochi-css recognizes */
+const AT_RULE_PREFIXES = [
+	"@media ",
+	"@container ",
+	"@supports ",
+	"@layer "
+];
 /**
-* Checks if a key represents a media query.
+* Checks if a key represents a CSS at-rule (media, container, supports, layer).
 */
-function isMediaSelector(key) {
-	return key.startsWith("@");
+function isAtRuleKey(key) {
+	return AT_RULE_PREFIXES.some((p) => key.startsWith(p));
 }
 /**
 * Converts a SimpleStyleProps object to a CSS properties record.
@@ -482,23 +1229,23 @@ function cssFromProps(props) {
 //#endregion
 //#region src/selector.ts
 /**
-* Immutable CSS selector builder that handles nested selectors and media queries.
+* Immutable CSS selector builder that handles nested selectors and CSS at-rules.
 * Uses the `&` character as a placeholder for parent selector substitution.
 *
 * @example
 * const selector = new MochiSelector(['.button'])
 * selector.extend('&:hover').cssSelector // '.button:hover'
-* selector.wrap('@media (min-width: 768px)').mediaQuery // '@media (min-width: 768px)'
+* selector.wrap('@media (min-width: 768px)').atRules // ['@media (min-width: 768px)']
 */
 var MochiSelector = class MochiSelector {
 	/**
 	* Creates a new MochiSelector instance.
 	* @param cssSelectors - Array of CSS selectors (may contain `&` placeholders)
-	* @param mediaSelectors - Array of media query conditions (without `@media` prefix)
+	* @param atRules - Array of full CSS at-rule strings e.g. `"@media (min-width: 768px)"`
 	*/
-	constructor(cssSelectors = [], mediaSelectors = []) {
+	constructor(cssSelectors = [], atRules = []) {
 		this.cssSelectors = cssSelectors;
-		this.mediaSelectors = mediaSelectors;
+		this.atRules = atRules;
 	}
 	/**
 	* Gets the combined CSS selector string.
@@ -510,20 +1257,12 @@ var MochiSelector = class MochiSelector {
 		return this.cssSelectors.join(", ");
 	}
 	/**
-	* Gets the combined media query string, if any.
-	* @returns The full `@media` query string, or undefined if no media conditions
-	*/
-	get mediaQuery() {
-		if (this.mediaSelectors.length === 0) return void 0;
-		return `@media ${this.mediaSelectors.map((s) => `(${s})`).join(" and ")}`;
-	}
-	/**
 	* Substitutes all `&` placeholders with the given root selector.
 	* @param root - The selector to replace `&` with
 	* @returns A new MochiSelector with substituted selectors
 	*/
 	substitute(root) {
-		return new MochiSelector(this.cssSelectors.map((selector) => selector.replace(/&/g, root)), this.mediaSelectors);
+		return new MochiSelector(this.cssSelectors.map((selector) => selector.replace(/&/g, root)), this.atRules);
 	}
 	/**
 	* Extends this selector by nesting a child selector.
@@ -539,19 +1278,19 @@ var MochiSelector = class MochiSelector {
 		const children = MochiSelector.split(child);
 		return new MochiSelector(this.cssSelectors.flatMap((parentSelector) => children.map((childSelector) => {
 			return childSelector.replace(/&/g, parentSelector);
-		})), this.mediaSelectors);
+		})), this.atRules);
 	}
 	/**
-	* Wraps this selector with a media query condition.
-	* @param mediaQuery - The media query string (starting with `@`)
-	* @returns A new MochiSelector with the added media condition
+	* Wraps this selector with a CSS at-rule.
+	* @param atRule - The full at-rule string (e.g. `"@media (min-width: 768px)"`)
+	* @returns A new MochiSelector with the added at-rule, or unchanged if not a known at-rule
 	* @example
-	* selector.wrap('@min-width: 768px') // Adds media query condition
+	* selector.wrap('@media (min-width: 768px)') // Adds media query
+	* selector.wrap('@container sidebar (min-width: 300px)') // Adds container query
 	*/
-	wrap(mediaQuery) {
-		if (!isMediaSelector(mediaQuery)) return this;
-		const mediaQueryPart = mediaQuery.substring(1);
-		return new MochiSelector(this.cssSelectors, [...this.mediaSelectors, mediaQueryPart]);
+	wrap(atRule) {
+		if (!isAtRuleKey(atRule)) return this;
+		return new MochiSelector(this.cssSelectors, [...this.atRules, atRule]);
 	}
 	/**
 	* Splits a comma-separated selector string into individual selectors.
@@ -660,17 +1399,22 @@ var CssObjectSubBlock = class CssObjectSubBlock {
 	}
 	/**
 	* Converts this block to a CSS string.
-	* Handles media query wrapping if the selector has media conditions.
+	* Handles at-rule wrapping (media, container, supports, layer) if present.
+	* Multiple at-rules are nested in order.
 	* @param root - The root selector to substitute for `&`
 	* @returns Formatted CSS string
 	*/
 	asCssString(root) {
 		const selector = this.selector.substitute(root);
-		const mediaQuery = selector.mediaQuery;
-		const mediaIndent = mediaQuery === void 0 ? "" : "    ";
-		const props = Object.entries(this.cssProps).toSorted(compareStringKey).map(([k, v]) => `${mediaIndent}    ${k}: ${v};\n`).join("");
-		const blockCss = `${mediaIndent}${selector.cssSelector} {\n${props}${mediaIndent}}`;
-		return mediaQuery === void 0 ? blockCss : `${mediaQuery} {\n${blockCss}\n}`;
+		const atRules = selector.atRules;
+		const innerIndent = "    ".repeat(atRules.length);
+		const props = Object.entries(this.cssProps).toSorted(compareStringKey).map(([k, v]) => `${innerIndent}    ${k}: ${v};\n`).join("");
+		let result = `${innerIndent}${selector.cssSelector} {\n${props}${innerIndent}}`;
+		for (let i = atRules.length - 1; i >= 0; i--) {
+			const outerIndent = "    ".repeat(i);
+			result = `${outerIndent}${atRules[i]} {\n${result}\n${outerIndent}}`;
+		}
+		return result;
 	}
 	/**
 	* Parses StyleProps into an array of CSS sub-blocks.
@@ -703,7 +1447,7 @@ var CssObjectSubBlock = class CssObjectSubBlock {
 				});
 				continue;
 			}
-			if (isMediaSelector(key)) {
+			if (isAtRuleKey(key)) {
 				propsToProcess.push({
 					key,
 					props: value,
@@ -808,12 +1552,15 @@ var CSSObject = class {
 		return [
 			this.mainBlock.asCssString(this.mainBlock.selector),
 			...Object.entries(this.variantBlocks).toSorted(compareStringKey).flatMap(([_, b]) => Object.entries(b).toSorted(compareStringKey)).map(([_, b]) => b.asCssString(this.mainBlock.selector)),
-			...this.compoundVariants.map(({ conditions, subBlocks }) => {
-				const variantSelectors = Object.entries(conditions).toSorted(compareStringKey).map(([variantName, optionName]) => {
-					return (this.variantBlocks[variantName]?.[optionName])?.selector ?? "";
-				}).filter(Boolean).join("");
-				const combinedSelector = `${this.mainBlock.selector}${variantSelectors}`;
-				return subBlocks.map((b) => b.asCssString(combinedSelector)).join("\n\n");
+			...this.compoundVariants.flatMap(({ conditions, subBlocks }) => {
+				const selectorParts = [];
+				for (const [variantName, optionName] of Object.entries(conditions).toSorted(compareStringKey)) {
+					const selector = this.variantBlocks[variantName]?.[optionName]?.selector;
+					if (selector === void 0) return [];
+					selectorParts.push(selector);
+				}
+				const combinedSelector = `${this.mainBlock.selector}${selectorParts.join("")}`;
+				return subBlocks.map((b) => b.asCssString(combinedSelector));
 			})
 		].join("\n\n");
 	}
@@ -1056,5 +1803,66 @@ var GlobalCssObject = class {
 function globalCss(styles) {}
 
 //#endregion
-export { CSSObject, CssObjectBlock, CssObjectSubBlock, GlobalCssObject, KeyframesObject, MochiCSS, MochiKeyframes, MochiSelector, Token, createToken, css, cssFromProps, globalCss, keyframes, mergeMochiCss, styled };
-//# sourceMappingURL=index.mjs.map
+//#region src/query.ts
+/**
+* Wraps a condition in parentheses if not already wrapped.
+*/
+function wrapParens(condition) {
+	const trimmed = condition.trim();
+	if (trimmed.startsWith("(") && trimmed.endsWith(")")) return trimmed;
+	return `(${trimmed})`;
+}
+function mediaFn(condition) {
+	return `@media ${wrapParens(condition)}`;
+}
+mediaFn.and = function(...conditions) {
+	return `@media ${conditions.map(wrapParens).join(" and ")}`;
+};
+mediaFn.or = function(...conditions) {
+	return `@media ${conditions.map(wrapParens).join(", ")}`;
+};
+Object.defineProperties(mediaFn, {
+	dark: {
+		get: () => "@media (prefers-color-scheme: dark)",
+		enumerable: true
+	},
+	light: {
+		get: () => "@media (prefers-color-scheme: light)",
+		enumerable: true
+	},
+	motion: {
+		get: () => "@media (prefers-reduced-motion: no-preference)",
+		enumerable: true
+	},
+	print: {
+		get: () => "@media print",
+		enumerable: true
+	}
+});
+/** Helper for constructing `@media` at-rule keys. */
+const media = mediaFn;
+function containerFn(condition) {
+	return `@container ${wrapParens(condition)}`;
+}
+containerFn.named = function(name, condition) {
+	return `@container ${name} ${wrapParens(condition)}`;
+};
+/** Helper for constructing `@container` at-rule keys. */
+const container = containerFn;
+function supportsFn(condition) {
+	return `@supports ${wrapParens(condition)}`;
+}
+supportsFn.not = function(condition) {
+	return `@supports not ${wrapParens(condition)}`;
+};
+supportsFn.and = function(...conditions) {
+	return `@supports ${conditions.map(wrapParens).join(" and ")}`;
+};
+supportsFn.or = function(...conditions) {
+	return `@supports ${conditions.map(wrapParens).join(" or ")}`;
+};
+/** Helper for constructing `@supports` at-rule keys. */
+const supports = supportsFn;
+
+//#endregion
+export { CSSObject, CssObjectBlock, CssObjectSubBlock, GlobalCssObject, KeyframesObject, MochiCSS, MochiKeyframes, MochiSelector, Token, container, createToken, css, cssFromProps, globalCss, isAtRuleKey, keyframes, media, mergeMochiCss, styled, supports };