From 2eacc3a1f1cf15f27ee31f25dcdf49d187b68304 Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Tue, 7 May 2019 15:05:03 -0400 Subject: [PATCH] docs: docs and one more test --- README.md | 44 ++++++++++++++++++- .../__snapshots__/modules-option.test.js.snap | 18 +++++++- test/fixtures/modules/values-in-selectors.css | 4 ++ 3 files changed, 62 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d431314b..e23ac03f 100644 --- a/README.md +++ b/README.md @@ -437,6 +437,46 @@ 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; +``` + +Values are automatically exported and can be imported like so: + +```css +@value primary from './theme.css'; + +.text-primary { + color: primary; +} +``` + +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; +} +``` + ### `localIdentName` Type: `String` @@ -584,8 +624,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 | diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index 6b79f638..b4b1c6fe 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -5453,6 +5453,14 @@ Array [ ], Array [ 3, + ".dSGVakTZ8YY-XNW64tg9F { + display: inline; +} +", + "", + ], + Array [ + 4, "._22ETk3ZhhvjVe-4dAULcsF { display: block; } @@ -5469,6 +5477,9 @@ Array [ .green > ._22ETk3ZhhvjVe-4dAULcsF { color: blue; } + +.uTNBxZ_JJrJOoGzCUbSnW > .dSGVakTZ8YY-XNW64tg9F { +} ", "", ], @@ -5479,15 +5490,18 @@ exports[`modules composes should values in selectors: module 1`] = ` "exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false); // Imports exports.i(require(\\"-!../../../src/index.js??ref--4-0!./values.css\\"), \\"\\"); +exports.i(require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\"), \\"\\"); exports.i(require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\"), \\"\\"); // Module -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\\", \\"\\"]); +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\\", \\"\\"]); // Exports exports.locals = { \\"other\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\"\\", - \\"button-class\\": \\"btn\\" + \\"imported-relative\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\").locals[\\"imported-relative\\"] + \\"\\", + \\"button-class\\": \\"btn\\", + \\"button\\": \\"uTNBxZ_JJrJOoGzCUbSnW\\" };" `; diff --git a/test/fixtures/modules/values-in-selectors.css b/test/fixtures/modules/values-in-selectors.css index a95f79a2..fd9a34d6 100644 --- a/test/fixtures/modules/values-in-selectors.css +++ b/test/fixtures/modules/values-in-selectors.css @@ -1,4 +1,5 @@ @value other from './values.css'; +@value imported-relative from './relative.css'; @value button-class: btn; :import('imported-simple.css') { @@ -12,3 +13,6 @@ .other > .other-child { color: blue; } + +.button > .imported-relative { +}