Skip to content

Commit 2eacc3a

Browse files
committed
docs: docs and one more test
1 parent fa8b1a6 commit 2eacc3a

File tree

3 files changed

+62
-4
lines changed

3 files changed

+62
-4
lines changed

README.md

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -437,6 +437,46 @@ To import from multiple modules use multiple `composes:` rules.
437437
}
438438
```
439439

440+
##### `Values`
441+
442+
`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
443+
for specific values in a css file that can be used in another.
444+
445+
```css
446+
/* theme.css */
447+
@value primary: #BF4040;
448+
@value secondary: #1F4F7F;
449+
```
450+
451+
Values are automatically exported and can be imported like so:
452+
453+
```css
454+
@value primary from './theme.css';
455+
456+
.text-primary {
457+
color: primary;
458+
}
459+
```
460+
461+
You also don't need to declare a an export as a value to reference in another file:
462+
463+
```css
464+
/* button.css */
465+
466+
.button {
467+
color: red;
468+
}
469+
```
470+
471+
```css
472+
@value button from './button.css';
473+
474+
/* the 'button' class will be replaced with it's hashed value from 'button.css' */
475+
.toolbar > .button {
476+
margin-left: 2rem;
477+
}
478+
```
479+
440480
### `localIdentName`
441481

442482
Type: `String`
@@ -584,8 +624,8 @@ By default, the exported JSON keys mirror the class names. If you want to cameli
584624

585625
| Name | Type | Description |
586626
| :----------------: | :---------: | :----------------------------------------------------------------------------------------------------------------------- |
587-
| **`false`** | `{Boolean}` | Class names won't be camelized |
588-
| **`true`** | `{Boolean}` | Class names will be camelized, the original class name will not to be removed from the locals |
627+
| **`false`** | `{Boolean}` | Class names won't be camelized |
628+
| **`true`** | `{Boolean}` | Class names will be camelized, the original class name will not to be removed from the locals |
589629
| **`'dashes'`** | `{String}` | Only dashes in class names will be camelized |
590630
| **`'only'`** | `{String}` | Introduced in `0.27.1`. Class names will be camelized, the original class name will be removed from the locals |
591631
| **`'dashesOnly'`** | `{String}` | Introduced in `0.27.1`. Dashes in class names will be camelized, the original class name will be removed from the locals |

test/__snapshots__/modules-option.test.js.snap

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5453,6 +5453,14 @@ Array [
54535453
],
54545454
Array [
54555455
3,
5456+
".dSGVakTZ8YY-XNW64tg9F {
5457+
display: inline;
5458+
}
5459+
",
5460+
"",
5461+
],
5462+
Array [
5463+
4,
54565464
"._22ETk3ZhhvjVe-4dAULcsF {
54575465
display: block;
54585466
}
@@ -5469,6 +5477,9 @@ Array [
54695477
.green > ._22ETk3ZhhvjVe-4dAULcsF {
54705478
color: blue;
54715479
}
5480+
5481+
.uTNBxZ_JJrJOoGzCUbSnW > .dSGVakTZ8YY-XNW64tg9F {
5482+
}
54725483
",
54735484
"",
54745485
],
@@ -5479,15 +5490,18 @@ exports[`modules composes should values in selectors: module 1`] = `
54795490
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
54805491
// Imports
54815492
exports.i(require(\\"-!../../../src/index.js??ref--4-0!./values.css\\"), \\"\\");
5493+
exports.i(require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\"), \\"\\");
54825494
exports.i(require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\"), \\"\\");
54835495
54845496
// Module
5485-
exports.push([module.id, \\"/* At the moment local-by-default doesn't understand values .btn would get hashed */\\\\n.btn {\\\\n display: block;\\\\n}\\\\n\\\\n.\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\" > .\\" + require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\").locals[\\"imported-simple\\"] + \\" {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]);
5497+
exports.push([module.id, \\"/* At the moment local-by-default doesn't understand values .btn would get hashed */\\\\n.btn {\\\\n display: block;\\\\n}\\\\n\\\\n.\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\" > .\\" + require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\").locals[\\"imported-simple\\"] + \\" {\\\\n color: blue;\\\\n}\\\\n\\\\n.uTNBxZ_JJrJOoGzCUbSnW > .\\" + require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\").locals[\\"imported-relative\\"] + \\" {\\\\n}\\\\n\\", \\"\\"]);
54865498
54875499
// Exports
54885500
exports.locals = {
54895501
\\"other\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\"\\",
5490-
\\"button-class\\": \\"btn\\"
5502+
\\"imported-relative\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\").locals[\\"imported-relative\\"] + \\"\\",
5503+
\\"button-class\\": \\"btn\\",
5504+
\\"button\\": \\"uTNBxZ_JJrJOoGzCUbSnW\\"
54915505
};"
54925506
`;
54935507

test/fixtures/modules/values-in-selectors.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@value other from './values.css';
2+
@value imported-relative from './relative.css';
23
@value button-class: btn;
34

45
:import('imported-simple.css') {
@@ -12,3 +13,6 @@
1213
.other > .other-child {
1314
color: blue;
1415
}
16+
17+
.button > .imported-relative {
18+
}

0 commit comments

Comments
 (0)