npm - tailwind-to-style - Versions diffs - 2.5.3 → 2.6.2 - Mend

tailwind-to-style 2.5.3 → 2.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -340,6 +340,25 @@ const styles = twsx({
 The `@css` feature provides a powerful way to bridge the gap between Tailwind's utility classes and custom CSS when needed, without leaving the `twsx` syntax.
+### Inject Option (Browser Only)
+By default, every call to `twsx` in the browser will automatically inject the generated CSS into a `<style id="twsx-auto-style">` tag in the document `<head>`. This makes it easy to use dynamic styles in browser or CDN scenarios without manual CSS management.
+You can control this behavior with the `inject` option:
+```js
+// Auto-inject (default)
+twsx({ ... }) // CSS is injected automatically
+// Disable auto-inject
+twsx({ ... }, { inject: false }) // CSS is NOT injected, just returned as string
+```
+- **inject: true** (default): CSS is injected into the page (browser only).
+- **inject: false**: CSS is only returned as a string, not injected. Useful for SSR, testing, or custom handling.
+> Note: This option only affects browser usage. In Node.js or SSR, no injection occurs.
 ## License
 ## Contributing

package/dist/index.browser.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.5.3
+ * tailwind-to-style v2.6.2
  * Convert tailwind classes to inline style
  *
  * @author Bigetion
@@ -6115,13 +6115,17 @@ var tailwindToStyle = (function (exports) {
    * Menghasilkan string CSS dari objek style dengan sintaks mirip SCSS
    * Mendukung nested selectors, state variants, responsive variants, dan @css directives
    * @param {Object} obj - Objek dengan format style mirip SCSS
+   * @param {Object} [options] - Opsi tambahan, misal { inject: true/false }
    * @returns {string} String CSS yang dihasilkan
    */
-  function twsx(obj) {
+  function twsx(obj, options = {}) {
     if (!obj || typeof obj !== "object") {
       console.warn("twsx: Expected an object but received:", obj);
       return "";
     }
+    const {
+      inject = true
+    } = options;
     const styles = {};
     function expandGroupedClass(input) {
       function expandDirectiveGroups(str) {
@@ -6275,7 +6279,7 @@ var tailwindToStyle = (function (exports) {
       if (selector.includes("@css")) {
         const parts = selector.split("@css");
         const baseSelector = parts[0].trim();
-        const cssProperty = parts[1]?.trim();
+        const cssProperty = parts[1] ? parts[1].trim() : null;
         result = {
           baseSelector,
           cssProperty
@@ -6376,7 +6380,42 @@ var tailwindToStyle = (function (exports) {
       }
       cssString += `}`;
     }
-    return cssString.trim();
+    cssString = cssString.trim();
+    if (inject && typeof window !== "undefined" && typeof document !== "undefined") {
+      autoInjectCss(cssString);
+    }
+    return cssString;
+  }
+  // Fungsi hashCode sederhana untuk deduplikasi CSS
+  function getCssHash(str) {
+    let hash = 0,
+      i,
+      chr;
+    if (str.length === 0) return hash;
+    for (i = 0; i < str.length; i++) {
+      chr = str.charCodeAt(i);
+      hash = (hash << 5) - hash + chr;
+      hash |= 0; // Convert to 32bit integer
+    }
+    return hash;
+  }
+  // Cache untuk deduplikasi auto-inject CSS pakai hash
+  const injectedCssHashSet = new Set();
+  function autoInjectCss(cssString) {
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      const cssHash = getCssHash(cssString);
+      if (injectedCssHashSet.has(cssHash)) return;
+      injectedCssHashSet.add(cssHash);
+      let styleTag = document.getElementById("twsx-auto-style");
+      if (!styleTag) {
+        styleTag = document.createElement("style");
+        styleTag.id = "twsx-auto-style";
+        document.head.appendChild(styleTag);
+      }
+      styleTag.textContent += `\n${cssString}`;
+    }
   }
   // Daftarkan versi debounced dari fungsi-fungsi export

package/dist/index.cjs.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.5.3
+ * tailwind-to-style v2.6.2
  * Convert tailwind classes to inline style
  *
  * @author Bigetion
@@ -6116,13 +6116,17 @@ function tws(classNames, convertToJson) {
  * Menghasilkan string CSS dari objek style dengan sintaks mirip SCSS
  * Mendukung nested selectors, state variants, responsive variants, dan @css directives
  * @param {Object} obj - Objek dengan format style mirip SCSS
+ * @param {Object} [options] - Opsi tambahan, misal { inject: true/false }
  * @returns {string} String CSS yang dihasilkan
  */
-function twsx(obj) {
+function twsx(obj, options = {}) {
   if (!obj || typeof obj !== "object") {
     console.warn("twsx: Expected an object but received:", obj);
     return "";
   }
+  const {
+    inject = true
+  } = options;
   const styles = {};
   function expandGroupedClass(input) {
     function expandDirectiveGroups(str) {
@@ -6276,7 +6280,7 @@ function twsx(obj) {
     if (selector.includes("@css")) {
       const parts = selector.split("@css");
       const baseSelector = parts[0].trim();
-      const cssProperty = parts[1]?.trim();
+      const cssProperty = parts[1] ? parts[1].trim() : null;
       result = {
         baseSelector,
         cssProperty
@@ -6377,7 +6381,42 @@ function twsx(obj) {
     }
     cssString += `}`;
   }
-  return cssString.trim();
+  cssString = cssString.trim();
+  if (inject && typeof window !== "undefined" && typeof document !== "undefined") {
+    autoInjectCss(cssString);
+  }
+  return cssString;
+}
+// Fungsi hashCode sederhana untuk deduplikasi CSS
+function getCssHash(str) {
+  let hash = 0,
+    i,
+    chr;
+  if (str.length === 0) return hash;
+  for (i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+}
+// Cache untuk deduplikasi auto-inject CSS pakai hash
+const injectedCssHashSet = new Set();
+function autoInjectCss(cssString) {
+  if (typeof window !== "undefined" && typeof document !== "undefined") {
+    const cssHash = getCssHash(cssString);
+    if (injectedCssHashSet.has(cssHash)) return;
+    injectedCssHashSet.add(cssHash);
+    let styleTag = document.getElementById("twsx-auto-style");
+    if (!styleTag) {
+      styleTag = document.createElement("style");
+      styleTag.id = "twsx-auto-style";
+      document.head.appendChild(styleTag);
+    }
+    styleTag.textContent += `\n${cssString}`;
+  }
 }
 // Daftarkan versi debounced dari fungsi-fungsi export

package/dist/index.esm.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.5.3
+ * tailwind-to-style v2.6.2
  * Convert tailwind classes to inline style
  *
  * @author Bigetion
@@ -6293,13 +6293,15 @@ function tws(classNames, convertToJson) {
  * Menghasilkan string CSS dari objek style dengan sintaks mirip SCSS
  * Mendukung nested selectors, state variants, responsive variants, dan @css directives
  * @param {Object} obj - Objek dengan format style mirip SCSS
+ * @param {Object} [options] - Opsi tambahan, misal { inject: true/false }
  * @returns {string} String CSS yang dihasilkan
  */
-function twsx(obj) {
+function twsx(obj, options = {}) {
   if (!obj || typeof obj !== "object") {
     console.warn("twsx: Expected an object but received:", obj);
     return "";
   }
+  const { inject = true } = options;
   const styles = {};
@@ -6519,7 +6521,7 @@ function twsx(obj) {
     if (selector.includes("@css")) {
       const parts = selector.split("@css");
       const baseSelector = parts[0].trim();
-      const cssProperty = parts[1]?.trim();
+      const cssProperty = parts[1] ? parts[1].trim() : null;
       result = { baseSelector, cssProperty };
     } else {
       result = { baseSelector: selector, cssProperty: null };
@@ -6623,7 +6625,40 @@ function twsx(obj) {
     }
     cssString += `}`;
   }
-  return cssString.trim();
+  cssString = cssString.trim();
+  if (inject && typeof window !== "undefined" && typeof document !== "undefined") {
+    autoInjectCss(cssString);
+  }
+  return cssString;
+}
+// Fungsi hashCode sederhana untuk deduplikasi CSS
+function getCssHash(str) {
+  let hash = 0, i, chr;
+  if (str.length === 0) return hash;
+  for (i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = ((hash << 5) - hash) + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+}
+// Cache untuk deduplikasi auto-inject CSS pakai hash
+const injectedCssHashSet = new Set();
+function autoInjectCss(cssString) {
+  if (typeof window !== "undefined" && typeof document !== "undefined") {
+    const cssHash = getCssHash(cssString);
+    if (injectedCssHashSet.has(cssHash)) return;
+    injectedCssHashSet.add(cssHash);
+    let styleTag = document.getElementById("twsx-auto-style");
+    if (!styleTag) {
+      styleTag = document.createElement("style");
+      styleTag.id = "twsx-auto-style";
+      document.head.appendChild(styleTag);
+    }
+    styleTag.textContent += `\n${cssString}`;
+  }
 }
 // Daftarkan versi debounced dari fungsi-fungsi export