@react-hive/honey-style 5.3.0 → 5.4.0

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 (9) hide show
  1. package/dist/constants.d.ts +2 -0
  2. package/dist/index.cjs +7 -7
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.dev.cjs +69 -44
  5. package/dist/index.dev.cjs.map +1 -1
  6. package/dist/index.mjs +5 -5
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/mount-style.d.ts +0 -9
  9. package/package.json +1 -1
package/dist/index.dev.cjs CHANGED
@@ -392,6 +392,8 @@ __webpack_require__.r(__webpack_exports__);
392
392
  /* harmony export */ HONEY_GLOBAL_STYLE_ATTR: () => (/* binding */ HONEY_GLOBAL_STYLE_ATTR),
393
393
  /* harmony export */ HONEY_STYLED_COMPONENT_ID_PROP: () => (/* binding */ HONEY_STYLED_COMPONENT_ID_PROP),
394
394
  /* harmony export */ HONEY_STYLE_ATTR: () => (/* binding */ HONEY_STYLE_ATTR),
395
+ /* harmony export */ HONEY_STYLE_PRIORITY_ATTR: () => (/* binding */ HONEY_STYLE_PRIORITY_ATTR),
396
+ /* harmony export */ HONEY_STYLE_REGISTRY_SYMBOL: () => (/* binding */ HONEY_STYLE_REGISTRY_SYMBOL),
395
397
  /* harmony export */ VALID_DOM_ELEMENT_ATTRS: () => (/* binding */ VALID_DOM_ELEMENT_ATTRS),
396
398
  /* harmony export */ __DEV__: () => (/* binding */ __DEV__)
397
399
  /* harmony export */ });
@@ -401,9 +403,11 @@ if (__DEV__) {
401
403
  console.info('[@react-hive/honey-style]: You are running in development mode. ' +
402
404
  'This build is not optimized for production and may include extra checks or logs.');
403
405
  }
406
+ const HONEY_STYLE_REGISTRY_SYMBOL = Symbol.for('honey-style-registry');
404
407
  const HONEY_STYLED_COMPONENT_ID_PROP = '$$ComponentId';
405
408
  const HONEY_GLOBAL_STYLE_ATTR = 'data-honey-global-style';
406
409
  const HONEY_STYLE_ATTR = 'data-honey-style';
410
+ const HONEY_STYLE_PRIORITY_ATTR = 'data-priority';
407
411
  const HONEY_BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
408
412
  const VALID_HTML_ATTRS = new Set([
409
413
  // Standard Attributes
@@ -1713,49 +1717,73 @@ __webpack_require__.r(__webpack_exports__);
1713
1717
  /* harmony export */ });
1714
1718
  /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ "./src/constants.ts");
1715
1719
 
1716
- /**
1717
- * Global style registry, shared across reloads and modules.
1718
- */
1719
1720
  const getStyleRegistry = () => {
1720
- if (!window.__honeyStyleRegistry) {
1721
- window.__honeyStyleRegistry = new Map();
1721
+ const w = window;
1722
+ if (!w[_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_REGISTRY_SYMBOL]) {
1723
+ w[_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_REGISTRY_SYMBOL] = new Map();
1722
1724
  }
1723
- return window.__honeyStyleRegistry;
1725
+ return w[_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_REGISTRY_SYMBOL];
1724
1726
  };
1725
1727
  const styleRegistry = getStyleRegistry();
1726
- let globalStyleTag = null;
1727
1728
  /**
1728
- * Ensures a single <style> tag exists and is attached to <head>.
1729
- *
1730
- * @returns The <style> element.
1729
+ * Cache style tags per priority
1731
1730
  */
1732
- const ensureGlobalStyleTag = () => {
1733
- if (!globalStyleTag) {
1734
- globalStyleTag = document.querySelector(`style[${_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_ATTR}="true"]`);
1735
- if (!globalStyleTag) {
1736
- globalStyleTag = document.createElement('style');
1737
- globalStyleTag.setAttribute(_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_ATTR, 'true');
1738
- document.head.appendChild(globalStyleTag);
1739
- }
1740
- }
1741
- return globalStyleTag;
1742
- };
1731
+ const styleTagsByPriority = new Map();
1732
+ const pendingStyleUpdatePriorities = new Set();
1733
+ let isStyleUpdateScheduled = false;
1743
1734
  /**
1744
- * Updates the global <style> tag with all currently active styles, sorted by priority.
1735
+ * Ensures a <style> tag exists for a given priority.
1745
1736
  */
1746
- const updateGlobalStyleContent = () => {
1747
- const styleTag = ensureGlobalStyleTag();
1748
- const allCss = Array.from(styleRegistry.entries())
1749
- .sort(([, a], [, b]) => a.priority - b.priority)
1750
- .map(([, entry]) => entry.css)
1737
+ const ensureStyleTagForPriority = (priority) => {
1738
+ let styleElement = styleTagsByPriority.get(priority);
1739
+ if (styleElement)
1740
+ return styleElement;
1741
+ styleElement = document.createElement('style');
1742
+ styleElement.setAttribute(_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_ATTR, 'true');
1743
+ styleElement.setAttribute(_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_PRIORITY_ATTR, String(priority));
1744
+ const existing = Array.from(document.querySelectorAll(`style[${_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_ATTR}="true"]`));
1745
+ const insertBefore = existing.find(el => Number(el.getAttribute(_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_PRIORITY_ATTR)) > priority);
1746
+ if (insertBefore) {
1747
+ document.head.insertBefore(styleElement, insertBefore);
1748
+ }
1749
+ else {
1750
+ document.head.appendChild(styleElement);
1751
+ }
1752
+ styleTagsByPriority.set(priority, styleElement);
1753
+ return styleElement;
1754
+ };
1755
+ const updateStyleTagForPriority = (priority) => {
1756
+ const tag = ensureStyleTagForPriority(priority);
1757
+ const css = Array.from(styleRegistry.values())
1758
+ .filter(entry => entry.priority === priority)
1759
+ .map(entry => entry.css)
1751
1760
  .join('\n');
1752
- styleTag.textContent = allCss;
1761
+ if (css) {
1762
+ tag.textContent = css;
1763
+ }
1764
+ else {
1765
+ tag.remove();
1766
+ styleTagsByPriority.delete(priority);
1767
+ }
1768
+ };
1769
+ const flushStyleUpdates = () => {
1770
+ for (const priority of pendingStyleUpdatePriorities) {
1771
+ updateStyleTagForPriority(priority);
1772
+ }
1773
+ pendingStyleUpdatePriorities.clear();
1774
+ };
1775
+ const scheduleStyleUpdate = (priority) => {
1776
+ pendingStyleUpdatePriorities.add(priority);
1777
+ if (isStyleUpdateScheduled) {
1778
+ return;
1779
+ }
1780
+ isStyleUpdateScheduled = true;
1781
+ // microtask → no flicker (runs before paint)
1782
+ queueMicrotask(() => {
1783
+ isStyleUpdateScheduled = false;
1784
+ flushStyleUpdates();
1785
+ });
1753
1786
  };
1754
- /**
1755
- * Creates a cleanup function for a style, which decrements usage count and removes it if unused.
1756
- *
1757
- * @param className - The key of the style.
1758
- */
1759
1787
  const createCleanupFunction = (className) => () => {
1760
1788
  const entry = styleRegistry.get(className);
1761
1789
  if (!entry) {
@@ -1764,22 +1792,17 @@ const createCleanupFunction = (className) => () => {
1764
1792
  entry.usages--;
1765
1793
  if (entry.usages <= 0) {
1766
1794
  styleRegistry.delete(className);
1767
- updateGlobalStyleContent();
1795
+ scheduleStyleUpdate(entry.priority);
1768
1796
  }
1769
1797
  };
1770
- /**
1771
- * Mounts a CSS string under a given class name. Injects into a global <style> tag and manages its lifecycle.
1772
- *
1773
- * @param className - Unique identifier for the style block.
1774
- * @param css - Full CSS rule string (can include multiple rules, media queries, etc.)
1775
- * @param priority - Optional number to determine style ordering (lower = earlier = lower specificity)
1776
- *
1777
- * @returns A cleanup function to unmount the style when it's no longer needed.
1778
- */
1779
1798
  const mountStyle = (className, css, priority = 0) => {
1780
1799
  const existing = styleRegistry.get(className);
1781
1800
  if (existing) {
1782
1801
  existing.usages++;
1802
+ if (existing.priority > priority) {
1803
+ existing.priority = priority;
1804
+ updateStyleTagForPriority(priority);
1805
+ }
1783
1806
  return createCleanupFunction(className);
1784
1807
  }
1785
1808
  styleRegistry.set(className, {
@@ -1787,7 +1810,7 @@ const mountStyle = (className, css, priority = 0) => {
1787
1810
  priority,
1788
1811
  usages: 1,
1789
1812
  });
1790
- updateGlobalStyleContent();
1813
+ updateStyleTagForPriority(priority);
1791
1814
  return createCleanupFunction(className);
1792
1815
  };
1793
1816
 
@@ -2419,6 +2442,8 @@ __webpack_require__.r(__webpack_exports__);
2419
2442
  /* harmony export */ HONEY_GLOBAL_STYLE_ATTR: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_GLOBAL_STYLE_ATTR),
2420
2443
  /* harmony export */ HONEY_STYLED_COMPONENT_ID_PROP: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLED_COMPONENT_ID_PROP),
2421
2444
  /* harmony export */ HONEY_STYLE_ATTR: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_ATTR),
2445
+ /* harmony export */ HONEY_STYLE_PRIORITY_ATTR: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_PRIORITY_ATTR),
2446
+ /* harmony export */ HONEY_STYLE_REGISTRY_SYMBOL: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLE_REGISTRY_SYMBOL),
2422
2447
  /* harmony export */ HoneyStyleContext: () => (/* reexport safe */ _contexts__WEBPACK_IMPORTED_MODULE_1__.HoneyStyleContext),
2423
2448
  /* harmony export */ HoneyStyleProvider: () => (/* reexport safe */ _providers__WEBPACK_IMPORTED_MODULE_2__.HoneyStyleProvider),
2424
2449
  /* harmony export */ VALID_DOM_ELEMENT_ATTRS: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.VALID_DOM_ELEMENT_ATTRS),