@griffel/core - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

__styles.cjs.js

@@ -5,2 +5,5 @@ 'use strict';
 
+require('./constants.cjs.js');
+var store = require('./devtools/store.cjs.js');
+var isDevToolsEnabled = require('./devtools/isDevToolsEnabled.cjs.js');
 var reduceToClassNameForSlots = require('./runtime/reduceToClassNameForSlots.cjs.js');
@@ -43,3 +46,9 @@
 
-    return isLTR ? ltrClassNamesForSlots : rtlClassNamesForSlots;
+    const classNamesForSlots = isLTR ? ltrClassNamesForSlots : rtlClassNamesForSlots;
+
+    if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled.isDevToolsEnabled) {
+      store.debugData.addSequenceDetails(classNamesForSlots);
+    }
+
+    return classNamesForSlots;
   }
@@ -46,0 +55,0 @@

__styles.esm.js

@@ -0,1 +1,4 @@
+import './constants.esm.js';
+import { debugData } from './devtools/store.esm.js';
+import { isDevToolsEnabled } from './devtools/isDevToolsEnabled.esm.js';
 import { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots.esm.js';
@@ -38,3 +41,9 @@
 
-    return isLTR ? ltrClassNamesForSlots : rtlClassNamesForSlots;
+    const classNamesForSlots = isLTR ? ltrClassNamesForSlots : rtlClassNamesForSlots;
+
+    if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {
+      debugData.addSequenceDetails(classNamesForSlots);
+    }
+
+    return classNamesForSlots;
   }
@@ -41,0 +50,0 @@

constants.cjs.js

@@ -6,2 +6,5 @@ 'use strict';
 /** @internal */
+const DATA_BUCKET_ATTR = 'data-make-styles-bucket';
+/** @internal */
+
 const HASH_PREFIX = 'f';
@@ -83,2 +86,3 @@ /** @internal */
 
+exports.DATA_BUCKET_ATTR = DATA_BUCKET_ATTR;
 exports.DEBUG_SEQUENCE_SEPARATOR = DEBUG_SEQUENCE_SEPARATOR;
@@ -85,0 +89,0 @@ exports.DEFINITION_LOOKUP_TABLE = DEFINITION_LOOKUP_TABLE;

constants.d.ts

 import * as CSS from 'csstype';
 import { LookupItem, SequenceHash } from './types';
 /** @internal */
+export declare const DATA_BUCKET_ATTR = "data-make-styles-bucket";
+/** @internal */
 export declare const HASH_PREFIX = "f";
@@ -5,0 +7,0 @@ /** @internal */

constants.esm.js

 /** @internal */
+const DATA_BUCKET_ATTR = 'data-make-styles-bucket';
+/** @internal */
+
 const HASH_PREFIX = 'f';
@@ -78,3 +81,3 @@ /** @internal */
 
-export { DEBUG_SEQUENCE_SEPARATOR, DEFINITION_LOOKUP_TABLE, HASH_PREFIX, LOOKUP_DEFINITIONS_INDEX, LOOKUP_DIR_INDEX, SEQUENCE_HASH_LENGTH, SEQUENCE_PREFIX, SEQUENCE_SIZE, UNSUPPORTED_CSS_PROPERTIES };
+export { DATA_BUCKET_ATTR, DEBUG_SEQUENCE_SEPARATOR, DEFINITION_LOOKUP_TABLE, HASH_PREFIX, LOOKUP_DEFINITIONS_INDEX, LOOKUP_DIR_INDEX, SEQUENCE_HASH_LENGTH, SEQUENCE_PREFIX, SEQUENCE_SIZE, UNSUPPORTED_CSS_PROPERTIES };
 //# sourceMappingURL=constants.esm.js.map

index.cjs.js

@@ -14,2 +14,3 @@ 'use strict';
 var borderWidth = require('./shorthands/borderWidth.cjs.js');
+var flex = require('./shorthands/flex.cjs.js');
 var gap = require('./shorthands/gap.cjs.js');
@@ -28,2 +29,4 @@ var margin = require('./shorthands/margin.cjs.js');
 var resolveStyleRulesForSlots = require('./resolveStyleRulesForSlots.cjs.js');
+var __css = require('./__css.cjs.js');
+var reduceToClassNameForSlots = require('./runtime/reduceToClassNameForSlots.cjs.js');
 var resolveStyleRules = require('./runtime/resolveStyleRules.cjs.js');
@@ -44,2 +47,3 @@ var __styles = require('./__styles.cjs.js');
   borderWidth: borderWidth.borderWidth,
+  flex: flex.flex,
   gap: gap.gap,
@@ -60,4 +64,7 @@ margin: margin.margin,
 exports.resolveStyleRulesForSlots = resolveStyleRulesForSlots.resolveStyleRulesForSlots;
+exports.__css = __css.__css;
+exports.reduceToClassNameForSlots = reduceToClassNameForSlots.reduceToClassNameForSlots;
 exports.resolveStyleRules = resolveStyleRules.resolveStyleRules;
 exports.__styles = __styles.__styles;
+exports.DATA_BUCKET_ATTR = constants.DATA_BUCKET_ATTR;
 exports.DEBUG_SEQUENCE_SEPARATOR = constants.DEBUG_SEQUENCE_SEPARATOR;
@@ -64,0 +71,0 @@ exports.DEFINITION_LOOKUP_TABLE = constants.DEFINITION_LOOKUP_TABLE;

index.d.ts

@@ -1,2 +0,2 @@
-import { border, borderLeft, borderBottom, borderRight, borderTop, borderColor, borderStyle, borderRadius, borderWidth, gap, margin, padding, overflow, inset, outline } from './shorthands/index';
+import { border, borderLeft, borderBottom, borderRight, borderTop, borderColor, borderStyle, borderRadius, borderWidth, flex, gap, margin, padding, overflow, inset, outline } from './shorthands/index';
 export declare const shorthands: {
@@ -12,2 +12,3 @@ border: typeof border;
     borderWidth: typeof borderWidth;
+    flex: typeof flex;
     gap: typeof gap;
@@ -28,2 +29,4 @@ margin: typeof margin;
 export { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots';
+export { __css } from './__css';
+export { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots';
 export { resolveStyleRules } from './runtime/resolveStyleRules';
@@ -30,0 +33,0 @@ export { __styles } from './__styles';

index.esm.js

@@ -10,2 +10,3 @@ import { border } from './shorthands/border.esm.js';
 import { borderWidth } from './shorthands/borderWidth.esm.js';
+import { flex } from './shorthands/flex.esm.js';
 import { gap } from './shorthands/gap.esm.js';
@@ -24,5 +25,7 @@ import { margin } from './shorthands/margin.esm.js';
 export { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots.esm.js';
+export { __css } from './__css.esm.js';
+export { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots.esm.js';
 export { resolveStyleRules } from './runtime/resolveStyleRules.esm.js';
 export { __styles } from './__styles.esm.js';
-export { DEBUG_SEQUENCE_SEPARATOR, DEFINITION_LOOKUP_TABLE, HASH_PREFIX, LOOKUP_DEFINITIONS_INDEX, LOOKUP_DIR_INDEX, SEQUENCE_HASH_LENGTH, SEQUENCE_PREFIX, SEQUENCE_SIZE, UNSUPPORTED_CSS_PROPERTIES } from './constants.esm.js';
+export { DATA_BUCKET_ATTR, DEBUG_SEQUENCE_SEPARATOR, DEFINITION_LOOKUP_TABLE, HASH_PREFIX, LOOKUP_DEFINITIONS_INDEX, LOOKUP_DIR_INDEX, SEQUENCE_HASH_LENGTH, SEQUENCE_PREFIX, SEQUENCE_SIZE, UNSUPPORTED_CSS_PROPERTIES } from './constants.esm.js';
 
@@ -40,2 +43,3 @@ // This should be just "export * as shorthands from "
   borderWidth,
+  flex,
   gap,
@@ -42,0 +46,0 @@ margin,

package.json

 {
   "name": "@griffel/core",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "DOM implementation of Atomic CSS-in-JS",
@@ -5,0 +5,0 @@ "license": "MIT",

renderer/createDOMRenderer.cjs.js

@@ -8,5 +8,8 @@ 'use strict';
 var store = require('../devtools/store.cjs.js');
+var normalizeCSSBucketEntry = require('../runtime/utils/normalizeCSSBucketEntry.cjs.js');
 var getStyleSheetForBucket = require('./getStyleSheetForBucket.cjs.js');
 
 let lastIndex = 0;
+
+const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
 /**
@@ -18,9 +21,12 @@ * Creates a new instances of a renderer.
 
+
 function createDOMRenderer(target = typeof document === 'undefined' ? undefined : document, options = {}) {
   const {
-    unstable_filterCSSRule
+    unstable_filterCSSRule,
+    compareMediaQueries = defaultCompareMediaQueries
   } = options;
   const renderer = {
     insertionCache: {},
-    styleElements: {},
+    stylesheets: {},
+    compareMediaQueries,
     id: `d${lastIndex++}`,
@@ -31,7 +37,7 @@
       for (const styleBucketName in cssRules) {
-        const cssRulesForBucket = cssRules[styleBucketName];
-        const sheet = target && getStyleSheetForBucket.getStyleSheetForBucket(styleBucketName, target, renderer, options.styleElementAttributes); // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
+        const cssRulesForBucket = cssRules[styleBucketName]; // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
 
         for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {
-          const ruleCSS = cssRulesForBucket[i];
+          const [ruleCSS, metadata] = normalizeCSSBucketEntry.normalizeCSSBucketEntry(cssRulesForBucket[i]);
+          const sheet = getStyleSheetForBucket.getStyleSheetForBucket(styleBucketName, target, renderer, options.styleElementAttributes, metadata);
 
@@ -48,18 +54,16 @@ if (renderer.insertionCache[ruleCSS]) {
 
-          if (sheet) {
-            try {
-              if (unstable_filterCSSRule) {
-                if (unstable_filterCSSRule(ruleCSS)) {
-                  sheet.insertRule(ruleCSS, sheet.cssRules.length);
-                }
-              } else {
-                sheet.insertRule(ruleCSS, sheet.cssRules.length);
+          try {
+            if (unstable_filterCSSRule) {
+              if (unstable_filterCSSRule(ruleCSS)) {
+                sheet.insertRule(ruleCSS);
               }
-            } catch (e) {
-              // We've disabled these warnings due to false-positive errors with browser prefixes
-              if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
-                // eslint-disable-next-line no-console
-                console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
-              }
+            } else {
+              sheet.insertRule(ruleCSS);
             }
+          } catch (e) {
+            // We've disabled these warnings due to false-positive errors with browser prefixes
+            if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
+              // eslint-disable-next-line no-console
+              console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
+            }
           }
@@ -66,0 +70,0 @@ }

renderer/createDOMRenderer.d.ts

@@ -18,2 +18,8 @@ import { GriffelRenderer } from '../types';
     unstable_filterCSSRule?: (cssRule: string) => boolean;
+    /**
+     * @param a - media query
+     * @param b - media query
+     * @returns positive number if a > b or negative number if a < b
+     */
+    compareMediaQueries?: (a: string, b: string) => number;
 }
@@ -20,0 +26,0 @@ /**

renderer/createDOMRenderer.esm.js

 import { injectDevTools } from '../devtools/injectDevTools.esm.js';
 import { isDevToolsEnabled } from '../devtools/isDevToolsEnabled.esm.js';
 import { debugData } from '../devtools/store.esm.js';
+import { normalizeCSSBucketEntry } from '../runtime/utils/normalizeCSSBucketEntry.esm.js';
 import { getStyleSheetForBucket } from './getStyleSheetForBucket.esm.js';
 
 let lastIndex = 0;
+
+const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
 /**
@@ -13,9 +16,12 @@ * Creates a new instances of a renderer.
 
+
 function createDOMRenderer(target = typeof document === 'undefined' ? undefined : document, options = {}) {
   const {
-    unstable_filterCSSRule
+    unstable_filterCSSRule,
+    compareMediaQueries = defaultCompareMediaQueries
   } = options;
   const renderer = {
     insertionCache: {},
-    styleElements: {},
+    stylesheets: {},
+    compareMediaQueries,
     id: `d${lastIndex++}`,
@@ -26,7 +32,7 @@
       for (const styleBucketName in cssRules) {
-        const cssRulesForBucket = cssRules[styleBucketName];
-        const sheet = target && getStyleSheetForBucket(styleBucketName, target, renderer, options.styleElementAttributes); // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
+        const cssRulesForBucket = cssRules[styleBucketName]; // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
 
         for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {
-          const ruleCSS = cssRulesForBucket[i];
+          const [ruleCSS, metadata] = normalizeCSSBucketEntry(cssRulesForBucket[i]);
+          const sheet = getStyleSheetForBucket(styleBucketName, target, renderer, options.styleElementAttributes, metadata);
 
@@ -43,18 +49,16 @@ if (renderer.insertionCache[ruleCSS]) {
 
-          if (sheet) {
-            try {
-              if (unstable_filterCSSRule) {
-                if (unstable_filterCSSRule(ruleCSS)) {
-                  sheet.insertRule(ruleCSS, sheet.cssRules.length);
-                }
-              } else {
-                sheet.insertRule(ruleCSS, sheet.cssRules.length);
+          try {
+            if (unstable_filterCSSRule) {
+              if (unstable_filterCSSRule(ruleCSS)) {
+                sheet.insertRule(ruleCSS);
               }
-            } catch (e) {
-              // We've disabled these warnings due to false-positive errors with browser prefixes
-              if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
-                // eslint-disable-next-line no-console
-                console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
-              }
+            } else {
+              sheet.insertRule(ruleCSS);
             }
+          } catch (e) {
+            // We've disabled these warnings due to false-positive errors with browser prefixes
+            if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
+              // eslint-disable-next-line no-console
+              console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
+            }
           }
@@ -61,0 +65,0 @@ }

renderer/getStyleSheetForBucket.cjs.js

@@ -5,2 +5,5 @@ 'use strict';
 
+var constants = require('../constants.cjs.js');
+var createIsomorphicStyleSheet = require('./createIsomorphicStyleSheet.cjs.js');
+
 /**
@@ -11,2 +14,3 @@ * Ordered style buckets using their short pseudo name.
  */
+
 const styleBucketOrdering = [// catch-all
@@ -22,3 +26,9 @@ 'd', // link
 'k', // at-rules
-'t'];
+'t', // @media rules
+'m']; // avoid repeatedly calling `indexOf`to determine order during new insertions
+
+const styleBucketOrderingMap = /*#__PURE__*/styleBucketOrdering.reduce((acc, cur, j) => {
+  acc[cur] = j;
+  return acc;
+}, {});
 /**
@@ -28,28 +38,65 @@ * Lazily adds a `<style>` bucket to the `<head>`. This will ensure that the style buckets are ordered.
 
-function getStyleSheetForBucket(bucketName, target, renderer, elementAttributes = {}) {
-  if (!renderer.styleElements[bucketName]) {
-    let currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
-    let nextBucketFromCache = null; // Find the next bucket which we will add our new style bucket before.
+function getStyleSheetForBucket(bucketName, target, renderer, elementAttributes = {}, metadata) {
+  let stylesheetKey = bucketName;
 
-    for (; currentBucketIndex < styleBucketOrdering.length; currentBucketIndex++) {
-      const nextBucket = renderer.styleElements[styleBucketOrdering[currentBucketIndex]];
+  if (bucketName === 'm' && metadata) {
+    stylesheetKey = bucketName + metadata['m'];
+  }
 
-      if (nextBucket) {
-        nextBucketFromCache = nextBucket;
-        break;
-      }
+  if (!renderer.stylesheets[stylesheetKey]) {
+    const tag = target && target.createElement('style');
+
+    if (bucketName === 'm' && metadata) {
+      elementAttributes['media'] = metadata['m'];
     }
 
-    const tag = target.createElement('style');
-    tag.dataset['makeStylesBucket'] = bucketName;
+    const stylesheet = createIsomorphicStyleSheet.createIsomorphicStyleSheet(tag, bucketName, elementAttributes);
+    renderer.stylesheets[stylesheetKey] = stylesheet;
 
-    for (const attribute in elementAttributes) {
-      tag.setAttribute(attribute, elementAttributes[attribute]);
+    if (target && tag) {
+      const elementSibling = findElementSibling(target, bucketName, renderer, metadata);
+      target.head.insertBefore(tag, elementSibling);
     }
+  }
 
-    renderer.styleElements[bucketName] = tag;
-    target.head.insertBefore(tag, nextBucketFromCache);
+  return renderer.stylesheets[stylesheetKey];
+}
+/**
+ * Finds an element before which the new bucket style element should be inserted following the
+ * bucket sort order
+ *
+ * @param target - document
+ * @param targetBucket - The bucket that should be inserted to DOM
+ * @param renderer - Griffel renderer
+ * @param metadata - metadata for CSS rule
+ * @returns - Smallest style element with greater sort order than the current bucket
+ */
+
+function findElementSibling(target, targetBucket, renderer, metadata) {
+  const targetOrder = styleBucketOrderingMap[targetBucket]; // Similar to javascript sort comparators where
+  // a positive value is increasing sort order
+  // a negative value is decreasing sort order
+
+  let comparer = el => targetOrder - styleBucketOrderingMap[el.getAttribute(constants.DATA_BUCKET_ATTR)];
+
+  let styleElements = target.head.querySelectorAll(`[${constants.DATA_BUCKET_ATTR}]`);
+
+  if (targetBucket === 'm' && metadata) {
+    const mediaElements = target.head.querySelectorAll(`[${constants.DATA_BUCKET_ATTR}="${targetBucket}"]`); // only reduce the scope of the search and change comparer
+    // if there are other media buckets already on the page
+
+    if (mediaElements.length) {
+      styleElements = mediaElements;
+
+      comparer = el => renderer.compareMediaQueries(metadata['m'], el.media);
+    }
   }
 
-  return renderer.styleElements[bucketName].sheet;
+  for (const styleElement of styleElements) {
+    if (comparer(styleElement) < 0) {
+      return styleElement;
+    }
+  }
+
+  return null;
 }
@@ -56,0 +103,0 @@

renderer/getStyleSheetForBucket.d.ts

@@ -1,2 +0,2 @@
-import { GriffelRenderer, StyleBucketName } from '../types';
+import { GriffelRenderer, IsomorphicStyleSheet, StyleBucketName } from '../types';
 /**
@@ -11,2 +11,2 @@ * Ordered style buckets using their short pseudo name.
  */
-export declare function getStyleSheetForBucket(bucketName: StyleBucketName, target: Document, renderer: GriffelRenderer, elementAttributes?: Record<string, string>): CSSStyleSheet;
+export declare function getStyleSheetForBucket(bucketName: StyleBucketName, target: Document | undefined, renderer: GriffelRenderer, elementAttributes?: Record<string, string>, metadata?: Record<string, unknown>): IsomorphicStyleSheet;

renderer/getStyleSheetForBucket.esm.js

@@ -0,1 +1,4 @@
+import { DATA_BUCKET_ATTR } from '../constants.esm.js';
+import { createIsomorphicStyleSheet } from './createIsomorphicStyleSheet.esm.js';
+
 /**
@@ -6,2 +9,3 @@ * Ordered style buckets using their short pseudo name.
  */
+
 const styleBucketOrdering = [// catch-all
@@ -17,3 +21,9 @@ 'd', // link
 'k', // at-rules
-'t'];
+'t', // @media rules
+'m']; // avoid repeatedly calling `indexOf`to determine order during new insertions
+
+const styleBucketOrderingMap = /*#__PURE__*/styleBucketOrdering.reduce((acc, cur, j) => {
+  acc[cur] = j;
+  return acc;
+}, {});
 /**
@@ -23,28 +33,65 @@ * Lazily adds a `<style>` bucket to the `<head>`. This will ensure that the style buckets are ordered.
 
-function getStyleSheetForBucket(bucketName, target, renderer, elementAttributes = {}) {
-  if (!renderer.styleElements[bucketName]) {
-    let currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
-    let nextBucketFromCache = null; // Find the next bucket which we will add our new style bucket before.
+function getStyleSheetForBucket(bucketName, target, renderer, elementAttributes = {}, metadata) {
+  let stylesheetKey = bucketName;
 
-    for (; currentBucketIndex < styleBucketOrdering.length; currentBucketIndex++) {
-      const nextBucket = renderer.styleElements[styleBucketOrdering[currentBucketIndex]];
+  if (bucketName === 'm' && metadata) {
+    stylesheetKey = bucketName + metadata['m'];
+  }
 
-      if (nextBucket) {
-        nextBucketFromCache = nextBucket;
-        break;
-      }
+  if (!renderer.stylesheets[stylesheetKey]) {
+    const tag = target && target.createElement('style');
+
+    if (bucketName === 'm' && metadata) {
+      elementAttributes['media'] = metadata['m'];
     }
 
-    const tag = target.createElement('style');
-    tag.dataset['makeStylesBucket'] = bucketName;
+    const stylesheet = createIsomorphicStyleSheet(tag, bucketName, elementAttributes);
+    renderer.stylesheets[stylesheetKey] = stylesheet;
 
-    for (const attribute in elementAttributes) {
-      tag.setAttribute(attribute, elementAttributes[attribute]);
+    if (target && tag) {
+      const elementSibling = findElementSibling(target, bucketName, renderer, metadata);
+      target.head.insertBefore(tag, elementSibling);
     }
+  }
 
-    renderer.styleElements[bucketName] = tag;
-    target.head.insertBefore(tag, nextBucketFromCache);
+  return renderer.stylesheets[stylesheetKey];
+}
+/**
+ * Finds an element before which the new bucket style element should be inserted following the
+ * bucket sort order
+ *
+ * @param target - document
+ * @param targetBucket - The bucket that should be inserted to DOM
+ * @param renderer - Griffel renderer
+ * @param metadata - metadata for CSS rule
+ * @returns - Smallest style element with greater sort order than the current bucket
+ */
+
+function findElementSibling(target, targetBucket, renderer, metadata) {
+  const targetOrder = styleBucketOrderingMap[targetBucket]; // Similar to javascript sort comparators where
+  // a positive value is increasing sort order
+  // a negative value is decreasing sort order
+
+  let comparer = el => targetOrder - styleBucketOrderingMap[el.getAttribute(DATA_BUCKET_ATTR)];
+
+  let styleElements = target.head.querySelectorAll(`[${DATA_BUCKET_ATTR}]`);
+
+  if (targetBucket === 'm' && metadata) {
+    const mediaElements = target.head.querySelectorAll(`[${DATA_BUCKET_ATTR}="${targetBucket}"]`); // only reduce the scope of the search and change comparer
+    // if there are other media buckets already on the page
+
+    if (mediaElements.length) {
+      styleElements = mediaElements;
+
+      comparer = el => renderer.compareMediaQueries(metadata['m'], el.media);
+    }
   }
 
-  return renderer.styleElements[bucketName].sheet;
+  for (const styleElement of styleElements) {
+    if (comparer(styleElement) < 0) {
+      return styleElement;
+    }
+  }
+
+  return null;
 }
@@ -51,0 +98,0 @@

renderer/rehydrateRendererCache.cjs.js

@@ -5,4 +5,6 @@ 'use strict';
 
-// Regexps to extract names of classes and animations
+var createIsomorphicStyleSheet = require('./createIsomorphicStyleSheet.cjs.js');
+
 // https://github.com/styletron/styletron/blob/e0fcae826744eb00ce679ac613a1b10d44256660/packages/styletron-engine-atomic/src/client/client.js#L8
+
 const KEYFRAMES_HYDRATOR = /@(-webkit-)?keyframes ([^{]+){((?:(?:from|to|(?:\d+\.?\d*%))\{(?:[^}])*})*)}/g;
@@ -13,3 +15,4 @@ const AT_RULES_HYDRATOR = /@(media|supports|layer)[^{]+\{([\s\S]+?})\s*}/g;
   k: KEYFRAMES_HYDRATOR,
-  t: AT_RULES_HYDRATOR
+  t: AT_RULES_HYDRATOR,
+  m: AT_RULES_HYDRATOR
 };
@@ -28,6 +31,7 @@ /**
       const bucketName = styleElement.dataset['makeStylesBucket'];
-      const regex = regexps[bucketName] || STYLES_HYDRATOR; // 👇 If some elements are not created yet, we will register them in renderer
+      const regex = regexps[bucketName] || STYLES_HYDRATOR;
+      const stylesheetKey = bucketName === 'm' ? bucketName + styleElement.media : bucketName; // 👇 If some elements are not created yet, we will register them in renderer
 
-      if (!renderer.styleElements[bucketName]) {
-        renderer.styleElements[bucketName] = styleElement;
+      if (!renderer.stylesheets[stylesheetKey]) {
+        renderer.stylesheets[stylesheetKey] = createIsomorphicStyleSheet.createIsomorphicStyleSheetFromElement(styleElement);
       }
@@ -34,0 +38,0 @@

renderer/rehydrateRendererCache.esm.js

@@ -1,3 +0,5 @@
-// Regexps to extract names of classes and animations
+import { createIsomorphicStyleSheetFromElement } from './createIsomorphicStyleSheet.esm.js';
+
 // https://github.com/styletron/styletron/blob/e0fcae826744eb00ce679ac613a1b10d44256660/packages/styletron-engine-atomic/src/client/client.js#L8
+
 const KEYFRAMES_HYDRATOR = /@(-webkit-)?keyframes ([^{]+){((?:(?:from|to|(?:\d+\.?\d*%))\{(?:[^}])*})*)}/g;
@@ -8,3 +10,4 @@ const AT_RULES_HYDRATOR = /@(media|supports|layer)[^{]+\{([\s\S]+?})\s*}/g;
   k: KEYFRAMES_HYDRATOR,
-  t: AT_RULES_HYDRATOR
+  t: AT_RULES_HYDRATOR,
+  m: AT_RULES_HYDRATOR
 };
@@ -23,6 +26,7 @@ /**
       const bucketName = styleElement.dataset['makeStylesBucket'];
-      const regex = regexps[bucketName] || STYLES_HYDRATOR; // 👇 If some elements are not created yet, we will register them in renderer
+      const regex = regexps[bucketName] || STYLES_HYDRATOR;
+      const stylesheetKey = bucketName === 'm' ? bucketName + styleElement.media : bucketName; // 👇 If some elements are not created yet, we will register them in renderer
 
-      if (!renderer.styleElements[bucketName]) {
-        renderer.styleElements[bucketName] = styleElement;
+      if (!renderer.stylesheets[stylesheetKey]) {
+        renderer.stylesheets[stylesheetKey] = createIsomorphicStyleSheetFromElement(styleElement);
       }
@@ -29,0 +33,0 @@

runtime/getStyleBucketName.cjs.js

@@ -45,4 +45,8 @@ 'use strict';
 function getStyleBucketName(pseudo, layer, media, support) {
-  // We are grouping all the at-rules like @media, @supports etc under `t` bucket.
-  if (media || layer || support) {
+  if (media) {
+    return 'm';
+  } // We are grouping all the at-rules like @supports etc under `t` bucket.
+
+
+  if (layer || support) {
     return 't';
@@ -49,0 +53,0 @@ }

runtime/getStyleBucketName.esm.js

@@ -41,4 +41,8 @@ /**
 function getStyleBucketName(pseudo, layer, media, support) {
-  // We are grouping all the at-rules like @media, @supports etc under `t` bucket.
-  if (media || layer || support) {
+  if (media) {
+    return 'm';
+  } // We are grouping all the at-rules like @supports etc under `t` bucket.
+
+
+  if (layer || support) {
     return 't';
@@ -45,0 +49,0 @@ }

runtime/resolveStyleRules.cjs.js

@@ -29,8 +29,26 @@ 'use strict';
 
-function pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS) {
-  cssRulesByBucket[styleBucketName] = cssRulesByBucket[styleBucketName] || [];
-  cssRulesByBucket[styleBucketName].push(ltrCSS);
+function createBucketEntry(cssRule, metadata) {
+  if (metadata) {
+    return [cssRule, metadata];
+  }
 
+  return cssRule;
+}
+
+function pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS, media) {
+  var _a;
+
+  let metadata;
+
+  if (styleBucketName === 'm' && media) {
+    metadata = {
+      m: media
+    };
+  }
+
+  (_a = cssRulesByBucket[styleBucketName]) !== null && _a !== void 0 ? _a : cssRulesByBucket[styleBucketName] = [];
+  cssRulesByBucket[styleBucketName].push(createBucketEntry(ltrCSS, metadata));
+
   if (rtlCSS) {
-    cssRulesByBucket[styleBucketName].push(rtlCSS);
+    cssRulesByBucket[styleBucketName].push(createBucketEntry(rtlCSS, metadata));
   }
@@ -103,3 +121,3 @@ }
       pushToClassesMap(cssClassesMap, key, className, rtlClassName);
-      pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS);
+      pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS, media);
     } else if (property === 'animationName') {
@@ -128,3 +146,3 @@ const animationNameValue = Array.isArray(value) ? value : [value];
           pushToCSSRules(cssRulesByBucket, // keyframes styles should be inserted into own bucket
-          'k', keyframeRules[i], rtlKeyframeRules[i]);
+          'k', keyframeRules[i], rtlKeyframeRules[i], media);
         }
@@ -198,3 +216,3 @@
       pushToClassesMap(cssClassesMap, key, className, rtlClassName);
-      pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS);
+      pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS, media);
     } else if (isObject.isObject(value)) {
@@ -201,0 +219,0 @@ if (isNestedSelector.isNestedSelector(property)) {

runtime/resolveStyleRules.esm.js

@@ -21,8 +21,26 @@ import hash from '@emotion/hash';
 
-function pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS) {
-  cssRulesByBucket[styleBucketName] = cssRulesByBucket[styleBucketName] || [];
-  cssRulesByBucket[styleBucketName].push(ltrCSS);
+function createBucketEntry(cssRule, metadata) {
+  if (metadata) {
+    return [cssRule, metadata];
+  }
 
+  return cssRule;
+}
+
+function pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS, media) {
+  var _a;
+
+  let metadata;
+
+  if (styleBucketName === 'm' && media) {
+    metadata = {
+      m: media
+    };
+  }
+
+  (_a = cssRulesByBucket[styleBucketName]) !== null && _a !== void 0 ? _a : cssRulesByBucket[styleBucketName] = [];
+  cssRulesByBucket[styleBucketName].push(createBucketEntry(ltrCSS, metadata));
+
   if (rtlCSS) {
-    cssRulesByBucket[styleBucketName].push(rtlCSS);
+    cssRulesByBucket[styleBucketName].push(createBucketEntry(rtlCSS, metadata));
   }
@@ -95,3 +113,3 @@ }
       pushToClassesMap(cssClassesMap, key, className, rtlClassName);
-      pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS);
+      pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS, media);
     } else if (property === 'animationName') {
@@ -120,3 +138,3 @@ const animationNameValue = Array.isArray(value) ? value : [value];
           pushToCSSRules(cssRulesByBucket, // keyframes styles should be inserted into own bucket
-          'k', keyframeRules[i], rtlKeyframeRules[i]);
+          'k', keyframeRules[i], rtlKeyframeRules[i], media);
         }
@@ -190,3 +208,3 @@
       pushToClassesMap(cssClassesMap, key, className, rtlClassName);
-      pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS);
+      pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS, media);
     } else if (isObject(value)) {
@@ -193,0 +211,0 @@ if (isNestedSelector(property)) {

shorthands/index.d.ts

@@ -10,2 +10,3 @@ export { border } from './border';
 export { borderWidth } from './borderWidth';
+export { flex } from './flex';
 export { gap } from './gap';
@@ -12,0 +13,0 @@ export { margin } from './margin';

shorthands/types.d.ts

@@ -15,1 +15,2 @@ import * as CSS from 'csstype';
 export declare type InsetInput = ValueOrArray<CSS.Property.Inset<GriffelStylesCSSValue>>;
+export declare type FlexInput = [CSS.Property.Flex, CSS.Property.Flex?, CSS.Property.Flex?];

types.d.ts

@@ -57,2 +57,18 @@ import * as CSS from 'csstype';
 }
+export interface IsomorphicStyleSheet {
+    /**
+     * Attributes applied to the underlying HTMLStyleElement
+     */
+    elementAttributes: Record<string, string>;
+    /**
+     * Underlying HTMLStyleElement
+     */
+    element: HTMLStyleElement | undefined;
+    bucketName: StyleBucketName;
+    /**
+     * Returns all CSS rules on the stylesheet
+     */
+    cssRules(): string[];
+    insertRule(rule: string): number | undefined;
+}
 export interface GriffelRenderer {
@@ -67,3 +83,5 @@ id: string;
      */
-    styleElements: Partial<Record<StyleBucketName, HTMLStyleElement>>;
+    stylesheets: {
+        [key in StyleBucketName]?: IsomorphicStyleSheet;
+    } & Record<string, IsomorphicStyleSheet>;
     /**
@@ -73,2 +91,6 @@ * @private
     insertCSSRules(cssRules: CSSRulesByBucket): void;
+    /**
+     * @private
+     */
+    compareMediaQueries(a: string, b: string): number;
 }
@@ -78,3 +100,3 @@ /**
  */
-export declare type StyleBucketName = 'd' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'k' | 't';
+export declare type StyleBucketName = keyof CSSRulesByBucket;
 export declare type SequenceHash = string;
@@ -85,5 +107,18 @@ export declare type PropertyHash = string;
 export declare type CSSClassesMapBySlot<Slots extends string | number> = Record<Slots, CSSClassesMap>;
-export declare type CSSRulesByBucket = Partial<Record<StyleBucketName, string[]>>;
+export interface CSSRulesByBucket {
+    d?: CSSBucketEntry[];
+    l?: CSSBucketEntry[];
+    v?: CSSBucketEntry[];
+    w?: CSSBucketEntry[];
+    f?: CSSBucketEntry[];
+    i?: CSSBucketEntry[];
+    h?: CSSBucketEntry[];
+    a?: CSSBucketEntry[];
+    k?: CSSBucketEntry[];
+    t?: CSSBucketEntry[];
+    m?: CSSBucketEntry[];
+}
+export declare type CSSBucketEntry = string | [string, Record<string, unknown>];
 export declare type StylesBySlots<Slots extends string | number> = Record<Slots, GriffelStyle>;
 export declare type LookupItem = [/* definitions */ CSSClassesMap, /* dir */ /* dir */ 'rtl' | 'ltr'];
 export {};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

454462

increased by15.28%

Number of package files

279

increased by7.72%

Lines of code

4191

increased by16.58%

Worsened metrics

Number of low supply chain risk alerts

28

increased by16.67%

No dependency changes