@griffel/react 1.0.1 → 1.0.4

package/README.md

@@ -70,6 +70,140 @@ function Component() {
 }
 ```
 
+## `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()`
 
 Creates styles attached to a global selector. Styles can be defined via objects:
@@ -133,6 +267,40 @@ function App() {
 }
 ```
 
+## `createDOMRenderer()`, `RendererProvider`
+
+`createDOMRenderer` is paired with `RendererProvider` component and is useful for child window rendering and SSR scenarios. This is the default renderer for web, and will make sure that styles are injected to a document.
+
+```jsx
+import { createDOMRenderer, RendererProvider } from '@griffel/react';
+
+function App(props) {
+  const { targetDocument } = props;
+  const renderer = React.useMemo(() => createDOMRenderer(targetDocument), [targetDocument]);
+
+  return (
+    <RendererProvider renderer={renderer} targetDocument={targetDocument}>
+      {/* Children components */}
+      {/* ... */}
+    </RendererProvider>
+  );
+}
+```
+
+### styleElementAttributes
+
+A map of attributes that's passed to the generated style elements. For example, is useful to set ["nonce" attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce).
+
+```js
+import { createDOMRenderer } from '@griffel/react';
+
+const renderer = createDOMRenderer(targetDocument, {
+  styleElementAttributes: {
+    nonce: 'random',
+  },
+});
+```
+
 ## Features support
 
 ### 📃 pseudo & class selectors, at-rules, global styles
@@ -153,6 +321,7 @@ const useClasses = makeStyles({
 
     '@media screen and (max-width: 992px)': { color: 'orange' },
     '@supports (display: grid)': { color: 'red' },
+    '@layer utility': { marginBottom: '1em' }
   },
 });
 ```
@@ -202,3 +371,18 @@ const useClasses = makeStyles({
   },
 });
 ```
+
+### CSS Fallback Properties
+
+Any CSS property accepts an array of values which are all added to the styles.
+Every browser will use the latest valid value (which might be a different one in different browsers, based on supported CSS in that browser):
+
+```js
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    overflowY: ['scroll', 'overlay'],
+  },
+});
+```

package/makeStyles.cjs.js

@@ -28,9 +28,19 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 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;
   } catch (e) {
     return false;

package/makeStyles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"makeStyles.cjs.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nfunction isInsideComponent() {\n  try {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useContext({} as unknown as React.Context<unknown>);\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeStyles(): this function cannot be called in component's scope.\",\n          'All makeStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["isInsideComponent","React","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAASA,iBAAT;AACE,MAAI;AACF;AACAC,IAAAA,gBAAK,CAACC,UAAN,CAAiB,EAAjB;AACA,WAAO,IAAP;AACD,GAJD,CAIE,OAAOC,CAAP,EAAU;AACV,WAAO,KAAP;AACD;AACF;;SAEeC,WAA0CC;AACxD,QAAMC,SAAS,GAAGC,eAAiB,CAACF,aAAD,CAAnC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAIV,iBAAiB,EAArB,EAAyB;AACvB,YAAM,IAAIW,KAAJ,CACJ,CACE,oEADF,EAEE,4EAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;AAMD;AACF;;AAED,SAAO,SAASC,UAAT;AACL,UAAMC,GAAG,GAAGC,qCAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,2BAAW,EAA5B;AAEA,WAAOX,SAAS,CAAC;AAAEQ,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}
+{"version":3,"file":"makeStyles.cjs.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nfunction isInsideComponent() {\n  // React 18 always logs errors if a dispatcher is not present:\n  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n  try {\n    // @ts-expect-error \"SECRET_INTERNALS\" are not typed\n    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;\n\n    // Before any React component was rendered \"dispatcher\" will be \"null\"\n    if (dispatcher === null || dispatcher === undefined) {\n      return false;\n    }\n\n    // A check with hooks call (i.e. call \"React.useContext()\" outside a component) will always produce errors, but\n    // a call on the dispatcher don't\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeStyles(): this function cannot be called in component's scope.\",\n          'All makeStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["isInsideComponent","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAASA,iBAAT;AACE;AACA;AACA,MAAI;AACF;AACA,UAAMC,UAAU,GAAGC,gBAAK,CAACC,kDAAN,CAAyDC,sBAAzD,CAAgFC,OAAnG,CAFE;;AAKF,QAAIJ,UAAU,KAAK,IAAf,IAAuBA,UAAU,KAAKK,SAA1C,EAAqD;AACnD,aAAO,KAAP;AACD,KAPC;AAUF;;;AACAL,IAAAA,UAAU,CAACM,UAAX,CAAsB,EAAtB;AACA,WAAO,IAAP;AACD,GAbD,CAaE,OAAOC,CAAP,EAAU;AACV,WAAO,KAAP;AACD;AACF;;SAEeC,WAA0CC;AACxD,QAAMC,SAAS,GAAGC,eAAiB,CAACF,aAAD,CAAnC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAIf,iBAAiB,EAArB,EAAyB;AACvB,YAAM,IAAIgB,KAAJ,CACJ,CACE,oEADF,EAEE,4EAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;AAMD;AACF;;AAED,SAAO,SAASC,UAAT;AACL,UAAMC,GAAG,GAAGC,qCAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,2BAAW,EAA5B;AAEA,WAAOX,SAAS,CAAC;AAAEQ,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}

package/makeStyles.esm.js

@@ -4,9 +4,19 @@ import { useRenderer } from './RendererContext.esm.js';
 import { useTextDirection } from './TextDirectionContext.esm.js';
 
 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;
   } catch (e) {
     return false;

package/makeStyles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"makeStyles.esm.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nfunction isInsideComponent() {\n  try {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useContext({} as unknown as React.Context<unknown>);\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeStyles(): this function cannot be called in component's scope.\",\n          'All makeStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["isInsideComponent","React","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;AAOA,SAASA,iBAAT;AACE,MAAI;AACF;AACAC,IAAAA,KAAK,CAACC,UAAN,CAAiB,EAAjB;AACA,WAAO,IAAP;AACD,GAJD,CAIE,OAAOC,CAAP,EAAU;AACV,WAAO,KAAP;AACD;AACF;;SAEeC,WAA0CC;AACxD,QAAMC,SAAS,GAAGC,YAAiB,CAACF,aAAD,CAAnC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAIV,iBAAiB,EAArB,EAAyB;AACvB,YAAM,IAAIW,KAAJ,CACJ,CACE,oEADF,EAEE,4EAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;AAMD;AACF;;AAED,SAAO,SAASC,UAAT;AACL,UAAMC,GAAG,GAAGC,gBAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,WAAW,EAA5B;AAEA,WAAOX,SAAS,CAAC;AAAEQ,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}
+{"version":3,"file":"makeStyles.esm.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nfunction isInsideComponent() {\n  // React 18 always logs errors if a dispatcher is not present:\n  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n  try {\n    // @ts-expect-error \"SECRET_INTERNALS\" are not typed\n    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;\n\n    // Before any React component was rendered \"dispatcher\" will be \"null\"\n    if (dispatcher === null || dispatcher === undefined) {\n      return false;\n    }\n\n    // A check with hooks call (i.e. call \"React.useContext()\" outside a component) will always produce errors, but\n    // a call on the dispatcher don't\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeStyles(): this function cannot be called in component's scope.\",\n          'All makeStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["isInsideComponent","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;AAOA,SAASA,iBAAT;AACE;AACA;AACA,MAAI;AACF;AACA,UAAMC,UAAU,GAAGC,KAAK,CAACC,kDAAN,CAAyDC,sBAAzD,CAAgFC,OAAnG,CAFE;;AAKF,QAAIJ,UAAU,KAAK,IAAf,IAAuBA,UAAU,KAAKK,SAA1C,EAAqD;AACnD,aAAO,KAAP;AACD,KAPC;AAUF;;;AACAL,IAAAA,UAAU,CAACM,UAAX,CAAsB,EAAtB;AACA,WAAO,IAAP;AACD,GAbD,CAaE,OAAOC,CAAP,EAAU;AACV,WAAO,KAAP;AACD;AACF;;SAEeC,WAA0CC;AACxD,QAAMC,SAAS,GAAGC,YAAiB,CAACF,aAAD,CAAnC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAIf,iBAAiB,EAArB,EAAyB;AACvB,YAAM,IAAIgB,KAAJ,CACJ,CACE,oEADF,EAEE,4EAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;AAMD;AACF;;AAED,SAAO,SAASC,UAAT;AACL,UAAMC,GAAG,GAAGC,gBAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,WAAW,EAA5B;AAEA,WAAOX,SAAS,CAAC;AAAEQ,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/react",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -8,13 +8,14 @@
     "url": "https://github.com/microsoft/griffel"
   },
   "sideEffects": false,
+  "dependencies": {
+    "@griffel/core": "^1.3.0",
+    "tslib": "^2.1.0"
+  },
   "peerDependencies": {
     "react": ">=16.8.0 <18.0.0"
   },
   "main": "./index.cjs.js",
   "module": "./index.esm.js",
-  "typings": "./index.d.ts",
-  "dependencies": {
-    "@griffel/core": "1.0.7"
-  }
-}
+  "typings": "./index.d.ts"
+}