diff --git a/apps/website/docs/react/api/make-reset-styles.md b/apps/website/docs/react/api/make-reset-styles.md
index 4c20c3065..f495a737c 100644
--- a/apps/website/docs/react/api/make-reset-styles.md
+++ b/apps/website/docs/react/api/make-reset-styles.md
@@ -37,16 +37,10 @@ const useClass = makeResetStyles({
}
```
-:::note
-
-By its nature `makeResetStyles` allows the use of [CSS shorthands](/react/guides/limitations#css-shorthands-are-not-supported) and does not have the same limitation as `makeStyles()`.
-
-:::
-
## Usage with `makeStyles`
```jsx
-import { makeStyles, makeResetStyles, shorthands } from '@griffel/react';
+import { makeStyles, makeResetStyles } from '@griffel/react';
import { mergeClasses } from './mergeClasses';
const useBaseClass = makeResetStyles({
@@ -58,8 +52,8 @@ const useBaseClass = makeResetStyles({
const useClasses = makeStyles({
primary: { color: 'blue' },
circular: {
- ...shorthands.padding('5px'),
- ...shorthands.borderRadius('5px'),
+ padding: '5px',
+ borderRadius: '5px',
},
});
diff --git a/apps/website/docs/react/api/make-static-styles.md b/apps/website/docs/react/api/make-static-styles.md
index f634159e4..a41329e8d 100644
--- a/apps/website/docs/react/api/make-static-styles.md
+++ b/apps/website/docs/react/api/make-static-styles.md
@@ -101,12 +101,6 @@ function App() {
}
```
-:::note
-
-`makeStaticStyles` supports the use of [shorthands](/react/api/shorthands) and does not have the same limitation as `makeStyles()`.
-
-:::
-
## Usage with `makeStyles`
```tsx
@@ -122,7 +116,7 @@ const useStaticStyles = makeStaticStyles({
const useClasses = makeStyles({
primaryText: {
color: 'blue',
- ...shorthands.padding('5px'),
+ padding: '10px',
},
});
diff --git a/apps/website/docs/react/api/shorthands.md b/apps/website/docs/react/api/shorthands.md
index b7f0398ad..7b31500a2 100644
--- a/apps/website/docs/react/api/shorthands.md
+++ b/apps/website/docs/react/api/shorthands.md
@@ -4,13 +4,7 @@ sidebar_position: 3
# shorthands
-:::note
-
-Check [limitations](/react/guides/limitations) to understand why these helpers are needed.
-
-:::
-
-`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](/react/guides/limitations#css-shorthands-are-not-supported) by Griffel. For example:
+`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](/react/guides/limitations#css-shorthands-are-not-supported) by Griffel. For example:
```tsx
import { makeStyles, shorthands } from '@griffel/react';
@@ -18,9 +12,9 @@ import { makeStyles, shorthands } from '@griffel/react';
const useClasses = makeStyles({
root: {
// ❌ This is not supported, TypeScript compiler will throw, styles will not be inserted to DOM
- padding: '2px 4px 8px 16px',
+ borderColor: 'red',
// ✅ Use shorthand functions to avoid writting CSS longhands
- ...shorthands.padding('2px', '4px', '8px', '16px'),
+ ...shorthands.borderColor('red'),
},
});
```
@@ -31,9 +25,9 @@ The most of the functions follow syntax in matching CSS properties, but each val
```js
// ❌ Will produce wrong results
-shorthands.padding('2px 4px');
+shorthands.borderColor('red blue');
// ✅ Correct output
-shorthands.padding('2px', '4px');
+shorthands.borderColor('red', 'blue');
```
:::
@@ -41,45 +35,16 @@ shorthands.padding('2px', '4px');
Function in a `shorthand` set are pure, you can simply use `console.log` to better understand produced rules:
```js
-console.log(padding('12px', '24px', '36px', '48px'));
+console.log(borderColor('red'));
// ⬇️⬇️⬇️
// {
-// paddingBottom: '36px',
-// paddingLeft: '48px',
-// paddingRight: '24px',
-// paddingTop: '12px',
+// borderBottomColor: 'red',
+// borderLeftColor: 'red',
+// borderRightColor: 'red',
+// borderTopColor: 'red',
// }
```
-### `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`
-
-```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
@@ -124,122 +89,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'],
- ]),
- },
-});
-```
diff --git a/apps/website/docs/react/guides/limitations.md b/apps/website/docs/react/guides/limitations.md
index 46ebea7eb..5bbe30063 100644
--- a/apps/website/docs/react/guides/limitations.md
+++ b/apps/website/docs/react/guides/limitations.md
@@ -15,7 +15,7 @@ function App(props) {
root: {
color: props.color,
[`.${props.area}`]: { display: 'block' },
- }
+ },
});
}
```
@@ -28,9 +28,15 @@ As Griffel performs ahead-of-time [compilation](/react/ahead-of-time-compilation
```jsx
const useClasses = makeStyles({
- twoColumns: { /* styles */ },
- threeColumns: { /* styles */ },
- fourColumns: { /* styles */ },
+ twoColumns: {
+ /* styles */
+ },
+ threeColumns: {
+ /* styles */
+ },
+ fourColumns: {
+ /* styles */
+ },
});
function App(props) {
@@ -49,7 +55,9 @@ As Griffel performs ahead-of-time [compilation](/react/ahead-of-time-compilation
```jsx
const useClasses = makeStyles({
- root: { /* your other styles styles */ },
+ root: {
+ /* your other styles styles */
+ },
});
function App(props) {
@@ -73,87 +81,34 @@ As Griffel performs ahead-of-time [compilation](/react/ahead-of-time-compilation
}
```
-## CSS shorthands are not supported
-
-There are [shorthand and longhand properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) in CSS. Shorthand properties allow to define a set of longhand properties. For example:
-
-```css
-/* Define with multiple properties */
-.longhand-rule {
- padding-top: 2px;
- padding-right: 4px;
- padding-bottom: 8px;
- padding-left: 16px;
-}
-
-/* Define with a single property */
-.shorthand-rule {
- padding: 2px 4px 8px 16px;
-}
-```
-
-Griffel relies on [Atomic CSS](/react/guides/atomic-css) and produces atomic classes:
-
-```css
-/* 💡 makeStyles() generates hashed classes, but it's not important in this example */
-.a {
- background-color: red;
-}
-.b {
- background-color: green;
-}
-.c {
- color: yellow;
-}
-```
-
-```html
-
-Hello world!
-
-Hello world!
-Hello world!
-```
-
-- In "Case 1" both classes are applied to an element: it's wrong as result is **nondeterministic** and depends on classes order in CSS definitions (i.e. [order of appearance](https://www.w3.org/TR/css-cascade-3/#cascade-order)), [demo on CodeSandbox](https://codesandbox.io/s/css-insertion-order-matters-mgt6y)
-- In "Case 2" only single classname per CSS property is applied, result will be deterministic
-
-This problem is solved by [`mergeClasses()`](https://github.com/microsoft/griffel/blob/main/packages/core/src/mergeClasses.ts) function: it de-duplicates classes based on property name.
-
-```jsx
-// ⚠ Simplified example
-function App() {
- // 👇 skips "a", returns only "b c"
- return Hello world
;
-}
-```
-
-> Only non colliding properties should be applied to DOM elements with Atomic CSS.
+## _Some_ of CSS shorthands are not supported
-This works well for longhands, but there are cases when longhands and shorthands are combined:
+The latest versions of Griffel support CSS shorthand properties, for example:
```js
-// ⚠ Not real code
-const useClasses1 = makeStyles({
- root: {
- backgroundColor: 'red',
- background: 'green',
- },
-});
-const useClasses2 = makeStyles({
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
root: {
+ padding: '2px 4px',
background: 'green',
- backgroundColor: 'red',
},
});
```
-:::caution
+**However**, some of the shorthands are not supported: `borderColor`, `borderStyle` & `borderWidth`. The reason is that they can't be combined in a reliable way with other properties, see [microsoft/griffel#531](https://github.com/microsoft/griffel/issues/531) for more information.
-In this example the problem is the same: both classes will be applied, result depends on the order of appearance.
+For these properties, we suggest to use `shorthands.*` functions to avoid writing longhand properties:
-:::
-
-There is an option to expand CSS shorthands to longhands, but it's not reliable and does not work with static rules i.e. you can't expand rules with CSS variables without knowing their value. The single predictable solution is to disallow the usage of CSS shorthands.
+```js
+import { makeStyles, shorthands } from '@griffel/react';
-You can get more information on the original RFC, [microsoft/fluentui#20573](https://github.com/microsoft/fluentui/pull/20573). For this reason Griffel disallows CSS shorthand properties in the input style object. Instead of shorthand properties, use [shorthands helper functions](/react/api/shorthands) which do the shorthand to longhand expansion statically.
+const useClasses = makeStyles({
+ root: {
+ // ❌ This is not supported, TypeScript compiler will throw, styles will not be inserted to DOM
+ borderColor: 'red',
+ // ✅ Use shorthand functions to avoid writing CSS longhands
+ ...shorthands.borderColor('red'),
+ },
+});
+```
diff --git a/apps/website/src/components/Playground/code/styles.js b/apps/website/src/components/Playground/code/styles.js
index c0da21087..bd2158b52 100644
--- a/apps/website/src/components/Playground/code/styles.js
+++ b/apps/website/src/components/Playground/code/styles.js
@@ -1,11 +1,11 @@
-import { makeStyles, shorthands } from '@griffel/core';
+import { makeStyles } from '@griffel/core';
export default makeStyles({
root: {
backgroundColor: 'red',
paddingLeft: '10px',
'@media(forced-colors: active)': {
- ...shorthands.borderColor('transparent'),
+ border: '1px solid transparent',
},
},
});
diff --git a/apps/website/src/components/Playground/code/templates/border.js b/apps/website/src/components/Playground/code/templates/border.js
index ba5012aef..6c652bfca 100644
--- a/apps/website/src/components/Playground/code/templates/border.js
+++ b/apps/website/src/components/Playground/code/templates/border.js
@@ -2,16 +2,16 @@ import { makeStyles, shorthands } from '@griffel/core';
export default makeStyles({
border: {
- ...shorthands.border('1px', 'solid', 'red'),
+ border: '1px solid red',
},
borderTop: {
- ...shorthands.borderTop('2px', 'solid', 'blue'),
+ borderTop: '2px solid blue',
},
borderColor: {
...shorthands.borderColor('red'),
},
borderRadius: {
- ...shorthands.borderRadius('5px'),
+ borderRadius: '5px',
},
});
diff --git a/apps/website/src/components/Playground/code/templates/container.js b/apps/website/src/components/Playground/code/templates/container.js
index 6d0a156da..55bcde67d 100644
--- a/apps/website/src/components/Playground/code/templates/container.js
+++ b/apps/website/src/components/Playground/code/templates/container.js
@@ -1,15 +1,15 @@
-import { makeStyles, shorthands } from '@griffel/core';
+import { makeStyles } from '@griffel/core';
export default makeStyles({
root: {
'@container (max-width: 468px)': {
- ...shorthands.gap('1.5rem'),
display: 'grid',
+ gap: '1.5rem',
},
'@container foo (max-width: 468px)': {
- ...shorthands.gap('1.5rem'),
display: 'grid',
+ gap: '1.5rem',
},
},
});
diff --git a/apps/website/src/components/Playground/code/templates/global.js b/apps/website/src/components/Playground/code/templates/global.js
index 41856c1f2..18770008f 100644
--- a/apps/website/src/components/Playground/code/templates/global.js
+++ b/apps/website/src/components/Playground/code/templates/global.js
@@ -1,9 +1,9 @@
-import { makeStyles, shorthands } from '@griffel/core';
+import { makeStyles } from '@griffel/core';
export default makeStyles({
global: {
':global([data-global-style])': {
- ...shorthands.border('1px', 'solid'),
+ border: '1px solid',
},
},
});
diff --git a/apps/website/src/components/Playground/code/templates/margin.js b/apps/website/src/components/Playground/code/templates/margin.js
index 44f167911..5151dc4bc 100644
--- a/apps/website/src/components/Playground/code/templates/margin.js
+++ b/apps/website/src/components/Playground/code/templates/margin.js
@@ -1,19 +1,17 @@
-import { makeStyles, shorthands } from '@griffel/core';
+import { makeStyles } from '@griffel/core';
export default makeStyles({
one: {
- ...shorthands.margin('1px'),
+ margin: '1px',
},
two: {
- ...shorthands.margin('2px', '2px'),
+ margin: '1px 2px',
},
-
three: {
- ...shorthands.margin('3px', '3px'),
+ margin: '1px 2px 3px',
},
-
four: {
- ...shorthands.margin('4px', '4px', '5px'),
+ margin: '1px 2px 3px 4px',
},
});
diff --git a/apps/website/src/components/Playground/code/templates/media.js b/apps/website/src/components/Playground/code/templates/media.js
index 203b6dab6..598b7f071 100644
--- a/apps/website/src/components/Playground/code/templates/media.js
+++ b/apps/website/src/components/Playground/code/templates/media.js
@@ -1,14 +1,14 @@
-import { makeStyles, shorthands } from '@griffel/core';
+import { makeStyles } from '@griffel/core';
export default makeStyles({
root: {
'@media(forced-colors: active)': {
- ...shorthands.borderColor('transparent'),
+ border: '1px solid transparent',
},
'@media screen and (max-width: 468px)': {
- ...shorthands.gap('1.5rem'),
display: 'grid',
+ gap: '1.5rem',
},
},
});
diff --git a/apps/website/src/components/Playground/code/templates/padding.js b/apps/website/src/components/Playground/code/templates/padding.js
index 98bb63651..e9b81dcfa 100644
--- a/apps/website/src/components/Playground/code/templates/padding.js
+++ b/apps/website/src/components/Playground/code/templates/padding.js
@@ -1,19 +1,17 @@
-import { makeStyles, shorthands } from '@griffel/core';
+import { makeStyles } from '@griffel/core';
export default makeStyles({
one: {
- ...shorthands.padding('1px'),
+ padding: '1px',
},
two: {
- ...shorthands.padding('2px', '2px'),
+ padding: '1px 2px',
},
-
three: {
- ...shorthands.padding('3px', '3px'),
+ padding: '1px 2px 3px',
},
-
four: {
- ...shorthands.padding('4px', '4px', '5px'),
+ padding: '1px 2px 3px 4px',
},
});
diff --git a/change/@griffel-core-c8ff46f1-b540-481a-b469-098699d3c11b.json b/change/@griffel-core-c8ff46f1-b540-481a-b469-098699d3c11b.json
new file mode 100644
index 000000000..5e7143dec
--- /dev/null
+++ b/change/@griffel-core-c8ff46f1-b540-481a-b469-098699d3c11b.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "chore: deprecate the most of shorthands.* functions",
+ "packageName": "@griffel/core",
+ "email": "olfedias@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/core/src/shorthands/border.ts b/packages/core/src/shorthands/border.ts
index ec5a0e5bd..5fde57313 100644
--- a/packages/core/src/shorthands/border.ts
+++ b/packages/core/src/shorthands/border.ts
@@ -38,6 +38,8 @@ export function border(width: BorderWidthInput, style: BorderStyleInput, color:
* border('solid', '2px', 'red')
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border
+ *
+ * @deprecated Just use `{ border: '2px solid red' }` instead as Griffel supports CSS shorthands now
*/
export function border(
...values: [BorderWidthInput | BorderStyleInput, (BorderWidthInput | BorderStyleInput)?, BorderColorInput?]
diff --git a/packages/core/src/shorthands/borderBottom.ts b/packages/core/src/shorthands/borderBottom.ts
index 6bc487ccf..6a84e1f5f 100644
--- a/packages/core/src/shorthands/borderBottom.ts
+++ b/packages/core/src/shorthands/borderBottom.ts
@@ -31,7 +31,9 @@ export function borderBottom(
* borderBottom('2px', 'solid', 'red')
* borderBottom('solid', '2px', 'red')
*
- * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-Bottom
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom
+ *
+ * @deprecated Just use `{ borderBottom: '2px solid red' }` instead as Griffel supports CSS shorthands now
*/
export function borderBottom(
...values: [BorderWidthInput | BorderStyleInput, (BorderWidthInput | BorderStyleInput)?, BorderColorInput?]
diff --git a/packages/core/src/shorthands/borderLeft.ts b/packages/core/src/shorthands/borderLeft.ts
index 184fe20a0..0b8288a26 100644
--- a/packages/core/src/shorthands/borderLeft.ts
+++ b/packages/core/src/shorthands/borderLeft.ts
@@ -24,6 +24,8 @@ export function borderLeft(style: BorderStyleInput, width: BorderWidthInput, col
* borderLeft('solid', '2px', 'red')
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left
+ *
+ * @deprecated Just use `{ borderLeft: '2px solid red' }` instead as Griffel supports CSS shorthands now
*/
export function borderLeft(
...values: [BorderWidthInput | BorderStyleInput, (BorderWidthInput | BorderStyleInput)?, BorderColorInput?]
diff --git a/packages/core/src/shorthands/borderRadius.ts b/packages/core/src/shorthands/borderRadius.ts
index da5e05dbd..5294c1223 100644
--- a/packages/core/src/shorthands/borderRadius.ts
+++ b/packages/core/src/shorthands/borderRadius.ts
@@ -17,6 +17,8 @@ type BorderRadiusStyle = Pick<
* borderRadius('1px', 0, '3px', '4px')
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
+ *
+ * @deprecated Just use `{ borderRadius: '10px 5% 8px 4px' }` instead as Griffel supports CSS shorthands now
*/
export function borderRadius(
value1: BorderRadiusInput,
diff --git a/packages/core/src/shorthands/borderRight.ts b/packages/core/src/shorthands/borderRight.ts
index 57dd0d941..476b8e313 100644
--- a/packages/core/src/shorthands/borderRight.ts
+++ b/packages/core/src/shorthands/borderRight.ts
@@ -32,6 +32,8 @@ export function borderRight(
* borderRight('solid', '2px', 'red')
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right
+ *
+ * @deprecated Just use `{ borderRight: '2px solid red' }` instead as Griffel supports CSS shorthands now
*/
export function borderRight(
...values: [BorderWidthInput | BorderStyleInput, (BorderWidthInput | BorderStyleInput)?, BorderColorInput?]
diff --git a/packages/core/src/shorthands/borderTop.ts b/packages/core/src/shorthands/borderTop.ts
index 4f83280b3..6a8d518e0 100644
--- a/packages/core/src/shorthands/borderTop.ts
+++ b/packages/core/src/shorthands/borderTop.ts
@@ -23,7 +23,9 @@ export function borderTop(style: BorderStyleInput, width: BorderWidthInput, colo
* borderTop('2px', 'solid', 'red')
* borderTop('solid', '2px', 'red')
*
- * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-Top
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top
+ *
+ * @deprecated Just use `{ borderTop: '2px solid red' }` instead as Griffel supports CSS shorthands now
*/
export function borderTop(
...values: [BorderWidthInput | BorderStyleInput, (BorderWidthInput | BorderStyleInput)?, BorderColorInput?]
diff --git a/packages/core/src/shorthands/flex.ts b/packages/core/src/shorthands/flex.ts
index 703e22a3f..d46d0ed8c 100644
--- a/packages/core/src/shorthands/flex.ts
+++ b/packages/core/src/shorthands/flex.ts
@@ -29,6 +29,8 @@ const isWidth = (value: CSS.Property.Flex | undefined) => widthReservedKeys.some
* flex(0, 0, 'auto')
*
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex
+ *
+ * @deprecated Just use `{ flex: '1 1 0' }` instead as Griffel supports CSS shorthands now
*/
export function flex(...values: FlexInput): FlexStyle {
const isOneValueSyntax = values.length === 1;
diff --git a/packages/core/src/shorthands/gap.ts b/packages/core/src/shorthands/gap.ts
index 9a1aed9d0..b8dd5ea50 100644
--- a/packages/core/src/shorthands/gap.ts
+++ b/packages/core/src/shorthands/gap.ts
@@ -11,6 +11,8 @@ type GapStyle = Pick;
* gap('10px', '5px')
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+ *
+ * @deprecated Just use `{ gap: '10px 5px' }` instead as Griffel supports CSS shorthands now
*/
export function gap(columnGap: GapInput, rowGap: GapInput = columnGap): GapStyle {
return {
diff --git a/packages/core/src/shorthands/gridArea.ts b/packages/core/src/shorthands/gridArea.ts
index 5b5616fde..2f9613e74 100644
--- a/packages/core/src/shorthands/gridArea.ts
+++ b/packages/core/src/shorthands/gridArea.ts
@@ -40,6 +40,8 @@ export function gridArea(
* gridArea(2, 4, 1, 3)
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
+ *
+ * @deprecated Just use `{ gridArea: '2 / 4 / 1 / 3' }` instead as Griffel supports CSS shorthands now
*/
export function gridArea(...values: GridAreaInput[]): GridAreaStyle {
// if any value is not valid, then do not apply the CSS.
diff --git a/packages/core/src/shorthands/inset.ts b/packages/core/src/shorthands/inset.ts
index fa386febe..af4380219 100644
--- a/packages/core/src/shorthands/inset.ts
+++ b/packages/core/src/shorthands/inset.ts
@@ -18,6 +18,8 @@ export function inset(top: InsetInput, right: InsetInput, bottom: InsetInput, le
* inset('1px', 0, '3px', '4px')
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/inset
+ *
+ * @deprecated Just use `{ inset: '10px 5px 8px 4px' }` instead as Griffel supports CSS shorthands now
*/
export function inset(...values: InsetInput[]): InsetStyle {
const [firstValue, secondValue = firstValue, thirdValue = firstValue, fourthValue = secondValue] = values;
diff --git a/packages/core/src/shorthands/margin.ts b/packages/core/src/shorthands/margin.ts
index f09e517d4..e39bb8c52 100644
--- a/packages/core/src/shorthands/margin.ts
+++ b/packages/core/src/shorthands/margin.ts
@@ -20,6 +20,8 @@ export function margin(top: MarginInput, right: MarginInput, bottom: MarginInput
* margin('1px', 0, '3px', '4px')
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin
+ *
+ * @deprecated Just use `{ margin: '10px 5px 8px 4px' }` instead as Griffel supports CSS shorthands now
*/
export function margin(...values: MarginInput[]): MarginStyle {
return generateStyles('margin', '', ...values);
diff --git a/packages/core/src/shorthands/marginBlock.ts b/packages/core/src/shorthands/marginBlock.ts
index e1d8e6d92..3b97a16f0 100644
--- a/packages/core/src/shorthands/marginBlock.ts
+++ b/packages/core/src/shorthands/marginBlock.ts
@@ -11,6 +11,8 @@ type MarginBlockStyle = Pick;
* overflow('hidden', 'scroll')
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+ *
+ * @deprecated Just use `{ overflow: 'hidden scroll' }` instead as Griffel supports CSS shorthands now
*/
export function overflow(overflowX: OverflowInput, overflowY: OverflowInput = overflowX): OverflowStyle {
return {
diff --git a/packages/core/src/shorthands/padding.ts b/packages/core/src/shorthands/padding.ts
index bce480c61..d802fa7c1 100644
--- a/packages/core/src/shorthands/padding.ts
+++ b/packages/core/src/shorthands/padding.ts
@@ -20,6 +20,8 @@ export function padding(top: PaddingInput, right: PaddingInput, bottom: PaddingI
* padding('1px', 0, '3px', '4px')
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding
+ *
+ * @deprecated Just use `{ padding: '10px 5px 8px 4px' }` instead as Griffel supports CSS shorthands now
*/
export function padding(...values: PaddingInput[]) {
return generateStyles('padding', '', ...values);
diff --git a/packages/core/src/shorthands/paddingBlock.ts b/packages/core/src/shorthands/paddingBlock.ts
index 4739708b4..704304635 100644
--- a/packages/core/src/shorthands/paddingBlock.ts
+++ b/packages/core/src/shorthands/paddingBlock.ts
@@ -11,6 +11,8 @@ type PaddingBlockStyle = Pick
@@ -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'],
- ]),
- },
-});
-```