@griffel/react - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

makeStyles.cjs.js

@@ -31,5 +31,15 @@ 'use strict';
 function isInsideComponent() {
+  // React 18 always logs errors if a dispatcher is not present:
+  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
   try {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React__namespace.useContext({});
+    // @ts-expect-error "SECRET_INTERNALS" are not typed
+    const dispatcher = React__namespace.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current; // Before any React component was rendered "dispatcher" will be "null"
+
+    if (dispatcher === null || dispatcher === undefined) {
+      return false;
+    } // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
+    // a call on the dispatcher don't
+
+
+    dispatcher.useContext({});
     return true;
@@ -36,0 +46,0 @@ } catch (e) {

makeStyles.esm.js

@@ -7,5 +7,15 @@ import { makeStyles as makeStyles$1 } from '@griffel/core';
 function isInsideComponent() {
+  // React 18 always logs errors if a dispatcher is not present:
+  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
   try {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useContext({});
+    // @ts-expect-error "SECRET_INTERNALS" are not typed
+    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current; // Before any React component was rendered "dispatcher" will be "null"
+
+    if (dispatcher === null || dispatcher === undefined) {
+      return false;
+    } // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
+    // a call on the dispatcher don't
+
+
+    dispatcher.useContext({});
     return true;
@@ -12,0 +22,0 @@ } catch (e) {

package.json

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

README.md

@@ -73,2 +73,136 @@ # Griffel for React
 
+## `shorthands`
+
+`shorthands` provides a set of functions to mimic [CSS shorthands](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) and improve developer experience as [CSS shorthands are not supported](https://griffel.js.org/react/guides/limitations#css-shorthands-are-not-supported) by Griffel.
+
+### `shorthands.border`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.border('2px'),
+    ...shorthands.border('2px', 'solid'),
+    ...shorthands.border('2px', 'solid', 'red'),
+  },
+});
+```
+
+### `shorthands.borderBottom`, `shorthands.borderTop`, `shorthands.borderLeft`, `shorthands.borderRight`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    // The same is true for "borderTop", "borderLeft" & "borderRight"
+    ...shorthands.borderBottom('2px'),
+    ...shorthands.borderBottom('2px', 'solid'),
+    ...shorthands.borderBottom('2px', 'solid', 'red'),
+  },
+});
+```
+
+### `shorthands.borderColor`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.borderColor('red'),
+    ...shorthands.borderColor('red', 'blue'),
+    ...shorthands.borderColor('red', 'blue', 'green'),
+    ...shorthands.borderColor('red', 'blue', 'green', 'yellow'),
+  },
+});
+```
+
+### `shorthands.borderStyle`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.borderStyle('solid'),
+    ...shorthands.borderStyle('solid', 'dashed'),
+    ...shorthands.borderStyle('solid', 'dashed', 'dotted'),
+    ...shorthands.borderStyle('solid', 'dashed', 'dotted', 'double'),
+  },
+});
+```
+
+### `shorthands.borderWidth`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.borderWidth('12px'),
+    ...shorthands.borderWidth('12px', '24px'),
+    ...shorthands.borderWidth('12px', '24px', '36px'),
+    ...shorthands.borderWidth('12px', '24px', '36px', '48px'),
+  },
+});
+```
+
+### `shorthands.gap`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.gap('12px'),
+    ...shorthands.gap('12px', '24px'),
+  },
+});
+```
+
+### `shorthands.margin`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.margin('12px'),
+    ...shorthands.margin('12px', '24px'),
+    ...shorthands.margin('12px', '24px', '36px'),
+    ...shorthands.margin('12px', '24px', '36px', '48px'),
+  },
+});
+```
+
+### `shorthands.overflow`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.overflow('visible'),
+    ...shorthands.overflow('visible', 'hidden'),
+  },
+});
+```
+
+### `shorthands.padding`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.padding('12px'),
+    ...shorthands.padding('12px', '24px'),
+    ...shorthands.padding('12px', '24px', '36px'),
+    ...shorthands.padding('12px', '24px', '36px', '48px'),
+  },
+});
+```
+
 ## `makeStaticStyles()`
@@ -191,2 +325,3 @@
     '@supports (display: grid)': { color: 'red' },
+    '@layer utility': { marginBottom: '1em' }
   },
@@ -193,0 +328,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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54966

increased by12.88%

Lines of code

552

increased by2.6%

Number of lines in readme file

389

increased by53.15%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@griffel/core@^1.3.0