@griffel/react
Advanced tools
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 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
84886
692
Updated@griffel/core@^1.10.1