@griffel/react 1.5.31 → 1.5.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -31,11 +31,15 @@ var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
|
|
|
31
31
|
*/
|
|
32
32
|
function renderToStyleElements(renderer) {
|
|
33
33
|
const stylesheets = Object.values(renderer.stylesheets)
|
|
34
|
-
// first sort: bucket
|
|
34
|
+
// first sort: bucket by order [data-priority]
|
|
35
|
+
.sort((a, b) => {
|
|
36
|
+
return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
|
|
37
|
+
})
|
|
38
|
+
// second sort: bucket by bucket name
|
|
35
39
|
.sort((a, b) => {
|
|
36
40
|
return core.styleBucketOrdering.indexOf(a.bucketName) - core.styleBucketOrdering.indexOf(b.bucketName);
|
|
37
41
|
})
|
|
38
|
-
//
|
|
42
|
+
// third sort: media queries
|
|
39
43
|
.sort((a, b) => {
|
|
40
44
|
const mediaA = a.elementAttributes['media'];
|
|
41
45
|
const mediaB = b.elementAttributes['media'];
|
|
@@ -1 +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
|
|
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 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;;"}
|
|
@@ -9,11 +9,15 @@ import * as React from 'react';
|
|
|
9
9
|
*/
|
|
10
10
|
function renderToStyleElements(renderer) {
|
|
11
11
|
const stylesheets = Object.values(renderer.stylesheets)
|
|
12
|
-
// first sort: bucket
|
|
12
|
+
// first sort: bucket by order [data-priority]
|
|
13
|
+
.sort((a, b) => {
|
|
14
|
+
return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
|
|
15
|
+
})
|
|
16
|
+
// second sort: bucket by bucket name
|
|
13
17
|
.sort((a, b) => {
|
|
14
18
|
return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);
|
|
15
19
|
})
|
|
16
|
-
//
|
|
20
|
+
// third sort: media queries
|
|
17
21
|
.sort((a, b) => {
|
|
18
22
|
const mediaA = a.elementAttributes['media'];
|
|
19
23
|
const mediaB = b.elementAttributes['media'];
|
|
@@ -1 +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
|
|
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 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;;"}
|