Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@griffel/react

Package Overview
Dependencies
Maintainers
6
Versions
45
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@griffel/react - npm Package Compare versions

Comparing version 1.5.5 to 1.5.6

4

package.json
{
"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 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc