@griffel/react - npm Package Compare versions

Comparing version 1.5.31 to 1.5.32

package.json

 {
   "name": "@griffel/react",
-  "version": "1.5.31",
+  "version": "1.5.32",
   "description": "React implementation of Atomic CSS-in-JS",
@@ -5,0 +5,0 @@ "license": "MIT",

renderToStyleElements.cjs.js

@@ -34,7 +34,11 @@ "use client";
   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) => {
@@ -41,0 +45,0 @@ const mediaA = a.elementAttributes['media'];

renderToStyleElements.cjs.js.map

@@ -1,1 +0,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;;"}

renderToStyleElements.esm.js

@@ -12,7 +12,11 @@ "use client";
   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) => {
@@ -19,0 +23,0 @@ const mediaA = a.elementAttributes['media'];

renderToStyleElements.esm.js.map

@@ -1,1 +0,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;;"}

No alert changes

Improved metrics

Total package byte prevSize

82299

0.99%

Lines of code

944

0.85%

No dependency changes