@griffel/react 1.5.21 → 1.5.22

package/README.md

@@ -20,19 +20,9 @@ A package with wrappers and APIs to be used with React.js.
   - [styleElementAttributes](#styleelementattributes)
 - [`TextDirectionProvider`](#textdirectionprovider)
 - [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 -->
 
@@ -311,10 +301,8 @@ Rules generated by `makeResetStyles()` are inserted into the CSS style sheet bef
 
 `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 { makeStyles, makeResetStyles } from '@griffel/react';
 import { mergeClasses } from './mergeClasses';
 
 const useBaseClass = makeResetStyles({
@@ -326,8 +314,8 @@ const useBaseClass = makeResetStyles({
 const useClasses = makeStyles({
   primary: { color: 'blue' },
   circular: {
-    ...shorthands.padding('5px'),
-    ...shorthands.borderRadius('5px'),
+    padding: '5px',
+    borderRadius: '5px',
   },
 });
 
@@ -497,36 +485,7 @@ function App() {
 
 ## 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` 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 [some of CSS shorthands are not supported](https://griffel.js.org/react/guides/limitations#css-shorthands-are-not-supported) by Griffel.
 
 ### `shorthands.borderColor`
 
@@ -572,122 +531,3 @@ const useClasses = makeStyles({
   },
 });
 ```
-
-### `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`
-
-```js
-import { makeStyles, shorthands } from '@griffel/react';
-
-const useClasses = makeStyles({
-  root: {
-    ...shorthands.gap('12px'),
-    ...shorthands.gap('12px', '24px'),
-  },
-});
-```
-
-### `shorthands.gridArea`
-
-```js
-import { makeStyles, shorthands } from '@griffel/react';
-
-const useClasses = makeStyles({
-  root: {
-    ...shorthands.gridArea('auto'),
-    ...shorthands.gridArea('first', 'second'),
-    ...shorthands.gridArea(2, 4, 'span footer'),
-    ...shorthands.gridArea(2, 4, 1, 3),
-  },
-});
-```
-
-### `shorthands.inset`
-
-```js
-import { makeStyles, shorthands } from '@griffel/react';
-
-const useClasses = makeStyles({
-  root: {
-    ...shorthands.inset('10px'),
-    ...shorthands.inset('10px', '5px'),
-    ...shorthands.inset('2px', '4px', '8px'),
-    ...shorthands.inset('1px', 0, '3px', '4px'),
-  },
-});
-```
-
-### `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'),
-  },
-});
-```
-
-### `shorthands.transition`
-
-```js
-import { makeStyles, shorthands } from '@griffel/react';
-
-const useClasses = makeStyles({
-  root: {
-    ...shorthands.transition('inherit'),
-    ...shorthands.transition('margin-right', '2s'),
-    ...shorthands.transition('margin-right', '4s', '1s'),
-    ...shorthands.transition('margin-right', '4s', '1s', 'ease-in'),
-    ...shorthands.transition([
-      ['margin-right', '4s', '1s', 'ease-in'],
-      ['margin-left', '2s', '0s', 'ease-in-out'],
-    ]),
-  },
-});
-```

package/index.cjs.js

@@ -16,6 +16,10 @@ var __resetStyles = require('./__resetStyles.cjs.js');
 
 
 
+Object.defineProperty(exports, 'RESET', {
+	enumerable: true,
+	get: function () { return core.RESET; }
+});
 Object.defineProperty(exports, 'createDOMRenderer', {
 	enumerable: true,
 	get: function () { return core.createDOMRenderer; }

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.esm.js

@@ -1,4 +1,4 @@
-export { createDOMRenderer, mergeClasses, shorthands } from '@griffel/core';
+export { RESET, createDOMRenderer, mergeClasses, shorthands } from '@griffel/core';
 export { makeStyles } from './makeStyles.esm.js';
 export { makeResetStyles } from './makeResetStyles.esm.js';
 export { makeStaticStyles } from './makeStaticStyles.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/react",
-  "version": "1.5.21",
+  "version": "1.5.22",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -15,7 +15,7 @@
     }
   },
   "dependencies": {
-    "@griffel/core": "^1.15.3",
+    "@griffel/core": "^1.16.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/src/index.d.ts

@@ -1,4 +1,4 @@
-export { shorthands, mergeClasses, createDOMRenderer } from '@griffel/core';
+export { RESET, shorthands, mergeClasses, createDOMRenderer } from '@griffel/core';
 export type { GriffelStyle, GriffelResetStyle, CreateDOMRendererOptions, GriffelRenderer } from '@griffel/core';
 export { makeStyles } from './makeStyles';
 export { makeResetStyles } from './makeResetStyles';