@griffel/react 1.5.5 → 1.5.7
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/README.md +58 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -15,6 +15,7 @@ A package with wrappers and APIs to be used with React.js.
|
|
|
15
15
|
- [`makeStaticStyles()`](#makestaticstyles)
|
|
16
16
|
- [`makeResetStyles()`](#makeresetstyles)
|
|
17
17
|
- [`createDOMRenderer()`, `RendererProvider`](#createdomrenderer-rendererprovider)
|
|
18
|
+
- [compareMediaQueries](#comparemediaqueries)
|
|
18
19
|
- [insertionPoint](#insertionpoint)
|
|
19
20
|
- [styleElementAttributes](#styleelementattributes)
|
|
20
21
|
- [`TextDirectionProvider`](#textdirectionprovider)
|
|
@@ -84,6 +85,8 @@ const useClasses = makeStyles({
|
|
|
84
85
|
':nth-child(2n)': { backgroundColor: '#fafafa' },
|
|
85
86
|
|
|
86
87
|
'@media screen and (max-width: 992px)': { color: 'orange' },
|
|
88
|
+
'@container (max-width: 992px)': { color: 'orange' },
|
|
89
|
+
'@container foo (max-width: 992px)': { color: 'orange' },
|
|
87
90
|
'@supports (display: grid)': { color: 'red' },
|
|
88
91
|
'@layer utility': { marginBottom: '1em' },
|
|
89
92
|
},
|
|
@@ -376,6 +379,61 @@ function App(props) {
|
|
|
376
379
|
}
|
|
377
380
|
```
|
|
378
381
|
|
|
382
|
+
### compareMediaQueries
|
|
383
|
+
|
|
384
|
+
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.
|
|
385
|
+
|
|
386
|
+
Griffel does not provide an opinionated default to sort media queries as the order may vary depending on the specific needs of the application.
|
|
387
|
+
|
|
388
|
+
```js
|
|
389
|
+
import { createDOMRenderer } from '@griffel/react';
|
|
390
|
+
|
|
391
|
+
const mediaQueryOrder = [
|
|
392
|
+
'only screen and (min-width: 1366px)',
|
|
393
|
+
'only screen and (min-width: 1366px)',
|
|
394
|
+
'only screen and (min-width: 1920px)',
|
|
395
|
+
];
|
|
396
|
+
|
|
397
|
+
function sortMediaQueries(a, b) {
|
|
398
|
+
return mediaQueryOrder.indexOf(a) - mediaQueryOrder.indexOf(b);
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
const renderer = createDOMRenderer(document, {
|
|
402
|
+
compareMediaQueries,
|
|
403
|
+
});
|
|
404
|
+
```
|
|
405
|
+
|
|
406
|
+
```html
|
|
407
|
+
<html>
|
|
408
|
+
<head>
|
|
409
|
+
<style media="only screen and (min-width: 1024px)" data-make-styles-bucket="m"></style>
|
|
410
|
+
<style media="only screen and (min-width: 1366px)" data-make-styles-bucket="m"></style>
|
|
411
|
+
<style media="only screen and (min-width: 1920px)" data-make-styles-bucket="m"></style>
|
|
412
|
+
</head>
|
|
413
|
+
</html>
|
|
414
|
+
```
|
|
415
|
+
|
|
416
|
+
For mobile-first methodology, you can consider using [`sort-css-media-queries`](https://github.com/dutchenkoOleg/sort-css-media-queries):
|
|
417
|
+
|
|
418
|
+
```js
|
|
419
|
+
import { createDOMRenderer } from '@griffel/react';
|
|
420
|
+
import sortCSSmq from 'sort-css-media-queries';
|
|
421
|
+
|
|
422
|
+
const renderer = createDOMRenderer(document, {
|
|
423
|
+
compareMediaQueries: sortCSSmq,
|
|
424
|
+
});
|
|
425
|
+
```
|
|
426
|
+
|
|
427
|
+
```html
|
|
428
|
+
<html>
|
|
429
|
+
<head>
|
|
430
|
+
<style media="only screen and (min-width: 1px)" data-make-styles-bucket="m"></style>
|
|
431
|
+
<style media="only screen and (min-width: 480px)" data-make-styles-bucket="m"></style>
|
|
432
|
+
<style media="only screen and (min-width: 640px)" data-make-styles-bucket="m"></style>
|
|
433
|
+
</head>
|
|
434
|
+
</html>
|
|
435
|
+
```
|
|
436
|
+
|
|
379
437
|
### insertionPoint
|
|
380
438
|
|
|
381
439
|
If specified, a renderer will insert created style tags after this element:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@griffel/react",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.7",
|
|
4
4
|
"description": "React implementation of Atomic CSS-in-JS",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
},
|
|
10
10
|
"sideEffects": false,
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@griffel/core": "^1.
|
|
12
|
+
"@griffel/core": "^1.11.0",
|
|
13
13
|
"tslib": "^2.1.0"
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|