docs: cleanup recommendations of using Babel preset (#567)

* docs: cleanup recommendations of using Babel preset

* bump docusaurus

apps/website/docs/react/ahead-of-time-compilation/introduction.md

@@ -10,5 +10,5 @@ Griffel only does the expensive runtime on the first render of the component. Th
 
 ## What to use?
 
-- For library developers, please use [Babel preset](/react/ahead-of-time-compilation/with-babel)
-- For application developers, please use [Webpack loader](/react/ahead-of-time-compilation/with-webpack) (supports Next.js)
+- [Webpack loader](/react/ahead-of-time-compilation/with-webpack) (supports Next.js)
+- [Vite plugin](/react/ahead-of-time-compilation/with-vite)

apps/website/docs/react/ahead-of-time-compilation/technical-details.md

@@ -143,4 +143,4 @@ In the example above, in order to transform the `styles.js` file, the code needs
 Griffel uses style evaluation from [Linaria](https://linaria.dev/).
 The build-time evaluation happens as a part of the Babel transforms in Griffel. All styles that require evaluation will be batched and done in single evaluation context.
 Linaria's Babel config is separate to any config used by the application.
-Therefore, additional language features may require [extra configuration](/react/ahead-of-time-compilation/with-babel#configuration).
+Therefore, additional language features may require [extra configuration](/react/ahead-of-time-compilation/with-webpack#configuration).

apps/website/docs/react/ahead-of-time-compilation/with-vite.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 import Tabs from '@theme/Tabs';

apps/website/docs/react/api/shorthands.md

@@ -4,7 +4,7 @@ sidebar_position: 3
 
 # 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 [_some_ of 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#some-of-css-shorthands-are-not-supported) by Griffel. For example:
 
 ```tsx
 import { makeStyles, shorthands } from '@griffel/react';

package.json

@@ -31,10 +31,10 @@
     "@babel/preset-typescript": "7.23.2",
     "@codesandbox/sandpack-react": "2.13.10",
     "@codesandbox/sandpack-themes": "2.0.21",
-    "@docusaurus/core": "3.1.0",
-    "@docusaurus/module-type-aliases": "3.1.0",
-    "@docusaurus/preset-classic": "3.1.0",
-    "@docusaurus/theme-mermaid": "3.1.0",
+    "@docusaurus/core": "^3.4.0",
+    "@docusaurus/module-type-aliases": "^3.4.0",
+    "@docusaurus/preset-classic": "^3.4.0",
+    "@docusaurus/theme-mermaid": "^3.4.0",
     "@emotion/css": "^11.9.0",
     "@nx/eslint": "17.2.8",
     "@nx/eslint-plugin": "17.2.8",

packages/babel-preset/README.md

@@ -6,7 +6,6 @@ A Babel preset that performs build time transforms for [`@griffel/react`](../rea
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 - [Install](#install)
-- [When to use it?](#when-to-use-it)
 - [Usage](#usage)
   - [Importing Griffel from custom packages](#importing-griffel-from-custom-packages)
   - [Configuring Babel settings](#configuring-babel-settings)
@@ -19,6 +18,9 @@ A Babel preset that performs build time transforms for [`@griffel/react`](../rea
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+> [!CAUTION]
+> We don't recommend to use this preset directly, it's intended to be used by other tools like [webpack loader](../webpack-loader) or [Vite plugin](../vite-plugin).
+
 ## Install
 
 ```bash
@@ -27,11 +29,6 @@ yarn add --dev @griffel/babel-preset
 npm install --save-dev @griffel/babel-preset
 ```
 
-## When to use it?
-
-- For library developers, please use the Babel preset (this package)
-- For application developers, please use [`@griffel/webpack-loader`](../webpack-loader)
-
 ## Usage
 
 `.babelrc`

packages/tag-processor/README.md

@@ -21,10 +21,7 @@ npm install --save-dev @griffel/tag-processor
 
 ## How to use it?
 
-This package cannot be used solely, it should be paired with `@griffel/babel-preset` or `@griffel/webpack-loader`
-
-- For library developers, please use [`@griffel/babel-preset`](../babel-preset)
-- For application developers, please use [`@griffel/webpack-loader`](../webpack-loader)
+This package cannot be used solely, it should be paired with `@griffel/vite-plugin` or other tools that support WyW-in-js.
 
 ### Handling Griffel re-exports
 

packages/webpack-extraction-plugin/README.md

@@ -29,7 +29,7 @@ It's designed to be used only in applications.
 
 ## How it works?
 
-This plugin relies on assets transformed by [`@griffel/babel-preset`](../babel-preset) or [`@griffel/webpack-loader`](../webpack-loader). Usage of these utilities is a **prerequisite**.
+This plugin relies on assets transformed by [`@griffel/webpack-loader`](../webpack-loader). Usage of these utilities is a **prerequisite**.
 
 The plugin transforms code to remove generated CSS from JavaScript files and create CSS assets.
 

packages/webpack-loader/README.md

@@ -6,7 +6,6 @@ A loader for Webpack 5 that performs build time transforms for [`@griffel/react`
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 - [Install](#install)
-- [When to use it?](#when-to-use-it)
 - [Usage](#usage)
   - [Handling Griffel re-exports](#handling-griffel-re-exports)
   - [Configuring Babel settings](#configuring-babel-settings)
@@ -24,11 +23,6 @@ yarn add --dev @griffel/webpack-loader
 npm install --save-dev @griffel/webpack-loader
 ```
 
-## When to use it?
-
-- For library developers, please use [`@griffel/babel-preset`](../babel-preset)
-- For application developers, please use Webpack loader (this package)
-
 ## Usage
 
 Webpack documentation: [Loaders](https://webpack.js.org/loaders/)
@@ -159,9 +153,11 @@ module.exports = {
 ```
 
 ### Configuring webpack resolve options
+
 If your `@griffel/react` modules import other files (eg., a set of common mixins or colors for your app), the loader resolves these using `enhanced-resolve`. By default, it inherits the settings `resolve.alias`, `resolve.modules`, and `resolve.modules` from your Webpack config, while using its own default values for `resolve.extensions` and `resolve.conditionNames`.
 
 If you want to change this behavior, you can choose which [`resolve` options](https://webpack.js.org/configuration/resolve/) are inherited from your Webpack config.
+
 ```js
 module.exports = {
   module: {
@@ -182,6 +178,7 @@ module.exports = {
 ```
 
 Alternatively, you can specify custom [`resolve` options](https://webpack.js.org/configuration/resolve/). These values will override any options inherited from your webpack config. This can be particularly important if you use custom `conditionNames` that do not include `require`, which is necessary for transformation.
+
 ```js
 module.exports = {
   resolve: {