Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: allow values in selectors to work correctly #894

Closed
Closed
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
53 changes: 51 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -437,6 +437,55 @@ To import from multiple modules use multiple `composes:` rules.
}
```

##### `Values`

`css-loader` also includes support for css-modules `@value`s which you can read more of here: https://github.com/css-modules/postcss-modules-values Values provide a way to declare import and exports
for specific values in a css file that can be used in another.

```css
/* theme.css */
@value primary: #BF4040;
@value secondary: #1F4F7F;

@value large: (min-width: 960px);
```

Values are automatically exported and can be imported like so:

```css
@value primary, large from './theme.css';

.header {
color: primary;
padding: 0 10px;
}

@media large {
.header {
padding: 0 20px;
}
}
```

You also don't need to declare a an export as a value to reference in another file:

```css
/* button.css */

.button {
color: red;
}
```

```css
@value button from './button.css';

/* the 'button' class will be replaced with it's hashed value from 'button.css' */
.toolbar > .button {
margin-left: 2rem;
}
```
jquense marked this conversation as resolved.
Show resolved Hide resolved

### `localIdentName`

Type: `String`
Expand Down Expand Up @@ -584,8 +633,8 @@ By default, the exported JSON keys mirror the class names. If you want to cameli

| Name | Type | Description |
| :----------------: | :---------: | :----------------------------------------------------------------------------------------------------------------------- |
| **`false`** | `{Boolean}` | Class names won't be camelized |
| **`true`** | `{Boolean}` | Class names will be camelized, the original class name will not to be removed from the locals |
| **`false`** | `{Boolean}` | Class names won't be camelized |
| **`true`** | `{Boolean}` | Class names will be camelized, the original class name will not to be removed from the locals |
| **`'dashes'`** | `{String}` | Only dashes in class names will be camelized |
| **`'only'`** | `{String}` | Introduced in `0.27.1`. Class names will be camelized, the original class name will be removed from the locals |
| **`'dashesOnly'`** | `{String}` | Introduced in `0.27.1`. Dashes in class names will be camelized, the original class name will be removed from the locals |
Expand Down
Loading