Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 1 addition & 3 deletions docs/ATOMIC_CSS.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
6 changes: 3 additions & 3 deletions docs/CONFIGURATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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:

Expand Down
Loading