Skip to content

Commit 45dfe63

Browse files
author
Zhicheng Wang
committed
feat: Include the sourceMappingURL & sourceURL when toString()
This feature is useful when you need to pass the result of css-loader to angular: call to require('to-string-loader!css-loader? sourceMap!sass-loader?sourceMap!./ test.scss') will include source mapping, And finally assigned to the component's styles metadata
1 parent 199897f commit 45dfe63

File tree

4 files changed

+64
-8
lines changed

4 files changed

+64
-8
lines changed

README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,33 @@ They are not enabled by default because they expose a runtime overhead and incre
319319
}
320320
```
321321

322+
### toString
323+
324+
You can also use the css-loader results directly as string, such as in Angular's component style.
325+
326+
**webpack.config.js**
327+
328+
```js
329+
{
330+
   test: /\.css$/,
331+
   use: [
332+
     {
333+
       loaders: ['to-string-loader', 'css-loader']
334+
     }
335+
   ]
336+
}
337+
```
338+
339+
or
340+
341+
```js
342+
const cssText = require('./ test.css').toString();
343+
344+
console.log(cssText);
345+
```
346+
347+
If there are SourceMaps, they will also be included in the result string.
348+
322349
### ImportLoaders
323350

324351
The query parameter `importLoaders` allow to configure which loaders should be applied to `@import`ed resources.

lib/css-base.js

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,14 @@ module.exports = function() {
88

99
// return the list of modules as css string
1010
list.toString = function toString() {
11-
var result = [];
12-
for(var i = 0; i < this.length; i++) {
13-
var item = this[i];
11+
return this.map(function (item) {
12+
const content = cssWithMappingToString(item);
1413
if(item[2]) {
15-
result.push("@media " + item[2] + "{" + item[1] + "}");
14+
return "@media " + item[2] + "{" + content + "}";
1615
} else {
17-
result.push(item[1]);
16+
return content;
1817
}
19-
}
20-
return result.join("");
18+
}).join("");
2119
};
2220

2321
// import a list of modules into the list
@@ -48,3 +46,17 @@ module.exports = function() {
4846
};
4947
return list;
5048
};
49+
50+
function cssWithMappingToString(item) {
51+
var content = item[1] || '';
52+
var cssMapping = item[3];
53+
if (!cssMapping) {
54+
return content;
55+
}
56+
var convertSourceMap = require('convert-source-map');
57+
var sourceMapping = convertSourceMap.fromObject(cssMapping).toComment({multiline: true});
58+
var sourceURLs = cssMapping.sources.map(function (source) {
59+
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
60+
});
61+
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
62+
}

package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,14 @@
66
"engines": {
77
"node": ">=0.12.0 || >=4.3.0 <5.0.0 || >=5.10"
88
},
9-
"files": ["index.js", "locals.js", "lib"],
9+
"files": [
10+
"index.js",
11+
"locals.js",
12+
"lib"
13+
],
1014
"dependencies": {
1115
"babel-code-frame": "^6.11.0",
16+
"convert-source-map": "^1.3.0",
1217
"css-selector-tokenizer": "^0.7.0",
1318
"cssnano": ">=2.6.1 <4",
1419
"loader-utils": "~0.2.2",

test/cssBaseTest.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,16 @@ describe("css-base", function() {
3434
"@media print{body { d: 4; }}" +
3535
"@media screen{body { a: 1; }}");
3636
});
37+
it("should toString with source mapping", function() {
38+
var m = base();
39+
m.push([1, "body { a: 1; }", "", {
40+
file: "test.scss",
41+
sources: [
42+
'./path/to/test.scss'
43+
],
44+
mappings: "AAAA;",
45+
sourceRoot: "webpack://"
46+
}]);
47+
m.toString().should.be.eql("body { a: 1; }\n/*# sourceURL=webpack://./path/to/test.scss */\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJmaWxlIjoidGVzdC5zY3NzIiwic291cmNlcyI6WyIuL3BhdGgvdG8vdGVzdC5zY3NzIl0sIm1hcHBpbmdzIjoiQUFBQTsiLCJzb3VyY2VSb290Ijoid2VicGFjazovLyJ9 */");
48+
});
3749
});

0 commit comments

Comments
 (0)