Skip to content

Commit 6d30a7e

Browse files
author
Steven Hargrove
committed
added localByDefault option to allow you to override default behavior when modules is set to true
1 parent c8db489 commit 6d30a7e

File tree

5 files changed

+46
-13
lines changed

5 files changed

+46
-13
lines changed

README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ To be compatible with existing css files (if not in CSS Module mode):
8383
|:--:|:-----:|:----------|
8484
|**`root`**|`/`|Path to resolve URLs, URLs starting with `/` will not be translated|
8585
|**`modules`**|`false`|Enable/Disable CSS Modules|
86+
|**`localByDefault`**|`true`|treat unmarked selectors as :local|
8687
|**`import`** |`true`| Enable/Disable @import handling|
8788
|**`url`**|`true`| Enable/Disable `url()` handling|
8889
|**`minimize`**|`false`|Enable/Disable minification|
@@ -233,6 +234,12 @@ The query parameter `modules` enables the **CSS Modules** spec.
233234

234235
This enables local scoped CSS by default. (You can switch it off with `:global(...)` or `:global` for selectors and/or rules.)
235236

237+
### :local by default
238+
239+
The query parameter `localByDefault` allows you to override the _"locals by default when using `modules: true`"_ behavior'.
240+
241+
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.
242+
236243
### CSS Composing
237244

238245
When declaring a local class name you can compose a local class from another local class name.

lib/loader.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ module.exports = function(content, map) {
1515
var query = loaderUtils.getOptions(this) || {};
1616
var root = query.root;
1717
var moduleMode = query.modules || query.module;
18+
var localByDefault = typeof query.localByDefault !== 'undefined'
19+
? query.localByDefault
20+
: true;
1821
var camelCaseKeys = query.camelCase || query.camelcase;
1922
var resolve = createResolver(query.alias);
2023

@@ -23,7 +26,7 @@ module.exports = function(content, map) {
2326
}
2427

2528
processCss(content, map, {
26-
mode: moduleMode ? "local" : "global",
29+
mode: moduleMode && localByDefault ? "local" : "global",
2730
from: loaderUtils.getRemainingRequest(this),
2831
to: loaderUtils.getCurrentRequest(this),
2932
query: query,

test/helpers.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,16 @@ exports.testLocals = function testLocals(name, input, result, query, modules) {
136136
});
137137
};
138138

139+
exports.testLocal = function testLocal(name, input, result, localsResult, query, modules) {
140+
result.locals = localsResult;
141+
exports.test(name, input, result, query, modules);
142+
};
143+
144+
exports.testLocalMinimize = function testLocalMinimize(name, input, result, localsResult, query, modules) {
145+
result.locals = localsResult;
146+
exports.testMinimize(name, input, result, query, modules);
147+
};
148+
139149
exports.testSingleItem = function testSingleItem(name, input, result, query, modules) {
140150
it(name, function(done) {
141151
runLoader(cssLoader, input, undefined, {

test/localByDefaultTest.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/*globals describe */
2+
3+
var test = require("./helpers").test;
4+
var testLocal = require("./helpers").testLocal;
5+
6+
describe("localByDefault", function() {
7+
test("should not impact when not modules unset", ".myclass { color: green; }", [
8+
[1, ".myclass { color: green; }", ""]
9+
], '?localByDefault');
10+
testLocal("modules true should use :local by default", ".myclass { color: green; }", [
11+
[1, ".__2NVVs { color: green; }", ""],
12+
], {
13+
myclass: "__2NVVs"
14+
}, "?modules&localIdentName=__[hash:base64:5]");
15+
testLocal("should use :local for localByDefault true", ".myclass { color: green; }", [
16+
[1, ".__2NVVs { color: green; }", ""],
17+
], {
18+
myclass: "__2NVVs"
19+
}, "?modules&localIdentName=__[hash:base64:5]&localByDefault");
20+
test("should use :global for localByDefault false", ".myclass { color: green; }", [
21+
[1, ".myclass { color: green; }", ""],
22+
], "?modules&localIdentName=__[hash:base64:5]&localByDefault=false");
23+
});

test/localTest.js

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,7 @@
11
/*globals describe */
22

3-
var test = require("./helpers").test;
4-
var testMinimize = require("./helpers").testMinimize;
5-
6-
function testLocal(name, input, result, localsResult, query, modules) {
7-
result.locals = localsResult;
8-
test(name, input, result, query, modules);
9-
}
10-
11-
function testLocalMinimize(name, input, result, localsResult, query, modules) {
12-
result.locals = localsResult;
13-
testMinimize(name, input, result, query, modules);
14-
}
3+
var testLocal = require("./helpers").testLocal;
4+
var testLocalMinimize = require("./helpers").testLocalMinimize;
155

166
describe("local", function() {
177
testLocal("locals-format", ":local(.test) { background: red; }", [

0 commit comments

Comments
 (0)