@griffel/react 1.5.31 → 1.6.0

package/__staticCSS.cjs.js

@@ -0,0 +1,20 @@
+"use client";
+'use strict';
+
+var core = require('@griffel/core');
+
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function __staticCSS() {
+  const getStyles = core.__staticCSS();
+  return function useStaticStyles() {
+    return getStyles();
+  };
+}
+
+exports.__staticCSS = __staticCSS;
+//# sourceMappingURL=__staticCSS.cjs.js.map

package/__staticCSS.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__staticCSS.cjs.js","sources":["../../../packages/react/src/__staticCSS.ts"],"sourcesContent":["'use client';\n\nimport { __staticCSS as vanillaStaticCSS } from '@griffel/core';\n\n/**\n * A version of makeStaticStyles() 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 __staticCSS() {\n  const getStyles = vanillaStaticCSS();\n\n  return function useStaticStyles(): void {\n    return getStyles();\n  };\n}\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AACH;;AAEE;;;;AAKF;;"}

package/__staticCSS.esm.js

@@ -0,0 +1,18 @@
+"use client";
+import { __staticCSS as __staticCSS$1 } from '@griffel/core';
+
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function __staticCSS() {
+  const getStyles = __staticCSS$1();
+  return function useStaticStyles() {
+    return getStyles();
+  };
+}
+
+export { __staticCSS };
+//# sourceMappingURL=__staticCSS.esm.js.map

package/__staticCSS.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__staticCSS.esm.js","sources":["../../../packages/react/src/__staticCSS.ts"],"sourcesContent":["'use client';\n\nimport { __staticCSS as vanillaStaticCSS } from '@griffel/core';\n\n/**\n * A version of makeStaticStyles() 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 __staticCSS() {\n  const getStyles = vanillaStaticCSS();\n\n  return function useStaticStyles(): void {\n    return getStyles();\n  };\n}\n"],"names":[],"mappings":";;;AAIA;;;;AAIG;AACH;;AAEE;;;;AAKF;;"}

package/__staticStyles.cjs.js

@@ -0,0 +1,25 @@
+"use client";
+'use strict';
+
+var core = require('@griffel/core');
+var insertionFactory = require('./insertionFactory.cjs.js');
+var RendererContext = require('./RendererContext.cjs.js');
+
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function __staticStyles(cssRules) {
+  const getStyles = core.__staticStyles(cssRules, insertionFactory.insertionFactory);
+  return function useStaticStyles() {
+    const renderer = RendererContext.useRenderer();
+    return getStyles({
+      renderer
+    });
+  };
+}
+
+exports.__staticStyles = __staticStyles;
+//# sourceMappingURL=__staticStyles.cjs.js.map

package/__staticStyles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__staticStyles.cjs.js","sources":["../../../packages/react/src/__staticStyles.ts"],"sourcesContent":["'use client';\n\nimport { __staticStyles as vanillaStaticStyles } from '@griffel/core';\nimport type { CSSRulesByBucket } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\n\n/**\n * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __staticStyles(cssRules: CSSRulesByBucket) {\n  const getStyles = vanillaStaticStyles(cssRules, insertionFactory);\n\n  return function useStaticStyles(): void {\n    const renderer = useRenderer();\n\n    return getStyles({ renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;;;AAQA;;;;AAIG;AACH;AACM;AACJ;;AAGE;AAEA;AAAmBA;AAAQ;;AAE/B;;"}

package/__staticStyles.esm.js

@@ -0,0 +1,23 @@
+"use client";
+import { __staticStyles as __staticStyles$1 } from '@griffel/core';
+import { insertionFactory } from './insertionFactory.esm.js';
+import { useRenderer } from './RendererContext.esm.js';
+
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function __staticStyles(cssRules) {
+  const getStyles = __staticStyles$1(cssRules, insertionFactory);
+  return function useStaticStyles() {
+    const renderer = useRenderer();
+    return getStyles({
+      renderer
+    });
+  };
+}
+
+export { __staticStyles };
+//# sourceMappingURL=__staticStyles.esm.js.map

package/__staticStyles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__staticStyles.esm.js","sources":["../../../packages/react/src/__staticStyles.ts"],"sourcesContent":["'use client';\n\nimport { __staticStyles as vanillaStaticStyles } from '@griffel/core';\nimport type { CSSRulesByBucket } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\n\n/**\n * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __staticStyles(cssRules: CSSRulesByBucket) {\n  const getStyles = vanillaStaticStyles(cssRules, insertionFactory);\n\n  return function useStaticStyles(): void {\n    const renderer = useRenderer();\n\n    return getStyles({ renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;AAQA;;;;AAIG;AACH;AACM;AACJ;;AAGE;AAEA;AAAmBA;AAAQ;;AAE/B;;"}

package/index.cjs.js

@@ -12,6 +12,8 @@ var __css = require('./__css.cjs.js');
 var __styles = require('./__styles.cjs.js');
 var __resetCSS = require('./__resetCSS.cjs.js');
 var __resetStyles = require('./__resetStyles.cjs.js');
+var __staticCSS = require('./__staticCSS.cjs.js');
+var __staticStyles = require('./__staticStyles.cjs.js');
 
 
 
@@ -42,4 +44,6 @@ exports.__css = __css.__css;
 exports.__styles = __styles.__styles;
 exports.__resetCSS = __resetCSS.__resetCSS;
 exports.__resetStyles = __resetStyles.__resetStyles;
+exports.__staticCSS = __staticCSS.__staticCSS;
+exports.__staticStyles = __staticStyles.__staticStyles;
 //# 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.esm.js

@@ -10,4 +10,6 @@ export { __css } from './__css.esm.js';
 export { __styles } from './__styles.esm.js';
 export { __resetCSS } from './__resetCSS.esm.js';
 export { __resetStyles } from './__resetStyles.esm.js';
+export { __staticCSS } from './__staticCSS.esm.js';
+export { __staticStyles } from './__staticStyles.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.5.31",
+  "version": "1.6.0",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -15,7 +15,7 @@
     }
   },
   "dependencies": {
-    "@griffel/core": "^1.19.2",
+    "@griffel/core": "^1.20.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/renderToStyleElements.cjs.js

@@ -31,11 +31,15 @@ var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
  */
 function renderToStyleElements(renderer) {
   const stylesheets = Object.values(renderer.stylesheets)
-  // first sort: bucket names
+  // first sort: bucket by order [data-priority]
+  .sort((a, b) => {
+    return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
+  })
+  // second sort: bucket by bucket name
   .sort((a, b) => {
     return core.styleBucketOrdering.indexOf(a.bucketName) - core.styleBucketOrdering.indexOf(b.bucketName);
   })
-  // second sort: media queries
+  // third sort: media queries
   .sort((a, b) => {
     const mediaA = a.elementAttributes['media'];
     const mediaB = b.elementAttributes['media'];

package/renderToStyleElements.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderToStyleElements.cjs.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["'use client';\n\nimport { 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":["dangerouslySetInnerHTML","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;AAIG;AACG;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;AACA;;AAGE;AACF;;AAGE;AACF;AAEA;AACF;AAEF;AAEI;AACA;AACA;AACE;AACF;;;;AAQE;AAEAA;AACEC;AACD;AAAA;AAEL;AAEJ;;"}
+{"version":3,"file":"renderToStyleElements.cjs.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["'use client';\n\nimport { 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 by order [data-priority]\n    .sort((a, b) => {\n      return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);\n    })\n    // second sort: bucket by bucket name\n    .sort((a, b) => {\n      return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n    })\n    // third 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":["dangerouslySetInnerHTML","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;AAIG;AACG;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;AACA;;AAGE;AACF;;AAGE;AACF;AAEA;AACF;AAEF;AAEI;AACA;AACA;AACE;AACF;;;;AAQE;AAEAA;AACEC;AACD;AAAA;AAEL;AAEJ;;"}

package/renderToStyleElements.esm.js

@@ -9,11 +9,15 @@ import * as React from 'react';
  */
 function renderToStyleElements(renderer) {
   const stylesheets = Object.values(renderer.stylesheets)
-  // first sort: bucket names
+  // first sort: bucket by order [data-priority]
+  .sort((a, b) => {
+    return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
+  })
+  // second sort: bucket by bucket name
   .sort((a, b) => {
     return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);
   })
-  // second sort: media queries
+  // third sort: media queries
   .sort((a, b) => {
     const mediaA = a.elementAttributes['media'];
     const mediaB = b.elementAttributes['media'];

package/renderToStyleElements.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderToStyleElements.esm.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["'use client';\n\nimport { 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":["dangerouslySetInnerHTML","__html"],"mappings":";;;;AAMA;;;;AAIG;AACG;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;AACA;;AAGE;AACF;;AAGE;AACF;AAEA;AACF;AAEF;AAEI;AACA;AACA;AACE;AACF;;;;AAQE;AAEAA;AACEC;AACD;AAAA;AAEL;AAEJ;;"}
+{"version":3,"file":"renderToStyleElements.esm.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["'use client';\n\nimport { 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 by order [data-priority]\n    .sort((a, b) => {\n      return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);\n    })\n    // second sort: bucket by bucket name\n    .sort((a, b) => {\n      return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n    })\n    // third 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":["dangerouslySetInnerHTML","__html"],"mappings":";;;;AAMA;;;;AAIG;AACG;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;AACA;;AAGE;AACF;;AAGE;AACF;AAEA;AACF;AAEF;AAEI;AACA;AACA;AACE;AACF;;;;AAQE;AAEAA;AACEC;AACD;AAAA;AAEL;AAEJ;;"}

package/src/__staticCSS.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+export declare function __staticCSS(): () => void;

package/src/__staticStyles.d.ts

@@ -0,0 +1,7 @@
+import type { CSSRulesByBucket } from '@griffel/core';
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+export declare function __staticStyles(cssRules: CSSRulesByBucket): () => void;

package/src/index.d.ts

@@ -10,3 +10,5 @@ export { __css } from './__css';
 export { __styles } from './__styles';
 export { __resetCSS } from './__resetCSS';
 export { __resetStyles } from './__resetStyles';
+export { __staticCSS } from './__staticCSS';
+export { __staticStyles } from './__staticStyles';