@griffel/react 1.4.0 → 1.4.1

package/README.md

@@ -1,4 +1,36 @@
-# Griffel for React
+# Griffel for React.js
+
+A package with wrappers and APIs to be used with React.js.
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Install](#install)
+- [`makeStyles()`](#makestyles)
+  - [Pseudo & class selectors, at-rules, global styles](#pseudo--class-selectors-at-rules-global-styles)
+  - [Keyframes (animations)](#keyframes-animations)
+  - [CSS Fallback Properties](#css-fallback-properties)
+- [`mergeClasses()`](#mergeclasses)
+- [`makeStaticStyles()`](#makestaticstyles)
+- [`makeResetStyles()`](#makeresetstyles)
+- [`createDOMRenderer()`, `RendererProvider`](#createdomrenderer-rendererprovider)
+  - [styleElementAttributes](#styleelementattributes)
+- [Shorthands](#shorthands)
+  - [`shorthands.border`](#shorthandsborder)
+  - [`shorthands.borderBottom`, `shorthands.borderTop`, `shorthands.borderLeft`, `shorthands.borderRight`](#shorthandsborderbottom-shorthandsbordertop-shorthandsborderleft-shorthandsborderright)
+  - [`shorthands.borderColor`](#shorthandsbordercolor)
+  - [`shorthands.borderStyle`](#shorthandsborderstyle)
+  - [`shorthands.borderWidth`](#shorthandsborderwidth)
+  - [`shorthands.flex`](#shorthandsflex)
+  - [`shorthands.gap`](#shorthandsgap)
+  - [`shorthands.gridArea`](#shorthandsgridarea)
+  - [`shorthands.inset`](#shorthandsinset)
+  - [`shorthands.margin`](#shorthandsmargin)
+  - [`shorthands.overflow`](#shorthandsoverflow)
+  - [`shorthands.padding`](#shorthandspadding)
+  - [`shorthands.transition`](#shorthandstransition)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## Install
 
@@ -8,9 +40,7 @@ npm install @griffel/react
 yarn add @griffel/react
 ```
 
-## API
-
-### `makeStyles()`
+## `makeStyles()`
 
 Is used to define styles, returns a React hook that should be called inside a component:
 
@@ -34,7 +64,93 @@ function Component() {
 }
 ```
 
-### `mergeClasses()`
+### Pseudo & class selectors, at-rules, global styles
+
+`makeStyles()` supports pseudo, class selectors and at-rules.
+
+```ts
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ':active': { color: 'pink' },
+    ':hover': { color: 'blue' },
+    // :link, :focus, etc.
+
+    '.foo': { color: 'black' },
+    ':nth-child(2n)': { backgroundColor: '#fafafa' },
+
+    '@media screen and (max-width: 992px)': { color: 'orange' },
+    '@supports (display: grid)': { color: 'red' },
+    '@layer utility': { marginBottom: '1em' },
+  },
+});
+```
+
+Another useful feature is `:global()` selector, it allows connecting local styles with global selectors.
+
+```ts
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ':global(html[data-whatintent="mouse"])': { backgroundColor: 'yellow' },
+    // outputs: html[data-whatintent="mouse"] .abcd { background-color: yellow }
+  },
+});
+```
+
+### Keyframes (animations)
+
+`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:
+
+```tsx
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    animationIterationCount: 'infinite',
+    animationDuration: '3s',
+    animationName: {
+      from: { transform: 'rotate(0deg)' },
+      to: { transform: 'rotate(360deg)' },
+    },
+  },
+  array: {
+    animationIterationCount: 'infinite',
+    animationDuration: '3s',
+    animationName: [
+      {
+        from: { transform: 'rotate(0deg)' },
+        to: { transform: 'rotate(360deg)' },
+      },
+      {
+        from: { height: '100px' },
+        to: { height: '200px' },
+      },
+    ],
+  },
+});
+```
+
+
+
+### 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'],
+  },
+});
+```
+
+## `mergeClasses()`
 
 > 💡 **It is not possible to simply concatenate classes returned by `useClasses()`.**
 
@@ -70,7 +186,162 @@ function Component() {
 }
 ```
 
-## `shorthands`
+## `makeStaticStyles()`
+
+Creates styles attached to a global selector. Styles can be defined via objects:
+
+```tsx
+import { makeStaticStyles } from '@griffel/react';
+
+const useStaticStyles = makeStaticStyles({
+  '@font-face': {
+    fontFamily: 'Open Sans',
+    src: `url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+         url("/fonts/OpenSans-Regular-webfont.woff") format("woff")`,
+  },
+  body: {
+    background: 'red',
+  },
+
+  /**
+   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting
+   *
+   * Not supported:
+   * .some {
+   *   .class { ... },
+   *   ':hover': { ... }
+   * }
+   *
+   * Supported:
+   * '.some.class': { ... }
+   * '.some.class:hover': { ... }
+   */
+});
+
+function App() {
+  useStaticStyles();
+
+  return <div />;
+}
+```
+
+Or with string & arrays of strings/objects:
+
+```tsx
+import { makeStaticStyles } from '@griffel/react';
+
+const useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');
+const useStaticStyles2 = makeStaticStyles([
+  {
+    '@font-face': {
+      fontFamily: 'My Font',
+      src: `url(my_font.woff)`,
+    },
+  },
+  'html { line-height: 20px; }',
+]);
+
+function App() {
+  useStaticStyles1();
+  useStaticStyles2();
+
+  return <div />;
+}
+```
+
+## `makeResetStyles()`
+
+Atomic CSS has [tradeoffs](https://griffel.js.org/react/guides/atomic-css#trade-offs).
+Once an element has many HTML class names each pointing to different CSS rules, browser layout times slow down.
+
+There are cases when it's reasonable to flatten multiple declarations into monolithic CSS. For example, base styles for components in a UI library.
+Rules generated by `makeResetStyles()` are inserted into the CSS style sheet before all the Atomic CSS, so styles from `makeStyles()` will always override these rules.
+
+`makeResetStyles` returns a React hook that should be called inside a component:
+
+> 💡`makeResetStyles` supports all features from `makeStyles()` and allows to use [CSS shorthands](https://griffel.js.org/react/guides/limitations#css-shorthands-are-not-supported).
+
+```jsx
+import { makeStyles, makeResetStyles, shorthands } from '@griffel/react';
+import { mergeClasses } from './mergeClasses';
+
+const useBaseClass = makeResetStyles({
+  color: 'red',
+  padding: 0,
+  // etc.
+});
+
+const useClasses = makeStyles({
+  primary: { color: 'blue' },
+  circular: {
+    ...shorthands.padding('5px'),
+    ...shorthands.borderRadius('5px'),
+  },
+});
+
+function Component(props) {
+  const baseClass = useBaseClass();
+  const classes = useClasses();
+
+  return (
+    <button className={mergeClasses(baseClass, props.primary && classes.primary, props.circular && classes.circular)} />
+  );
+}
+```
+
+> ⚠️ Only one class generated by `makeResetStyles()` can be applied to an element. Otherwise, behavior will be non-deterministic as classes merging will not be done for this case and results depend on order of insertion.
+
+```jsx
+import { makeStyles } from '@griffel/react';
+
+const useClassA = makeResetStyles({
+  /* styles */
+});
+const useClassB = makeResetStyles({
+  /* styles */
+});
+
+function Component(props) {
+  /* 💣 Never apply multiple rules from makeResetStyles() to the same element */
+  return <button className={mergeClasses(useClassA(), useClassB())} />;
+}
+```
+
+## `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',
+  },
+});
+```
+
+## 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.
 
@@ -266,186 +537,3 @@ const useClasses = makeStyles({
   },
 });
 ```
-
-## `makeStaticStyles()`
-
-Creates styles attached to a global selector. Styles can be defined via objects:
-
-```tsx
-import { makeStaticStyles } from '@griffel/react';
-
-const useStaticStyles = makeStaticStyles({
-  '@font-face': {
-    fontFamily: 'Open Sans',
-    src: `url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
-         url("/fonts/OpenSans-Regular-webfont.woff") format("woff")`,
-  },
-  body: {
-    background: 'red',
-  },
-
-  /**
-   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting
-   *
-   * Not supported:
-   * .some {
-   *   .class { ... },
-   *   ':hover': { ... }
-   * }
-   *
-   * Supported:
-   * '.some.class': { ... }
-   * '.some.class:hover': { ... }
-   */
-});
-
-function App() {
-  useStaticStyles();
-
-  return <div />;
-}
-```
-
-Or with string & arrays of strings/objects:
-
-```tsx
-import { makeStaticStyles } from '@griffel/react';
-
-const useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');
-const useStaticStyles2 = makeStaticStyles([
-  {
-    '@font-face': {
-      fontFamily: 'My Font',
-      src: `url(my_font.woff)`,
-    },
-  },
-  'html { line-height: 20px; }',
-]);
-
-function App() {
-  useStaticStyles1();
-  useStaticStyles2();
-
-  return <div />;
-}
-```
-
-## `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
-
-`makeStyles()` supports pseudo, class selectors and at-rules.
-
-```ts
-import { makeStyles } from '@griffel/react';
-
-const useClasses = makeStyles({
-  root: {
-    ':active': { color: 'pink' },
-    ':hover': { color: 'blue' },
-    // :link, :focus, etc.
-
-    '.foo': { color: 'black' },
-    ':nth-child(2n)': { backgroundColor: '#fafafa' },
-
-    '@media screen and (max-width: 992px)': { color: 'orange' },
-    '@supports (display: grid)': { color: 'red' },
-    '@layer utility': { marginBottom: '1em' },
-  },
-});
-```
-
-Another useful feature is `:global()` selector, it allows connecting local styles with global selectors.
-
-```ts
-import { makeStyles } from '@griffel/react';
-
-const useClasses = makeStyles({
-  root: {
-    ':global(html[data-whatintent="mouse"])': { backgroundColor: 'yellow' },
-    // outputs: html[data-whatintent="mouse"] .abcd { background-color: yellow }
-  },
-});
-```
-
-### 🎞 `keyframes` (animations)
-
-`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:
-
-```tsx
-import { makeStyles } from '@griffel/react';
-
-const useClasses = makeStyles({
-  root: {
-    animationIterationCount: 'infinite',
-    animationDuration: '3s',
-    animationName: {
-      from: { transform: 'rotate(0deg)' },
-      to: { transform: 'rotate(360deg)' },
-    },
-  },
-  array: {
-    animationIterationCount: 'infinite',
-    animationDuration: '3s',
-    animationName: [
-      {
-        from: { transform: 'rotate(0deg)' },
-        to: { transform: 'rotate(360deg)' },
-      },
-      {
-        from: { height: '100px' },
-        to: { height: '200px' },
-      },
-    ],
-  },
-});
-```
-
-### 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/__resetCSS.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+export declare function __resetStyles(ltrClassName: string, rtlClassName: string | null): () => string;

package/__resetStyles.cjs.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@griffel/core');
+var RendererContext = require('./RendererContext.cjs.js');
+var TextDirectionContext = require('./TextDirectionContext.cjs.js');
+
+/**
+ * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+function __resetStyles(ltrClassName, rtlClassName, cssRules) {
+  const getStyles = core.__resetStyles(ltrClassName, rtlClassName, cssRules);
+  return function useClasses() {
+    const dir = TextDirectionContext.useTextDirection();
+    const renderer = RendererContext.useRenderer();
+    return getStyles({
+      dir,
+      renderer
+    });
+  };
+}
+
+exports.__resetStyles = __resetStyles;
+//# sourceMappingURL=__resetStyles.cjs.js.map

package/__resetStyles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__resetStyles.cjs.js","sources":["../../../packages/react/src/__resetStyles.ts"],"sourcesContent":["import { __resetStyles as vanillaResetStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: string[]) {\n  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["__resetStyles","ltrClassName","rtlClassName","cssRules","getStyles","vanillaResetStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;AAKA;;;;;AAKA;;SACgBA,cAAcC,cAAsBC,cAA6BC;EAC/E,MAAMC,SAAS,GAAGC,kBAAkB,CAACJ,YAAD,EAAeC,YAAf,EAA6BC,QAA7B,CAApC;EAEA,OAAO,SAASG,UAAT;IACL,MAAMC,GAAG,GAAGC,qCAAgB,EAA5B;IACA,MAAMC,QAAQ,GAAGC,2BAAW,EAA5B;IAEA,OAAON,SAAS,CAAC;MAAEG,GAAF;MAAOE;KAAR,CAAhB;GAJF;AAMD;;;;"}

package/__resetStyles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+export declare function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: string[]): () => string;

package/__resetStyles.esm.js

@@ -0,0 +1,25 @@
+import { __resetStyles as __resetStyles$1 } from '@griffel/core';
+import { useRenderer } from './RendererContext.esm.js';
+import { useTextDirection } from './TextDirectionContext.esm.js';
+
+/**
+ * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+function __resetStyles(ltrClassName, rtlClassName, cssRules) {
+  const getStyles = __resetStyles$1(ltrClassName, rtlClassName, cssRules);
+  return function useClasses() {
+    const dir = useTextDirection();
+    const renderer = useRenderer();
+    return getStyles({
+      dir,
+      renderer
+    });
+  };
+}
+
+export { __resetStyles };
+//# sourceMappingURL=__resetStyles.esm.js.map

package/__resetStyles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__resetStyles.esm.js","sources":["../../../packages/react/src/__resetStyles.ts"],"sourcesContent":["import { __resetStyles as vanillaResetStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: string[]) {\n  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["__resetStyles","ltrClassName","rtlClassName","cssRules","getStyles","vanillaResetStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;AAKA;;;;;AAKA;;SACgBA,cAAcC,cAAsBC,cAA6BC;EAC/E,MAAMC,SAAS,GAAGC,eAAkB,CAACJ,YAAD,EAAeC,YAAf,EAA6BC,QAA7B,CAApC;EAEA,OAAO,SAASG,UAAT;IACL,MAAMC,GAAG,GAAGC,gBAAgB,EAA5B;IACA,MAAMC,QAAQ,GAAGC,WAAW,EAA5B;IAEA,OAAON,SAAS,CAAC;MAAEG,GAAF;MAAOE;KAAR,CAAhB;GAJF;AAMD;;;;"}

package/index.cjs.js

@@ -11,6 +11,7 @@ var RendererContext = require('./RendererContext.cjs.js');
 var TextDirectionContext = require('./TextDirectionContext.cjs.js');
 var __css = require('./__css.cjs.js');
 var __styles = require('./__styles.cjs.js');
+var __resetStyles = require('./__resetStyles.cjs.js');
 
 
 
@@ -35,4 +36,5 @@ exports.useRenderer_unstable = RendererContext.useRenderer;
 exports.TextDirectionProvider = TextDirectionContext.TextDirectionProvider;
 exports.__css = __css.__css;
 exports.__styles = __styles.__styles;
+exports.__resetStyles = __resetStyles.__resetStyles;
 //# sourceMappingURL=index.cjs.js.map

package/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.d.ts

@@ -8,3 +8,4 @@ export { RendererProvider, useRenderer as useRenderer_unstable } from './Rendere
 export { TextDirectionProvider } from './TextDirectionContext';
 export { __css } from './__css';
 export { __styles } from './__styles';
+export { __resetStyles } from './__resetStyles';

package/index.esm.js

@@ -7,4 +7,5 @@ export { RendererProvider, useRenderer as useRenderer_unstable } from './Rendere
 export { TextDirectionProvider } from './TextDirectionContext.esm.js';
 export { __css } from './__css.esm.js';
 export { __styles } from './__styles.esm.js';
+export { __resetStyles } from './__resetStyles.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/react",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@griffel/core": "^1.7.0",
+    "@griffel/core": "^1.8.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {