elit 2.0.0 → 3.0.0

package/dist/style.d.mts

@@ -97,6 +97,9 @@ declare class CreateStyle {
     add(rules: Record<string, Record<string, string | number>>): CSSRule[];
     important(value: string | number): string;
     private toKebabCase;
+    private createAndAddRule;
+    private rulesToCSSRules;
+    private renderRulesWithIndent;
     private stylesToString;
     private renderRule;
     private renderMediaRule;
@@ -109,5 +112,48 @@ declare class CreateStyle {
     inject(styleId?: string): HTMLStyleElement;
     clear(): void;
 }
+declare const styles: CreateStyle;
+declare const addVar: (name: string, value: string) => CSSVariable;
+declare const getVar: (variable: CSSVariable | string, fallback?: string) => string;
+declare const addTag: (tag: string, styles: Record<string, string | number>) => CSSRule;
+declare const addClass: (name: string, styles: Record<string, string | number>) => CSSRule;
+declare const addId: (name: string, styles: Record<string, string | number>) => CSSRule;
+declare const addPseudoClass: (pseudo: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const addPseudoElement: (pseudo: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const addAttribute: (attr: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const attrEquals: (attr: string, value: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const attrContainsWord: (attr: string, value: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const attrStartsWith: (attr: string, value: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const attrEndsWith: (attr: string, value: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const attrContains: (attr: string, value: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const descendant: (ancestor: string, descendant: string, styles: Record<string, string | number>) => CSSRule;
+declare const childStyle: (parent: string, childSel: string, styles: Record<string, string | number>) => CSSRule;
+declare const adjacentSibling: (element: string, sibling: string, styles: Record<string, string | number>) => CSSRule;
+declare const generalSibling: (element: string, sibling: string, styles: Record<string, string | number>) => CSSRule;
+declare const multipleStyle: (selectors: string[], styles: Record<string, string | number>) => CSSRule;
+declare const addName: (name: string, styles: Record<string, string | number>) => CSSRule;
+declare const nesting: (parentRule: CSSRule, ...childRules: CSSRule[]) => CSSRule;
+declare const keyframe: (name: string, steps: Record<string | number, Record<string, string | number>>) => Keyframes;
+declare const keyframeFromTo: (name: string, from: Record<string, string | number>, to: Record<string, string | number>) => Keyframes;
+declare const fontFace: (options: FontFace) => FontFace;
+declare const importStyle: (url: string, mediaQuery?: string) => string;
+declare const mediaStyle: (type: string, condition: string, rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaScreen: (condition: string, rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaPrint: (rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaMinWidth: (minWidth: string, rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaMaxWidth: (maxWidth: string, rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaDark: (rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaLight: (rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaReducedMotion: (rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const container: (condition: string, rules: Record<string, Record<string, string | number>>, name?: string) => ContainerRule;
+declare const addContainer: (name: string, styles: Record<string, string | number>) => CSSRule;
+declare const supportsStyle: (condition: string, rules: Record<string, Record<string, string | number>>) => SupportsRule;
+declare const layerOrder: (...layers: string[]) => void;
+declare const layer: (name: string, rules: Record<string, Record<string, string | number>>) => LayerRule;
+declare const addStyle: (rules: Record<string, Record<string, string | number>>) => CSSRule[];
+declare const important: (value: string | number) => string;
+declare const renderStyle: (...additionalRules: (CSSRule | CSSRule[] | MediaRule | Keyframes | ContainerRule | SupportsRule | LayerRule | undefined | null)[]) => string;
+declare const injectStyle: (styleId?: string) => HTMLStyleElement;
+declare const clearStyle: () => void;
 
-export { type CSSRule, type CSSVariable, type ContainerRule, CreateStyle, type FontFace, type KeyframeStep, type Keyframes, type LayerRule, type MediaRule, type SupportsRule };
+export { type CSSRule, type CSSVariable, type ContainerRule, CreateStyle, type FontFace, type KeyframeStep, type Keyframes, type LayerRule, type MediaRule, type SupportsRule, addAttribute, addClass, addContainer, addId, addName, addPseudoClass, addPseudoElement, addStyle, addTag, addVar, adjacentSibling, attrContains, attrContainsWord, attrEndsWith, attrEquals, attrStartsWith, childStyle, clearStyle, container, styles as default, descendant, fontFace, generalSibling, getVar, importStyle, important, injectStyle, keyframe, keyframeFromTo, layer, layerOrder, mediaDark, mediaLight, mediaMaxWidth, mediaMinWidth, mediaPrint, mediaReducedMotion, mediaScreen, mediaStyle, multipleStyle, nesting, renderStyle, styles, supportsStyle };

package/dist/style.d.ts

@@ -97,6 +97,9 @@ declare class CreateStyle {
     add(rules: Record<string, Record<string, string | number>>): CSSRule[];
     important(value: string | number): string;
     private toKebabCase;
+    private createAndAddRule;
+    private rulesToCSSRules;
+    private renderRulesWithIndent;
     private stylesToString;
     private renderRule;
     private renderMediaRule;
@@ -109,5 +112,48 @@ declare class CreateStyle {
     inject(styleId?: string): HTMLStyleElement;
     clear(): void;
 }
+declare const styles: CreateStyle;
+declare const addVar: (name: string, value: string) => CSSVariable;
+declare const getVar: (variable: CSSVariable | string, fallback?: string) => string;
+declare const addTag: (tag: string, styles: Record<string, string | number>) => CSSRule;
+declare const addClass: (name: string, styles: Record<string, string | number>) => CSSRule;
+declare const addId: (name: string, styles: Record<string, string | number>) => CSSRule;
+declare const addPseudoClass: (pseudo: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const addPseudoElement: (pseudo: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const addAttribute: (attr: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const attrEquals: (attr: string, value: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const attrContainsWord: (attr: string, value: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const attrStartsWith: (attr: string, value: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const attrEndsWith: (attr: string, value: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const attrContains: (attr: string, value: string, styles: Record<string, string | number>, baseSelector?: string) => CSSRule;
+declare const descendant: (ancestor: string, descendant: string, styles: Record<string, string | number>) => CSSRule;
+declare const childStyle: (parent: string, childSel: string, styles: Record<string, string | number>) => CSSRule;
+declare const adjacentSibling: (element: string, sibling: string, styles: Record<string, string | number>) => CSSRule;
+declare const generalSibling: (element: string, sibling: string, styles: Record<string, string | number>) => CSSRule;
+declare const multipleStyle: (selectors: string[], styles: Record<string, string | number>) => CSSRule;
+declare const addName: (name: string, styles: Record<string, string | number>) => CSSRule;
+declare const nesting: (parentRule: CSSRule, ...childRules: CSSRule[]) => CSSRule;
+declare const keyframe: (name: string, steps: Record<string | number, Record<string, string | number>>) => Keyframes;
+declare const keyframeFromTo: (name: string, from: Record<string, string | number>, to: Record<string, string | number>) => Keyframes;
+declare const fontFace: (options: FontFace) => FontFace;
+declare const importStyle: (url: string, mediaQuery?: string) => string;
+declare const mediaStyle: (type: string, condition: string, rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaScreen: (condition: string, rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaPrint: (rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaMinWidth: (minWidth: string, rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaMaxWidth: (maxWidth: string, rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaDark: (rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaLight: (rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const mediaReducedMotion: (rules: Record<string, Record<string, string | number>>) => MediaRule;
+declare const container: (condition: string, rules: Record<string, Record<string, string | number>>, name?: string) => ContainerRule;
+declare const addContainer: (name: string, styles: Record<string, string | number>) => CSSRule;
+declare const supportsStyle: (condition: string, rules: Record<string, Record<string, string | number>>) => SupportsRule;
+declare const layerOrder: (...layers: string[]) => void;
+declare const layer: (name: string, rules: Record<string, Record<string, string | number>>) => LayerRule;
+declare const addStyle: (rules: Record<string, Record<string, string | number>>) => CSSRule[];
+declare const important: (value: string | number) => string;
+declare const renderStyle: (...additionalRules: (CSSRule | CSSRule[] | MediaRule | Keyframes | ContainerRule | SupportsRule | LayerRule | undefined | null)[]) => string;
+declare const injectStyle: (styleId?: string) => HTMLStyleElement;
+declare const clearStyle: () => void;
 
-export { type CSSRule, type CSSVariable, type ContainerRule, CreateStyle, type FontFace, type KeyframeStep, type Keyframes, type LayerRule, type MediaRule, type SupportsRule };
+export { type CSSRule, type CSSVariable, type ContainerRule, CreateStyle, type FontFace, type KeyframeStep, type Keyframes, type LayerRule, type MediaRule, type SupportsRule, addAttribute, addClass, addContainer, addId, addName, addPseudoClass, addPseudoElement, addStyle, addTag, addVar, adjacentSibling, attrContains, attrContainsWord, attrEndsWith, attrEquals, attrStartsWith, childStyle, clearStyle, container, styles as default, descendant, fontFace, generalSibling, getVar, importStyle, important, injectStyle, keyframe, keyframeFromTo, layer, layerOrder, mediaDark, mediaLight, mediaMaxWidth, mediaMinWidth, mediaPrint, mediaReducedMotion, mediaScreen, mediaStyle, multipleStyle, nesting, renderStyle, styles, supportsStyle };

package/dist/style.js

@@ -1 +1,551 @@
-"use strict";exports.CreateStyle=class{constructor(){this.variables=[],this.rules=[],this.mediaRules=[],this.keyframes=[],this.fontFaces=[],this.imports=[],this.containerRules=[],this.supportsRules=[],this.layerRules=[],this._layerOrder=[]}addVar(e,t){let s={name:e.startsWith("--")?e:`--${e}`,value:t,toString(){return`var(${this.name})`}};return this.variables.push(s),s}var(e,t){let s="string"==typeof e?e.startsWith("--")?e:`--${e}`:e.name;return t?`var(${s}, ${t})`:`var(${s})`}addTag(e,t){let s={selector:e,styles:t,type:"tag"};return this.rules.push(s),s}addClass(e,t){let s={selector:e.startsWith(".")?e:`.${e}`,styles:t,type:"class"};return this.rules.push(s),s}addId(e,t){let s={selector:e.startsWith("#")?e:`#${e}`,styles:t,type:"id"};return this.rules.push(s),s}addPseudoClass(e,t,s){let r=e.startsWith(":")?e:`:${e}`,n={selector:s?`${s}${r}`:r,styles:t,type:"pseudo-class"};return this.rules.push(n),n}addPseudoElement(e,t,s){let r=e.startsWith("::")?e:`::${e}`,n={selector:s?`${s}${r}`:r,styles:t,type:"pseudo-element"};return this.rules.push(n),n}addAttribute(e,t,s){let r=e.startsWith("[")?e:`[${e}]`,n={selector:s?`${s}${r}`:r,styles:t,type:"attribute"};return this.rules.push(n),n}attrEquals(e,t,s,r){return this.addAttribute(`${e}="${t}"`,s,r)}attrContainsWord(e,t,s,r){return this.addAttribute(`${e}~="${t}"`,s,r)}attrStartsWith(e,t,s,r){return this.addAttribute(`${e}^="${t}"`,s,r)}attrEndsWith(e,t,s,r){return this.addAttribute(`${e}$="${t}"`,s,r)}attrContains(e,t,s,r){return this.addAttribute(`${e}*="${t}"`,s,r)}descendant(e,t,s){let r={selector:`${e} ${t}`,styles:s,type:"custom"};return this.rules.push(r),r}child(e,t,s){let r={selector:`${e} > ${t}`,styles:s,type:"custom"};return this.rules.push(r),r}adjacentSibling(e,t,s){let r={selector:`${e} + ${t}`,styles:s,type:"custom"};return this.rules.push(r),r}generalSibling(e,t,s){let r={selector:`${e} ~ ${t}`,styles:s,type:"custom"};return this.rules.push(r),r}multiple(e,t){let s={selector:e.join(", "),styles:t,type:"custom"};return this.rules.push(s),s}addName(e,t){return{selector:e.startsWith("--")?`&${e}`:`&--${e}`,styles:t,type:"name"}}nesting(e,...t){return e.nested=t,e}keyframe(e,t){let s={name:e,steps:Object.entries(t).map(([e,t])=>({step:"from"===e?"from":"to"===e?"to":`${e}%`,styles:t}))};return this.keyframes.push(s),s}keyframeFromTo(e,t,s){return this.keyframe(e,{from:t,to:s})}fontFace(e){return this.fontFaces.push(e),e}import(e,t){let s=t?`@import url("${e}") ${t};`:`@import url("${e}");`;return this.imports.push(s),s}media(e,t,s){let r={type:e,condition:t,rules:Object.entries(s).map(([e,t])=>({selector:e,styles:t,type:"custom"}))};return this.mediaRules.push(r),r}mediaScreen(e,t){return this.media("screen",e,t)}mediaPrint(e){return this.media("print","",e)}mediaMinWidth(e,t){return this.media("screen",`min-width: ${e}`,t)}mediaMaxWidth(e,t){return this.media("screen",`max-width: ${e}`,t)}mediaDark(e){let t={type:"",condition:"prefers-color-scheme: dark",rules:Object.entries(e).map(([e,t])=>({selector:e,styles:t,type:"custom"}))};return this.mediaRules.push(t),t}mediaLight(e){let t={type:"",condition:"prefers-color-scheme: light",rules:Object.entries(e).map(([e,t])=>({selector:e,styles:t,type:"custom"}))};return this.mediaRules.push(t),t}mediaReducedMotion(e){let t={type:"",condition:"prefers-reduced-motion: reduce",rules:Object.entries(e).map(([e,t])=>({selector:e,styles:t,type:"custom"}))};return this.mediaRules.push(t),t}container(e,t,s){let r={name:s,condition:e,rules:Object.entries(t).map(([e,t])=>({selector:e,styles:t,type:"custom"}))};return this.containerRules.push(r),r}addContainer(e,t){let s={...t,containerName:e};return this.addClass(e,s)}supports(e,t){let s={condition:e,rules:Object.entries(t).map(([e,t])=>({selector:e,styles:t,type:"custom"}))};return this.supportsRules.push(s),s}layerOrder(...e){this._layerOrder=e}layer(e,t){let s={name:e,rules:Object.entries(t).map(([e,t])=>({selector:e,styles:t,type:"custom"}))};return this.layerRules.push(s),s}add(e){return Object.entries(e).map(([e,t])=>{let s={selector:e,styles:t,type:"custom"};return this.rules.push(s),s})}important(e){return`${e} !important`}toKebabCase(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}stylesToString(e,t="    "){return Object.entries(e).map(([e,s])=>{let r="object"==typeof s&&null!==s&&"name"in s?`var(${s.name})`:s;return`${t}${this.toKebabCase(e)}: ${r};`}).join("\n")}renderRule(e,t=""){let s=`${t}${e.selector} {\n${this.stylesToString(e.styles,t+"    ")}\n`;if(e.nested&&e.nested.length>0)for(let r of e.nested){s+=`\n${t}${r.selector.startsWith("&")?r.selector.replace(/&/g,e.selector):`${e.selector} ${r.selector}`} {\n${this.stylesToString(r.styles,t+"    ")}\n${t}}\n`}return s+=`${t}}`,s}renderMediaRule(e){let t=`@media ${e.type&&e.condition?`${e.type} and (${e.condition})`:e.type?e.type:`(${e.condition})`} {\n`;for(let s of e.rules)t+=this.renderRule(s,"    ")+"\n";return t+="}",t}renderKeyframes(e){let t=`@keyframes ${e.name} {\n`;for(let s of e.steps)t+=`    ${s.step} {\n${this.stylesToString(s.styles,"        ")}\n    }\n`;return t+="}",t}renderFontFace(e){let t="@font-face {\n";return t+=`    font-family: "${e.fontFamily}";\n`,t+=`    src: ${e.src};\n`,e.fontWeight&&(t+=`    font-weight: ${e.fontWeight};\n`),e.fontStyle&&(t+=`    font-style: ${e.fontStyle};\n`),e.fontDisplay&&(t+=`    font-display: ${e.fontDisplay};\n`),e.unicodeRange&&(t+=`    unicode-range: ${e.unicodeRange};\n`),t+="}",t}renderContainerRule(e){let t=`@container ${e.name?`${e.name} `:""}(${e.condition}) {\n`;for(let s of e.rules)t+=this.renderRule(s,"    ")+"\n";return t+="}",t}renderSupportsRule(e){let t=`@supports (${e.condition}) {\n`;for(let s of e.rules)t+=this.renderRule(s,"    ")+"\n";return t+="}",t}renderLayerRule(e){let t=`@layer ${e.name} {\n`;for(let s of e.rules)t+=this.renderRule(s,"    ")+"\n";return t+="}",t}render(...e){let t=[];if(this.imports.length>0&&t.push(this.imports.join("\n")),this._layerOrder.length>0&&t.push(`@layer ${this._layerOrder.join(", ")};`),this.variables.length>0){let e=this.variables.map(e=>`    ${e.name}: ${e.value};`).join("\n");t.push(`:root {\n${e}\n}`)}for(let e of this.fontFaces)t.push(this.renderFontFace(e));for(let e of this.keyframes)t.push(this.renderKeyframes(e));let s=[...this.rules],r=[...this.mediaRules],n=[],i=[...this.containerRules],l=[...this.supportsRules],u=[...this.layerRules];for(let t of e)t&&(Array.isArray(t)?s.push(...t):!("condition"in t)||!("rules"in t)||"name"in t&&"steps"in t?"name"in t&&"steps"in t?n.push(t):"name"in t&&"rules"in t?u.push(t):s.push(t):"type"in t?r.push(t):"name"in t&&"string"==typeof t.name?i.push(t):l.push(t));for(let e of n)t.push(this.renderKeyframes(e));for(let e of u)t.push(this.renderLayerRule(e));for(let e of s)t.push(this.renderRule(e));for(let e of l)t.push(this.renderSupportsRule(e));for(let e of i)t.push(this.renderContainerRule(e));for(let e of r)t.push(this.renderMediaRule(e));return t.join("\n\n")}inject(e){let t=this.render(),s=document.createElement("style");return e&&(s.id=e),s.textContent=t,document.head.appendChild(s),s}clear(){this.variables=[],this.rules=[],this.mediaRules=[],this.keyframes=[],this.fontFaces=[],this.imports=[],this.containerRules=[],this.supportsRules=[],this.layerRules=[],this._layerOrder=[]}};
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/style.ts
+var style_exports = {};
+__export(style_exports, {
+  CreateStyle: () => CreateStyle,
+  addAttribute: () => addAttribute,
+  addClass: () => addClass,
+  addContainer: () => addContainer,
+  addId: () => addId,
+  addName: () => addName,
+  addPseudoClass: () => addPseudoClass,
+  addPseudoElement: () => addPseudoElement,
+  addStyle: () => addStyle,
+  addTag: () => addTag,
+  addVar: () => addVar,
+  adjacentSibling: () => adjacentSibling,
+  attrContains: () => attrContains,
+  attrContainsWord: () => attrContainsWord,
+  attrEndsWith: () => attrEndsWith,
+  attrEquals: () => attrEquals,
+  attrStartsWith: () => attrStartsWith,
+  childStyle: () => childStyle,
+  clearStyle: () => clearStyle,
+  container: () => container,
+  default: () => style_default,
+  descendant: () => descendant,
+  fontFace: () => fontFace,
+  generalSibling: () => generalSibling,
+  getVar: () => getVar,
+  importStyle: () => importStyle,
+  important: () => important,
+  injectStyle: () => injectStyle,
+  keyframe: () => keyframe,
+  keyframeFromTo: () => keyframeFromTo,
+  layer: () => layer,
+  layerOrder: () => layerOrder,
+  mediaDark: () => mediaDark,
+  mediaLight: () => mediaLight,
+  mediaMaxWidth: () => mediaMaxWidth,
+  mediaMinWidth: () => mediaMinWidth,
+  mediaPrint: () => mediaPrint,
+  mediaReducedMotion: () => mediaReducedMotion,
+  mediaScreen: () => mediaScreen,
+  mediaStyle: () => mediaStyle,
+  multipleStyle: () => multipleStyle,
+  nesting: () => nesting,
+  renderStyle: () => renderStyle,
+  styles: () => styles,
+  supportsStyle: () => supportsStyle
+});
+module.exports = __toCommonJS(style_exports);
+var CreateStyle = class {
+  constructor() {
+    this.variables = [];
+    this.rules = [];
+    this.mediaRules = [];
+    this.keyframes = [];
+    this.fontFaces = [];
+    this.imports = [];
+    this.containerRules = [];
+    this.supportsRules = [];
+    this.layerRules = [];
+    this._layerOrder = [];
+  }
+  // CSS Variables
+  addVar(name, value) {
+    const cssVar = {
+      name: name.startsWith("--") ? name : `--${name}`,
+      value,
+      toString() {
+        return `var(${this.name})`;
+      }
+    };
+    this.variables.push(cssVar);
+    return cssVar;
+  }
+  var(variable, fallback) {
+    const varName = typeof variable === "string" ? variable.startsWith("--") ? variable : `--${variable}` : variable.name;
+    return fallback ? `var(${varName}, ${fallback})` : `var(${varName})`;
+  }
+  // Basic Selectors
+  addTag(tag, styles2) {
+    const rule = { selector: tag, styles: styles2, type: "tag" };
+    this.rules.push(rule);
+    return rule;
+  }
+  addClass(name, styles2) {
+    const selector = name.startsWith(".") ? name : `.${name}`;
+    const rule = { selector, styles: styles2, type: "class" };
+    this.rules.push(rule);
+    return rule;
+  }
+  addId(name, styles2) {
+    const selector = name.startsWith("#") ? name : `#${name}`;
+    const rule = { selector, styles: styles2, type: "id" };
+    this.rules.push(rule);
+    return rule;
+  }
+  // Pseudo Selectors
+  addPseudoClass(pseudo, styles2, baseSelector) {
+    const pseudoClass = pseudo.startsWith(":") ? pseudo : `:${pseudo}`;
+    const selector = baseSelector ? `${baseSelector}${pseudoClass}` : pseudoClass;
+    const rule = { selector, styles: styles2, type: "pseudo-class" };
+    this.rules.push(rule);
+    return rule;
+  }
+  addPseudoElement(pseudo, styles2, baseSelector) {
+    const pseudoElement = pseudo.startsWith("::") ? pseudo : `::${pseudo}`;
+    const selector = baseSelector ? `${baseSelector}${pseudoElement}` : pseudoElement;
+    const rule = { selector, styles: styles2, type: "pseudo-element" };
+    this.rules.push(rule);
+    return rule;
+  }
+  // Attribute Selectors
+  addAttribute(attr, styles2, baseSelector) {
+    const attrSelector = attr.startsWith("[") ? attr : `[${attr}]`;
+    const selector = baseSelector ? `${baseSelector}${attrSelector}` : attrSelector;
+    const rule = { selector, styles: styles2, type: "attribute" };
+    this.rules.push(rule);
+    return rule;
+  }
+  attrEquals(attr, value, styles2, baseSelector) {
+    return this.addAttribute(`${attr}="${value}"`, styles2, baseSelector);
+  }
+  attrContainsWord(attr, value, styles2, baseSelector) {
+    return this.addAttribute(`${attr}~="${value}"`, styles2, baseSelector);
+  }
+  attrStartsWith(attr, value, styles2, baseSelector) {
+    return this.addAttribute(`${attr}^="${value}"`, styles2, baseSelector);
+  }
+  attrEndsWith(attr, value, styles2, baseSelector) {
+    return this.addAttribute(`${attr}$="${value}"`, styles2, baseSelector);
+  }
+  attrContains(attr, value, styles2, baseSelector) {
+    return this.addAttribute(`${attr}*="${value}"`, styles2, baseSelector);
+  }
+  // Combinator Selectors
+  descendant(ancestor, descendant2, styles2) {
+    return this.createAndAddRule(`${ancestor} ${descendant2}`, styles2);
+  }
+  child(parent, childSel, styles2) {
+    return this.createAndAddRule(`${parent} > ${childSel}`, styles2);
+  }
+  adjacentSibling(element, sibling, styles2) {
+    return this.createAndAddRule(`${element} + ${sibling}`, styles2);
+  }
+  generalSibling(element, sibling, styles2) {
+    return this.createAndAddRule(`${element} ~ ${sibling}`, styles2);
+  }
+  multiple(selectors, styles2) {
+    return this.createAndAddRule(selectors.join(", "), styles2);
+  }
+  // Nesting (BEM-style)
+  addName(name, styles2) {
+    const selector = name.startsWith("--") ? `&${name}` : `&--${name}`;
+    const rule = { selector, styles: styles2, type: "name" };
+    return rule;
+  }
+  nesting(parentRule, ...childRules) {
+    parentRule.nested = childRules;
+    return parentRule;
+  }
+  // @keyframes - Animations
+  keyframe(name, steps) {
+    const keyframeSteps = Object.entries(steps).map(([step, styles2]) => ({
+      step: step === "from" ? "from" : step === "to" ? "to" : `${step}%`,
+      styles: styles2
+    }));
+    const kf = { name, steps: keyframeSteps };
+    this.keyframes.push(kf);
+    return kf;
+  }
+  keyframeFromTo(name, from, to) {
+    return this.keyframe(name, { from, to });
+  }
+  // @font-face - Custom Fonts
+  fontFace(options) {
+    this.fontFaces.push(options);
+    return options;
+  }
+  // @import - Import Stylesheets
+  import(url, mediaQuery) {
+    const importRule = mediaQuery ? `@import url("${url}") ${mediaQuery};` : `@import url("${url}");`;
+    this.imports.push(importRule);
+    return importRule;
+  }
+  // @media - Media Queries
+  media(type, condition, rules) {
+    const mediaRule = { type, condition, rules: this.rulesToCSSRules(rules) };
+    this.mediaRules.push(mediaRule);
+    return mediaRule;
+  }
+  mediaScreen(condition, rules) {
+    return this.media("screen", condition, rules);
+  }
+  mediaPrint(rules) {
+    return this.media("print", "", rules);
+  }
+  mediaMinWidth(minWidth, rules) {
+    return this.media("screen", `min-width: ${minWidth}`, rules);
+  }
+  mediaMaxWidth(maxWidth, rules) {
+    return this.media("screen", `max-width: ${maxWidth}`, rules);
+  }
+  mediaDark(rules) {
+    const mediaRule = { type: "", condition: "prefers-color-scheme: dark", rules: this.rulesToCSSRules(rules) };
+    this.mediaRules.push(mediaRule);
+    return mediaRule;
+  }
+  mediaLight(rules) {
+    const mediaRule = { type: "", condition: "prefers-color-scheme: light", rules: this.rulesToCSSRules(rules) };
+    this.mediaRules.push(mediaRule);
+    return mediaRule;
+  }
+  mediaReducedMotion(rules) {
+    const mediaRule = { type: "", condition: "prefers-reduced-motion: reduce", rules: this.rulesToCSSRules(rules) };
+    this.mediaRules.push(mediaRule);
+    return mediaRule;
+  }
+  // @container - Container Queries
+  container(condition, rules, name) {
+    const containerRule = { name, condition, rules: this.rulesToCSSRules(rules) };
+    this.containerRules.push(containerRule);
+    return containerRule;
+  }
+  addContainer(name, styles2) {
+    const containerStyles = { ...styles2, containerName: name };
+    return this.addClass(name, containerStyles);
+  }
+  // @supports - Feature Queries
+  supports(condition, rules) {
+    const supportsRule = { condition, rules: this.rulesToCSSRules(rules) };
+    this.supportsRules.push(supportsRule);
+    return supportsRule;
+  }
+  // @layer - Cascade Layers
+  layerOrder(...layers) {
+    this._layerOrder = layers;
+  }
+  layer(name, rules) {
+    const layerRule = { name, rules: this.rulesToCSSRules(rules) };
+    this.layerRules.push(layerRule);
+    return layerRule;
+  }
+  // Custom Rules
+  add(rules) {
+    const cssRules = Object.entries(rules).map(([selector, styles2]) => {
+      const rule = { selector, styles: styles2, type: "custom" };
+      this.rules.push(rule);
+      return rule;
+    });
+    return cssRules;
+  }
+  important(value) {
+    return `${value} !important`;
+  }
+  // Utility Methods
+  toKebabCase(str) {
+    return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  }
+  // Helper: Create and add rule (eliminates duplication in combinator selectors)
+  createAndAddRule(selector, styles2, type = "custom") {
+    const rule = { selector, styles: styles2, type };
+    this.rules.push(rule);
+    return rule;
+  }
+  // Helper: Convert rules object to CSSRule array (eliminates duplication in media/container/supports/layer)
+  rulesToCSSRules(rules) {
+    return Object.entries(rules).map(([selector, styles2]) => ({
+      selector,
+      styles: styles2,
+      type: "custom"
+    }));
+  }
+  // Helper: Render rules with indentation (eliminates duplication in render methods)
+  renderRulesWithIndent(rules, indent = "    ") {
+    return rules.map((rule) => this.renderRule(rule, indent)).join("\n");
+  }
+  stylesToString(styles2, indent = "    ") {
+    return Object.entries(styles2).map(([prop, value]) => {
+      const cssValue = typeof value === "object" && value !== null && "name" in value ? `var(${value.name})` : value;
+      return `${indent}${this.toKebabCase(prop)}: ${cssValue};`;
+    }).join("\n");
+  }
+  renderRule(rule, indent = "") {
+    let css = `${indent}${rule.selector} {
+${this.stylesToString(rule.styles, indent + "    ")}
+`;
+    if (rule.nested && rule.nested.length > 0) {
+      for (const nestedRule of rule.nested) {
+        const nestedSelector = nestedRule.selector.startsWith("&") ? nestedRule.selector.replace(/&/g, rule.selector) : `${rule.selector} ${nestedRule.selector}`;
+        css += `
+${indent}${nestedSelector} {
+${this.stylesToString(nestedRule.styles, indent + "    ")}
+${indent}}
+`;
+      }
+    }
+    css += `${indent}}`;
+    return css;
+  }
+  renderMediaRule(media) {
+    const condition = media.type && media.condition ? `${media.type} and (${media.condition})` : media.type ? media.type : `(${media.condition})`;
+    return `@media ${condition} {
+${this.renderRulesWithIndent(media.rules)}
+}`;
+  }
+  renderKeyframes(kf) {
+    let css = `@keyframes ${kf.name} {
+`;
+    for (const step of kf.steps) {
+      css += `    ${step.step} {
+${this.stylesToString(step.styles, "        ")}
+    }
+`;
+    }
+    css += "}";
+    return css;
+  }
+  renderFontFace(ff) {
+    let css = "@font-face {\n";
+    css += `    font-family: "${ff.fontFamily}";
+`;
+    css += `    src: ${ff.src};
+`;
+    if (ff.fontWeight) css += `    font-weight: ${ff.fontWeight};
+`;
+    if (ff.fontStyle) css += `    font-style: ${ff.fontStyle};
+`;
+    if (ff.fontDisplay) css += `    font-display: ${ff.fontDisplay};
+`;
+    if (ff.unicodeRange) css += `    unicode-range: ${ff.unicodeRange};
+`;
+    css += "}";
+    return css;
+  }
+  renderContainerRule(container2) {
+    const nameStr = container2.name ? `${container2.name} ` : "";
+    return `@container ${nameStr}(${container2.condition}) {
+${this.renderRulesWithIndent(container2.rules)}
+}`;
+  }
+  renderSupportsRule(supports) {
+    return `@supports (${supports.condition}) {
+${this.renderRulesWithIndent(supports.rules)}
+}`;
+  }
+  renderLayerRule(layer2) {
+    return `@layer ${layer2.name} {
+${this.renderRulesWithIndent(layer2.rules)}
+}`;
+  }
+  // Render Output
+  render(...additionalRules) {
+    const parts = [];
+    if (this.imports.length > 0) {
+      parts.push(this.imports.join("\n"));
+    }
+    if (this._layerOrder.length > 0) {
+      parts.push(`@layer ${this._layerOrder.join(", ")};`);
+    }
+    if (this.variables.length > 0) {
+      const varDeclarations = this.variables.map((v) => `    ${v.name}: ${v.value};`).join("\n");
+      parts.push(`:root {
+${varDeclarations}
+}`);
+    }
+    for (const ff of this.fontFaces) {
+      parts.push(this.renderFontFace(ff));
+    }
+    for (const kf of this.keyframes) {
+      parts.push(this.renderKeyframes(kf));
+    }
+    const allRules = [...this.rules];
+    const allMediaRules = [...this.mediaRules];
+    const allKeyframes = [];
+    const allContainerRules = [...this.containerRules];
+    const allSupportsRules = [...this.supportsRules];
+    const allLayerRules = [...this.layerRules];
+    for (const item of additionalRules) {
+      if (!item) continue;
+      if (Array.isArray(item)) {
+        allRules.push(...item);
+      } else if ("condition" in item && "rules" in item && !("name" in item && "steps" in item)) {
+        if ("type" in item) {
+          allMediaRules.push(item);
+        } else if ("name" in item && typeof item.name === "string") {
+          allContainerRules.push(item);
+        } else {
+          allSupportsRules.push(item);
+        }
+      } else if ("name" in item && "steps" in item) {
+        allKeyframes.push(item);
+      } else if ("name" in item && "rules" in item) {
+        allLayerRules.push(item);
+      } else {
+        allRules.push(item);
+      }
+    }
+    for (const kf of allKeyframes) {
+      parts.push(this.renderKeyframes(kf));
+    }
+    for (const layer2 of allLayerRules) {
+      parts.push(this.renderLayerRule(layer2));
+    }
+    for (const rule of allRules) {
+      parts.push(this.renderRule(rule));
+    }
+    for (const supports of allSupportsRules) {
+      parts.push(this.renderSupportsRule(supports));
+    }
+    for (const container2 of allContainerRules) {
+      parts.push(this.renderContainerRule(container2));
+    }
+    for (const media of allMediaRules) {
+      parts.push(this.renderMediaRule(media));
+    }
+    return parts.join("\n\n");
+  }
+  inject(styleId) {
+    const css = this.render();
+    const style = document.createElement("style");
+    if (styleId) style.id = styleId;
+    style.textContent = css;
+    document.head.appendChild(style);
+    return style;
+  }
+  clear() {
+    this.variables = [];
+    this.rules = [];
+    this.mediaRules = [];
+    this.keyframes = [];
+    this.fontFaces = [];
+    this.imports = [];
+    this.containerRules = [];
+    this.supportsRules = [];
+    this.layerRules = [];
+    this._layerOrder = [];
+  }
+};
+var styles = new CreateStyle();
+var {
+  addVar,
+  var: getVar,
+  addTag,
+  addClass,
+  addId,
+  addPseudoClass,
+  addPseudoElement,
+  addAttribute,
+  attrEquals,
+  attrContainsWord,
+  attrStartsWith,
+  attrEndsWith,
+  attrContains,
+  descendant,
+  child: childStyle,
+  adjacentSibling,
+  generalSibling,
+  multiple: multipleStyle,
+  addName,
+  nesting,
+  keyframe,
+  keyframeFromTo,
+  fontFace,
+  import: importStyle,
+  media: mediaStyle,
+  mediaScreen,
+  mediaPrint,
+  mediaMinWidth,
+  mediaMaxWidth,
+  mediaDark,
+  mediaLight,
+  mediaReducedMotion,
+  container,
+  addContainer,
+  supports: supportsStyle,
+  layerOrder,
+  layer,
+  add: addStyle,
+  important,
+  render: renderStyle,
+  inject: injectStyle,
+  clear: clearStyle
+} = styles;
+var style_default = styles;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CreateStyle,
+  addAttribute,
+  addClass,
+  addContainer,
+  addId,
+  addName,
+  addPseudoClass,
+  addPseudoElement,
+  addStyle,
+  addTag,
+  addVar,
+  adjacentSibling,
+  attrContains,
+  attrContainsWord,
+  attrEndsWith,
+  attrEquals,
+  attrStartsWith,
+  childStyle,
+  clearStyle,
+  container,
+  descendant,
+  fontFace,
+  generalSibling,
+  getVar,
+  importStyle,
+  important,
+  injectStyle,
+  keyframe,
+  keyframeFromTo,
+  layer,
+  layerOrder,
+  mediaDark,
+  mediaLight,
+  mediaMaxWidth,
+  mediaMinWidth,
+  mediaPrint,
+  mediaReducedMotion,
+  mediaScreen,
+  mediaStyle,
+  multipleStyle,
+  nesting,
+  renderStyle,
+  styles,
+  supportsStyle
+});