🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
@griffel/react
Advanced tools
@griffel/react - npm Package Compare versions
Comparing version 1.5.5 to 1.5.6
| { | ||
| "name": "@griffel/react", | ||
| "version": "1.5.5", | ||
| "version": "1.5.6", | ||
| "description": "React implementation of Atomic CSS-in-JS", | ||
@@ -12,3 +12,3 @@ "license": "MIT", | ||
| "dependencies": { | ||
| "@griffel/core": "^1.10.0", | ||
| "@griffel/core": "^1.10.1", | ||
| "tslib": "^2.1.0" | ||
@@ -15,0 +15,0 @@ }, |
@@ -18,2 +18,3 @@ # Griffel for React.js | ||
| - [`createDOMRenderer()`, `RendererProvider`](#createdomrenderer-rendererprovider) | ||
| - [compareMediaQueries](#comparemediaqueries) | ||
| - [insertionPoint](#insertionpoint) | ||
@@ -380,2 +381,57 @@ - [styleElementAttributes](#styleelementattributes) | ||
| ### compareMediaQueries | ||
| A function with the same signature as sort functions in e.g. `Array.prototype.sort` for dynamically sorting media queries. Maps over an array of media query strings. | ||
| Griffel does not provide an opinionated default to sort media queries as the order may vary depending on the specific needs of the application. | ||
| ```js | ||
| import { createDOMRenderer } from '@griffel/react'; | ||
| const mediaQueryOrder = [ | ||
| 'only screen and (min-width: 1366px)', | ||
| 'only screen and (min-width: 1366px)', | ||
| 'only screen and (min-width: 1920px)', | ||
| ]; | ||
| function sortMediaQueries(a, b) { | ||
| return mediaQueryOrder.indexOf(a) - mediaQueryOrder.indexOf(b); | ||
| } | ||
| const renderer = createDOMRenderer(document, { | ||
| compareMediaQueries, | ||
| }); | ||
| ``` | ||
| ```html | ||
| <html> | ||
| <head> | ||
| <style media="only screen and (min-width: 1024px)" data-make-styles-bucket="m"></style> | ||
| <style media="only screen and (min-width: 1366px)" data-make-styles-bucket="m"></style> | ||
| <style media="only screen and (min-width: 1920px)" data-make-styles-bucket="m"></style> | ||
| </head> | ||
| </html> | ||
| ``` | ||
| For mobile-first methodology, you can consider using [`sort-css-media-queries`](https://github.com/dutchenkoOleg/sort-css-media-queries): | ||
| ```js | ||
| import { createDOMRenderer } from '@griffel/react'; | ||
| import sortCSSmq from 'sort-css-media-queries'; | ||
| const renderer = createDOMRenderer(document, { | ||
| compareMediaQueries: sortCSSmq, | ||
| }); | ||
| ``` | ||
| ```html | ||
| <html> | ||
| <head> | ||
| <style media="only screen and (min-width: 1px)" data-make-styles-bucket="m"></style> | ||
| <style media="only screen and (min-width: 480px)" data-make-styles-bucket="m"></style> | ||
| <style media="only screen and (min-width: 640px)" data-make-styles-bucket="m"></style> | ||
| </head> | ||
| </html> | ||
| ``` | ||
| ### insertionPoint | ||
@@ -382,0 +438,0 @@ |
No alert changes
Improved metrics
- Total package byte prevSize
84886
2.11%- Number of lines in readme file
692
8.81%Dependency changes
Updated
@griffel/core@^1.10.1