@pikacss/core 0.0.23 → 0.0.25

package/dist/index.cjs

@@ -97,7 +97,6 @@ function replaceBySplitAndJoin(str, split, mapFn, join) {
   return splitted.join(join);
 }
 const RE_SPLIT = /\s*,\s*/g;
-const DEFAULT_SELECTOR_PLACEHOLDER = "$";
 const DEFAULT_SELECTOR_PLACEHOLDER_RE_GLOBAL = /\$/g;
 const ATTRIBUTE_SUFFIX_MATCH = "$=";
 const ATTRIBUTE_SUFFIX_MATCH_RE_GLOBAL = /\$=/g;
@@ -105,16 +104,9 @@ function normalizeSelectors({
   selectors,
   defaultSelector
 }) {
-  if (selectors.length === 0)
-    return [defaultSelector];
-  const normalized = selectors.map((s) => s.replace(RE_SPLIT, ","));
-  const lastSelector = selectors[selectors.length - 1];
-  if (lastSelector.includes(ATOMIC_STYLE_ID_PLACEHOLDER) === false && lastSelector.includes(DEFAULT_SELECTOR_PLACEHOLDER) === false) {
-    normalized.push(DEFAULT_SELECTOR_PLACEHOLDER);
-  }
-  return normalized.map(
+  const normalized = selectors.map(
     (s) => replaceBySplitAndJoin(
-      s,
+      s.replace(RE_SPLIT, ","),
       ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL,
       (a) => replaceBySplitAndJoin(
         a,
@@ -130,6 +122,7 @@ function normalizeSelectors({
       ATOMIC_STYLE_ID_PLACEHOLDER
     )
   );
+  return normalized;
 }
 function normalizeValue(value) {
   if (value == null)
@@ -145,19 +138,19 @@ async function extract({
   transformStyleItems,
   transformStyleDefinitions
 }) {
-  const selector = normalizeSelectors({
-    selectors: await transformSelectors(levels),
-    defaultSelector
-  });
   for (const definition of await transformStyleDefinitions([styleDefinition])) {
     for (const [k, v] of Object.entries(definition)) {
       if (isPropertyValue(v)) {
-        const property = toKebab(k);
-        const value = normalizeValue(v);
+        const selector = normalizeSelectors({
+          selectors: await transformSelectors(levels),
+          defaultSelector
+        });
+        if (selector.length === 0 || selector.every((s) => s.includes(ATOMIC_STYLE_ID_PLACEHOLDER) === false))
+          selector.push(defaultSelector);
         result.push({
           selector,
-          property,
-          value
+          property: toKebab(k),
+          value: normalizeValue(v)
         });
       } else if (Array.isArray(v)) {
         for (const styleItem of await transformStyleItems(v)) {
@@ -308,25 +301,23 @@ function keyframes() {
       };
       engine.keyframes.add(...configList);
       engine.addPreflight((engine2, isFormatted) => {
-        const used = /* @__PURE__ */ new Set();
+        const maybeUsedName = /* @__PURE__ */ new Set();
         engine2.store.atomicStyles.forEach(({ content: { property, value } }) => {
           if (property === "animationName") {
-            value.forEach((name) => used.add(name));
+            value.forEach((name) => maybeUsedName.add(name));
             return;
           }
           if (property === "animation") {
             value.forEach((value2) => {
               const animations = value2.split(",").map((v) => v.trim());
               animations.forEach((animation) => {
-                const name = animation.split(" ")[0];
-                if (isNotNullish(name))
-                  used.add(name);
+                addToSet(maybeUsedName, ...animation.split(" "));
               });
             });
           }
         });
         return renderCSSStyleBlocks(
-          new Map(Array.from(engine2.keyframes.store.entries()).filter(([name, { pruneUnused }]) => pruneUnused === false || used.has(name)).map(([name, { frames }]) => [
+          new Map(Array.from(engine2.keyframes.store.entries()).filter(([name, { pruneUnused }]) => pruneUnused === false || maybeUsedName.has(name)).map(([name, { frames }]) => [
             `@keyframes ${name}`,
             {
               properties: [],
@@ -885,11 +876,20 @@ class Engine {
     });
     return [...unknown, ...resolvedIds];
   }
-  renderPreflights(isFormatted) {
+  async renderPreflights(isFormatted) {
     const lineEnd = isFormatted ? "\n" : "";
-    return this.config.preflights.map((p) => p(this, isFormatted)).join(lineEnd);
+    return (await Promise.all(this.config.preflights.map((p) => {
+      const result = p(this, isFormatted);
+      if (typeof result === "string")
+        return result;
+      return renderPreflight({
+        engine: this,
+        preflight: result,
+        isFormatted
+      });
+    }))).join(lineEnd);
   }
-  renderAtomicStyles(isFormatted, options = {}) {
+  async 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({
@@ -1008,6 +1008,54 @@ function renderAtomicStyles(payload) {
   });
   return renderCSSStyleBlocks(blocks, isFormatted);
 }
+async function _renderPreflight({
+  engine,
+  preflightDefinition,
+  blocks = /* @__PURE__ */ new Map()
+}) {
+  for (const [selector, propertiesOrDefinition] of Object.entries(preflightDefinition)) {
+    const selectors2 = normalizeSelectors({
+      selectors: await hooks.transformSelectors(engine.config.plugins, [selector]),
+      defaultSelector: ""
+    }).filter(Boolean);
+    let currentBlocks = blocks;
+    let currentBlockBody = null;
+    selectors2.forEach((s, i) => {
+      const isLast = i === selectors2.length - 1;
+      currentBlocks.set(s, currentBlocks.get(s) || { properties: [] });
+      if (isLast) {
+        currentBlockBody = currentBlocks.get(s);
+        return;
+      }
+      currentBlocks = currentBlocks.get(s).children ||= /* @__PURE__ */ new Map();
+    });
+    for (const [k, v] of Object.entries(propertiesOrDefinition)) {
+      if (isPropertyValue(v)) {
+        const property = toKebab(k);
+        const normalizedValue = normalizeValue(v);
+        if (normalizedValue != null) {
+          normalizedValue.forEach((value) => currentBlockBody.properties.push({ property, value }));
+        }
+      } else {
+        currentBlockBody.children ||= /* @__PURE__ */ new Map();
+        _renderPreflight({
+          engine,
+          preflightDefinition: v,
+          blocks: currentBlockBody.children
+        });
+      }
+    }
+  }
+  return blocks;
+}
+async function renderPreflight(payload) {
+  const { engine, preflight, isFormatted } = payload;
+  const blocks = await _renderPreflight({
+    engine,
+    preflightDefinition: preflight
+  });
+  return renderCSSStyleBlocks(blocks, isFormatted);
+}
 
 exports.appendAutocompleteCssPropertyValues = appendAutocompleteCssPropertyValues;
 exports.appendAutocompleteExtraCssProperties = appendAutocompleteExtraCssProperties;

package/dist/index.d.cts

@@ -281,19 +281,19 @@ interface StyleDefinition$1 {
     [K: string]: PropertyValue | StyleDefinition$1 | StyleItem$1[];
 }
 type StyleItem$1 = string | StyleDefinition$1;
-interface ExtractedAtomicStyleContent {
+interface ExtractedStyleContent {
     selector: string[];
     property: string;
     value: string[] | Nullish;
 }
-interface AtomicStyleContent {
+interface StyleContent {
     selector: string[];
     property: string;
     value: string[];
 }
 interface AtomicStyle {
     id: string;
-    content: AtomicStyleContent;
+    content: StyleContent;
 }
 interface CSSStyleBlockBody {
     properties: {
@@ -358,14 +358,17 @@ interface EnginePlugin extends EnginePluginHooksOptions {
 }
 declare function defineEnginePlugin(plugin: EnginePlugin): EnginePlugin;
 
-type PreflightFn = (engine: Engine, isFormatted: boolean) => string;
+interface PreflightDefinition {
+    [selector: UnionString | ResolvedSelector]: ResolvedProperties | PreflightDefinition;
+}
+type PreflightFn = (engine: Engine, isFormatted: boolean) => string | PreflightDefinition;
 /**
  * PreflightConfig can be a string or a function that returns a string.
  *
  * 1. A string is a static preflight style.
  * 2. A function is a dynamic preflight style that can use the engine instance to generate styles.
  */
-type Preflight = string | PreflightFn;
+type Preflight = string | PreflightDefinition | PreflightFn;
 
 interface EngineConfig {
     /**
@@ -436,7 +439,7 @@ interface ResolvedEngineConfig {
     autocomplete: ResolvedAutocompleteConfig;
 }
 
-type ExtractFn = (styleDefinition: StyleDefinition$1) => Promise<ExtractedAtomicStyleContent[]>;
+type ExtractFn = (styleDefinition: StyleDefinition$1) => Promise<ExtractedStyleContent[]>;
 
 declare function defineEngineConfig(config: EngineConfig): EngineConfig;
 declare function createEngine(config?: EngineConfig): Promise<Engine>;
@@ -459,11 +462,11 @@ declare class Engine {
     appendAutocompleteCssPropertyValues(property: string, ...values: (string | number)[]): void;
     addPreflight(preflight: Preflight): void;
     use(...itemList: StyleItem$1[]): Promise<string[]>;
-    renderPreflights(isFormatted: boolean): string;
+    renderPreflights(isFormatted: boolean): Promise<string>;
     renderAtomicStyles(isFormatted: boolean, options?: {
         atomicStyleIds?: string[];
         isPreview?: boolean;
-    }): string;
+    }): Promise<string>;
 }
 
 declare function setWarnFn(fn: (...args: any[]) => void): void;

package/dist/index.d.mts

@@ -281,19 +281,19 @@ interface StyleDefinition$1 {
     [K: string]: PropertyValue | StyleDefinition$1 | StyleItem$1[];
 }
 type StyleItem$1 = string | StyleDefinition$1;
-interface ExtractedAtomicStyleContent {
+interface ExtractedStyleContent {
     selector: string[];
     property: string;
     value: string[] | Nullish;
 }
-interface AtomicStyleContent {
+interface StyleContent {
     selector: string[];
     property: string;
     value: string[];
 }
 interface AtomicStyle {
     id: string;
-    content: AtomicStyleContent;
+    content: StyleContent;
 }
 interface CSSStyleBlockBody {
     properties: {
@@ -358,14 +358,17 @@ interface EnginePlugin extends EnginePluginHooksOptions {
 }
 declare function defineEnginePlugin(plugin: EnginePlugin): EnginePlugin;
 
-type PreflightFn = (engine: Engine, isFormatted: boolean) => string;
+interface PreflightDefinition {
+    [selector: UnionString | ResolvedSelector]: ResolvedProperties | PreflightDefinition;
+}
+type PreflightFn = (engine: Engine, isFormatted: boolean) => string | PreflightDefinition;
 /**
  * PreflightConfig can be a string or a function that returns a string.
  *
  * 1. A string is a static preflight style.
  * 2. A function is a dynamic preflight style that can use the engine instance to generate styles.
  */
-type Preflight = string | PreflightFn;
+type Preflight = string | PreflightDefinition | PreflightFn;
 
 interface EngineConfig {
     /**
@@ -436,7 +439,7 @@ interface ResolvedEngineConfig {
     autocomplete: ResolvedAutocompleteConfig;
 }
 
-type ExtractFn = (styleDefinition: StyleDefinition$1) => Promise<ExtractedAtomicStyleContent[]>;
+type ExtractFn = (styleDefinition: StyleDefinition$1) => Promise<ExtractedStyleContent[]>;
 
 declare function defineEngineConfig(config: EngineConfig): EngineConfig;
 declare function createEngine(config?: EngineConfig): Promise<Engine>;
@@ -459,11 +462,11 @@ declare class Engine {
     appendAutocompleteCssPropertyValues(property: string, ...values: (string | number)[]): void;
     addPreflight(preflight: Preflight): void;
     use(...itemList: StyleItem$1[]): Promise<string[]>;
-    renderPreflights(isFormatted: boolean): string;
+    renderPreflights(isFormatted: boolean): Promise<string>;
     renderAtomicStyles(isFormatted: boolean, options?: {
         atomicStyleIds?: string[];
         isPreview?: boolean;
-    }): string;
+    }): Promise<string>;
 }
 
 declare function setWarnFn(fn: (...args: any[]) => void): void;

package/dist/index.d.ts

@@ -281,19 +281,19 @@ interface StyleDefinition$1 {
     [K: string]: PropertyValue | StyleDefinition$1 | StyleItem$1[];
 }
 type StyleItem$1 = string | StyleDefinition$1;
-interface ExtractedAtomicStyleContent {
+interface ExtractedStyleContent {
     selector: string[];
     property: string;
     value: string[] | Nullish;
 }
-interface AtomicStyleContent {
+interface StyleContent {
     selector: string[];
     property: string;
     value: string[];
 }
 interface AtomicStyle {
     id: string;
-    content: AtomicStyleContent;
+    content: StyleContent;
 }
 interface CSSStyleBlockBody {
     properties: {
@@ -358,14 +358,17 @@ interface EnginePlugin extends EnginePluginHooksOptions {
 }
 declare function defineEnginePlugin(plugin: EnginePlugin): EnginePlugin;
 
-type PreflightFn = (engine: Engine, isFormatted: boolean) => string;
+interface PreflightDefinition {
+    [selector: UnionString | ResolvedSelector]: ResolvedProperties | PreflightDefinition;
+}
+type PreflightFn = (engine: Engine, isFormatted: boolean) => string | PreflightDefinition;
 /**
  * PreflightConfig can be a string or a function that returns a string.
  *
  * 1. A string is a static preflight style.
  * 2. A function is a dynamic preflight style that can use the engine instance to generate styles.
  */
-type Preflight = string | PreflightFn;
+type Preflight = string | PreflightDefinition | PreflightFn;
 
 interface EngineConfig {
     /**
@@ -436,7 +439,7 @@ interface ResolvedEngineConfig {
     autocomplete: ResolvedAutocompleteConfig;
 }
 
-type ExtractFn = (styleDefinition: StyleDefinition$1) => Promise<ExtractedAtomicStyleContent[]>;
+type ExtractFn = (styleDefinition: StyleDefinition$1) => Promise<ExtractedStyleContent[]>;
 
 declare function defineEngineConfig(config: EngineConfig): EngineConfig;
 declare function createEngine(config?: EngineConfig): Promise<Engine>;
@@ -459,11 +462,11 @@ declare class Engine {
     appendAutocompleteCssPropertyValues(property: string, ...values: (string | number)[]): void;
     addPreflight(preflight: Preflight): void;
     use(...itemList: StyleItem$1[]): Promise<string[]>;
-    renderPreflights(isFormatted: boolean): string;
+    renderPreflights(isFormatted: boolean): Promise<string>;
     renderAtomicStyles(isFormatted: boolean, options?: {
         atomicStyleIds?: string[];
         isPreview?: boolean;
-    }): string;
+    }): Promise<string>;
 }
 
 declare function setWarnFn(fn: (...args: any[]) => void): void;

package/dist/index.mjs

@@ -95,7 +95,6 @@ function replaceBySplitAndJoin(str, split, mapFn, join) {
   return splitted.join(join);
 }
 const RE_SPLIT = /\s*,\s*/g;
-const DEFAULT_SELECTOR_PLACEHOLDER = "$";
 const DEFAULT_SELECTOR_PLACEHOLDER_RE_GLOBAL = /\$/g;
 const ATTRIBUTE_SUFFIX_MATCH = "$=";
 const ATTRIBUTE_SUFFIX_MATCH_RE_GLOBAL = /\$=/g;
@@ -103,16 +102,9 @@ function normalizeSelectors({
   selectors,
   defaultSelector
 }) {
-  if (selectors.length === 0)
-    return [defaultSelector];
-  const normalized = selectors.map((s) => s.replace(RE_SPLIT, ","));
-  const lastSelector = selectors[selectors.length - 1];
-  if (lastSelector.includes(ATOMIC_STYLE_ID_PLACEHOLDER) === false && lastSelector.includes(DEFAULT_SELECTOR_PLACEHOLDER) === false) {
-    normalized.push(DEFAULT_SELECTOR_PLACEHOLDER);
-  }
-  return normalized.map(
+  const normalized = selectors.map(
     (s) => replaceBySplitAndJoin(
-      s,
+      s.replace(RE_SPLIT, ","),
       ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL,
       (a) => replaceBySplitAndJoin(
         a,
@@ -128,6 +120,7 @@ function normalizeSelectors({
       ATOMIC_STYLE_ID_PLACEHOLDER
     )
   );
+  return normalized;
 }
 function normalizeValue(value) {
   if (value == null)
@@ -143,19 +136,19 @@ async function extract({
   transformStyleItems,
   transformStyleDefinitions
 }) {
-  const selector = normalizeSelectors({
-    selectors: await transformSelectors(levels),
-    defaultSelector
-  });
   for (const definition of await transformStyleDefinitions([styleDefinition])) {
     for (const [k, v] of Object.entries(definition)) {
       if (isPropertyValue(v)) {
-        const property = toKebab(k);
-        const value = normalizeValue(v);
+        const selector = normalizeSelectors({
+          selectors: await transformSelectors(levels),
+          defaultSelector
+        });
+        if (selector.length === 0 || selector.every((s) => s.includes(ATOMIC_STYLE_ID_PLACEHOLDER) === false))
+          selector.push(defaultSelector);
         result.push({
           selector,
-          property,
-          value
+          property: toKebab(k),
+          value: normalizeValue(v)
         });
       } else if (Array.isArray(v)) {
         for (const styleItem of await transformStyleItems(v)) {
@@ -306,25 +299,23 @@ function keyframes() {
       };
       engine.keyframes.add(...configList);
       engine.addPreflight((engine2, isFormatted) => {
-        const used = /* @__PURE__ */ new Set();
+        const maybeUsedName = /* @__PURE__ */ new Set();
         engine2.store.atomicStyles.forEach(({ content: { property, value } }) => {
           if (property === "animationName") {
-            value.forEach((name) => used.add(name));
+            value.forEach((name) => maybeUsedName.add(name));
             return;
           }
           if (property === "animation") {
             value.forEach((value2) => {
               const animations = value2.split(",").map((v) => v.trim());
               animations.forEach((animation) => {
-                const name = animation.split(" ")[0];
-                if (isNotNullish(name))
-                  used.add(name);
+                addToSet(maybeUsedName, ...animation.split(" "));
               });
             });
           }
         });
         return renderCSSStyleBlocks(
-          new Map(Array.from(engine2.keyframes.store.entries()).filter(([name, { pruneUnused }]) => pruneUnused === false || used.has(name)).map(([name, { frames }]) => [
+          new Map(Array.from(engine2.keyframes.store.entries()).filter(([name, { pruneUnused }]) => pruneUnused === false || maybeUsedName.has(name)).map(([name, { frames }]) => [
             `@keyframes ${name}`,
             {
               properties: [],
@@ -883,11 +874,20 @@ class Engine {
     });
     return [...unknown, ...resolvedIds];
   }
-  renderPreflights(isFormatted) {
+  async renderPreflights(isFormatted) {
     const lineEnd = isFormatted ? "\n" : "";
-    return this.config.preflights.map((p) => p(this, isFormatted)).join(lineEnd);
+    return (await Promise.all(this.config.preflights.map((p) => {
+      const result = p(this, isFormatted);
+      if (typeof result === "string")
+        return result;
+      return renderPreflight({
+        engine: this,
+        preflight: result,
+        isFormatted
+      });
+    }))).join(lineEnd);
   }
-  renderAtomicStyles(isFormatted, options = {}) {
+  async 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({
@@ -1006,5 +1006,53 @@ function renderAtomicStyles(payload) {
   });
   return renderCSSStyleBlocks(blocks, isFormatted);
 }
+async function _renderPreflight({
+  engine,
+  preflightDefinition,
+  blocks = /* @__PURE__ */ new Map()
+}) {
+  for (const [selector, propertiesOrDefinition] of Object.entries(preflightDefinition)) {
+    const selectors2 = normalizeSelectors({
+      selectors: await hooks.transformSelectors(engine.config.plugins, [selector]),
+      defaultSelector: ""
+    }).filter(Boolean);
+    let currentBlocks = blocks;
+    let currentBlockBody = null;
+    selectors2.forEach((s, i) => {
+      const isLast = i === selectors2.length - 1;
+      currentBlocks.set(s, currentBlocks.get(s) || { properties: [] });
+      if (isLast) {
+        currentBlockBody = currentBlocks.get(s);
+        return;
+      }
+      currentBlocks = currentBlocks.get(s).children ||= /* @__PURE__ */ new Map();
+    });
+    for (const [k, v] of Object.entries(propertiesOrDefinition)) {
+      if (isPropertyValue(v)) {
+        const property = toKebab(k);
+        const normalizedValue = normalizeValue(v);
+        if (normalizedValue != null) {
+          normalizedValue.forEach((value) => currentBlockBody.properties.push({ property, value }));
+        }
+      } else {
+        currentBlockBody.children ||= /* @__PURE__ */ new Map();
+        _renderPreflight({
+          engine,
+          preflightDefinition: v,
+          blocks: currentBlockBody.children
+        });
+      }
+    }
+  }
+  return blocks;
+}
+async function renderPreflight(payload) {
+  const { engine, preflight, isFormatted } = payload;
+  const blocks = await _renderPreflight({
+    engine,
+    preflightDefinition: preflight
+  });
+  return renderCSSStyleBlocks(blocks, isFormatted);
+}
 
 export { appendAutocompleteCssPropertyValues, appendAutocompleteExtraCssProperties, appendAutocompleteExtraProperties, appendAutocompletePropertyValues, appendAutocompleteSelectors, appendAutocompleteStyleItemStrings, createEngine, defineEngineConfig, defineEnginePlugin, renderCSSStyleBlocks, setWarnFn, warn };

package/package.json

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