diff --git a/README.md b/README.md index 8cc41620..7da1aa68 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,7 @@ To be compatible with existing css files (if not in CSS Module mode): |:--:|:-----:|:----------| |**`root`**|`/`|Path to resolve URLs, URLs starting with `/` will not be translated| |**`modules`**|`false`|Enable/Disable CSS Modules| +|**`localByDefault`**|`true`|treat unmarked selectors as :local| |**`import`** |`true`| Enable/Disable @import handling| |**`url`**|`true`| Enable/Disable `url()` handling| |**`minimize`**|`false`|Enable/Disable minification| @@ -233,6 +234,12 @@ The query parameter `modules` enables the **CSS Modules** spec. This enables local scoped CSS by default. (You can switch it off with `:global(...)` or `:global` for selectors and/or rules.) +### :local by default + +The query parameter `localByDefault` allows you to override the _"locals by default when using `modules: true`"_ behavior'. + +For selectors that have not been marked using :local or :global - this will allow you to decide which should be default. This will help for projects that are being ported from non css modules usage to using css modules. + ### CSS Composing When declaring a local class name you can compose a local class from another local class name. diff --git a/lib/loader.js b/lib/loader.js index b55b35f9..c185d47c 100644 --- a/lib/loader.js +++ b/lib/loader.js @@ -15,6 +15,9 @@ module.exports = function(content, map) { var query = loaderUtils.getOptions(this) || {}; var root = query.root; var moduleMode = query.modules || query.module; + var localByDefault = typeof query.localByDefault !== 'undefined' + ? query.localByDefault + : true; var camelCaseKeys = query.camelCase || query.camelcase; var resolve = createResolver(query.alias); @@ -23,7 +26,7 @@ module.exports = function(content, map) { } processCss(content, map, { - mode: moduleMode ? "local" : "global", + mode: moduleMode && localByDefault ? "local" : "global", from: loaderUtils.getRemainingRequest(this), to: loaderUtils.getCurrentRequest(this), query: query, diff --git a/test/helpers.js b/test/helpers.js index ba7f72be..4c4e36b3 100644 --- a/test/helpers.js +++ b/test/helpers.js @@ -136,6 +136,16 @@ exports.testLocals = function testLocals(name, input, result, query, modules) { }); }; +exports.testLocal = function testLocal(name, input, result, localsResult, query, modules) { + result.locals = localsResult; + exports.test(name, input, result, query, modules); +}; + +exports.testLocalMinimize = function testLocalMinimize(name, input, result, localsResult, query, modules) { + result.locals = localsResult; + exports.testMinimize(name, input, result, query, modules); +}; + exports.testSingleItem = function testSingleItem(name, input, result, query, modules) { it(name, function(done) { runLoader(cssLoader, input, undefined, { diff --git a/test/localByDefaultTest.js b/test/localByDefaultTest.js new file mode 100644 index 00000000..6250b697 --- /dev/null +++ b/test/localByDefaultTest.js @@ -0,0 +1,23 @@ +/*globals describe */ + +var test = require("./helpers").test; +var testLocal = require("./helpers").testLocal; + +describe("localByDefault", function() { + test("should not impact when not modules unset", ".myclass { color: green; }", [ + [1, ".myclass { color: green; }", ""] + ], '?localByDefault'); + testLocal("modules true should use :local by default", ".myclass { color: green; }", [ + [1, ".__2NVVs { color: green; }", ""], + ], { + myclass: "__2NVVs" + }, "?modules&localIdentName=__[hash:base64:5]"); + testLocal("should use :local for localByDefault true", ".myclass { color: green; }", [ + [1, ".__2NVVs { color: green; }", ""], + ], { + myclass: "__2NVVs" + }, "?modules&localIdentName=__[hash:base64:5]&localByDefault"); + test("should use :global for localByDefault false", ".myclass { color: green; }", [ + [1, ".myclass { color: green; }", ""], + ], "?modules&localIdentName=__[hash:base64:5]&localByDefault=false"); +}); diff --git a/test/localTest.js b/test/localTest.js index e2146bdf..e463ace7 100644 --- a/test/localTest.js +++ b/test/localTest.js @@ -1,17 +1,7 @@ /*globals describe */ -var test = require("./helpers").test; -var testMinimize = require("./helpers").testMinimize; - -function testLocal(name, input, result, localsResult, query, modules) { - result.locals = localsResult; - test(name, input, result, query, modules); -} - -function testLocalMinimize(name, input, result, localsResult, query, modules) { - result.locals = localsResult; - testMinimize(name, input, result, query, modules); -} +var testLocal = require("./helpers").testLocal; +var testLocalMinimize = require("./helpers").testLocalMinimize; describe("local", function() { testLocal("locals-format", ":local(.test) { background: red; }", [