Skip to content

added localByDefault option to allow you to override default behavior… #465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

added localByDefault option to allow you to override default behavior… #465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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|
Expand Down Expand Up @@ -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.
Expand Down
5 changes: 4 additions & 1 deletion lib/loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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,
Expand Down
10 changes: 10 additions & 0 deletions test/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
23 changes: 23 additions & 0 deletions test/localByDefaultTest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
});
14 changes: 2 additions & 12 deletions test/localTest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; }", [
Expand Down