npm - @griffel/react - Versions diffs - 1.5.3 → 1.5.5 - Mend

@griffel/react 1.5.3 → 1.5.5

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.

Files changed (18) hide show

package/README.md CHANGED Viewed

@@ -15,6 +15,7 @@ A package with wrappers and APIs to be used with React.js.
 - [`makeStaticStyles()`](#makestaticstyles)
 - [`makeResetStyles()`](#makeresetstyles)
 - [`createDOMRenderer()`, `RendererProvider`](#createdomrenderer-rendererprovider)
+  - [insertionPoint](#insertionpoint)
   - [styleElementAttributes](#styleelementattributes)
 - [`TextDirectionProvider`](#textdirectionprovider)
 - [Shorthands](#shorthands)
@@ -375,6 +376,30 @@ function App(props) {
 }
 ```
+### insertionPoint
+If specified, a renderer will insert created style tags after this element:
+```js
+import { createDOMRenderer } from '@griffel/react';
+const insertionPoint = document.head.querySelector('#foo');
+const renderer = createDOMRenderer(document, {
+  insertionPoint,
+});
+```
+```html
+<html>
+  <head>
+    <style id="foo" />
+    <!-- Style elements created by Griffel will be inserted after "#foo" element -->
+    <style data-make-styles-bucket="d" />
+    <style id="bar" />
+  </head>
+</html>
+```
 ### styleElementAttributes
 A map of attributes that's passed to the generated style elements. For example, is useful to set ["nonce" attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce).
@@ -382,7 +407,7 @@ A map of attributes that's passed to the generated style elements. For example,
 ```js
 import { createDOMRenderer } from '@griffel/react';
-const renderer = createDOMRenderer(targetDocument, {
+const renderer = createDOMRenderer(document, {
   styleElementAttributes: {
     nonce: 'random',
   },

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/react",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -9,13 +9,13 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@griffel/core": "^1.9.1",
+    "@griffel/core": "^1.10.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0 <19.0.0"
   },
-  "main": "./index.cjs.js",
   "module": "./index.esm.js",
-  "typings": "./index.d.ts"
+  "main": "./index.cjs.js",
+  "types": "./src/index.d.ts"
 }

package/renderToStyleElements.cjs.js CHANGED Viewed

@@ -54,14 +54,16 @@ function renderToStyleElements(renderer) {
     if (!cssRules.length) {
       return null;
     }
-    return /*#__PURE__*/React__namespace.createElement('style', Object.assign(Object.assign({
-      key: stylesheet.bucketName
-    }, stylesheet.elementAttributes), {
+    return /*#__PURE__*/React__namespace.createElement('style', {
+      key: stylesheet.bucketName,
+      // TODO: support "nonce"
+      // ...renderer.styleNodeAttributes,
+      ...stylesheet.elementAttributes,
       'data-make-styles-rehydration': 'true',
       dangerouslySetInnerHTML: {
         __html: cssRules.join('')
       }
-    }));
+    });
   }).filter(Boolean);
 }

package/renderToStyleElements.cjs.js.map CHANGED Viewed

	@@ -1 +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 } 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,qBAAqB,CAACC,QAAyB;EAC7D,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACH,QAAQ,CAACC,WAAW;;GAEnDG,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,OAAOC,wBAAmB,CAACC,OAAO,CAACH,CAAC,CAACI,UAAU,CAAC,GAAGF,wBAAmB,CAACC,OAAO,CAACF,CAAC,CAACG,UAAU,CAAC;GAC7F;;GAEAL,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,MAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAiB,CAAC,OAAO,CAAC;IAC3C,MAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAiB,CAAC,OAAO,CAAC;IAE3C,IAAID,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOZ,QAAQ,CAACa,mBAAmB,CAACH,MAAM,EAAEE,MAAM,CAAC;;IAGrD,IAAIF,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOF,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;;IAGxB,OAAO,CAAC;GACT,CAAC;EAEJ,OAAOT,WAAW,CACfa,GAAG,CAACC,UAAU;IACb,MAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAQ,EAAE;;IAEtC,IAAI,CAACA,QAAQ,CAACC,MAAM,EAAE;MACpB,OAAO,IAAI;;IAGb,oBAAOC,gBAAK,CAACC,aAAa,CAAC,OAAO;~~MAChCC~~,GAAG,EAAEL,UAAU,CAACN~~;OAIbM~~,UAAU,CAACJ,iBAAiB;MAC/B,8BAA8B,EAAE,MAAM;MAEtCU,uBAAuB,EAAE;QACvBC,MAAM,EAAEN,QAAQ,CAACO,IAAI,CAAC,EAAE;;~~OAE1B~~;GACH,CAAC,CACDC,MAAM,CAACC,OAAO,CAAyB;AAC5C;;;;"}
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 } 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,qBAAqB,CAACC,QAAyB;EAC7D,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACH,QAAQ,CAACC,WAAW;;GAEnDG,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,OAAOC,wBAAmB,CAACC,OAAO,CAACH,CAAC,CAACI,UAAU,CAAC,GAAGF,wBAAmB,CAACC,OAAO,CAACF,CAAC,CAACG,UAAU,CAAC;GAC7F;;GAEAL,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,MAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAiB,CAAC,OAAO,CAAC;IAC3C,MAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAiB,CAAC,OAAO,CAAC;IAE3C,IAAID,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOZ,QAAQ,CAACa,mBAAmB,CAACH,MAAM,EAAEE,MAAM,CAAC;;IAGrD,IAAIF,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOF,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;;IAGxB,OAAO,CAAC;GACT,CAAC;EAEJ,OAAOT,WAAW,CACfa,GAAG,CAACC,UAAU;IACb,MAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAQ,EAAE;;IAEtC,IAAI,CAACA,QAAQ,CAACC,MAAM,EAAE;MACpB,OAAO,IAAI;;IAGb,oBAAOC,gBAAK,CAACC,aAAa,CAAC,OAAO,EAAE;MAClCC,GAAG,EAAEL,UAAU,CAACN,UAAU;;;MAI1B,GAAGM,UAAU,CAACJ,iBAAiB;MAC/B,8BAA8B,EAAE,MAAM;MAEtCU,uBAAuB,EAAE;QACvBC,MAAM,EAAEN,QAAQ,CAACO,IAAI,CAAC,EAAE;;KAE3B,CAAC;GACH,CAAC,CACDC,MAAM,CAACC,OAAO,CAAyB;AAC5C;;;;"}

package/renderToStyleElements.esm.js CHANGED Viewed

@@ -30,14 +30,16 @@ function renderToStyleElements(renderer) {
     if (!cssRules.length) {
       return null;
     }
-    return /*#__PURE__*/React.createElement('style', Object.assign(Object.assign({
-      key: stylesheet.bucketName
-    }, stylesheet.elementAttributes), {
+    return /*#__PURE__*/React.createElement('style', {
+      key: stylesheet.bucketName,
+      // TODO: support "nonce"
+      // ...renderer.styleNodeAttributes,
+      ...stylesheet.elementAttributes,
       'data-make-styles-rehydration': 'true',
       dangerouslySetInnerHTML: {
         __html: cssRules.join('')
       }
-    }));
+    });
   }).filter(Boolean);
 }

package/renderToStyleElements.esm.js.map CHANGED Viewed

	@@ -1 +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 } 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,qBAAqB,CAACC,QAAyB;EAC7D,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACH,QAAQ,CAACC,WAAW;;GAEnDG,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,OAAOC,mBAAmB,CAACC,OAAO,CAACH,CAAC,CAACI,UAAU,CAAC,GAAGF,mBAAmB,CAACC,OAAO,CAACF,CAAC,CAACG,UAAU,CAAC;GAC7F;;GAEAL,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,MAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAiB,CAAC,OAAO,CAAC;IAC3C,MAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAiB,CAAC,OAAO,CAAC;IAE3C,IAAID,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOZ,QAAQ,CAACa,mBAAmB,CAACH,MAAM,EAAEE,MAAM,CAAC;;IAGrD,IAAIF,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOF,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;;IAGxB,OAAO,CAAC;GACT,CAAC;EAEJ,OAAOT,WAAW,CACfa,GAAG,CAACC,UAAU;IACb,MAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAQ,EAAE;;IAEtC,IAAI,CAACA,QAAQ,CAACC,MAAM,EAAE;MACpB,OAAO,IAAI;;IAGb,oBAAOC,KAAK,CAACC,aAAa,CAAC,OAAO;~~MAChCC~~,GAAG,EAAEL,UAAU,CAACN~~;OAIbM~~,UAAU,CAACJ,iBAAiB;MAC/B,8BAA8B,EAAE,MAAM;MAEtCU,uBAAuB,EAAE;QACvBC,MAAM,EAAEN,QAAQ,CAACO,IAAI,CAAC,EAAE;;~~OAE1B~~;GACH,CAAC,CACDC,MAAM,CAACC,OAAO,CAAyB;AAC5C;;;;"}
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 } 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,qBAAqB,CAACC,QAAyB;EAC7D,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACH,QAAQ,CAACC,WAAW;;GAEnDG,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,OAAOC,mBAAmB,CAACC,OAAO,CAACH,CAAC,CAACI,UAAU,CAAC,GAAGF,mBAAmB,CAACC,OAAO,CAACF,CAAC,CAACG,UAAU,CAAC;GAC7F;;GAEAL,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,MAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAiB,CAAC,OAAO,CAAC;IAC3C,MAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAiB,CAAC,OAAO,CAAC;IAE3C,IAAID,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOZ,QAAQ,CAACa,mBAAmB,CAACH,MAAM,EAAEE,MAAM,CAAC;;IAGrD,IAAIF,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOF,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;;IAGxB,OAAO,CAAC;GACT,CAAC;EAEJ,OAAOT,WAAW,CACfa,GAAG,CAACC,UAAU;IACb,MAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAQ,EAAE;;IAEtC,IAAI,CAACA,QAAQ,CAACC,MAAM,EAAE;MACpB,OAAO,IAAI;;IAGb,oBAAOC,KAAK,CAACC,aAAa,CAAC,OAAO,EAAE;MAClCC,GAAG,EAAEL,UAAU,CAACN,UAAU;;;MAI1B,GAAGM,UAAU,CAACJ,iBAAiB;MAC/B,8BAA8B,EAAE,MAAM;MAEtCU,uBAAuB,EAAE;QACvBC,MAAM,EAAEN,QAAQ,CAACO,IAAI,CAAC,EAAE;;KAE3B,CAAC;GACH,CAAC,CACDC,MAAM,CAACC,OAAO,CAAyB;AAC5C;;;;"}