@pikacss/core 0.0.9 → 0.0.10

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-const ATOMIC_STYLE_NAME_PLACEHOLDER = "$$";
-const ATOMIC_STYLE_NAME_PLACEHOLDER_RE_GLOBAL = /\$\$/g;
+const ATOMIC_STYLE_ID_PLACEHOLDER = "$$";
+const ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL = /\$\$/g;
 
 const chars = [..."abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"];
 const numOfChars = chars.length;
@@ -61,6 +61,25 @@ function appendAutocompleteCssPropertyValues(config, property, ...values) {
   const current = config.autocomplete.cssProperties.get(property) || [];
   config.autocomplete.cssProperties.set(property, [...current, ...values]);
 }
+function renderCSSStyleBlocks(blocks, isFormatted, depth = 0) {
+  const blockIndent = isFormatted ? "  ".repeat(depth) : "";
+  const blockBodyIndent = isFormatted ? "  ".repeat(depth + 1) : "";
+  const selectorEnd = isFormatted ? " " : "";
+  const propertySpace = isFormatted ? " " : "";
+  const lineEnd = isFormatted ? "\n" : "";
+  const lines = [];
+  blocks.forEach(({ properties, children }, selector) => {
+    if (properties.length === 0 && children == null)
+      return;
+    lines.push(...[
+      `${blockIndent}${selector}${selectorEnd}{`,
+      ...properties.map(({ property, value }) => `${blockBodyIndent}${property}:${propertySpace}${value};`),
+      ...children != null ? [renderCSSStyleBlocks(children, isFormatted, depth + 1)] : [],
+      `${blockIndent}}`
+    ]);
+  });
+  return lines.join(lineEnd);
+}
 
 function replaceBySplitAndJoin(str, split, mapFn, join) {
   let splitted = str.split(split);
@@ -81,13 +100,13 @@ function normalizeSelectors({
     return [defaultSelector];
   const normalized = selectors.map((s) => s.replace(RE_SPLIT, ","));
   const lastSelector = selectors[selectors.length - 1];
-  if (lastSelector.includes(ATOMIC_STYLE_NAME_PLACEHOLDER) === false && lastSelector.includes(DEFAULT_SELECTOR_PLACEHOLDER) === false) {
+  if (lastSelector.includes(ATOMIC_STYLE_ID_PLACEHOLDER) === false && lastSelector.includes(DEFAULT_SELECTOR_PLACEHOLDER) === false) {
     normalized.push(DEFAULT_SELECTOR_PLACEHOLDER);
   }
   return normalized.map(
     (s) => replaceBySplitAndJoin(
       s,
-      ATOMIC_STYLE_NAME_PLACEHOLDER_RE_GLOBAL,
+      ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL,
       (a) => replaceBySplitAndJoin(
         a,
         ATTRIBUTE_SUFFIX_MATCH_RE_GLOBAL,
@@ -99,7 +118,7 @@ function normalizeSelectors({
         ),
         ATTRIBUTE_SUFFIX_MATCH
       ),
-      ATOMIC_STYLE_NAME_PLACEHOLDER
+      ATOMIC_STYLE_ID_PLACEHOLDER
     )
   );
 }
@@ -196,7 +215,7 @@ const hooks = {
   transformStyleItems: (plugins, styleItems) => execAsyncHook(plugins, "transformStyleItems", styleItems),
   transformStyleDefinitions: (plugins, styleDefinitions) => execAsyncHook(plugins, "transformStyleDefinitions", styleDefinitions),
   preflightUpdated: (plugins) => execSyncHook(plugins, "preflightUpdated", void 0),
-  atomicRuleAdded: (plugins) => execSyncHook(plugins, "atomicRuleAdded", void 0),
+  atomicStyleAdded: (plugins) => execSyncHook(plugins, "atomicStyleAdded", void 0),
   autocompleteConfigUpdated: (plugins) => execSyncHook(plugins, "autocompleteConfigUpdated", void 0)
 };
 const orderMap = /* @__PURE__ */ new Map([
@@ -268,15 +287,7 @@ function keyframes() {
       configList.forEach((config) => {
         const { name, frames, autocomplete: autocompleteAnimation } = resolveKeyframesConfig(config);
         if (frames != null) {
-          const css = [
-            `@keyframes ${name}{`,
-            ...Object.entries(frames).map(([frame, properties]) => (
-              // eslint-disable-next-line style/newline-per-chained-call
-              `${frame}{${Object.entries(properties).map(([property, value]) => `${property}:${value}`).join(";")}}`
-            )),
-            "}"
-          ].join("");
-          allKeyframes.set(name, css);
+          allKeyframes.set(name, frames);
         }
         autocomplete.animationName.push(name);
         autocomplete.animation.push(`${name} `);
@@ -285,9 +296,9 @@ function keyframes() {
       });
       appendAutocompleteCssPropertyValues(resolvedConfig, "animationName", ...autocomplete.animationName);
       appendAutocompleteCssPropertyValues(resolvedConfig, "animation", ...autocomplete.animation);
-      resolvedConfig.preflights.push((engine) => {
+      resolvedConfig.preflights.push((engine, isFormatted) => {
         const used = /* @__PURE__ */ new Set();
-        engine.store.atomicRules.forEach(({ content: { property, value } }) => {
+        engine.store.atomicStyles.forEach(({ content: { property, value } }) => {
           if (property === "animationName") {
             value.forEach((name) => used.add(name));
           } else if (property === "animation") {
@@ -301,8 +312,25 @@ function keyframes() {
             });
           }
         });
-        const content = Array.from(allKeyframes.entries()).filter(([name]) => used.has(name)).map(([, css]) => css).join("");
-        return content;
+        return renderCSSStyleBlocks(
+          new Map(Array.from(allKeyframes.entries()).filter(([name]) => used.has(name)).map(([name, frames]) => [
+            `@keyframes ${name}`,
+            {
+              properties: [],
+              children: new Map(Object.entries(frames).map(([frame, properties]) => [
+                frame,
+                {
+                  properties: Object.entries(properties).filter(([_, value]) => isNotNullish(value)).flatMap(([property, value]) => {
+                    if (Array.isArray(value))
+                      return value.map((v) => ({ property, value: String(v) }));
+                    return { property, value: String(value) };
+                  })
+                }
+              ]))
+            }
+          ])),
+          isFormatted
+        );
       });
     }
   });
@@ -664,15 +692,22 @@ function variables() {
         if (asProperty)
           appendAutocompleteExtraCssProperties(resolvedConfig, name);
         if (value != null)
-          allVariables.set(name, `${name}:${value}`);
+          allVariables.set(name, value);
       });
-      resolvedConfig.preflights.push((engine) => {
+      resolvedConfig.preflights.push((engine, isFormatted) => {
         const used = /* @__PURE__ */ new Set();
-        engine.store.atomicRules.forEach(({ content: { value } }) => {
+        engine.store.atomicStyles.forEach(({ content: { value } }) => {
           value.flatMap(extractUsedVarNames).forEach((name) => used.add(normalizeVariableName(name)));
         });
-        const content = Array.from(allVariables.entries()).filter(([name]) => used.has(name)).map(([, css]) => css).join(";");
-        return content === "" ? "" : `:root{${content}}`;
+        return renderCSSStyleBlocks(
+          /* @__PURE__ */ new Map([[
+            ":root",
+            {
+              properties: Array.from(allVariables.entries()).filter(([name]) => used.has(name)).map(([name, value]) => ({ property: name, value }))
+            }
+          ]]),
+          isFormatted
+        );
       });
     }
   });
@@ -707,8 +742,8 @@ class Engine {
   config;
   extract;
   store = {
-    atomicNames: /* @__PURE__ */ new Map(),
-    atomicRules: /* @__PURE__ */ new Map()
+    atomicStyleIds: /* @__PURE__ */ new Map(),
+    atomicStyles: /* @__PURE__ */ new Map()
   };
   constructor(config) {
     this.config = config;
@@ -723,8 +758,8 @@ class Engine {
   notifyPreflightUpdated() {
     hooks.preflightUpdated(this.config.plugins);
   }
-  notifyAtomicRuleAdded() {
-    hooks.atomicRuleAdded(this.config.plugins);
+  notifyAtomicStyleAdded() {
+    hooks.atomicStyleAdded(this.config.plugins);
   }
   notifyAutocompleteConfigUpdated() {
     hooks.autocompleteConfigUpdated(this.config.plugins);
@@ -762,53 +797,39 @@ class Engine {
       transformStyleItems: (styleItems) => hooks.transformStyleItems(this.config.plugins, styleItems),
       extractStyleDefinition: (styleDefinition) => this.extract(styleDefinition)
     });
-    const resolvedNames = [];
+    const resolvedIds = [];
     contents.forEach((content) => {
-      const name = getAtomicStyleName({
+      const id = getAtomicStyleId({
         content,
         prefix: this.config.prefix,
-        stored: this.store.atomicNames
+        stored: this.store.atomicStyleIds
       });
-      resolvedNames.push(name);
-      if (!this.store.atomicRules.has(name)) {
-        const added = {
-          name,
-          content
-        };
-        this.store.atomicRules.set(name, added);
-        this.notifyAtomicRuleAdded();
+      resolvedIds.push(id);
+      if (!this.store.atomicStyles.has(id)) {
+        this.store.atomicStyles.set(id, { id, content });
+        this.notifyAtomicStyleAdded();
       }
     });
-    return [...unknown, ...resolvedNames];
-  }
-  async renderPreviewStyles(...itemList) {
-    const nameList = await this.use(...itemList);
-    const targets = nameList.map((name) => this.store.atomicRules.get(name)).filter(isNotNullish);
-    return renderAtomicStyles({
-      atomicRules: targets,
-      isPreview: true
-    });
-  }
-  renderStyles() {
-    return [
-      this.renderPreflights(),
-      this.renderAtomicStyles()
-    ].join("");
+    return [...unknown, ...resolvedIds];
   }
-  renderPreflights() {
-    return this.config.preflights.map((p) => p(this)).join("");
+  renderPreflights(isFormatted) {
+    const lineEnd = isFormatted ? "\n" : "";
+    return this.config.preflights.map((p) => p(this, isFormatted)).join(lineEnd);
   }
-  renderAtomicStyles() {
+  renderAtomicStyles(isFormatted, options = {}) {
+    const { atomicStyleIds = null, isPreview = false } = options;
+    const atomicStyles = atomicStyleIds == null ? [...this.store.atomicStyles.values()] : atomicStyleIds.map((id) => this.store.atomicStyles.get(id)).filter(isNotNullish);
     return renderAtomicStyles({
-      atomicRules: [...this.store.atomicRules.values()],
-      isPreview: false
+      atomicStyles,
+      isPreview,
+      isFormatted
     });
   }
 }
 async function resolveEngineConfig(config) {
   const {
     prefix = "",
-    defaultSelector = `.${ATOMIC_STYLE_NAME_PLACEHOLDER}`,
+    defaultSelector = `.${ATOMIC_STYLE_ID_PLACEHOLDER}`,
     plugins = [],
     preflights = [],
     autocomplete = {}
@@ -838,7 +859,7 @@ async function resolveEngineConfig(config) {
   autocomplete.cssProperties?.forEach(([property, value]) => appendAutocompleteCssPropertyValues(resolvedConfig, property, ...[value].flat()));
   return resolvedConfig;
 }
-function getAtomicStyleName({
+function getAtomicStyleId({
   content,
   prefix,
   stored
@@ -848,9 +869,9 @@ function getAtomicStyleName({
   if (cached != null)
     return cached;
   const num = stored.size;
-  const name = `${prefix}${numberToChars(num)}`;
-  stored.set(key, name);
-  return name;
+  const id = `${prefix}${numberToChars(num)}`;
+  stored.set(key, id);
+  return id;
 }
 function optimizeAtomicStyleContents(list) {
   const map = /* @__PURE__ */ new Map();
@@ -881,49 +902,32 @@ async function resolveStyleItemList({
     contents: optimizeAtomicStyleContents(list)
   };
 }
-function prepareAtomicStyleBlocks({
-  atomicRules,
-  isPreview
-}) {
+function renderAtomicStyles(payload) {
+  const { atomicStyles, isPreview, isFormatted } = payload;
   const blocks = /* @__PURE__ */ new Map();
-  atomicRules.forEach(({ name, content: { selector, property, value } }) => {
-    const isValidSelector = selector.some((s) => s.includes(ATOMIC_STYLE_NAME_PLACEHOLDER));
+  atomicStyles.forEach(({ id, content: { selector, property, value } }) => {
+    const isValidSelector = selector.some((s) => s.includes(ATOMIC_STYLE_ID_PLACEHOLDER));
     if (isValidSelector === false || value == null)
       return;
     const renderObject = {
-      selector: isPreview ? selector : selector.map((s) => s.replace(ATOMIC_STYLE_NAME_PLACEHOLDER_RE_GLOBAL, name)),
-      content: Array.isArray(value) ? value.map((v) => `${property}:${v}`).join(";") : `${property}:${value}`
+      selector: isPreview ? selector : selector.map((s) => s.replace(ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL, id)),
+      properties: value.map((v) => ({ property, value: v }))
     };
     let currentBlocks = blocks;
     for (let i = 0; i < renderObject.selector.length; i++) {
       const s = renderObject.selector[i];
-      const block = currentBlocks.get(s) || { content: [] };
-      const isLast = i === renderObject.selector.length - 1;
-      if (isLast) {
-        block.content.push(renderObject.content);
-      } else {
-        block.children ||= /* @__PURE__ */ new Map();
-      }
-      currentBlocks.set(s, block);
-      if (isLast === false)
-        currentBlocks = block.children;
+      const blockBody = currentBlocks.get(s) || { properties: [] };
+      const isLastSelector = i === renderObject.selector.length - 1;
+      if (isLastSelector)
+        blockBody.properties.push(...renderObject.properties);
+      else
+        blockBody.children ||= /* @__PURE__ */ new Map();
+      currentBlocks.set(s, blockBody);
+      if (isLastSelector === false)
+        currentBlocks = blockBody.children;
     }
   });
-  return blocks;
-}
-function renderAtomicStyleBlocks(blocks) {
-  let rendered = "";
-  blocks.forEach((block, selector) => {
-    rendered += `${selector}{${block.content.join(";")}`;
-    if (block.children != null)
-      rendered += renderAtomicStyleBlocks(block.children);
-    rendered += "}";
-  });
-  return rendered;
-}
-function renderAtomicStyles(payload) {
-  const blocks = prepareAtomicStyleBlocks(payload);
-  return renderAtomicStyleBlocks(blocks);
+  return renderCSSStyleBlocks(blocks, isFormatted);
 }
 
 function createDefineEnginePluginFn() {
@@ -950,3 +954,4 @@ exports.createDefineEnginePluginFn = createDefineEnginePluginFn;
 exports.createEngine = createEngine;
 exports.defineEngineConfig = defineEngineConfig;
 exports.defineEnginePlugin = defineEnginePlugin;
+exports.renderCSSStyleBlocks = renderCSSStyleBlocks;

package/dist/index.d.cts

@@ -7,12 +7,12 @@ declare class Engine {
     config: ResolvedEngineConfig;
     extract: ExtractFn;
     store: {
-        atomicNames: Map<string, string>;
-        atomicRules: Map<string, AtomicStyle>;
+        atomicStyleIds: Map<string, string>;
+        atomicStyles: Map<string, AtomicStyle>;
     };
     constructor(config: ResolvedEngineConfig);
     notifyPreflightUpdated(): void;
-    notifyAtomicRuleAdded(): void;
+    notifyAtomicStyleAdded(): void;
     notifyAutocompleteConfigUpdated(): void;
     appendAutocompleteSelectors(...selectors: string[]): void;
     appendAutocompleteStyleItemStrings(...styleItemStrings: string[]): void;
@@ -21,10 +21,11 @@ declare class Engine {
     appendAutocompletePropertyValues(property: string, ...tsTypes: string[]): void;
     appendAutocompleteCssPropertyValues(property: string, ...values: (string | number)[]): void;
     use(...itemList: StyleItem$1[]): Promise<string[]>;
-    renderPreviewStyles(...itemList: StyleItem$1[]): Promise<string>;
-    renderStyles(): string;
-    renderPreflights(): string;
-    renderAtomicStyles(): string;
+    renderPreflights(isFormatted: boolean): string;
+    renderAtomicStyles(isFormatted: boolean, options?: {
+        atomicStyleIds?: string[];
+        isPreview?: boolean;
+    }): string;
 }
 
 type DefineHooks<Hooks extends Record<string, [type: 'sync' | 'async', payload: any, returnValue?: any]>> = Hooks;
@@ -37,7 +38,7 @@ type EngineHooksDefinition<_CustomConfig, _Selector extends string, _CSSProperty
     transformStyleItems: ['async', styleItems: _StyleItem[]];
     transformStyleDefinitions: ['async', styleDefinitions: _StyleDefinition[]];
     preflightUpdated: ['sync', void];
-    atomicRuleAdded: ['sync', void];
+    atomicStyleAdded: ['sync', void];
     autocompleteConfigUpdated: ['sync', void];
 }>;
 type EnginePluginHooksOptions<_CustomConfig, _Selector extends string, _CSSProperty extends string, _Properties, _StyleDefinition, _StyleItem> = {
@@ -100,9 +101,17 @@ interface AtomicStyleContent {
     value: string[];
 }
 interface AtomicStyle {
-    name: string;
+    id: string;
     content: AtomicStyleContent;
 }
+interface CSSStyleBlockBody {
+    properties: {
+        property: string;
+        value: string;
+    }[];
+    children?: CSSStyleBlocks;
+}
+type CSSStyleBlocks = Map<string, CSSStyleBlockBody>;
 
 interface Frames<_Properties = Properties$1> {
     from: _Properties;
@@ -115,7 +124,7 @@ type KeyframesConfig<_Properties = Properties$1> = string | [name: string, frame
     autocomplete?: string[];
 };
 
-type PreflightFn = (engine: Engine) => string;
+type PreflightFn = (engine: Engine, isFormatted: boolean) => string;
 /**
  * PreflightConfig can be a string or a function that returns a string.
  *
@@ -178,27 +187,27 @@ interface EngineConfig<_Plugins extends EnginePlugin[] = EnginePlugin[], _Select
      */
     plugins?: [..._Plugins];
     /**
-     * Set the prefix for generated atomic class names.
+     * Set the prefix for generated atomic style id.
      *
      * @default ''
      * @example
      * ```ts
      * {
-     *   prefix: 'pika-' // Generated class names will be like 'pika-xxx'
+     *   prefix: 'pika-' // Generated atomic id will be 'pika-xxx'
      * }
      * ```
      */
     prefix?: string;
     /**
-     * Set the default selector format. '$$' will be replaced with the atomic style name.
+     * Set the default selector format. '$$' will be replaced with the atomic style id.
      *
      * @default '.$$'
      * @example
      * ```ts
      * {
-     *   defaultSelector: '.$$' // Use class attribute: <div class="a b c">
+     *   defaultSelector: '.$$' // Use with class attribute: <div class="a b c">
      *   // or
-     *   defaultSelector: '[data-pika~="$$"]' // Use attribute selector: <div data-pika="a b c">
+     *   defaultSelector: '[data-pika~="$$"]' // Use with attribute selector: <div data-pika="a b c">
      * }
      * ```
      */
@@ -401,10 +410,11 @@ declare function appendAutocompleteExtraProperties(config: Pick<ResolvedEngineCo
 declare function appendAutocompleteExtraCssProperties(config: Pick<ResolvedEngineConfig, 'autocomplete'>, ...properties: string[]): void;
 declare function appendAutocompletePropertyValues(config: Pick<ResolvedEngineConfig, 'autocomplete'>, property: string, ...tsTypes: string[]): void;
 declare function appendAutocompleteCssPropertyValues(config: Pick<ResolvedEngineConfig, 'autocomplete'>, property: string, ...values: (string | number)[]): void;
+declare function renderCSSStyleBlocks(blocks: CSSStyleBlocks, isFormatted: boolean, depth?: number): string;
 
 declare function createDefineEnginePluginFn<A extends Autocomplete = EmptyAutocomplete>(): <C extends Record<string, any>>(plugin: EnginePlugin<C, A["Selector"] | CSSSelectors, A["ExtraCssProperty"] | CSSProperty, Properties<A>, StyleDefinition<A>, StyleItem<A>>) => EnginePlugin<C>;
 declare const defineEnginePlugin: <C extends Record<string, any>>(plugin: EnginePlugin<C, CSSSelectors, keyof CSSProperties, Properties<EmptyAutocomplete>, StyleDefinition<EmptyAutocomplete>, StyleItem<EmptyAutocomplete>>) => EnginePlugin<C, string, string, Properties$1, StyleDefinition$1, StyleItem$1>;
 declare function createDefineEngineConfigFn<A extends Autocomplete = EmptyAutocomplete>(): <P extends EnginePlugin[] = []>(config: EngineConfig<P, A["Selector"] | CSSSelectors, A["ExtraCssProperty"] | CSSProperty, Properties<A>, StyleDefinition<A>, StyleItem<A>> & PluginsCustomConfig<P>) => EngineConfig<P> & PluginsCustomConfig<P>;
 declare const defineEngineConfig: <P extends EnginePlugin[] = []>(config: EngineConfig<P, CSSSelectors, keyof CSSProperties, Properties<EmptyAutocomplete>, StyleDefinition<EmptyAutocomplete>, StyleItem<EmptyAutocomplete>> & PluginsCustomConfig<P, {}>) => EngineConfig<P, string, string, Properties$1, StyleDefinition$1, StyleItem$1> & PluginsCustomConfig<P, {}>;
 
-export { type Arrayable, type Autocomplete, type Awaitable, type EmptyAutocomplete, Engine, type EngineConfig, type EnginePlugin, type FromKebab, type GetValue, type IsEqual, type PluginsCustomConfig, type Properties, type Simplify, type StyleDefinition, type StyleItem, type ToKebab, type UnionNumber, type UnionString, type UnionToIntersection, appendAutocompleteCssPropertyValues, appendAutocompleteExtraCssProperties, appendAutocompleteExtraProperties, appendAutocompletePropertyValues, appendAutocompleteSelectors, appendAutocompleteStyleItemStrings, createDefineEngineConfigFn, createDefineEnginePluginFn, createEngine, defineEngineConfig, defineEnginePlugin };
+export { type Arrayable, type Autocomplete, type Awaitable, type CSSStyleBlockBody, type CSSStyleBlocks, type EmptyAutocomplete, Engine, type EngineConfig, type EnginePlugin, type FromKebab, type GetValue, type IsEqual, type PluginsCustomConfig, type Properties, type Simplify, type StyleDefinition, type StyleItem, type ToKebab, type UnionNumber, type UnionString, type UnionToIntersection, appendAutocompleteCssPropertyValues, appendAutocompleteExtraCssProperties, appendAutocompleteExtraProperties, appendAutocompletePropertyValues, appendAutocompleteSelectors, appendAutocompleteStyleItemStrings, createDefineEngineConfigFn, createDefineEnginePluginFn, createEngine, defineEngineConfig, defineEnginePlugin, renderCSSStyleBlocks };

package/dist/index.d.mts

@@ -7,12 +7,12 @@ declare class Engine {
     config: ResolvedEngineConfig;
     extract: ExtractFn;
     store: {
-        atomicNames: Map<string, string>;
-        atomicRules: Map<string, AtomicStyle>;
+        atomicStyleIds: Map<string, string>;
+        atomicStyles: Map<string, AtomicStyle>;
     };
     constructor(config: ResolvedEngineConfig);
     notifyPreflightUpdated(): void;
-    notifyAtomicRuleAdded(): void;
+    notifyAtomicStyleAdded(): void;
     notifyAutocompleteConfigUpdated(): void;
     appendAutocompleteSelectors(...selectors: string[]): void;
     appendAutocompleteStyleItemStrings(...styleItemStrings: string[]): void;
@@ -21,10 +21,11 @@ declare class Engine {
     appendAutocompletePropertyValues(property: string, ...tsTypes: string[]): void;
     appendAutocompleteCssPropertyValues(property: string, ...values: (string | number)[]): void;
     use(...itemList: StyleItem$1[]): Promise<string[]>;
-    renderPreviewStyles(...itemList: StyleItem$1[]): Promise<string>;
-    renderStyles(): string;
-    renderPreflights(): string;
-    renderAtomicStyles(): string;
+    renderPreflights(isFormatted: boolean): string;
+    renderAtomicStyles(isFormatted: boolean, options?: {
+        atomicStyleIds?: string[];
+        isPreview?: boolean;
+    }): string;
 }
 
 type DefineHooks<Hooks extends Record<string, [type: 'sync' | 'async', payload: any, returnValue?: any]>> = Hooks;
@@ -37,7 +38,7 @@ type EngineHooksDefinition<_CustomConfig, _Selector extends string, _CSSProperty
     transformStyleItems: ['async', styleItems: _StyleItem[]];
     transformStyleDefinitions: ['async', styleDefinitions: _StyleDefinition[]];
     preflightUpdated: ['sync', void];
-    atomicRuleAdded: ['sync', void];
+    atomicStyleAdded: ['sync', void];
     autocompleteConfigUpdated: ['sync', void];
 }>;
 type EnginePluginHooksOptions<_CustomConfig, _Selector extends string, _CSSProperty extends string, _Properties, _StyleDefinition, _StyleItem> = {
@@ -100,9 +101,17 @@ interface AtomicStyleContent {
     value: string[];
 }
 interface AtomicStyle {
-    name: string;
+    id: string;
     content: AtomicStyleContent;
 }
+interface CSSStyleBlockBody {
+    properties: {
+        property: string;
+        value: string;
+    }[];
+    children?: CSSStyleBlocks;
+}
+type CSSStyleBlocks = Map<string, CSSStyleBlockBody>;
 
 interface Frames<_Properties = Properties$1> {
     from: _Properties;
@@ -115,7 +124,7 @@ type KeyframesConfig<_Properties = Properties$1> = string | [name: string, frame
     autocomplete?: string[];
 };
 
-type PreflightFn = (engine: Engine) => string;
+type PreflightFn = (engine: Engine, isFormatted: boolean) => string;
 /**
  * PreflightConfig can be a string or a function that returns a string.
  *
@@ -178,27 +187,27 @@ interface EngineConfig<_Plugins extends EnginePlugin[] = EnginePlugin[], _Select
      */
     plugins?: [..._Plugins];
     /**
-     * Set the prefix for generated atomic class names.
+     * Set the prefix for generated atomic style id.
      *
      * @default ''
      * @example
      * ```ts
      * {
-     *   prefix: 'pika-' // Generated class names will be like 'pika-xxx'
+     *   prefix: 'pika-' // Generated atomic id will be 'pika-xxx'
      * }
      * ```
      */
     prefix?: string;
     /**
-     * Set the default selector format. '$$' will be replaced with the atomic style name.
+     * Set the default selector format. '$$' will be replaced with the atomic style id.
      *
      * @default '.$$'
      * @example
      * ```ts
      * {
-     *   defaultSelector: '.$$' // Use class attribute: <div class="a b c">
+     *   defaultSelector: '.$$' // Use with class attribute: <div class="a b c">
      *   // or
-     *   defaultSelector: '[data-pika~="$$"]' // Use attribute selector: <div data-pika="a b c">
+     *   defaultSelector: '[data-pika~="$$"]' // Use with attribute selector: <div data-pika="a b c">
      * }
      * ```
      */
@@ -401,10 +410,11 @@ declare function appendAutocompleteExtraProperties(config: Pick<ResolvedEngineCo
 declare function appendAutocompleteExtraCssProperties(config: Pick<ResolvedEngineConfig, 'autocomplete'>, ...properties: string[]): void;
 declare function appendAutocompletePropertyValues(config: Pick<ResolvedEngineConfig, 'autocomplete'>, property: string, ...tsTypes: string[]): void;
 declare function appendAutocompleteCssPropertyValues(config: Pick<ResolvedEngineConfig, 'autocomplete'>, property: string, ...values: (string | number)[]): void;
+declare function renderCSSStyleBlocks(blocks: CSSStyleBlocks, isFormatted: boolean, depth?: number): string;
 
 declare function createDefineEnginePluginFn<A extends Autocomplete = EmptyAutocomplete>(): <C extends Record<string, any>>(plugin: EnginePlugin<C, A["Selector"] | CSSSelectors, A["ExtraCssProperty"] | CSSProperty, Properties<A>, StyleDefinition<A>, StyleItem<A>>) => EnginePlugin<C>;
 declare const defineEnginePlugin: <C extends Record<string, any>>(plugin: EnginePlugin<C, CSSSelectors, keyof CSSProperties, Properties<EmptyAutocomplete>, StyleDefinition<EmptyAutocomplete>, StyleItem<EmptyAutocomplete>>) => EnginePlugin<C, string, string, Properties$1, StyleDefinition$1, StyleItem$1>;
 declare function createDefineEngineConfigFn<A extends Autocomplete = EmptyAutocomplete>(): <P extends EnginePlugin[] = []>(config: EngineConfig<P, A["Selector"] | CSSSelectors, A["ExtraCssProperty"] | CSSProperty, Properties<A>, StyleDefinition<A>, StyleItem<A>> & PluginsCustomConfig<P>) => EngineConfig<P> & PluginsCustomConfig<P>;
 declare const defineEngineConfig: <P extends EnginePlugin[] = []>(config: EngineConfig<P, CSSSelectors, keyof CSSProperties, Properties<EmptyAutocomplete>, StyleDefinition<EmptyAutocomplete>, StyleItem<EmptyAutocomplete>> & PluginsCustomConfig<P, {}>) => EngineConfig<P, string, string, Properties$1, StyleDefinition$1, StyleItem$1> & PluginsCustomConfig<P, {}>;
 
-export { type Arrayable, type Autocomplete, type Awaitable, type EmptyAutocomplete, Engine, type EngineConfig, type EnginePlugin, type FromKebab, type GetValue, type IsEqual, type PluginsCustomConfig, type Properties, type Simplify, type StyleDefinition, type StyleItem, type ToKebab, type UnionNumber, type UnionString, type UnionToIntersection, appendAutocompleteCssPropertyValues, appendAutocompleteExtraCssProperties, appendAutocompleteExtraProperties, appendAutocompletePropertyValues, appendAutocompleteSelectors, appendAutocompleteStyleItemStrings, createDefineEngineConfigFn, createDefineEnginePluginFn, createEngine, defineEngineConfig, defineEnginePlugin };
+export { type Arrayable, type Autocomplete, type Awaitable, type CSSStyleBlockBody, type CSSStyleBlocks, type EmptyAutocomplete, Engine, type EngineConfig, type EnginePlugin, type FromKebab, type GetValue, type IsEqual, type PluginsCustomConfig, type Properties, type Simplify, type StyleDefinition, type StyleItem, type ToKebab, type UnionNumber, type UnionString, type UnionToIntersection, appendAutocompleteCssPropertyValues, appendAutocompleteExtraCssProperties, appendAutocompleteExtraProperties, appendAutocompletePropertyValues, appendAutocompleteSelectors, appendAutocompleteStyleItemStrings, createDefineEngineConfigFn, createDefineEnginePluginFn, createEngine, defineEngineConfig, defineEnginePlugin, renderCSSStyleBlocks };

package/dist/index.d.ts

@@ -7,12 +7,12 @@ declare class Engine {
     config: ResolvedEngineConfig;
     extract: ExtractFn;
     store: {
-        atomicNames: Map<string, string>;
-        atomicRules: Map<string, AtomicStyle>;
+        atomicStyleIds: Map<string, string>;
+        atomicStyles: Map<string, AtomicStyle>;
     };
     constructor(config: ResolvedEngineConfig);
     notifyPreflightUpdated(): void;
-    notifyAtomicRuleAdded(): void;
+    notifyAtomicStyleAdded(): void;
     notifyAutocompleteConfigUpdated(): void;
     appendAutocompleteSelectors(...selectors: string[]): void;
     appendAutocompleteStyleItemStrings(...styleItemStrings: string[]): void;
@@ -21,10 +21,11 @@ declare class Engine {
     appendAutocompletePropertyValues(property: string, ...tsTypes: string[]): void;
     appendAutocompleteCssPropertyValues(property: string, ...values: (string | number)[]): void;
     use(...itemList: StyleItem$1[]): Promise<string[]>;
-    renderPreviewStyles(...itemList: StyleItem$1[]): Promise<string>;
-    renderStyles(): string;
-    renderPreflights(): string;
-    renderAtomicStyles(): string;
+    renderPreflights(isFormatted: boolean): string;
+    renderAtomicStyles(isFormatted: boolean, options?: {
+        atomicStyleIds?: string[];
+        isPreview?: boolean;
+    }): string;
 }
 
 type DefineHooks<Hooks extends Record<string, [type: 'sync' | 'async', payload: any, returnValue?: any]>> = Hooks;
@@ -37,7 +38,7 @@ type EngineHooksDefinition<_CustomConfig, _Selector extends string, _CSSProperty
     transformStyleItems: ['async', styleItems: _StyleItem[]];
     transformStyleDefinitions: ['async', styleDefinitions: _StyleDefinition[]];
     preflightUpdated: ['sync', void];
-    atomicRuleAdded: ['sync', void];
+    atomicStyleAdded: ['sync', void];
     autocompleteConfigUpdated: ['sync', void];
 }>;
 type EnginePluginHooksOptions<_CustomConfig, _Selector extends string, _CSSProperty extends string, _Properties, _StyleDefinition, _StyleItem> = {
@@ -100,9 +101,17 @@ interface AtomicStyleContent {
     value: string[];
 }
 interface AtomicStyle {
-    name: string;
+    id: string;
     content: AtomicStyleContent;
 }
+interface CSSStyleBlockBody {
+    properties: {
+        property: string;
+        value: string;
+    }[];
+    children?: CSSStyleBlocks;
+}
+type CSSStyleBlocks = Map<string, CSSStyleBlockBody>;
 
 interface Frames<_Properties = Properties$1> {
     from: _Properties;
@@ -115,7 +124,7 @@ type KeyframesConfig<_Properties = Properties$1> = string | [name: string, frame
     autocomplete?: string[];
 };
 
-type PreflightFn = (engine: Engine) => string;
+type PreflightFn = (engine: Engine, isFormatted: boolean) => string;
 /**
  * PreflightConfig can be a string or a function that returns a string.
  *
@@ -178,27 +187,27 @@ interface EngineConfig<_Plugins extends EnginePlugin[] = EnginePlugin[], _Select
      */
     plugins?: [..._Plugins];
     /**
-     * Set the prefix for generated atomic class names.
+     * Set the prefix for generated atomic style id.
      *
      * @default ''
      * @example
      * ```ts
      * {
-     *   prefix: 'pika-' // Generated class names will be like 'pika-xxx'
+     *   prefix: 'pika-' // Generated atomic id will be 'pika-xxx'
      * }
      * ```
      */
     prefix?: string;
     /**
-     * Set the default selector format. '$$' will be replaced with the atomic style name.
+     * Set the default selector format. '$$' will be replaced with the atomic style id.
      *
      * @default '.$$'
      * @example
      * ```ts
      * {
-     *   defaultSelector: '.$$' // Use class attribute: <div class="a b c">
+     *   defaultSelector: '.$$' // Use with class attribute: <div class="a b c">
      *   // or
-     *   defaultSelector: '[data-pika~="$$"]' // Use attribute selector: <div data-pika="a b c">
+     *   defaultSelector: '[data-pika~="$$"]' // Use with attribute selector: <div data-pika="a b c">
      * }
      * ```
      */
@@ -401,10 +410,11 @@ declare function appendAutocompleteExtraProperties(config: Pick<ResolvedEngineCo
 declare function appendAutocompleteExtraCssProperties(config: Pick<ResolvedEngineConfig, 'autocomplete'>, ...properties: string[]): void;
 declare function appendAutocompletePropertyValues(config: Pick<ResolvedEngineConfig, 'autocomplete'>, property: string, ...tsTypes: string[]): void;
 declare function appendAutocompleteCssPropertyValues(config: Pick<ResolvedEngineConfig, 'autocomplete'>, property: string, ...values: (string | number)[]): void;
+declare function renderCSSStyleBlocks(blocks: CSSStyleBlocks, isFormatted: boolean, depth?: number): string;
 
 declare function createDefineEnginePluginFn<A extends Autocomplete = EmptyAutocomplete>(): <C extends Record<string, any>>(plugin: EnginePlugin<C, A["Selector"] | CSSSelectors, A["ExtraCssProperty"] | CSSProperty, Properties<A>, StyleDefinition<A>, StyleItem<A>>) => EnginePlugin<C>;
 declare const defineEnginePlugin: <C extends Record<string, any>>(plugin: EnginePlugin<C, CSSSelectors, keyof CSSProperties, Properties<EmptyAutocomplete>, StyleDefinition<EmptyAutocomplete>, StyleItem<EmptyAutocomplete>>) => EnginePlugin<C, string, string, Properties$1, StyleDefinition$1, StyleItem$1>;
 declare function createDefineEngineConfigFn<A extends Autocomplete = EmptyAutocomplete>(): <P extends EnginePlugin[] = []>(config: EngineConfig<P, A["Selector"] | CSSSelectors, A["ExtraCssProperty"] | CSSProperty, Properties<A>, StyleDefinition<A>, StyleItem<A>> & PluginsCustomConfig<P>) => EngineConfig<P> & PluginsCustomConfig<P>;
 declare const defineEngineConfig: <P extends EnginePlugin[] = []>(config: EngineConfig<P, CSSSelectors, keyof CSSProperties, Properties<EmptyAutocomplete>, StyleDefinition<EmptyAutocomplete>, StyleItem<EmptyAutocomplete>> & PluginsCustomConfig<P, {}>) => EngineConfig<P, string, string, Properties$1, StyleDefinition$1, StyleItem$1> & PluginsCustomConfig<P, {}>;
 
-export { type Arrayable, type Autocomplete, type Awaitable, type EmptyAutocomplete, Engine, type EngineConfig, type EnginePlugin, type FromKebab, type GetValue, type IsEqual, type PluginsCustomConfig, type Properties, type Simplify, type StyleDefinition, type StyleItem, type ToKebab, type UnionNumber, type UnionString, type UnionToIntersection, appendAutocompleteCssPropertyValues, appendAutocompleteExtraCssProperties, appendAutocompleteExtraProperties, appendAutocompletePropertyValues, appendAutocompleteSelectors, appendAutocompleteStyleItemStrings, createDefineEngineConfigFn, createDefineEnginePluginFn, createEngine, defineEngineConfig, defineEnginePlugin };
+export { type Arrayable, type Autocomplete, type Awaitable, type CSSStyleBlockBody, type CSSStyleBlocks, type EmptyAutocomplete, Engine, type EngineConfig, type EnginePlugin, type FromKebab, type GetValue, type IsEqual, type PluginsCustomConfig, type Properties, type Simplify, type StyleDefinition, type StyleItem, type ToKebab, type UnionNumber, type UnionString, type UnionToIntersection, appendAutocompleteCssPropertyValues, appendAutocompleteExtraCssProperties, appendAutocompleteExtraProperties, appendAutocompletePropertyValues, appendAutocompleteSelectors, appendAutocompleteStyleItemStrings, createDefineEngineConfigFn, createDefineEnginePluginFn, createEngine, defineEngineConfig, defineEnginePlugin, renderCSSStyleBlocks };

package/dist/index.mjs

@@ -1,5 +1,5 @@
-const ATOMIC_STYLE_NAME_PLACEHOLDER = "$$";
-const ATOMIC_STYLE_NAME_PLACEHOLDER_RE_GLOBAL = /\$\$/g;
+const ATOMIC_STYLE_ID_PLACEHOLDER = "$$";
+const ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL = /\$\$/g;
 
 const chars = [..."abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"];
 const numOfChars = chars.length;
@@ -59,6 +59,25 @@ function appendAutocompleteCssPropertyValues(config, property, ...values) {
   const current = config.autocomplete.cssProperties.get(property) || [];
   config.autocomplete.cssProperties.set(property, [...current, ...values]);
 }
+function renderCSSStyleBlocks(blocks, isFormatted, depth = 0) {
+  const blockIndent = isFormatted ? "  ".repeat(depth) : "";
+  const blockBodyIndent = isFormatted ? "  ".repeat(depth + 1) : "";
+  const selectorEnd = isFormatted ? " " : "";
+  const propertySpace = isFormatted ? " " : "";
+  const lineEnd = isFormatted ? "\n" : "";
+  const lines = [];
+  blocks.forEach(({ properties, children }, selector) => {
+    if (properties.length === 0 && children == null)
+      return;
+    lines.push(...[
+      `${blockIndent}${selector}${selectorEnd}{`,
+      ...properties.map(({ property, value }) => `${blockBodyIndent}${property}:${propertySpace}${value};`),
+      ...children != null ? [renderCSSStyleBlocks(children, isFormatted, depth + 1)] : [],
+      `${blockIndent}}`
+    ]);
+  });
+  return lines.join(lineEnd);
+}
 
 function replaceBySplitAndJoin(str, split, mapFn, join) {
   let splitted = str.split(split);
@@ -79,13 +98,13 @@ function normalizeSelectors({
     return [defaultSelector];
   const normalized = selectors.map((s) => s.replace(RE_SPLIT, ","));
   const lastSelector = selectors[selectors.length - 1];
-  if (lastSelector.includes(ATOMIC_STYLE_NAME_PLACEHOLDER) === false && lastSelector.includes(DEFAULT_SELECTOR_PLACEHOLDER) === false) {
+  if (lastSelector.includes(ATOMIC_STYLE_ID_PLACEHOLDER) === false && lastSelector.includes(DEFAULT_SELECTOR_PLACEHOLDER) === false) {
     normalized.push(DEFAULT_SELECTOR_PLACEHOLDER);
   }
   return normalized.map(
     (s) => replaceBySplitAndJoin(
       s,
-      ATOMIC_STYLE_NAME_PLACEHOLDER_RE_GLOBAL,
+      ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL,
       (a) => replaceBySplitAndJoin(
         a,
         ATTRIBUTE_SUFFIX_MATCH_RE_GLOBAL,
@@ -97,7 +116,7 @@ function normalizeSelectors({
         ),
         ATTRIBUTE_SUFFIX_MATCH
       ),
-      ATOMIC_STYLE_NAME_PLACEHOLDER
+      ATOMIC_STYLE_ID_PLACEHOLDER
     )
   );
 }
@@ -194,7 +213,7 @@ const hooks = {
   transformStyleItems: (plugins, styleItems) => execAsyncHook(plugins, "transformStyleItems", styleItems),
   transformStyleDefinitions: (plugins, styleDefinitions) => execAsyncHook(plugins, "transformStyleDefinitions", styleDefinitions),
   preflightUpdated: (plugins) => execSyncHook(plugins, "preflightUpdated", void 0),
-  atomicRuleAdded: (plugins) => execSyncHook(plugins, "atomicRuleAdded", void 0),
+  atomicStyleAdded: (plugins) => execSyncHook(plugins, "atomicStyleAdded", void 0),
   autocompleteConfigUpdated: (plugins) => execSyncHook(plugins, "autocompleteConfigUpdated", void 0)
 };
 const orderMap = /* @__PURE__ */ new Map([
@@ -266,15 +285,7 @@ function keyframes() {
       configList.forEach((config) => {
         const { name, frames, autocomplete: autocompleteAnimation } = resolveKeyframesConfig(config);
         if (frames != null) {
-          const css = [
-            `@keyframes ${name}{`,
-            ...Object.entries(frames).map(([frame, properties]) => (
-              // eslint-disable-next-line style/newline-per-chained-call
-              `${frame}{${Object.entries(properties).map(([property, value]) => `${property}:${value}`).join(";")}}`
-            )),
-            "}"
-          ].join("");
-          allKeyframes.set(name, css);
+          allKeyframes.set(name, frames);
         }
         autocomplete.animationName.push(name);
         autocomplete.animation.push(`${name} `);
@@ -283,9 +294,9 @@ function keyframes() {
       });
       appendAutocompleteCssPropertyValues(resolvedConfig, "animationName", ...autocomplete.animationName);
       appendAutocompleteCssPropertyValues(resolvedConfig, "animation", ...autocomplete.animation);
-      resolvedConfig.preflights.push((engine) => {
+      resolvedConfig.preflights.push((engine, isFormatted) => {
         const used = /* @__PURE__ */ new Set();
-        engine.store.atomicRules.forEach(({ content: { property, value } }) => {
+        engine.store.atomicStyles.forEach(({ content: { property, value } }) => {
           if (property === "animationName") {
             value.forEach((name) => used.add(name));
           } else if (property === "animation") {
@@ -299,8 +310,25 @@ function keyframes() {
             });
           }
         });
-        const content = Array.from(allKeyframes.entries()).filter(([name]) => used.has(name)).map(([, css]) => css).join("");
-        return content;
+        return renderCSSStyleBlocks(
+          new Map(Array.from(allKeyframes.entries()).filter(([name]) => used.has(name)).map(([name, frames]) => [
+            `@keyframes ${name}`,
+            {
+              properties: [],
+              children: new Map(Object.entries(frames).map(([frame, properties]) => [
+                frame,
+                {
+                  properties: Object.entries(properties).filter(([_, value]) => isNotNullish(value)).flatMap(([property, value]) => {
+                    if (Array.isArray(value))
+                      return value.map((v) => ({ property, value: String(v) }));
+                    return { property, value: String(value) };
+                  })
+                }
+              ]))
+            }
+          ])),
+          isFormatted
+        );
       });
     }
   });
@@ -662,15 +690,22 @@ function variables() {
         if (asProperty)
           appendAutocompleteExtraCssProperties(resolvedConfig, name);
         if (value != null)
-          allVariables.set(name, `${name}:${value}`);
+          allVariables.set(name, value);
       });
-      resolvedConfig.preflights.push((engine) => {
+      resolvedConfig.preflights.push((engine, isFormatted) => {
         const used = /* @__PURE__ */ new Set();
-        engine.store.atomicRules.forEach(({ content: { value } }) => {
+        engine.store.atomicStyles.forEach(({ content: { value } }) => {
           value.flatMap(extractUsedVarNames).forEach((name) => used.add(normalizeVariableName(name)));
         });
-        const content = Array.from(allVariables.entries()).filter(([name]) => used.has(name)).map(([, css]) => css).join(";");
-        return content === "" ? "" : `:root{${content}}`;
+        return renderCSSStyleBlocks(
+          /* @__PURE__ */ new Map([[
+            ":root",
+            {
+              properties: Array.from(allVariables.entries()).filter(([name]) => used.has(name)).map(([name, value]) => ({ property: name, value }))
+            }
+          ]]),
+          isFormatted
+        );
       });
     }
   });
@@ -705,8 +740,8 @@ class Engine {
   config;
   extract;
   store = {
-    atomicNames: /* @__PURE__ */ new Map(),
-    atomicRules: /* @__PURE__ */ new Map()
+    atomicStyleIds: /* @__PURE__ */ new Map(),
+    atomicStyles: /* @__PURE__ */ new Map()
   };
   constructor(config) {
     this.config = config;
@@ -721,8 +756,8 @@ class Engine {
   notifyPreflightUpdated() {
     hooks.preflightUpdated(this.config.plugins);
   }
-  notifyAtomicRuleAdded() {
-    hooks.atomicRuleAdded(this.config.plugins);
+  notifyAtomicStyleAdded() {
+    hooks.atomicStyleAdded(this.config.plugins);
   }
   notifyAutocompleteConfigUpdated() {
     hooks.autocompleteConfigUpdated(this.config.plugins);
@@ -760,53 +795,39 @@ class Engine {
       transformStyleItems: (styleItems) => hooks.transformStyleItems(this.config.plugins, styleItems),
       extractStyleDefinition: (styleDefinition) => this.extract(styleDefinition)
     });
-    const resolvedNames = [];
+    const resolvedIds = [];
     contents.forEach((content) => {
-      const name = getAtomicStyleName({
+      const id = getAtomicStyleId({
         content,
         prefix: this.config.prefix,
-        stored: this.store.atomicNames
+        stored: this.store.atomicStyleIds
       });
-      resolvedNames.push(name);
-      if (!this.store.atomicRules.has(name)) {
-        const added = {
-          name,
-          content
-        };
-        this.store.atomicRules.set(name, added);
-        this.notifyAtomicRuleAdded();
+      resolvedIds.push(id);
+      if (!this.store.atomicStyles.has(id)) {
+        this.store.atomicStyles.set(id, { id, content });
+        this.notifyAtomicStyleAdded();
       }
     });
-    return [...unknown, ...resolvedNames];
-  }
-  async renderPreviewStyles(...itemList) {
-    const nameList = await this.use(...itemList);
-    const targets = nameList.map((name) => this.store.atomicRules.get(name)).filter(isNotNullish);
-    return renderAtomicStyles({
-      atomicRules: targets,
-      isPreview: true
-    });
-  }
-  renderStyles() {
-    return [
-      this.renderPreflights(),
-      this.renderAtomicStyles()
-    ].join("");
+    return [...unknown, ...resolvedIds];
   }
-  renderPreflights() {
-    return this.config.preflights.map((p) => p(this)).join("");
+  renderPreflights(isFormatted) {
+    const lineEnd = isFormatted ? "\n" : "";
+    return this.config.preflights.map((p) => p(this, isFormatted)).join(lineEnd);
   }
-  renderAtomicStyles() {
+  renderAtomicStyles(isFormatted, options = {}) {
+    const { atomicStyleIds = null, isPreview = false } = options;
+    const atomicStyles = atomicStyleIds == null ? [...this.store.atomicStyles.values()] : atomicStyleIds.map((id) => this.store.atomicStyles.get(id)).filter(isNotNullish);
     return renderAtomicStyles({
-      atomicRules: [...this.store.atomicRules.values()],
-      isPreview: false
+      atomicStyles,
+      isPreview,
+      isFormatted
     });
   }
 }
 async function resolveEngineConfig(config) {
   const {
     prefix = "",
-    defaultSelector = `.${ATOMIC_STYLE_NAME_PLACEHOLDER}`,
+    defaultSelector = `.${ATOMIC_STYLE_ID_PLACEHOLDER}`,
     plugins = [],
     preflights = [],
     autocomplete = {}
@@ -836,7 +857,7 @@ async function resolveEngineConfig(config) {
   autocomplete.cssProperties?.forEach(([property, value]) => appendAutocompleteCssPropertyValues(resolvedConfig, property, ...[value].flat()));
   return resolvedConfig;
 }
-function getAtomicStyleName({
+function getAtomicStyleId({
   content,
   prefix,
   stored
@@ -846,9 +867,9 @@ function getAtomicStyleName({
   if (cached != null)
     return cached;
   const num = stored.size;
-  const name = `${prefix}${numberToChars(num)}`;
-  stored.set(key, name);
-  return name;
+  const id = `${prefix}${numberToChars(num)}`;
+  stored.set(key, id);
+  return id;
 }
 function optimizeAtomicStyleContents(list) {
   const map = /* @__PURE__ */ new Map();
@@ -879,49 +900,32 @@ async function resolveStyleItemList({
     contents: optimizeAtomicStyleContents(list)
   };
 }
-function prepareAtomicStyleBlocks({
-  atomicRules,
-  isPreview
-}) {
+function renderAtomicStyles(payload) {
+  const { atomicStyles, isPreview, isFormatted } = payload;
   const blocks = /* @__PURE__ */ new Map();
-  atomicRules.forEach(({ name, content: { selector, property, value } }) => {
-    const isValidSelector = selector.some((s) => s.includes(ATOMIC_STYLE_NAME_PLACEHOLDER));
+  atomicStyles.forEach(({ id, content: { selector, property, value } }) => {
+    const isValidSelector = selector.some((s) => s.includes(ATOMIC_STYLE_ID_PLACEHOLDER));
     if (isValidSelector === false || value == null)
       return;
     const renderObject = {
-      selector: isPreview ? selector : selector.map((s) => s.replace(ATOMIC_STYLE_NAME_PLACEHOLDER_RE_GLOBAL, name)),
-      content: Array.isArray(value) ? value.map((v) => `${property}:${v}`).join(";") : `${property}:${value}`
+      selector: isPreview ? selector : selector.map((s) => s.replace(ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL, id)),
+      properties: value.map((v) => ({ property, value: v }))
     };
     let currentBlocks = blocks;
     for (let i = 0; i < renderObject.selector.length; i++) {
       const s = renderObject.selector[i];
-      const block = currentBlocks.get(s) || { content: [] };
-      const isLast = i === renderObject.selector.length - 1;
-      if (isLast) {
-        block.content.push(renderObject.content);
-      } else {
-        block.children ||= /* @__PURE__ */ new Map();
-      }
-      currentBlocks.set(s, block);
-      if (isLast === false)
-        currentBlocks = block.children;
+      const blockBody = currentBlocks.get(s) || { properties: [] };
+      const isLastSelector = i === renderObject.selector.length - 1;
+      if (isLastSelector)
+        blockBody.properties.push(...renderObject.properties);
+      else
+        blockBody.children ||= /* @__PURE__ */ new Map();
+      currentBlocks.set(s, blockBody);
+      if (isLastSelector === false)
+        currentBlocks = blockBody.children;
     }
   });
-  return blocks;
-}
-function renderAtomicStyleBlocks(blocks) {
-  let rendered = "";
-  blocks.forEach((block, selector) => {
-    rendered += `${selector}{${block.content.join(";")}`;
-    if (block.children != null)
-      rendered += renderAtomicStyleBlocks(block.children);
-    rendered += "}";
-  });
-  return rendered;
-}
-function renderAtomicStyles(payload) {
-  const blocks = prepareAtomicStyleBlocks(payload);
-  return renderAtomicStyleBlocks(blocks);
+  return renderCSSStyleBlocks(blocks, isFormatted);
 }
 
 function createDefineEnginePluginFn() {
@@ -937,4 +941,4 @@ function createDefineEngineConfigFn() {
 }
 const defineEngineConfig = createDefineEngineConfigFn();
 
-export { appendAutocompleteCssPropertyValues, appendAutocompleteExtraCssProperties, appendAutocompleteExtraProperties, appendAutocompletePropertyValues, appendAutocompleteSelectors, appendAutocompleteStyleItemStrings, createDefineEngineConfigFn, createDefineEnginePluginFn, createEngine, defineEngineConfig, defineEnginePlugin };
+export { appendAutocompleteCssPropertyValues, appendAutocompleteExtraCssProperties, appendAutocompleteExtraProperties, appendAutocompletePropertyValues, appendAutocompleteSelectors, appendAutocompleteStyleItemStrings, createDefineEngineConfigFn, createDefineEnginePluginFn, createEngine, defineEngineConfig, defineEnginePlugin, renderCSSStyleBlocks };

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.9",
+  "version": "0.0.10",
   "author": "DevilTea <ch19980814@gmail.com>",
   "license": "MIT",
   "repository": {