@griffel/react - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

index.cjs.js

@@ -11,2 +11,3 @@ 'use strict';
 var TextDirectionContext = require('./TextDirectionContext.cjs.js');
+var __css = require('./__css.cjs.js');
 var __styles = require('./__styles.cjs.js');
@@ -34,3 +35,4 @@
 exports.TextDirectionProvider = TextDirectionContext.TextDirectionProvider;
+exports.__css = __css.__css;
 exports.__styles = __styles.__styles;
 //# sourceMappingURL=index.cjs.js.map

index.d.ts

@@ -8,2 +8,3 @@ export { shorthands, mergeClasses, createDOMRenderer } from '@griffel/core';
 export { TextDirectionProvider } from './TextDirectionContext';
+export { __css } from './__css';
 export { __styles } from './__styles';

index.esm.js

@@ -7,3 +7,4 @@ export { createDOMRenderer, mergeClasses, shorthands } from '@griffel/core';
 export { TextDirectionProvider } from './TextDirectionContext.esm.js';
+export { __css } from './__css.esm.js';
 export { __styles } from './__styles.esm.js';
 //# sourceMappingURL=index.esm.js.map

package.json

 {
   "name": "@griffel/react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React implementation of Atomic CSS-in-JS",
@@ -12,3 +12,3 @@ "license": "MIT",
   "dependencies": {
-    "@griffel/core": "^1.3.1",
+    "@griffel/core": "^1.4.0",
     "tslib": "^2.1.0"
@@ -15,0 +15,0 @@ },

README.md

@@ -151,2 +151,16 @@ # Griffel for React
 
+### `shorthands.flex`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.flex('auto'),
+    ...shorthands.flex(1, '2.5rem'),
+    ...shorthands.flex(0, 0, 'auto'),
+  },
+});
+```
+
 ### `shorthands.gap`
@@ -153,0 +167,0 @@

renderToStyleElements.cjs.js

@@ -35,30 +35,35 @@ 'use strict';
 function renderToStyleElements(renderer) {
-  const styles = core.styleBucketOrdering.reduce((acc, bucketName) => {
-    return Object.assign(Object.assign({}, acc), {
-      [bucketName]: []
-    });
-  }, {}); // eslint-disable-next-line guard-for-in
+  const stylesheets = Object.values(renderer.stylesheets) // first sort: bucket names
+  .sort((a, b) => {
+    return core.styleBucketOrdering.indexOf(a.bucketName) - core.styleBucketOrdering.indexOf(b.bucketName);
+  }) // second sort: media queries
+  .sort((a, b) => {
+    const mediaA = a.elementAttributes['media'];
+    const mediaB = b.elementAttributes['media'];
 
-  for (const cssRule in renderer.insertionCache) {
-    const bucketName = renderer.insertionCache[cssRule];
-    styles[bucketName].push(cssRule);
-  }
+    if (mediaA && mediaB) {
+      return renderer.compareMediaQueries(mediaA, mediaB);
+    }
 
-  return Object.keys(styles).map(bucketName => {
-    const cssRules = styles[bucketName].join(''); // We don't want to create empty style elements
+    if (mediaA || mediaB) {
+      return mediaA ? 1 : -1;
+    }
 
-    if (cssRules.length === 0) {
+    return 0;
+  });
+  return stylesheets.map(stylesheet => {
+    const cssRules = stylesheet.cssRules(); // don't want to create any empty style elements
+
+    if (!cssRules.length) {
       return null;
     }
 
-    return /*#__PURE__*/React__namespace.createElement('style', {
-      key: bucketName,
-      // TODO: support "nonce"
-      // ...renderer.styleNodeAttributes,
-      'data-make-styles-bucket': bucketName || 'default',
-      'data-make-styles-rehydration': true,
+    return /*#__PURE__*/React__namespace.createElement('style', Object.assign(Object.assign({
+      key: stylesheet.bucketName
+    }, stylesheet.elementAttributes), {
+      'data-make-styles-rehydration': 'true',
       dangerouslySetInnerHTML: {
-        __html: cssRules
+        __html: cssRules.join('')
       }
-    });
+    }));
   }).filter(Boolean);
@@ -65,0 +70,0 @@ }

renderToStyleElements.esm.js

@@ -11,30 +11,35 @@ import { styleBucketOrdering } from '@griffel/core';
 function renderToStyleElements(renderer) {
-  const styles = styleBucketOrdering.reduce((acc, bucketName) => {
-    return Object.assign(Object.assign({}, acc), {
-      [bucketName]: []
-    });
-  }, {}); // eslint-disable-next-line guard-for-in
+  const stylesheets = Object.values(renderer.stylesheets) // first sort: bucket names
+  .sort((a, b) => {
+    return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);
+  }) // second sort: media queries
+  .sort((a, b) => {
+    const mediaA = a.elementAttributes['media'];
+    const mediaB = b.elementAttributes['media'];
 
-  for (const cssRule in renderer.insertionCache) {
-    const bucketName = renderer.insertionCache[cssRule];
-    styles[bucketName].push(cssRule);
-  }
+    if (mediaA && mediaB) {
+      return renderer.compareMediaQueries(mediaA, mediaB);
+    }
 
-  return Object.keys(styles).map(bucketName => {
-    const cssRules = styles[bucketName].join(''); // We don't want to create empty style elements
+    if (mediaA || mediaB) {
+      return mediaA ? 1 : -1;
+    }
 
-    if (cssRules.length === 0) {
+    return 0;
+  });
+  return stylesheets.map(stylesheet => {
+    const cssRules = stylesheet.cssRules(); // don't want to create any empty style elements
+
+    if (!cssRules.length) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement('style', {
-      key: bucketName,
-      // TODO: support "nonce"
-      // ...renderer.styleNodeAttributes,
-      'data-make-styles-bucket': bucketName || 'default',
-      'data-make-styles-rehydration': true,
+    return /*#__PURE__*/React.createElement('style', Object.assign(Object.assign({
+      key: stylesheet.bucketName
+    }, stylesheet.elementAttributes), {
+      'data-make-styles-rehydration': 'true',
       dangerouslySetInnerHTML: {
-        __html: cssRules
+        __html: cssRules.join('')
       }
-    });
+    }));
   }).filter(Boolean);
@@ -41,0 +46,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60718

increased by9.21%

Number of package files

43

increased by13.16%

Lines of code

612

increased by10.67%

Number of lines in readme file

403

increased by3.6%

Dependency changes

• Updated@griffel/core@^1.4.0