Repository: microsoft/griffel
Pull request #116 (2022-05-04 12:22:27)

feat(devtools): Add triangle right indicator for collapsed slot
When click on slotName to expand/collapse styles within, show triangle indicator:

<img width="413" alt="Screenshot 2022-05-04 at 14 58 39" src="https://user-images.githubusercontent.com/28751745/166686116-c4a0e82d-df06-4ceb-a6a1-8ae932dec660.png">

<img width="421" alt="Screenshot 2022-05-04 at 14 58 27" src="https://user-images.githubusercontent.com/28751745/166686153-8d887f17-1672-49ba-9e13-967a8c7aa61c.png">


github-actions[bot]: ## 📊 Bundle size report

<sub>🤖 This report was generated against <a href='https://github.com/microsoft/griffel/commit/654a2b1a4a4a79aa5831cb66798733fe73fa43df'>654a2b1a4a4a79aa5831cb66798733fe73fa43df</a></sub>

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/change/@griffel-babel-preset-41b92af0-6e5b-4e53-b341-0bd5b8407b76.json b/change/@griffel-babel-preset-41b92af0-6e5b-4e53-b341-0bd5b8407b76.json
deleted file mode 100644
index 28279be..0000000
--- a/change/@griffel-babel-preset-41b92af0-6e5b-4e53-b341-0bd5b8407b76.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: handle duplicated import sources properly",
-  "packageName": "@griffel/babel-preset",
-  "email": "rezha@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-babel-preset-430fbeb1-262d-49d0-b56d-1dbcf844d5f0.json b/change/@griffel-babel-preset-430fbeb1-262d-49d0-b56d-1dbcf844d5f0.json
deleted file mode 100644
index e8aabf0..0000000
--- a/change/@griffel-babel-preset-430fbeb1-262d-49d0-b56d-1dbcf844d5f0.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: add @fluentui/react-components to handled imports by default",
-  "packageName": "@griffel/babel-preset",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-babel-preset-9f9b43ef-1aa0-45c0-ba63-27be317357d3.json b/change/@griffel-babel-preset-9f9b43ef-1aa0-45c0-ba63-27be317357d3.json
deleted file mode 100644
index c5bd823..0000000
--- a/change/@griffel-babel-preset-9f9b43ef-1aa0-45c0-ba63-27be317357d3.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: re-export Module & EvalCache from Linaria",
-  "packageName": "@griffel/babel-preset",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-core-35e44c82-94d9-4626-80f8-80759a3cb0fe.json b/change/@griffel-core-35e44c82-94d9-4626-80f8-80759a3cb0fe.json
deleted file mode 100644
index 466cd08..0000000
--- a/change/@griffel-core-35e44c82-94d9-4626-80f8-80759a3cb0fe.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "update babelrc with dev env presets",
-  "packageName": "@griffel/core",
-  "email": "yuanboxue@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/change/@griffel-core-8a3b4de2-ff52-4c79-aa40-84cdf0bb669e.json b/change/@griffel-core-8a3b4de2-ff52-4c79-aa40-84cdf0bb669e.json
deleted file mode 100644
index f13a16d..0000000
--- a/change/@griffel-core-8a3b4de2-ff52-4c79-aa40-84cdf0bb669e.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "add a comment to exports",
-  "packageName": "@griffel/core",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/change/@griffel-core-8e16f578-f749-4f26-9899-b90b14811104.json b/change/@griffel-core-8e16f578-f749-4f26-9899-b90b14811104.json
deleted file mode 100644
index 75ee078..0000000
--- a/change/@griffel-core-8e16f578-f749-4f26-9899-b90b14811104.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "Inject devtools when session storage contains __GRIFFEL_DEVTOOLS__",
-  "packageName": "@griffel/core",
-  "email": "yuanboxue@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-core-9132796e-b0a7-46a9-b70f-72bef61024b9.json b/change/@griffel-core-9132796e-b0a7-46a9-b70f-72bef61024b9.json
deleted file mode 100644
index 27a4ba3..0000000
--- a/change/@griffel-core-9132796e-b0a7-46a9-b70f-72bef61024b9.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: add support for @layer",
-  "packageName": "@griffel/core",
-  "email": "mgodbolt@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-core-94a0ec59-abfa-4d0f-a8a8-843026c57848.json b/change/@griffel-core-94a0ec59-abfa-4d0f-a8a8-843026c57848.json
deleted file mode 100644
index c5fd055..0000000
--- a/change/@griffel-core-94a0ec59-abfa-4d0f-a8a8-843026c57848.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix issue with comma-separated selectors and RTL",
-  "packageName": "@griffel/core",
-  "email": "seanmonahan@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-core-ad30b8f8-c6c7-481e-be0d-2e8268b29fdd.json b/change/@griffel-core-ad30b8f8-c6c7-481e-be0d-2e8268b29fdd.json
deleted file mode 100644
index 1e841dd..0000000
--- a/change/@griffel-core-ad30b8f8-c6c7-481e-be0d-2e8268b29fdd.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: add shorthand function for outline",
-  "packageName": "@griffel/core",
-  "email": "bsunderhus@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-core-ca8cbc84-e599-46b6-a84c-a0c8427176b0.json b/change/@griffel-core-ca8cbc84-e599-46b6-a84c-a0c8427176b0.json
deleted file mode 100644
index cb1a47b..0000000
--- a/change/@griffel-core-ca8cbc84-e599-46b6-a84c-a0c8427176b0.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "chore: integrate bundle size tooling",
-  "packageName": "@griffel/core",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/change/@griffel-core-cbfaaa86-8f9f-4b6d-bbbc-97a91bc628f3.json b/change/@griffel-core-cbfaaa86-8f9f-4b6d-bbbc-97a91bc628f3.json
deleted file mode 100644
index 545b27a..0000000
--- a/change/@griffel-core-cbfaaa86-8f9f-4b6d-bbbc-97a91bc628f3.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "README update",
-  "packageName": "@griffel/core",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/change/@griffel-core-e9730721-98ad-4971-8976-6f934c35cf1f.json b/change/@griffel-core-e9730721-98ad-4971-8976-6f934c35cf1f.json
deleted file mode 100644
index 54e01ad..0000000
--- a/change/@griffel-core-e9730721-98ad-4971-8976-6f934c35cf1f.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "Adds inset shorthand",
-  "packageName": "@griffel/core",
-  "email": "bsunderhus@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-eslint-plugin-0f2d3131-9acc-46f2-b1a1-b7c23c1e852a.json b/change/@griffel-eslint-plugin-0f2d3131-9acc-46f2-b1a1-b7c23c1e852a.json
deleted file mode 100644
index 4d9bbb5..0000000
--- a/change/@griffel-eslint-plugin-0f2d3131-9acc-46f2-b1a1-b7c23c1e852a.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "major",
-  "comment": "initial release",
-  "packageName": "@griffel/eslint-plugin",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-react-1c344868-9c9f-4c86-b3fa-32912fd5e641.json b/change/@griffel-react-1c344868-9c9f-4c86-b3fa-32912fd5e641.json
deleted file mode 100644
index c869fe9..0000000
--- a/change/@griffel-react-1c344868-9c9f-4c86-b3fa-32912fd5e641.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "chore: integrate bundle size tooling",
-  "packageName": "@griffel/react",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/change/@griffel-react-33824e76-a3b9-49ed-9577-7e24535441b7.json b/change/@griffel-react-33824e76-a3b9-49ed-9577-7e24535441b7.json
deleted file mode 100644
index 0ad694e..0000000
--- a/change/@griffel-react-33824e76-a3b9-49ed-9577-7e24535441b7.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "update babelrc with dev env presets",
-  "packageName": "@griffel/react",
-  "email": "yuanboxue@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/change/@griffel-react-6d0f6f43-4864-4ba4-b292-8e46b9d1d20f.json b/change/@griffel-react-6d0f6f43-4864-4ba4-b292-8e46b9d1d20f.json
deleted file mode 100644
index 02b672d..0000000
--- a/change/@griffel-react-6d0f6f43-4864-4ba4-b292-8e46b9d1d20f.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "docs: add support for @layer",
-  "packageName": "@griffel/react",
-  "email": "mgodbolt@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/change/@griffel-react-82e46cbc-d83a-4acd-89ff-4278e1eb9b1e.json b/change/@griffel-react-82e46cbc-d83a-4acd-89ff-4278e1eb9b1e.json
deleted file mode 100644
index 979b74d..0000000
--- a/change/@griffel-react-82e46cbc-d83a-4acd-89ff-4278e1eb9b1e.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: avoid errors with React 18",
-  "packageName": "@griffel/react",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-react-b23b3a60-675f-4a27-bb5f-c1422001f958.json b/change/@griffel-react-b23b3a60-675f-4a27-bb5f-c1422001f958.json
deleted file mode 100644
index de42bd5..0000000
--- a/change/@griffel-react-b23b3a60-675f-4a27-bb5f-c1422001f958.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: generate debug hash sequence for devtools",
-  "packageName": "@griffel/core",
-  "email": "yuanboxue@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-react-bdfe2a55-bc15-43bf-8c29-e63d7ac1b1d5.json b/change/@griffel-react-bdfe2a55-bc15-43bf-8c29-e63d7ac1b1d5.json
deleted file mode 100644
index 3ba246f..0000000
--- a/change/@griffel-react-bdfe2a55-bc15-43bf-8c29-e63d7ac1b1d5.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "README update",
-  "packageName": "@griffel/react",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/change/@griffel-webpack-loader-6a8b470c-f154-43cc-aebb-08c5a47e124d.json b/change/@griffel-webpack-loader-6a8b470c-f154-43cc-aebb-08c5a47e124d.json
deleted file mode 100644
index b253b34..0000000
--- a/change/@griffel-webpack-loader-6a8b470c-f154-43cc-aebb-08c5a47e124d.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: remove dependency on @linaria/babel-preset",
-  "packageName": "@griffel/webpack-loader",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/packages/babel-preset/CHANGELOG.json b/packages/babel-preset/CHANGELOG.json
index 6bc688f..a41d5db 100644
--- a/packages/babel-preset/CHANGELOG.json
+++ b/packages/babel-preset/CHANGELOG.json
@@ -1,6 +1,41 @@
 {
   "name": "@griffel/babel-preset",
   "entries": [
+    {
+      "date": "Wed, 04 May 2022 16:15:22 GMT",
+      "tag": "@griffel/babel-preset_v1.3.0",
+      "version": "1.3.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "rezha@microsoft.com",
+            "package": "@griffel/babel-preset",
+            "commit": "7d4c9b6c390d1e0597be50f335c456eb74c67492",
+            "comment": "fix: handle duplicated import sources properly"
+          }
+        ],
+        "minor": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/babel-preset",
+            "commit": "09eb2760eabcb6abc3d21b7333d0ec14f6c4b5d2",
+            "comment": "feat: add @fluentui/react-components to handled imports by default"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/babel-preset",
+            "commit": "7cbdfc73945ae85da7b0d35a1fa808559a9aa5af",
+            "comment": "feat: re-export Module & EvalCache from Linaria"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/babel-preset",
+            "comment": "Bump @griffel/core to v1.3.0",
+            "commit": "dbf9adc8acedba645ee95f469353836d1ae5fa6a"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 06 Apr 2022 13:28:28 GMT",
       "tag": "@griffel/babel-preset_v1.2.0",
diff --git a/packages/babel-preset/CHANGELOG.md b/packages/babel-preset/CHANGELOG.md
index ec3e010..6bd047a 100644
--- a/packages/babel-preset/CHANGELOG.md
+++ b/packages/babel-preset/CHANGELOG.md
@@ -1,9 +1,23 @@
 # Change Log - @griffel/babel-preset
 
-This log was last generated on Wed, 06 Apr 2022 13:28:28 GMT and should not be manually modified.
+This log was last generated on Wed, 04 May 2022 16:15:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.3.0
+
+Wed, 04 May 2022 16:15:22 GMT
+
+### Minor changes
+
+- feat: add @fluentui/react-components to handled imports by default (olfedias@microsoft.com)
+- feat: re-export Module & EvalCache from Linaria (olfedias@microsoft.com)
+- Bump @griffel/core to v1.3.0
+
+### Patches
+
+- fix: handle duplicated import sources properly (rezha@microsoft.com)
+
 ## 1.2.0
 
 Wed, 06 Apr 2022 13:28:28 GMT
diff --git a/packages/babel-preset/package.json b/packages/babel-preset/package.json
index cf57397..72d7c19 100644
--- a/packages/babel-preset/package.json
+++ b/packages/babel-preset/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/babel-preset",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Babel preset with build time transforms for Griffel",
   "license": "MIT",
   "repository": {
@@ -19,6 +19,6 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@griffel/core": "^1.2.0"
+    "@griffel/core": "^1.3.0"
   }
 }
diff --git a/packages/core/CHANGELOG.json b/packages/core/CHANGELOG.json
index 05151e4..e4a4c81 100644
--- a/packages/core/CHANGELOG.json
+++ b/packages/core/CHANGELOG.json
@@ -1,6 +1,79 @@
 {
   "name": "@griffel/core",
   "entries": [
+    {
+      "date": "Wed, 04 May 2022 16:15:22 GMT",
+      "tag": "@griffel/core_v1.3.0",
+      "version": "1.3.0",
+      "comments": {
+        "none": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "726ddd4397c6991fe1e4df61940e77f3da9f0c83",
+            "comment": "update babelrc with dev env presets"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "2d46633c5a0db31f55fd20c5bce653855ce7b75b",
+            "comment": "add a comment to exports"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "6a0f6e24af80afedf7b47c73f72c71a439b43aca",
+            "comment": "chore: integrate bundle size tooling"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "5b6cdf3ede6983eba5997b26f5696f2ea459606d",
+            "comment": "README update"
+          }
+        ],
+        "minor": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "d7c691201b45f410f1ab34a5aa941175cf12a49d",
+            "comment": "feat: inject devtools when session storage contains __GRIFFEL_DEVTOOLS__"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "addc2c3922ef8b45d4a9028e84808b9a3eee6f9a",
+            "comment": "feat: add support for @layer"
+          },
+          {
+            "author": "bsunderhus@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "ea2cde17b426ff4d95f36ff4e71fd070fd5dbff0",
+            "comment": "feat: add shorthand function for outline"
+          },
+          {
+            "author": "bsunderhus@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "8a6d1802e2c7a2070abd0213bf14585bbf446e4d",
+            "comment": "feat: add shorthand function for inset"
+          },
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "01e52783012cb38d91b474858419d417b6c46410",
+            "comment": "feat: generate debug hash sequence for devtools"
+          }
+        ],
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "7540e722795eea0b027207343c74b1cf8eaec1d8",
+            "comment": "fix: fix issue with comma-separated selectors and RTL"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 06 Apr 2022 13:28:28 GMT",
       "tag": "@griffel/core_v1.2.0",
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 227dc95..5ee38a6 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,9 +1,25 @@
 # Change Log - @griffel/core
 
-This log was last generated on Wed, 06 Apr 2022 13:28:28 GMT and should not be manually modified.
+This log was last generated on Wed, 04 May 2022 16:15:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.3.0
+
+Wed, 04 May 2022 16:15:22 GMT
+
+### Minor changes
+
+- feat: inject devtools when session storage contains __GRIFFEL_DEVTOOLS__ (yuanboxue@microsoft.com)
+- feat: add support for @layer (mgodbolt@microsoft.com)
+- feat: add shorthand function for outline (bsunderhus@microsoft.com)
+- feat: add shorthand function for inset (bsunderhus@microsoft.com)
+- feat: generate debug hash sequence for devtools (yuanboxue@microsoft.com)
+
+### Patches
+
+- fix: fix issue with comma-separated selectors and RTL (seanmonahan@microsoft.com)
+
 ## 1.2.0
 
 Wed, 06 Apr 2022 13:28:28 GMT
diff --git a/packages/core/package.json b/packages/core/package.json
index 285fc5a..4c63c94 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/core",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "DOM implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
diff --git a/packages/devtools/CHANGELOG.json b/packages/devtools/CHANGELOG.json
new file mode 100644
index 0000000..fc11ae4
--- /dev/null
+++ b/packages/devtools/CHANGELOG.json
@@ -0,0 +1,20 @@
+{
+  "name": "@griffel/devtools",
+  "entries": [
+    {
+      "date": "Wed, 04 May 2022 16:15:22 GMT",
+      "tag": "@griffel/devtools_v0.0.1",
+      "version": "0.0.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/devtools",
+            "comment": "Bump @griffel/react to v1.0.4",
+            "commit": "dbf9adc8acedba645ee95f469353836d1ae5fa6a"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/packages/devtools/CHANGELOG.md b/packages/devtools/CHANGELOG.md
new file mode 100644
index 0000000..217a2ac
--- /dev/null
+++ b/packages/devtools/CHANGELOG.md
@@ -0,0 +1,13 @@
+# Change Log - @griffel/devtools
+
+This log was last generated on Wed, 04 May 2022 16:15:22 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 0.0.1
+
+Wed, 04 May 2022 16:15:22 GMT
+
+### Patches
+
+- Bump @griffel/react to v1.0.4
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index 61e2b9f..593ddec 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -10,9 +10,9 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@griffel/react": "^1.0.3",
+    "@griffel/react": "^1.0.4",
     "js-beautify": "^1.14.0",
-    "prism-react-renderer": "1.2.1", 
+    "prism-react-renderer": "1.2.1",
     "react-dom": ">=16.8.0 <18.0.0",
     "react": ">=16.8.0 <18.0.0",
     "stylis": "^4.0.13"
diff --git a/packages/devtools/src/SlotCSSRules.tsx b/packages/devtools/src/SlotCSSRules.tsx
index 1916076..3c23f50 100644
--- a/packages/devtools/src/SlotCSSRules.tsx
+++ b/packages/devtools/src/SlotCSSRules.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 
 import { getMonolithicCSSRules } from './getMonolithicCSSRules';
 import { MonolithicRulesView } from './MonolithicRulesView';
@@ -10,11 +10,34 @@ import type { AtomicRules } from './types';
 
 const useStyles = makeStyles({
   slotName: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+
     cursor: 'pointer',
     ...shorthands.padding('2px', '5px'),
     ...shorthands.borderTop('1px', 'solid', tokens.slotNameBorder),
     ...shorthands.borderBottom('1px', 'solid', tokens.slotNameBorder),
     backgroundColor: tokens.slotNameBackground,
+
+    ':before': {
+      content: "''",
+      position: 'absolute',
+      right: '5px',
+      width: 0,
+      height: 0,
+      fontSize: 0,
+      ...shorthands.borderTop('3px', 'solid', tokens.foreground),
+      ...shorthands.borderRight('3px', 'solid', 'transparent'),
+      ...shorthands.borderLeft('3px', 'solid', 'transparent'),
+      ...shorthands.borderBottom('3px', 'solid', 'transparent'),
+    },
+  },
+  slotNameCollapsed: {
+    ':before': {
+      ...shorthands.borderTop('3px', 'solid', 'transparent'),
+      ...shorthands.borderRight('3px', 'solid', tokens.foreground),
+    },
   },
   rules: {
     ...shorthands.padding(0, '5px'),
@@ -23,17 +46,19 @@ const useStyles = makeStyles({
 
 export const SlotCSSRules: React.FC<{ slot: string; atomicRules: AtomicRules[] }> = ({ slot, atomicRules }) => {
   const rules = React.useMemo(() => getMonolithicCSSRules(atomicRules), [atomicRules]);
-  const classes = useStyles();
 
   const [expanded, setExpanded] = React.useState(true);
   const toggleExpanded = () => setExpanded(v => !v);
 
+  const classes = useStyles();
+  const slotClassName = mergeClasses(classes.slotName, !expanded && classes.slotNameCollapsed);
+
   const { setHighlightedClass } = useViewContext();
   const undoHighlight = () => setHighlightedClass('');
 
   return (
     <div>
-      <pre className={classes.slotName} onClick={toggleExpanded}>
+      <pre className={slotClassName} onClick={toggleExpanded}>
         {slot}
       </pre>
       {expanded && (
diff --git a/packages/eslint-plugin/CHANGELOG.json b/packages/eslint-plugin/CHANGELOG.json
new file mode 100644
index 0000000..3146eaf
--- /dev/null
+++ b/packages/eslint-plugin/CHANGELOG.json
@@ -0,0 +1,20 @@
+{
+  "name": "@griffel/eslint-plugin",
+  "entries": [
+    {
+      "date": "Wed, 04 May 2022 16:15:22 GMT",
+      "tag": "@griffel/eslint-plugin_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "major": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/eslint-plugin",
+            "commit": "2d46633c5a0db31f55fd20c5bce653855ce7b75b",
+            "comment": "initial release"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
new file mode 100644
index 0000000..cf29560
--- /dev/null
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -0,0 +1,13 @@
+# Change Log - @griffel/eslint-plugin
+
+This log was last generated on Wed, 04 May 2022 16:15:22 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 1.0.0
+
+Wed, 04 May 2022 16:15:22 GMT
+
+### Major changes
+
+- initial release (olfedias@microsoft.com)
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index c030a69..4b0d877 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/eslint-plugin",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "ESLint plugin with lint rules for Griffel",
   "license": "MIT",
   "repository": {
diff --git a/packages/jest-serializer/CHANGELOG.json b/packages/jest-serializer/CHANGELOG.json
index 66b1436..bfe1b21 100644
--- a/packages/jest-serializer/CHANGELOG.json
+++ b/packages/jest-serializer/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@griffel/jest-serializer",
   "entries": [
+    {
+      "date": "Wed, 04 May 2022 16:15:22 GMT",
+      "tag": "@griffel/jest-serializer_v1.0.4",
+      "version": "1.0.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/jest-serializer",
+            "comment": "Bump @griffel/core to v1.3.0",
+            "commit": "dbf9adc8acedba645ee95f469353836d1ae5fa6a"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 06 Apr 2022 13:28:28 GMT",
       "tag": "@griffel/jest-serializer_v1.0.3",
diff --git a/packages/jest-serializer/CHANGELOG.md b/packages/jest-serializer/CHANGELOG.md
index 03a4674..8d2a1f8 100644
--- a/packages/jest-serializer/CHANGELOG.md
+++ b/packages/jest-serializer/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @griffel/jest-serializer
 
-This log was last generated on Wed, 06 Apr 2022 13:28:28 GMT and should not be manually modified.
+This log was last generated on Wed, 04 May 2022 16:15:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.0.4
+
+Wed, 04 May 2022 16:15:22 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.3.0
+
 ## 1.0.3
 
 Wed, 06 Apr 2022 13:28:28 GMT
diff --git a/packages/jest-serializer/package.json b/packages/jest-serializer/package.json
index a2d23e7..d378887 100644
--- a/packages/jest-serializer/package.json
+++ b/packages/jest-serializer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/jest-serializer",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Jest serializer for Griffel",
   "license": "MIT",
   "repository": {
@@ -11,6 +11,6 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@griffel/core": "^1.2.0"
+    "@griffel/core": "^1.3.0"
   }
 }
diff --git a/packages/react/CHANGELOG.json b/packages/react/CHANGELOG.json
index da5fe0c..62d87d8 100644
--- a/packages/react/CHANGELOG.json
+++ b/packages/react/CHANGELOG.json
@@ -1,6 +1,59 @@
 {
   "name": "@griffel/react",
   "entries": [
+    {
+      "date": "Wed, 04 May 2022 16:15:22 GMT",
+      "tag": "@griffel/react_v1.0.4",
+      "version": "1.0.4",
+      "comments": {
+        "none": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/react",
+            "commit": "6a0f6e24af80afedf7b47c73f72c71a439b43aca",
+            "comment": "chore: integrate bundle size tooling"
+          },
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@griffel/react",
+            "commit": "726ddd4397c6991fe1e4df61940e77f3da9f0c83",
+            "comment": "update babelrc with dev env presets"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@griffel/react",
+            "commit": "addc2c3922ef8b45d4a9028e84808b9a3eee6f9a",
+            "comment": "docs: add support for @layer"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/react",
+            "commit": "5b6cdf3ede6983eba5997b26f5696f2ea459606d",
+            "comment": "README update"
+          }
+        ],
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/react",
+            "commit": "2391de2b83ac11647fda47d71c6843df90890d25",
+            "comment": "fix: avoid errors with React 18"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/react",
+            "commit": "dbf9adc8acedba645ee95f469353836d1ae5fa6a",
+            "comment": "fix: update isInsideComponent() check"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.3.0",
+            "commit": "dbf9adc8acedba645ee95f469353836d1ae5fa6a"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 06 Apr 2022 13:28:28 GMT",
       "tag": "@griffel/react_v1.0.3",
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 71b7c54..637a300 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @griffel/react
 
-This log was last generated on Wed, 06 Apr 2022 13:28:28 GMT and should not be manually modified.
+This log was last generated on Wed, 04 May 2022 16:15:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.0.4
+
+Wed, 04 May 2022 16:15:22 GMT
+
+### Patches
+
+- fix: avoid errors with React 18 (olfedias@microsoft.com)
+- fix: update isInsideComponent() check (olfedias@microsoft.com)
+- Bump @griffel/core to v1.3.0
+
 ## 1.0.3
 
 Wed, 06 Apr 2022 13:28:28 GMT
diff --git a/packages/react/package.json b/packages/react/package.json
index d6be1dc..11d1331 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/react",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@griffel/core": "^1.2.0",
+    "@griffel/core": "^1.3.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
diff --git a/packages/react/src/makeStyles.ts b/packages/react/src/makeStyles.ts
index 1710117..fe0eded 100644
--- a/packages/react/src/makeStyles.ts
+++ b/packages/react/src/makeStyles.ts
@@ -8,11 +8,19 @@ import { useTextDirection } from './TextDirectionContext';
 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
-  //
-  // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors
   try {
     // @ts-expect-error "SECRET_INTERNALS" are not typed
-    return !!React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;
+    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;
   }
diff --git a/packages/webpack-loader/CHANGELOG.json b/packages/webpack-loader/CHANGELOG.json
index 8e03804..2467c8b 100644
--- a/packages/webpack-loader/CHANGELOG.json
+++ b/packages/webpack-loader/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@griffel/webpack-loader",
   "entries": [
+    {
+      "date": "Wed, 04 May 2022 16:15:22 GMT",
+      "tag": "@griffel/webpack-loader_v2.0.4",
+      "version": "2.0.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/webpack-loader",
+            "commit": "7cbdfc73945ae85da7b0d35a1fa808559a9aa5af",
+            "comment": "chore: remove dependency on @linaria/babel-preset"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/webpack-loader",
+            "comment": "Bump @griffel/babel-preset to v1.3.0",
+            "commit": "dbf9adc8acedba645ee95f469353836d1ae5fa6a"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/webpack-loader",
+            "comment": "Bump @griffel/react to v1.0.4",
+            "commit": "dbf9adc8acedba645ee95f469353836d1ae5fa6a"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 06 Apr 2022 13:28:28 GMT",
       "tag": "@griffel/webpack-loader_v2.0.3",
diff --git a/packages/webpack-loader/CHANGELOG.md b/packages/webpack-loader/CHANGELOG.md
index e06632e..72c0941 100644
--- a/packages/webpack-loader/CHANGELOG.md
+++ b/packages/webpack-loader/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @griffel/webpack-loader
 
-This log was last generated on Wed, 06 Apr 2022 13:28:28 GMT and should not be manually modified.
+This log was last generated on Wed, 04 May 2022 16:15:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.4
+
+Wed, 04 May 2022 16:15:22 GMT
+
+### Patches
+
+- chore: remove dependency on @linaria/babel-preset (olfedias@microsoft.com)
+- Bump @griffel/babel-preset to v1.3.0
+- Bump @griffel/react to v1.0.4
+
 ## 2.0.3
 
 Wed, 06 Apr 2022 13:28:28 GMT
diff --git a/packages/webpack-loader/package.json b/packages/webpack-loader/package.json
index 94089e0..a8db826 100644
--- a/packages/webpack-loader/package.json
+++ b/packages/webpack-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/webpack-loader",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Webpack loader that performs build time transforms for Griffel",
   "license": "MIT",
   "repository": {
@@ -9,14 +9,14 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.13",
-    "@griffel/babel-preset": "^1.2.0",
+    "@griffel/babel-preset": "^1.3.0",
     "enhanced-resolve": "^5.8.2",
     "loader-utils": "^2.0.0",
     "schema-utils": "^3.1.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@griffel/react": "^1.0.3",
+    "@griffel/react": "^1.0.4",
     "webpack": "^5"
   }
 }


Test patch:
diff --git a/packages/react/src/makeStyles.test.tsx b/packages/react/src/makeStyles.test.tsx
index 5efc816..fa9e4bb 100644
--- a/packages/react/src/makeStyles.test.tsx
+++ b/packages/react/src/makeStyles.test.tsx
@@ -19,5 +19,8 @@ describe('makeStyles', () => {
     const container = document.createElement('div');
 
     expect(() => ReactDOM.render(<Example />, container)).toThrow(/All makeStyles\(\) calls should be top level/);
+
+    // Should not throw outside React components after rendering
+    expect(() => makeStyles({ root: { color: 'red' } })).not.toThrow();
   });
 });