@mochi-css/vanilla 1.0.1 → 2.0.0

package/dist/index.d.ts

@@ -55,38 +55,33 @@ declare function createToken(name: string): Token;
 //#region src/selector.d.ts
 /**
  * CSS selector building and manipulation utilities.
- * Handles nested selectors (using `&` placeholder) and media queries.
+ * Handles nested selectors (using `&` placeholder) and CSS at-rules.
  * @module selector
  */
 /**
- * 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)']
  */
 declare class MochiSelector {
   private readonly cssSelectors;
-  private readonly mediaSelectors;
+  readonly atRules: string[];
   /**
    * 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?: string[], mediaSelectors?: string[]);
+  constructor(cssSelectors?: string[], atRules?: string[]);
   /**
    * Gets the combined CSS selector string.
    * Multiple selectors are joined with commas.
    * @returns The CSS selector, or "*" if no selectors are defined
    */
   get cssSelector(): string;
-  /**
-   * Gets the combined media query string, if any.
-   * @returns The full `@media` query string, or undefined if no media conditions
-   */
-  get mediaQuery(): string | undefined;
   /**
    * Substitutes all `&` placeholders with the given root selector.
    * @param root - The selector to replace `&` with
@@ -104,13 +99,14 @@ declare class MochiSelector {
    */
   extend(child: string): MochiSelector;
   /**
-   * 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: string): MochiSelector;
+  wrap(atRule: string): MochiSelector;
   /**
    * Splits a comma-separated selector string into individual selectors.
    * @param selector - The selector string to split
@@ -455,11 +451,15 @@ type PropsWithUnit = PropertyWithUnit & keyof Props;
  * Converts a kebab-case string to camelCase.
  */
 
+/**
+ * Checks if a key represents a CSS at-rule (media, container, supports, layer).
+ */
+declare function isAtRuleKey(key: string): key is AtRuleKey;
 /** A nested CSS selector pattern containing the parent reference `&` */
 type NestedCssSelector = `${string}&${string}`;
-/** A CSS media query starting with `@` */
-type MediaSelector = `@${string}`;
-type NestedStyleKeys = MediaSelector | NestedCssSelector;
+/** A CSS at-rule key for media, container, supports, or layer queries */
+type AtRuleKey = `@media ${string}` | `@container ${string}` | `@supports ${string}` | `@layer ${string}`;
+type NestedStyleKeys = AtRuleKey | NestedCssSelector;
 /**
  * Style properties without nesting support.
  * Includes all standard CSS properties with type-safe value converters,
@@ -468,7 +468,7 @@ type NestedStyleKeys = MediaSelector | NestedCssSelector;
  * Properties with known units (e.g., width, height, padding) accept numbers
  * that are automatically converted with their default unit (e.g., px, ms).
  */
-type SimpleStyleProps = { [K in PropsWithUnit]?: CssLike<number | Props[K]> } & { [K in Exclude<keyof Props, PropsWithUnit>]?: CssLike<Props[K]> } & Partial<Record<CssVar, CssLike<string | number>>>;
+type SimpleStyleProps = { [K in PropsWithUnit]?: CssLike<number | Props[K]> } & { [K in Exclude<keyof Props, PropsWithUnit>]?: CssLike<Props[K]> };
 /**
  * Full style properties type with support for nested selectors and media queries.
  * Extends SimpleStyleProps to allow recursive style definitions.
@@ -478,10 +478,10 @@ type SimpleStyleProps = { [K in PropsWithUnit]?: CssLike<number | Props[K]> } &
  *   color: 'blue',
  *   padding: 16,
  *   '&:hover': { color: 'red' },
- *   '@min-width: 768px': { padding: 24 }
+ *   '@media (min-width: 768px)': { padding: 24 }
  * }
  */
-type StyleProps = SimpleStyleProps & { [K in NestedStyleKeys]?: StyleProps | CssLike<string | number> };
+type StyleProps = SimpleStyleProps & { [K in NestedStyleKeys]?: StyleProps | CssLike<string | number> } & Record<string, unknown>;
 /**
  * Converts a SimpleStyleProps object to a CSS properties record.
  * Transforms camelCase property names to kebab-case and applies value converters.
@@ -491,7 +491,7 @@ type StyleProps = SimpleStyleProps & { [K in NestedStyleKeys]?: StyleProps | Css
  * cssFromProps({ backgroundColor: 'blue', padding: 16 })
  * // { 'background-color': 'blue', 'padding': '16px' }
  */
-declare function cssFromProps(props: SimpleStyleProps): Record<string, string>;
+declare function cssFromProps(props: SimpleStyleProps & Partial<Record<CssVar, CssLike<number | string>>>): Record<string, string>;
 //#endregion
 //#region src/cssObject.d.ts
 /**
@@ -514,7 +514,8 @@ declare class CssObjectSubBlock {
   get hash(): string;
   /**
    * 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
    */
@@ -589,7 +590,7 @@ type VariantProps<V extends AllVariants> = {
   compoundVariants?: CompoundVariant<V>[];
 };
 /** Combined type for style props with optional variants */
-type MochiCSSProps<V extends AllVariants> = StyleProps & VariantProps<V>;
+type MochiCSSProps<V extends AllVariants> = Omit<StyleProps, "variants" | "compoundVariants" | "defaultVariants"> & VariantProps<V>;
 /** Utility type to override properties of A with properties of B */
 type Override<A extends object, B extends object> = B & Omit<A, keyof B>;
 /** Recursively merges variant types from a tuple, with later types overriding earlier */
@@ -689,6 +690,13 @@ declare class MochiCSS<V extends AllVariants = DefaultVariants> {
    */
   static from<V extends AllVariants = DefaultVariants>(object: CSSObject<V>): MochiCSS<V>;
 }
+/**
+ * Merges multiple MochiCSS instances into a single one, combining their
+ * class names, variant class names, and default variants.
+ * @param instances - The MochiCSS instances to merge
+ * @returns A new MochiCSS instance with all styles combined
+ */
+declare function mergeMochiCss<V extends AllVariants[]>(instances: MochiCSS<AllVariants>[]): MochiCSS<MergeCSSVariants<V>>;
 declare function css<V extends AllVariants[]>(...props: { [K in keyof V]: MochiCSSProps<V[K]> | MochiCSS }): MochiCSS<MergeCSSVariants<V>>;
 //#endregion
 //#region src/styled.d.ts
@@ -750,5 +758,80 @@ declare class MochiKeyframes {
 }
 declare function keyframes(stops: KeyframeStops): MochiKeyframes;
 //#endregion
-export { AllVariants, CSSObject, CompoundVariant, CssLike, CssLikeObject, CssObjectBlock, CssObjectSubBlock, CssVar, CssVarVal, DefaultVariants, type KeyframeStops, KeyframesObject, MergeCSSVariants, MochiCSS, MochiCSSProps, MochiKeyframes, MochiSelector, RefineVariants, type StyleProps, Token, VariantProps, createToken, css, cssFromProps, keyframes, styled };
+//#region src/globalCssObject.d.ts
+type GlobalCssStyles = Record<string, StyleProps>;
+/**
+ * CSS object model for global (non-scoped) styles.
+ * Accepts a map of CSS selectors to style objects and serializes them
+ * as plain CSS rules without class name scoping.
+ *
+ * @example
+ * const obj = new GlobalCssObject({
+ *   body: { margin: 0 },
+ *   'h1': { fontSize: 32 },
+ * })
+ * obj.asCssString() // "body {\n    margin: 0;\n}\n\nh1 {\n    font-size: 32px;\n}"
+ */
+declare class GlobalCssObject {
+  private readonly rules;
+  constructor(styles: GlobalCssStyles);
+  asCssString(): string;
+}
+//#endregion
+//#region src/globalCss.d.ts
+/**
+ * Creates a global CSS definition.
+ * Styles are not scoped to any class — they apply to all matching elements.
+ *
+ * @param styles - Map of CSS selectors to style objects
+ *
+ * @example
+ * globalCss({
+ *   'body': { margin: 0, padding: 0 },
+ *   '*, *::before, *::after': { boxSizing: 'border-box' },
+ * })
+ */
+declare function globalCss(styles: GlobalCssStyles): void;
+//#endregion
+//#region src/query.d.ts
+interface MediaHelper {
+  /** `@media (condition)` */
+  (condition: string): AtRuleKey & `@media ${string}`;
+  /** `@media (a) and (b) and …` */
+  and(...conditions: [string, string, ...string[]]): AtRuleKey & `@media ${string}`;
+  /** `@media (a), (b), …` */
+  or(...conditions: [string, string, ...string[]]): AtRuleKey & `@media ${string}`;
+  /** `@media (prefers-color-scheme: dark)` */
+  readonly dark: AtRuleKey & `@media ${string}`;
+  /** `@media (prefers-color-scheme: light)` */
+  readonly light: AtRuleKey & `@media ${string}`;
+  /** `@media (prefers-reduced-motion: no-preference)` */
+  readonly motion: AtRuleKey & `@media ${string}`;
+  /** `@media print` */
+  readonly print: AtRuleKey & `@media ${string}`;
+}
+/** Helper for constructing `@media` at-rule keys. */
+declare const media: MediaHelper;
+interface ContainerHelper {
+  /** `@container (condition)` — anonymous container */
+  (condition: string): AtRuleKey & `@container ${string}`;
+  /** `@container name (condition)` — named container */
+  named(name: string, condition: string): AtRuleKey & `@container ${string}`;
+}
+/** Helper for constructing `@container` at-rule keys. */
+declare const container: ContainerHelper;
+interface SupportsHelper {
+  /** `@supports (declaration)` */
+  (condition: string): AtRuleKey & `@supports ${string}`;
+  /** `@supports not (declaration)` */
+  not(condition: string): AtRuleKey & `@supports ${string}`;
+  /** `@supports (a) and (b) and …` */
+  and(...conditions: [string, string, ...string[]]): AtRuleKey & `@supports ${string}`;
+  /** `@supports (a) or (b) or …` */
+  or(...conditions: [string, string, ...string[]]): AtRuleKey & `@supports ${string}`;
+}
+/** Helper for constructing `@supports` at-rule keys. */
+declare const supports: SupportsHelper;
+//#endregion
+export { AllVariants, type AtRuleKey, CSSObject, CompoundVariant, CssLike, CssLikeObject, CssObjectBlock, CssObjectSubBlock, CssVar, CssVarVal, DefaultVariants, GlobalCssObject, type GlobalCssStyles, type KeyframeStops, KeyframesObject, MergeCSSVariants, MochiCSS, MochiCSSProps, MochiKeyframes, MochiSelector, RefineVariants, type StyleProps, Token, VariantProps, container, createToken, css, cssFromProps, globalCss, isAtRuleKey, keyframes, media, mergeMochiCss, styled, supports };
 //# sourceMappingURL=index.d.ts.map