From ffdbe142d872c84e57b67acbd9133b46c979a959 Mon Sep 17 00:00:00 2001 From: Anton Evzhakov Date: Tue, 23 Jun 2026 17:26:47 +0300 Subject: [PATCH] docs: fix outdated setup guidance --- CONTRIBUTING.md | 4 ++-- docs/ATOMIC_CSS.md | 4 +--- docs/CONFIGURATION.md | 6 +++--- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 340c4e064..503af0e0e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -18,10 +18,10 @@ The core team works directly on GitHub and all work is public. 1. Run `pnpm bootstrap` to setup the development environment. -1. When working on the code, you can use the watch mode to watch and compiles changed files: +1. When working on a package, you can use that package's watch script to watch and compile changed files: ```sh - pnpm watch + pnpm --filter @linaria/react watch ``` 1. If you've added code that should be tested, add tests. diff --git a/docs/ATOMIC_CSS.md b/docs/ATOMIC_CSS.md index 8b6af27fc..0e561a64e 100644 --- a/docs/ATOMIC_CSS.md +++ b/docs/ATOMIC_CSS.md @@ -28,9 +28,7 @@ Atomic CSS is a way of writing CSS such that each CSS rule has exactly one decla ## Usage in Linaria -Atomic styles can be enabled in the linaria config by providing an `atomizer` function (see [configuration](./CONFIGURATION.md) for details). - -Once enabled, it is possible to write atomic styles by importing the `css` template literal from `@linaria/atomic`: +Atomic styles do not require a separate config option. Use them by importing the `css` template literal from `@linaria/atomic`: ```tsx import { cx } from '@linaria/core'; diff --git a/docs/CONFIGURATION.md b/docs/CONFIGURATION.md index 6ee308273..8c080a5a4 100644 --- a/docs/CONFIGURATION.md +++ b/docs/CONFIGURATION.md @@ -122,7 +122,7 @@ module.exports = { `; ``` -- `classNameSlug: string | ((hash: string, title: string, args: ClassNameSlugVars) => string)` (default: `default`): +- `classNameSlug: string | ((hash: string, title: string, args: ClassNameSlugVars) => string)` (default: generated from the class hash, with the display name prefix when `displayName` is enabled): Using this will provide an interface to customize the output of the CSS class name. Example: @@ -154,13 +154,13 @@ module.exports = { - `hash`: The hash of the content. - `title`: The name of the class. -- `variableNameSlug: string | ((context: IVariableContext) => string)` (default: `default`): +- `variableNameSlug: string | ((context: IVariableContext) => string)` (default: Linaria-generated variable id): Using this will provide an interface to customize the output of the CSS variable name. Example: variableNameSlug: '[componentName]-[valueSlug]-[index]', - Would generate a variable name such as `--Title-absdjfsdf-0` instead of the `@react/styled`'s default `--absdjfsdf-0`. + Would generate a variable name such as `--Title-absdjfsdf-0` instead of the `@linaria/react`'s default `--absdjfsdf-0`. You may also use a function to define the slug. The function will be evaluated at build time and must return a string: