@griffel/react 1.5.1 → 1.5.2

package/README.md

@@ -10,11 +10,13 @@ A package with wrappers and APIs to be used with React.js.
   - [Pseudo & class selectors, at-rules, global styles](#pseudo--class-selectors-at-rules-global-styles)
   - [Keyframes (animations)](#keyframes-animations)
   - [CSS Fallback Properties](#css-fallback-properties)
+  - [RTL support](#rtl-support)
 - [`mergeClasses()`](#mergeclasses)
 - [`makeStaticStyles()`](#makestaticstyles)
 - [`makeResetStyles()`](#makeresetstyles)
 - [`createDOMRenderer()`, `RendererProvider`](#createdomrenderer-rendererprovider)
   - [styleElementAttributes](#styleelementattributes)
+- [`TextDirectionProvider`](#textdirectionprovider)
 - [Shorthands](#shorthands)
   - [`shorthands.border`](#shorthandsborder)
   - [`shorthands.borderBottom`, `shorthands.borderTop`, `shorthands.borderLeft`, `shorthands.borderRight`](#shorthandsborderbottom-shorthandsbordertop-shorthandsborderleft-shorthandsborderright)
@@ -133,8 +135,6 @@ const useClasses = makeStyles({
 });
 ```
 
-
-
 ### CSS Fallback Properties
 
 Any CSS property accepts an array of values which are all added to the styles.
@@ -150,6 +150,54 @@ const useClasses = makeStyles({
 });
 ```
 
+### RTL support
+
+Griffel uses [rtl-css-js](https://github.com/kentcdodds/rtl-css-js) to perform automatic flipping of properties and values in Right-To-Left (RTL) text direction defined by `TextDirectionProvider`.
+
+```js
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    paddingLeft: '10px',
+  },
+});
+```
+
+⬇️⬇️⬇️
+
+```css
+/* Will be applied in LTR */
+.frdkuqy {
+  padding-left: 10px;
+}
+/* Will be applied in RTL */
+.f81rol6 {
+  padding-right: 10px;
+}
+```
+
+You can also control which rules you don't want to flip by adding a `/* @noflip */` CSS comment to your rule:
+
+```js
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    paddingLeft: '10px /* @noflip */',
+  },
+});
+```
+
+⬇️⬇️⬇️
+
+```css
+/* Will be applied in LTR & RTL */
+.f6x5cb6 {
+  padding-left: 10px;
+}
+```
+
 ## `mergeClasses()`
 
 > 💡 **It is not possible to simply concatenate classes returned by `useClasses()`.**
@@ -341,6 +389,29 @@ const renderer = createDOMRenderer(targetDocument, {
 });
 ```
 
+## `TextDirectionProvider`
+
+`TextDirectionProvider` is used to determine the text direction for style computation. The default text direction is Left-To-Right (LTR).
+
+```jsx
+import { TextDirectionProvider } from '@griffel/react';
+
+function App() {
+  return (
+    <>
+      <TextDirectionProvider>
+        {/* Inner components will have styles for LTR */}
+        {/* ... */}
+      </TextDirectionProvider>
+      <TextDirectionProvider dir="rtl">
+        {/* Inner components will have styles for RTL */}
+        {/* ... */}
+      </TextDirectionProvider>
+    </>
+  );
+}
+```
+
 ## 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.

package/package.json

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