docs: docs and one more test

webpack-contrib · May 7, 2019 · 2eacc3a · 2eacc3a
1 parent fa8b1a6
commit 2eacc3a
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 {
+}