@griffel/react 1.0.5 → 1.2.1

package/README.md

@@ -148,6 +148,20 @@ const useClasses = makeStyles({
 });
 ```
 
+### `shorthands.flex`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.flex('auto'),
+    ...shorthands.flex(1, '2.5rem'),
+    ...shorthands.flex(0, 0, 'auto'),
+  },
+});
+```
+
 ### `shorthands.gap`
 
 ```js

package/RendererContext.cjs.js

@@ -65,7 +65,7 @@ const RendererProvider = ({
 /**
  * Returns an instance of current makeStyles() renderer.
  *
- * @private
+ * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
  */
 
 function useRenderer() {

package/RendererContext.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"RendererContext.cjs.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\nexport interface RendererProviderProps {\n  /** An instance of Griffel renderer. */\n  renderer: GriffelRenderer;\n\n  /**\n   * Document used to insert CSS variables to head\n   */\n  targetDocument?: Document;\n}\n\n/**\n * Verifies if an application can use DOM.\n */\nfunction canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\n}\n\n/**\n * @private\n */\nconst RendererContext = React.createContext<GriffelRenderer>(createDOMRenderer());\n\n/**\n * @public\n */\nexport const RendererProvider: React.FC<RendererProviderProps> = ({ children, renderer, targetDocument }) => {\n  if (canUseDOM()) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\n      // \"rehydrateCache()\" can't be called in effects as it needs to be called before any component will be rendered to\n      // avoid double insertion of classes\n      rehydrateRendererCache(renderer, targetDocument);\n    }, [renderer, targetDocument]);\n  }\n\n  return <RendererContext.Provider value={renderer}>{children}</RendererContext.Provider>;\n};\n\n/**\n * Returns an instance of current makeStyles() renderer.\n *\n * @private\n */\nexport function useRenderer(): GriffelRenderer {\n  return React.useContext(RendererContext);\n}\n"],"names":["canUseDOM","window","document","createElement","RendererContext","React","createContext","createDOMRenderer","RendererProvider","children","renderer","targetDocument","useMemo","rehydrateRendererCache","Provider","value","useRenderer","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;;;AAGA,SAASA,SAAT;AACE,SAAO,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAAC,EAAEA,MAAM,CAACC,QAAP,IAAmBD,MAAM,CAACC,QAAP,CAAgBC,aAArC,CAAzC;AACD;AAED;;;;;AAGA,MAAMC,eAAe,gBAAGC,gBAAK,CAACC,aAAN,eAAqCC,sBAAiB,EAAtD,CAAxB;AAEA;;;;MAGaC,gBAAgB,GAAoC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,QAAZ;AAAsBC,EAAAA;AAAtB,CAAD;AAC/D,MAAIX,SAAS,EAAb,EAAiB;AACf;AACA;AACA;AACAK,IAAAA,gBAAK,CAACO,OAAN,CAAc;AACZ;AACA;AACAC,MAAAA,2BAAsB,CAACH,QAAD,EAAWC,cAAX,CAAtB;AACD,KAJD,EAIG,CAACD,QAAD,EAAWC,cAAX,CAJH;AAKD;;AAED,sBAAON,8BAAA,CAACD,eAAe,CAACU,QAAjB;AAA0BC,IAAAA,KAAK,EAAEL;GAAjC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBO;AACd,SAAOX,gBAAK,CAACY,UAAN,CAAiBb,eAAjB,CAAP;AACD;;;;;"}
+{"version":3,"file":"RendererContext.cjs.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\nexport interface RendererProviderProps {\n  /** An instance of Griffel renderer. */\n  renderer: GriffelRenderer;\n\n  /**\n   * Document used to insert CSS variables to head\n   */\n  targetDocument?: Document;\n}\n\n/**\n * Verifies if an application can use DOM.\n */\nfunction canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\n}\n\n/**\n * @private\n */\nconst RendererContext = React.createContext<GriffelRenderer>(createDOMRenderer());\n\n/**\n * @public\n */\nexport const RendererProvider: React.FC<RendererProviderProps> = ({ children, renderer, targetDocument }) => {\n  if (canUseDOM()) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\n      // \"rehydrateCache()\" can't be called in effects as it needs to be called before any component will be rendered to\n      // avoid double insertion of classes\n      rehydrateRendererCache(renderer, targetDocument);\n    }, [renderer, targetDocument]);\n  }\n\n  return <RendererContext.Provider value={renderer}>{children}</RendererContext.Provider>;\n};\n\n/**\n * Returns an instance of current makeStyles() renderer.\n *\n * @private Exported as \"useRenderer_unstable\" use it on own risk. Can be changed or removed without a notice.\n */\nexport function useRenderer(): GriffelRenderer {\n  return React.useContext(RendererContext);\n}\n"],"names":["canUseDOM","window","document","createElement","RendererContext","React","createContext","createDOMRenderer","RendererProvider","children","renderer","targetDocument","useMemo","rehydrateRendererCache","Provider","value","useRenderer","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;;;AAGA,SAASA,SAAT;AACE,SAAO,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAAC,EAAEA,MAAM,CAACC,QAAP,IAAmBD,MAAM,CAACC,QAAP,CAAgBC,aAArC,CAAzC;AACD;AAED;;;;;AAGA,MAAMC,eAAe,gBAAGC,gBAAK,CAACC,aAAN,eAAqCC,sBAAiB,EAAtD,CAAxB;AAEA;;;;MAGaC,gBAAgB,GAAoC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,QAAZ;AAAsBC,EAAAA;AAAtB,CAAD;AAC/D,MAAIX,SAAS,EAAb,EAAiB;AACf;AACA;AACA;AACAK,IAAAA,gBAAK,CAACO,OAAN,CAAc;AACZ;AACA;AACAC,MAAAA,2BAAsB,CAACH,QAAD,EAAWC,cAAX,CAAtB;AACD,KAJD,EAIG,CAACD,QAAD,EAAWC,cAAX,CAJH;AAKD;;AAED,sBAAON,8BAAA,CAACD,eAAe,CAACU,QAAjB;AAA0BC,IAAAA,KAAK,EAAEL;GAAjC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBO;AACd,SAAOX,gBAAK,CAACY,UAAN,CAAiBb,eAAjB,CAAP;AACD;;;;;"}

package/RendererContext.d.ts

@@ -15,6 +15,6 @@ export declare const RendererProvider: React.FC<RendererProviderProps>;
 /**
  * Returns an instance of current makeStyles() renderer.
  *
- * @private
+ * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
  */
 export declare function useRenderer(): GriffelRenderer;

package/RendererContext.esm.js

@@ -41,7 +41,7 @@ const RendererProvider = ({
 /**
  * Returns an instance of current makeStyles() renderer.
  *
- * @private
+ * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
  */
 
 function useRenderer() {

package/RendererContext.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RendererContext.esm.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\nexport interface RendererProviderProps {\n  /** An instance of Griffel renderer. */\n  renderer: GriffelRenderer;\n\n  /**\n   * Document used to insert CSS variables to head\n   */\n  targetDocument?: Document;\n}\n\n/**\n * Verifies if an application can use DOM.\n */\nfunction canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\n}\n\n/**\n * @private\n */\nconst RendererContext = React.createContext<GriffelRenderer>(createDOMRenderer());\n\n/**\n * @public\n */\nexport const RendererProvider: React.FC<RendererProviderProps> = ({ children, renderer, targetDocument }) => {\n  if (canUseDOM()) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\n      // \"rehydrateCache()\" can't be called in effects as it needs to be called before any component will be rendered to\n      // avoid double insertion of classes\n      rehydrateRendererCache(renderer, targetDocument);\n    }, [renderer, targetDocument]);\n  }\n\n  return <RendererContext.Provider value={renderer}>{children}</RendererContext.Provider>;\n};\n\n/**\n * Returns an instance of current makeStyles() renderer.\n *\n * @private\n */\nexport function useRenderer(): GriffelRenderer {\n  return React.useContext(RendererContext);\n}\n"],"names":["canUseDOM","window","document","createElement","RendererContext","React","createContext","createDOMRenderer","RendererProvider","children","renderer","targetDocument","useMemo","rehydrateRendererCache","Provider","value","useRenderer","useContext"],"mappings":";;;AAcA;;;;AAGA,SAASA,SAAT;AACE,SAAO,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAAC,EAAEA,MAAM,CAACC,QAAP,IAAmBD,MAAM,CAACC,QAAP,CAAgBC,aAArC,CAAzC;AACD;AAED;;;;;AAGA,MAAMC,eAAe,gBAAGC,KAAK,CAACC,aAAN,eAAqCC,iBAAiB,EAAtD,CAAxB;AAEA;;;;MAGaC,gBAAgB,GAAoC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,QAAZ;AAAsBC,EAAAA;AAAtB,CAAD;AAC/D,MAAIX,SAAS,EAAb,EAAiB;AACf;AACA;AACA;AACAK,IAAAA,KAAK,CAACO,OAAN,CAAc;AACZ;AACA;AACAC,MAAAA,sBAAsB,CAACH,QAAD,EAAWC,cAAX,CAAtB;AACD,KAJD,EAIG,CAACD,QAAD,EAAWC,cAAX,CAJH;AAKD;;AAED,sBAAON,mBAAA,CAACD,eAAe,CAACU,QAAjB;AAA0BC,IAAAA,KAAK,EAAEL;GAAjC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBO;AACd,SAAOX,KAAK,CAACY,UAAN,CAAiBb,eAAjB,CAAP;AACD;;;;"}
+{"version":3,"file":"RendererContext.esm.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\nexport interface RendererProviderProps {\n  /** An instance of Griffel renderer. */\n  renderer: GriffelRenderer;\n\n  /**\n   * Document used to insert CSS variables to head\n   */\n  targetDocument?: Document;\n}\n\n/**\n * Verifies if an application can use DOM.\n */\nfunction canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\n}\n\n/**\n * @private\n */\nconst RendererContext = React.createContext<GriffelRenderer>(createDOMRenderer());\n\n/**\n * @public\n */\nexport const RendererProvider: React.FC<RendererProviderProps> = ({ children, renderer, targetDocument }) => {\n  if (canUseDOM()) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\n      // \"rehydrateCache()\" can't be called in effects as it needs to be called before any component will be rendered to\n      // avoid double insertion of classes\n      rehydrateRendererCache(renderer, targetDocument);\n    }, [renderer, targetDocument]);\n  }\n\n  return <RendererContext.Provider value={renderer}>{children}</RendererContext.Provider>;\n};\n\n/**\n * Returns an instance of current makeStyles() renderer.\n *\n * @private Exported as \"useRenderer_unstable\" use it on own risk. Can be changed or removed without a notice.\n */\nexport function useRenderer(): GriffelRenderer {\n  return React.useContext(RendererContext);\n}\n"],"names":["canUseDOM","window","document","createElement","RendererContext","React","createContext","createDOMRenderer","RendererProvider","children","renderer","targetDocument","useMemo","rehydrateRendererCache","Provider","value","useRenderer","useContext"],"mappings":";;;AAcA;;;;AAGA,SAASA,SAAT;AACE,SAAO,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAAC,EAAEA,MAAM,CAACC,QAAP,IAAmBD,MAAM,CAACC,QAAP,CAAgBC,aAArC,CAAzC;AACD;AAED;;;;;AAGA,MAAMC,eAAe,gBAAGC,KAAK,CAACC,aAAN,eAAqCC,iBAAiB,EAAtD,CAAxB;AAEA;;;;MAGaC,gBAAgB,GAAoC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,QAAZ;AAAsBC,EAAAA;AAAtB,CAAD;AAC/D,MAAIX,SAAS,EAAb,EAAiB;AACf;AACA;AACA;AACAK,IAAAA,KAAK,CAACO,OAAN,CAAc;AACZ;AACA;AACAC,MAAAA,sBAAsB,CAACH,QAAD,EAAWC,cAAX,CAAtB;AACD,KAJD,EAIG,CAACD,QAAD,EAAWC,cAAX,CAJH;AAKD;;AAED,sBAAON,mBAAA,CAACD,eAAe,CAACU,QAAjB;AAA0BC,IAAAA,KAAK,EAAEL;GAAjC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBO;AACd,SAAOX,KAAK,CAACY,UAAN,CAAiBb,eAAjB,CAAP;AACD;;;;"}

package/__css.cjs.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@griffel/core');
+var TextDirectionContext = require('./TextDirectionContext.cjs.js');
+
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+function __css(classesMapBySlot) {
+  const getStyles = core.__css(classesMapBySlot);
+  return function useClasses() {
+    const dir = TextDirectionContext.useTextDirection();
+    return getStyles({
+      dir
+    });
+  };
+}
+
+exports.__css = __css;
+//# sourceMappingURL=__css.cjs.js.map

package/__css.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__css.cjs.js","sources":["../../../packages/react/src/__css.ts"],"sourcesContent":["import { __css as vanillaCSS } from '@griffel/core';\nimport type { CSSClassesMapBySlot } from '@griffel/core';\n\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __css<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>) {\n  const getStyles = vanillaCSS(classesMapBySlot);\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n\n    return getStyles({ dir });\n  };\n}\n"],"names":["__css","classesMapBySlot","getStyles","vanillaCSS","useClasses","dir","useTextDirection"],"mappings":";;;;;;;AAKA;;;;;AAKA;;SACgBA,MAA4BC;AAC1C,QAAMC,SAAS,GAAGC,UAAU,CAACF,gBAAD,CAA5B;AAEA,SAAO,SAASG,UAAT;AACL,UAAMC,GAAG,GAAGC,qCAAgB,EAA5B;AAEA,WAAOJ,SAAS,CAAC;AAAEG,MAAAA;AAAF,KAAD,CAAhB;AACD,GAJD;AAKD;;;;"}

package/__css.d.ts

@@ -0,0 +1,7 @@
+import type { CSSClassesMapBySlot } from '@griffel/core';
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+export declare function __css<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>): () => Record<Slots, string>;

package/__css.esm.js

@@ -0,0 +1,22 @@
+import { __css as __css$1 } from '@griffel/core';
+import { useTextDirection } from './TextDirectionContext.esm.js';
+
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+function __css(classesMapBySlot) {
+  const getStyles = __css$1(classesMapBySlot);
+  return function useClasses() {
+    const dir = useTextDirection();
+    return getStyles({
+      dir
+    });
+  };
+}
+
+export { __css };
+//# sourceMappingURL=__css.esm.js.map

package/__css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__css.esm.js","sources":["../../../packages/react/src/__css.ts"],"sourcesContent":["import { __css as vanillaCSS } from '@griffel/core';\nimport type { CSSClassesMapBySlot } from '@griffel/core';\n\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __css<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>) {\n  const getStyles = vanillaCSS(classesMapBySlot);\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n\n    return getStyles({ dir });\n  };\n}\n"],"names":["__css","classesMapBySlot","getStyles","vanillaCSS","useClasses","dir","useTextDirection"],"mappings":";;;AAKA;;;;;AAKA;;SACgBA,MAA4BC;AAC1C,QAAMC,SAAS,GAAGC,OAAU,CAACF,gBAAD,CAA5B;AAEA,SAAO,SAASG,UAAT;AACL,UAAMC,GAAG,GAAGC,gBAAgB,EAA5B;AAEA,WAAOJ,SAAS,CAAC;AAAEG,MAAAA;AAAF,KAAD,CAAhB;AACD,GAJD;AAKD;;;;"}

package/index.cjs.js

@@ -8,6 +8,7 @@ var makeStaticStyles = require('./makeStaticStyles.cjs.js');
 var renderToStyleElements = require('./renderToStyleElements.cjs.js');
 var RendererContext = require('./RendererContext.cjs.js');
 var TextDirectionContext = require('./TextDirectionContext.cjs.js');
+var __css = require('./__css.cjs.js');
 var __styles = require('./__styles.cjs.js');
 
 
@@ -28,6 +29,8 @@ exports.makeStyles = makeStyles.makeStyles;
 exports.makeStaticStyles = makeStaticStyles.makeStaticStyles;
 exports.renderToStyleElements = renderToStyleElements.renderToStyleElements;
 exports.RendererProvider = RendererContext.RendererProvider;
+exports.useRenderer_unstable = RendererContext.useRenderer;
 exports.TextDirectionProvider = TextDirectionContext.TextDirectionProvider;
+exports.__css = __css.__css;
 exports.__styles = __styles.__styles;
 //# sourceMappingURL=index.cjs.js.map

package/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.d.ts

@@ -3,6 +3,7 @@ export type { GriffelStyle } from '@griffel/core';
 export { makeStyles } from './makeStyles';
 export { makeStaticStyles } from './makeStaticStyles';
 export { renderToStyleElements } from './renderToStyleElements';
-export { RendererProvider } from './RendererContext';
+export { RendererProvider, useRenderer as useRenderer_unstable } from './RendererContext';
 export { TextDirectionProvider } from './TextDirectionContext';
+export { __css } from './__css';
 export { __styles } from './__styles';

package/index.esm.js

@@ -2,7 +2,8 @@ export { createDOMRenderer, mergeClasses, shorthands } from '@griffel/core';
 export { makeStyles } from './makeStyles.esm.js';
 export { makeStaticStyles } from './makeStaticStyles.esm.js';
 export { renderToStyleElements } from './renderToStyleElements.esm.js';
-export { RendererProvider } from './RendererContext.esm.js';
+export { RendererProvider, useRenderer as useRenderer_unstable } from './RendererContext.esm.js';
 export { TextDirectionProvider } from './TextDirectionContext.esm.js';
+export { __css } from './__css.esm.js';
 export { __styles } from './__styles.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/react",
-  "version": "1.0.5",
+  "version": "1.2.1",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@griffel/core": "^1.3.1",
+    "@griffel/core": "^1.4.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/renderToStyleElements.cjs.js

@@ -32,34 +32,39 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
  */
 
 function renderToStyleElements(renderer) {
-  const styles = core.styleBucketOrdering.reduce((acc, bucketName) => {
-    return Object.assign(Object.assign({}, acc), {
-      [bucketName]: []
-    });
-  }, {}); // eslint-disable-next-line guard-for-in
+  const stylesheets = Object.values(renderer.stylesheets) // first sort: bucket names
+  .sort((a, b) => {
+    return core.styleBucketOrdering.indexOf(a.bucketName) - core.styleBucketOrdering.indexOf(b.bucketName);
+  }) // second sort: media queries
+  .sort((a, b) => {
+    const mediaA = a.elementAttributes['media'];
+    const mediaB = b.elementAttributes['media'];
 
-  for (const cssRule in renderer.insertionCache) {
-    const bucketName = renderer.insertionCache[cssRule];
-    styles[bucketName].push(cssRule);
-  }
+    if (mediaA && mediaB) {
+      return renderer.compareMediaQueries(mediaA, mediaB);
+    }
 
-  return Object.keys(styles).map(bucketName => {
-    const cssRules = styles[bucketName].join(''); // We don't want to create empty style elements
+    if (mediaA || mediaB) {
+      return mediaA ? 1 : -1;
+    }
+
+    return 0;
+  });
+  return stylesheets.map(stylesheet => {
+    const cssRules = stylesheet.cssRules(); // don't want to create any empty style elements
 
-    if (cssRules.length === 0) {
+    if (!cssRules.length) {
       return null;
     }
 
-    return /*#__PURE__*/React__namespace.createElement('style', {
-      key: bucketName,
-      // TODO: support "nonce"
-      // ...renderer.styleNodeAttributes,
-      'data-make-styles-bucket': bucketName || 'default',
-      'data-make-styles-rehydration': true,
+    return /*#__PURE__*/React__namespace.createElement('style', Object.assign(Object.assign({
+      key: stylesheet.bucketName
+    }, stylesheet.elementAttributes), {
+      'data-make-styles-rehydration': 'true',
       dangerouslySetInnerHTML: {
-        __html: cssRules
+        __html: cssRules.join('')
       }
-    });
+    }));
   }).filter(Boolean);
 }
 

package/renderToStyleElements.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderToStyleElements.cjs.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["import { styleBucketOrdering } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer, StyleBucketName } from '@griffel/core';\n\ntype CSSRulesGroupedByStyleBucket = Record<StyleBucketName, string[]>;\n\n/**\n * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.\n *\n * @public\n */\nexport function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[] {\n  const styles = styleBucketOrdering.reduce<CSSRulesGroupedByStyleBucket>((acc, bucketName) => {\n    return { ...acc, [bucketName]: [] };\n  }, {} as CSSRulesGroupedByStyleBucket);\n\n  // eslint-disable-next-line guard-for-in\n  for (const cssRule in renderer.insertionCache) {\n    const bucketName: StyleBucketName = renderer.insertionCache[cssRule];\n\n    styles[bucketName].push(cssRule);\n  }\n\n  return (Object.keys(styles) as StyleBucketName[])\n    .map(bucketName => {\n      const cssRules = styles[bucketName].join('');\n\n      // We don't want to create empty style elements\n      if (cssRules.length === 0) {\n        return null;\n      }\n\n      return React.createElement('style', {\n        key: bucketName,\n\n        // TODO: support \"nonce\"\n        // ...renderer.styleNodeAttributes,\n\n        'data-make-styles-bucket': bucketName || 'default',\n        'data-make-styles-rehydration': true,\n\n        dangerouslySetInnerHTML: {\n          __html: cssRules,\n        },\n      });\n    })\n    .filter(Boolean) as React.ReactElement[];\n}\n"],"names":["renderToStyleElements","renderer","styles","styleBucketOrdering","reduce","acc","bucketName","cssRule","insertionCache","push","Object","keys","map","cssRules","join","length","React","createElement","key","dangerouslySetInnerHTML","__html","filter","Boolean"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;SAKgBA,sBAAsBC;AACpC,QAAMC,MAAM,GAAGC,wBAAmB,CAACC,MAApB,CAAyD,CAACC,GAAD,EAAMC,UAAN;AACtE,2CAAYD;AAAK,OAACC,UAAD,GAAc;MAA/B;AACD,GAFc,EAEZ,EAFY,CAAf;;AAKA,OAAK,MAAMC,OAAX,IAAsBN,QAAQ,CAACO,cAA/B,EAA+C;AAC7C,UAAMF,UAAU,GAAoBL,QAAQ,CAACO,cAAT,CAAwBD,OAAxB,CAApC;AAEAL,IAAAA,MAAM,CAACI,UAAD,CAAN,CAAmBG,IAAnB,CAAwBF,OAAxB;AACD;;AAED,SAAQG,MAAM,CAACC,IAAP,CAAYT,MAAZ,EACLU,GADK,CACDN,UAAU;AACb,UAAMO,QAAQ,GAAGX,MAAM,CAACI,UAAD,CAAN,CAAmBQ,IAAnB,CAAwB,EAAxB,CAAjB;;AAGA,QAAID,QAAQ,CAACE,MAAT,KAAoB,CAAxB,EAA2B;AACzB,aAAO,IAAP;AACD;;AAED,wBAAOC,gBAAK,CAACC,aAAN,CAAoB,OAApB,EAA6B;AAClCC,MAAAA,GAAG,EAAEZ,UAD6B;AAGlC;AACA;AAEA,iCAA2BA,UAAU,IAAI,SANP;AAOlC,sCAAgC,IAPE;AASlCa,MAAAA,uBAAuB,EAAE;AACvBC,QAAAA,MAAM,EAAEP;AADe;AATS,KAA7B,CAAP;AAaD,GAtBK,EAuBLQ,MAvBK,CAuBEC,OAvBF,CAAR;AAwBD;;;;"}
+{"version":3,"file":"renderToStyleElements.cjs.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["import { styleBucketOrdering } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\n/**\n * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.\n *\n * @public\n */\nexport function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[] {\n  const stylesheets = Object.values(renderer.stylesheets)\n    // first sort: bucket names\n    .sort((a, b) => {\n      return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n    })\n    // second sort: media queries\n    .sort((a, b) => {\n      const mediaA = a.elementAttributes['media'];\n      const mediaB = b.elementAttributes['media'];\n\n      if (mediaA && mediaB) {\n        return renderer.compareMediaQueries(mediaA, mediaB);\n      }\n\n      if (mediaA || mediaB) {\n        return mediaA ? 1 : -1;\n      }\n\n      return 0;\n    });\n\n  return stylesheets\n    .map(stylesheet => {\n      const cssRules = stylesheet.cssRules();\n      // don't want to create any empty style elements\n      if (!cssRules.length) {\n        return null;\n      }\n\n      return React.createElement('style', {\n        key: stylesheet.bucketName,\n\n        // TODO: support \"nonce\"\n        // ...renderer.styleNodeAttributes,\n        ...stylesheet.elementAttributes,\n        'data-make-styles-rehydration': 'true',\n\n        dangerouslySetInnerHTML: {\n          __html: cssRules.join(''),\n        },\n      });\n    })\n    .filter(Boolean) as React.ReactElement[];\n}\n"],"names":["renderToStyleElements","renderer","stylesheets","Object","values","sort","a","b","styleBucketOrdering","indexOf","bucketName","mediaA","elementAttributes","mediaB","compareMediaQueries","map","stylesheet","cssRules","length","React","createElement","key","dangerouslySetInnerHTML","__html","join","filter","Boolean"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;SAKgBA,sBAAsBC;AACpC,QAAMC,WAAW,GAAGC,MAAM,CAACC,MAAP,CAAcH,QAAQ,CAACC,WAAvB;AAAA,GAEjBG,IAFiB,CAEZ,CAACC,CAAD,EAAIC,CAAJ;AACJ,WAAOC,wBAAmB,CAACC,OAApB,CAA4BH,CAAC,CAACI,UAA9B,IAA4CF,wBAAmB,CAACC,OAApB,CAA4BF,CAAC,CAACG,UAA9B,CAAnD;AACD,GAJiB;AAAA,GAMjBL,IANiB,CAMZ,CAACC,CAAD,EAAIC,CAAJ;AACJ,UAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAF,CAAoB,OAApB,CAAf;AACA,UAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAF,CAAoB,OAApB,CAAf;;AAEA,QAAID,MAAM,IAAIE,MAAd,EAAsB;AACpB,aAAOZ,QAAQ,CAACa,mBAAT,CAA6BH,MAA7B,EAAqCE,MAArC,CAAP;AACD;;AAED,QAAIF,MAAM,IAAIE,MAAd,EAAsB;AACpB,aAAOF,MAAM,GAAG,CAAH,GAAO,CAAC,CAArB;AACD;;AAED,WAAO,CAAP;AACD,GAnBiB,CAApB;AAqBA,SAAOT,WAAW,CACfa,GADI,CACAC,UAAU;AACb,UAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAX,EAAjB;;AAEA,QAAI,CAACA,QAAQ,CAACC,MAAd,EAAsB;AACpB,aAAO,IAAP;AACD;;AAED,wBAAOC,gBAAK,CAACC,aAAN,CAAoB,OAApB;AACLC,MAAAA,GAAG,EAAEL,UAAU,CAACN;OAIbM,UAAU,CAACJ;AACd,sCAAgC;AAEhCU,MAAAA,uBAAuB,EAAE;AACvBC,QAAAA,MAAM,EAAEN,QAAQ,CAACO,IAAT,CAAc,EAAd;AADe;MARpB,CAAP;AAYD,GApBI,EAqBJC,MArBI,CAqBGC,OArBH,CAAP;AAsBD;;;;"}

package/renderToStyleElements.esm.js

@@ -8,34 +8,39 @@ import * as React from 'react';
  */
 
 function renderToStyleElements(renderer) {
-  const styles = styleBucketOrdering.reduce((acc, bucketName) => {
-    return Object.assign(Object.assign({}, acc), {
-      [bucketName]: []
-    });
-  }, {}); // eslint-disable-next-line guard-for-in
+  const stylesheets = Object.values(renderer.stylesheets) // first sort: bucket names
+  .sort((a, b) => {
+    return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);
+  }) // second sort: media queries
+  .sort((a, b) => {
+    const mediaA = a.elementAttributes['media'];
+    const mediaB = b.elementAttributes['media'];
 
-  for (const cssRule in renderer.insertionCache) {
-    const bucketName = renderer.insertionCache[cssRule];
-    styles[bucketName].push(cssRule);
-  }
+    if (mediaA && mediaB) {
+      return renderer.compareMediaQueries(mediaA, mediaB);
+    }
+
+    if (mediaA || mediaB) {
+      return mediaA ? 1 : -1;
+    }
 
-  return Object.keys(styles).map(bucketName => {
-    const cssRules = styles[bucketName].join(''); // We don't want to create empty style elements
+    return 0;
+  });
+  return stylesheets.map(stylesheet => {
+    const cssRules = stylesheet.cssRules(); // don't want to create any empty style elements
 
-    if (cssRules.length === 0) {
+    if (!cssRules.length) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement('style', {
-      key: bucketName,
-      // TODO: support "nonce"
-      // ...renderer.styleNodeAttributes,
-      'data-make-styles-bucket': bucketName || 'default',
-      'data-make-styles-rehydration': true,
+    return /*#__PURE__*/React.createElement('style', Object.assign(Object.assign({
+      key: stylesheet.bucketName
+    }, stylesheet.elementAttributes), {
+      'data-make-styles-rehydration': 'true',
       dangerouslySetInnerHTML: {
-        __html: cssRules
+        __html: cssRules.join('')
       }
-    });
+    }));
   }).filter(Boolean);
 }
 

package/renderToStyleElements.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderToStyleElements.esm.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["import { styleBucketOrdering } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer, StyleBucketName } from '@griffel/core';\n\ntype CSSRulesGroupedByStyleBucket = Record<StyleBucketName, string[]>;\n\n/**\n * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.\n *\n * @public\n */\nexport function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[] {\n  const styles = styleBucketOrdering.reduce<CSSRulesGroupedByStyleBucket>((acc, bucketName) => {\n    return { ...acc, [bucketName]: [] };\n  }, {} as CSSRulesGroupedByStyleBucket);\n\n  // eslint-disable-next-line guard-for-in\n  for (const cssRule in renderer.insertionCache) {\n    const bucketName: StyleBucketName = renderer.insertionCache[cssRule];\n\n    styles[bucketName].push(cssRule);\n  }\n\n  return (Object.keys(styles) as StyleBucketName[])\n    .map(bucketName => {\n      const cssRules = styles[bucketName].join('');\n\n      // We don't want to create empty style elements\n      if (cssRules.length === 0) {\n        return null;\n      }\n\n      return React.createElement('style', {\n        key: bucketName,\n\n        // TODO: support \"nonce\"\n        // ...renderer.styleNodeAttributes,\n\n        'data-make-styles-bucket': bucketName || 'default',\n        'data-make-styles-rehydration': true,\n\n        dangerouslySetInnerHTML: {\n          __html: cssRules,\n        },\n      });\n    })\n    .filter(Boolean) as React.ReactElement[];\n}\n"],"names":["renderToStyleElements","renderer","styles","styleBucketOrdering","reduce","acc","bucketName","cssRule","insertionCache","push","Object","keys","map","cssRules","join","length","React","createElement","key","dangerouslySetInnerHTML","__html","filter","Boolean"],"mappings":";;;AAMA;;;;;;SAKgBA,sBAAsBC;AACpC,QAAMC,MAAM,GAAGC,mBAAmB,CAACC,MAApB,CAAyD,CAACC,GAAD,EAAMC,UAAN;AACtE,2CAAYD;AAAK,OAACC,UAAD,GAAc;MAA/B;AACD,GAFc,EAEZ,EAFY,CAAf;;AAKA,OAAK,MAAMC,OAAX,IAAsBN,QAAQ,CAACO,cAA/B,EAA+C;AAC7C,UAAMF,UAAU,GAAoBL,QAAQ,CAACO,cAAT,CAAwBD,OAAxB,CAApC;AAEAL,IAAAA,MAAM,CAACI,UAAD,CAAN,CAAmBG,IAAnB,CAAwBF,OAAxB;AACD;;AAED,SAAQG,MAAM,CAACC,IAAP,CAAYT,MAAZ,EACLU,GADK,CACDN,UAAU;AACb,UAAMO,QAAQ,GAAGX,MAAM,CAACI,UAAD,CAAN,CAAmBQ,IAAnB,CAAwB,EAAxB,CAAjB;;AAGA,QAAID,QAAQ,CAACE,MAAT,KAAoB,CAAxB,EAA2B;AACzB,aAAO,IAAP;AACD;;AAED,wBAAOC,KAAK,CAACC,aAAN,CAAoB,OAApB,EAA6B;AAClCC,MAAAA,GAAG,EAAEZ,UAD6B;AAGlC;AACA;AAEA,iCAA2BA,UAAU,IAAI,SANP;AAOlC,sCAAgC,IAPE;AASlCa,MAAAA,uBAAuB,EAAE;AACvBC,QAAAA,MAAM,EAAEP;AADe;AATS,KAA7B,CAAP;AAaD,GAtBK,EAuBLQ,MAvBK,CAuBEC,OAvBF,CAAR;AAwBD;;;;"}
+{"version":3,"file":"renderToStyleElements.esm.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["import { styleBucketOrdering } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\n/**\n * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.\n *\n * @public\n */\nexport function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[] {\n  const stylesheets = Object.values(renderer.stylesheets)\n    // first sort: bucket names\n    .sort((a, b) => {\n      return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n    })\n    // second sort: media queries\n    .sort((a, b) => {\n      const mediaA = a.elementAttributes['media'];\n      const mediaB = b.elementAttributes['media'];\n\n      if (mediaA && mediaB) {\n        return renderer.compareMediaQueries(mediaA, mediaB);\n      }\n\n      if (mediaA || mediaB) {\n        return mediaA ? 1 : -1;\n      }\n\n      return 0;\n    });\n\n  return stylesheets\n    .map(stylesheet => {\n      const cssRules = stylesheet.cssRules();\n      // don't want to create any empty style elements\n      if (!cssRules.length) {\n        return null;\n      }\n\n      return React.createElement('style', {\n        key: stylesheet.bucketName,\n\n        // TODO: support \"nonce\"\n        // ...renderer.styleNodeAttributes,\n        ...stylesheet.elementAttributes,\n        'data-make-styles-rehydration': 'true',\n\n        dangerouslySetInnerHTML: {\n          __html: cssRules.join(''),\n        },\n      });\n    })\n    .filter(Boolean) as React.ReactElement[];\n}\n"],"names":["renderToStyleElements","renderer","stylesheets","Object","values","sort","a","b","styleBucketOrdering","indexOf","bucketName","mediaA","elementAttributes","mediaB","compareMediaQueries","map","stylesheet","cssRules","length","React","createElement","key","dangerouslySetInnerHTML","__html","join","filter","Boolean"],"mappings":";;;AAIA;;;;;;SAKgBA,sBAAsBC;AACpC,QAAMC,WAAW,GAAGC,MAAM,CAACC,MAAP,CAAcH,QAAQ,CAACC,WAAvB;AAAA,GAEjBG,IAFiB,CAEZ,CAACC,CAAD,EAAIC,CAAJ;AACJ,WAAOC,mBAAmB,CAACC,OAApB,CAA4BH,CAAC,CAACI,UAA9B,IAA4CF,mBAAmB,CAACC,OAApB,CAA4BF,CAAC,CAACG,UAA9B,CAAnD;AACD,GAJiB;AAAA,GAMjBL,IANiB,CAMZ,CAACC,CAAD,EAAIC,CAAJ;AACJ,UAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAF,CAAoB,OAApB,CAAf;AACA,UAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAF,CAAoB,OAApB,CAAf;;AAEA,QAAID,MAAM,IAAIE,MAAd,EAAsB;AACpB,aAAOZ,QAAQ,CAACa,mBAAT,CAA6BH,MAA7B,EAAqCE,MAArC,CAAP;AACD;;AAED,QAAIF,MAAM,IAAIE,MAAd,EAAsB;AACpB,aAAOF,MAAM,GAAG,CAAH,GAAO,CAAC,CAArB;AACD;;AAED,WAAO,CAAP;AACD,GAnBiB,CAApB;AAqBA,SAAOT,WAAW,CACfa,GADI,CACAC,UAAU;AACb,UAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAX,EAAjB;;AAEA,QAAI,CAACA,QAAQ,CAACC,MAAd,EAAsB;AACpB,aAAO,IAAP;AACD;;AAED,wBAAOC,KAAK,CAACC,aAAN,CAAoB,OAApB;AACLC,MAAAA,GAAG,EAAEL,UAAU,CAACN;OAIbM,UAAU,CAACJ;AACd,sCAAgC;AAEhCU,MAAAA,uBAAuB,EAAE;AACvBC,QAAAA,MAAM,EAAEN,QAAQ,CAACO,IAAT,CAAc,EAAd;AADe;MARpB,CAAP;AAYD,GApBI,EAqBJC,MArBI,CAqBGC,OArBH,CAAP;AAsBD;;;;"}