@pikacss/core 0.0.20 → 0.0.22

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-const ATOMIC_STYLE_ID_PLACEHOLDER = "$$";
-const ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL = /\$\$/g;
+const ATOMIC_STYLE_ID_PLACEHOLDER = "%";
+const ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL = /%/g;
 
 let _warn = (...args) => {
   console.warn("[@pikacss/core]", ...args);
@@ -895,10 +895,16 @@ class Engine {
     return renderAtomicStyles({
       atomicStyles,
       isPreview,
-      isFormatted
+      isFormatted,
+      defaultSelector: this.config.defaultSelector
     });
   }
 }
+function calcAtomicStyleRenderingWeight(style, defaultSelector) {
+  const { selector } = style.content;
+  const isDefaultSelector = selector.length === 1 && selector[0] === defaultSelector;
+  return isDefaultSelector ? 0 : selector.length;
+}
 function resolvePreflight(preflight) {
   return typeof preflight === "function" ? preflight : () => preflight;
 }
@@ -972,9 +978,13 @@ async function resolveStyleItemList({
   };
 }
 function renderAtomicStyles(payload) {
-  const { atomicStyles, isPreview, isFormatted } = payload;
+  const { atomicStyles, isPreview, isFormatted, defaultSelector } = payload;
   const blocks = /* @__PURE__ */ new Map();
-  atomicStyles.forEach(({ id, content: { selector, property, value } }) => {
+  Array.from(atomicStyles).sort((a, b) => {
+    const weightA = calcAtomicStyleRenderingWeight(a, defaultSelector);
+    const weightB = calcAtomicStyleRenderingWeight(b, defaultSelector);
+    return weightA - weightB;
+  }).forEach(({ id, content: { selector, property, value } }) => {
     const isValidSelector = selector.some((s) => s.includes(ATOMIC_STYLE_ID_PLACEHOLDER));
     if (isValidSelector === false || value == null)
       return;

package/dist/index.d.cts

@@ -395,15 +395,15 @@ interface EngineConfig {
      */
     prefix?: string;
     /**
-     * Set the default selector format. '$$' will be replaced with the atomic style id.
+     * Set the default selector format. '%' will be replaced with the atomic style id.
      *
-     * @default '.$$'
+     * @default '.%'
      * @example
      * ```ts
      * {
-     *   defaultSelector: '.$$' // Use with class attribute: <div class="a b c">
+     *   defaultSelector: '.%' // Use with class attribute: <div class="a b c">
      *   // or
-     *   defaultSelector: '[data-pika~="$$"]' // Use with attribute selector: <div data-pika="a b c">
+     *   defaultSelector: '[data-pika~="%"]' // Use with attribute selector: <div data-pika="a b c">
      * }
      * ```
      */

package/dist/index.d.mts

@@ -395,15 +395,15 @@ interface EngineConfig {
      */
     prefix?: string;
     /**
-     * Set the default selector format. '$$' will be replaced with the atomic style id.
+     * Set the default selector format. '%' will be replaced with the atomic style id.
      *
-     * @default '.$$'
+     * @default '.%'
      * @example
      * ```ts
      * {
-     *   defaultSelector: '.$$' // Use with class attribute: <div class="a b c">
+     *   defaultSelector: '.%' // Use with class attribute: <div class="a b c">
      *   // or
-     *   defaultSelector: '[data-pika~="$$"]' // Use with attribute selector: <div data-pika="a b c">
+     *   defaultSelector: '[data-pika~="%"]' // Use with attribute selector: <div data-pika="a b c">
      * }
      * ```
      */

package/dist/index.d.ts

@@ -395,15 +395,15 @@ interface EngineConfig {
      */
     prefix?: string;
     /**
-     * Set the default selector format. '$$' will be replaced with the atomic style id.
+     * Set the default selector format. '%' will be replaced with the atomic style id.
      *
-     * @default '.$$'
+     * @default '.%'
      * @example
      * ```ts
      * {
-     *   defaultSelector: '.$$' // Use with class attribute: <div class="a b c">
+     *   defaultSelector: '.%' // Use with class attribute: <div class="a b c">
      *   // or
-     *   defaultSelector: '[data-pika~="$$"]' // Use with attribute selector: <div data-pika="a b c">
+     *   defaultSelector: '[data-pika~="%"]' // Use with attribute selector: <div data-pika="a b c">
      * }
      * ```
      */

package/dist/index.mjs

@@ -1,5 +1,5 @@
-const ATOMIC_STYLE_ID_PLACEHOLDER = "$$";
-const ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL = /\$\$/g;
+const ATOMIC_STYLE_ID_PLACEHOLDER = "%";
+const ATOMIC_STYLE_ID_PLACEHOLDER_RE_GLOBAL = /%/g;
 
 let _warn = (...args) => {
   console.warn("[@pikacss/core]", ...args);
@@ -893,10 +893,16 @@ class Engine {
     return renderAtomicStyles({
       atomicStyles,
       isPreview,
-      isFormatted
+      isFormatted,
+      defaultSelector: this.config.defaultSelector
     });
   }
 }
+function calcAtomicStyleRenderingWeight(style, defaultSelector) {
+  const { selector } = style.content;
+  const isDefaultSelector = selector.length === 1 && selector[0] === defaultSelector;
+  return isDefaultSelector ? 0 : selector.length;
+}
 function resolvePreflight(preflight) {
   return typeof preflight === "function" ? preflight : () => preflight;
 }
@@ -970,9 +976,13 @@ async function resolveStyleItemList({
   };
 }
 function renderAtomicStyles(payload) {
-  const { atomicStyles, isPreview, isFormatted } = payload;
+  const { atomicStyles, isPreview, isFormatted, defaultSelector } = payload;
   const blocks = /* @__PURE__ */ new Map();
-  atomicStyles.forEach(({ id, content: { selector, property, value } }) => {
+  Array.from(atomicStyles).sort((a, b) => {
+    const weightA = calcAtomicStyleRenderingWeight(a, defaultSelector);
+    const weightB = calcAtomicStyleRenderingWeight(b, defaultSelector);
+    return weightA - weightB;
+  }).forEach(({ id, content: { selector, property, value } }) => {
     const isValidSelector = selector.some((s) => s.includes(ATOMIC_STYLE_ID_PLACEHOLDER));
     if (isValidSelector === false || value == null)
       return;

package/package.json

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