CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="0.23.1"></a>
+## [0.23.1](https://github.com/webpack-contrib/style-loader/compare/v0.23.0...v0.23.1) (2018-10-08)
+
+
+### Bug Fixes
+
+* **addStyles:** support exports of transpiled transforms (`options.transform`) ([#333](https://github.com/webpack-contrib/style-loader/issues/333)) ([33aebed](https://github.com/webpack-contrib/style-loader/commit/33aebed))
+
+
+
 <a name="0.23.0"></a>
 # [0.23.0](https://github.com/webpack-contrib/style-loader/compare/v0.22.1...v0.23.0) (2018-08-27)
 

README.md

@@ -18,7 +18,7 @@
 npm install style-loader --save-dev
 ```
 
-<h2 align="center"><a href="https://webpack.js.org/concepts/loaders">Usage</a></h2>
+<h2 align="center">Usage</h2>
 
 It's recommended to combine `style-loader` with the [`css-loader`](https://github.com/webpack/css-loader)
 
@@ -84,7 +84,7 @@ import url from 'file.css'
 <link rel="stylesheet" href="path/to/file.css">
 ```
 
-> :information_source: Source maps and assets referenced with `url`: when style loader is used with `{ options: { sourceMap: true } }` option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the `convertToAbsoluteUrls` option mentioned above.
+> ℹ️ Source maps and assets referenced with `url`: when style loader is used with `{ options: { sourceMap: true } }` option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the `convertToAbsoluteUrls` option mentioned above.
 
 ### `Useable`
 
@@ -130,7 +130,7 @@ style.unuse(); // = style.unref();
 
 Styles are not added on `import/require()`, but instead on call to `use`/`ref`. Styles are removed from page if `unuse`/`unref` is called exactly as often as `use`/`ref`.
 
-:warning: Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
+> ⚠️  Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
 
 <h2 align="center">Options</h2>
 
@@ -246,6 +246,8 @@ A `transform` is a function that can modify the css just before it is loaded int
 This function will be called on the css that is about to be loaded and the return value of the function will be loaded into the page instead of the original css.
 If the return value of the `transform` function is falsy, the css will not be loaded into the page at all.
 
+> ⚠️ In case you are using ES Module syntax in `tranform.js` then, you **need to transpile** it or otherwise it will throw an `{Error}`.
+
 **webpack.config.js**
 ```js
 {

lib/addStyles.js

@@ -254,7 +254,9 @@ function addStyle (obj, options) {
 
 	// If a transform function was defined, run it on the css
 	if (options.transform && obj.css) {
-	    result = options.transform(obj.css);
+	    result = typeof options.transform === 'function'
+		 ? options.transform(obj.css) 
+		 : options.transform.default(obj.css);
 
 	    if (result) {
 	    	// If transform returns a value, use that instead of the original css.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "style-loader",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "author": "Tobias Koppers @sokra",
   "description": "style loader module for webpack",
   "engines": {
@@ -16,7 +16,7 @@
   ],
   "dependencies": {
     "loader-utils": "^1.1.0",
-    "schema-utils": "^0.4.5"
+    "schema-utils": "^1.0.0"
   },
   "devDependencies": {
     "css-loader": "^0.28.0",

test/basic.test.js

@@ -536,6 +536,31 @@ describe("basic tests", function() {
 
       runCompilerTest(expected, done);
     });
+
+    it("es6 export: should throw error transform is not a function", function(done) {
+      const transform = require('./transforms/transform_es6');
+      styleLoaderOptions.transform = 'test/transforms/transform_es6';
+
+      // const expectedTansformedStyle = transform(requiredStyle);
+      const expected = new TypeError('transform is not a function').message;
+
+      runCompilerTest(expected, done, function() { 
+        try { 
+          let test = transform(requiredStyle);
+        } catch(error) { 
+          return error.message;
+        } });
+    });
+
+    it("es6 export: should not throw any error", function(done) {
+      const transform = require('./transforms/transform_es6');
+      styleLoaderOptions.transform = 'test/transforms/transform_es6';
+
+      const expectedTansformedStyle = transform[Object.keys(transform)[0]](requiredStyle);
+      const expected = [existingStyle, expectedTansformedStyle].join("\n");
+
+      runCompilerTest(expected, done);
+    });
   });
 
   describe("HMR", function() {

test/transforms/transform_es6.js

@@ -0,0 +1,3 @@
+exports.default = function (css) {
+    return css.replace('.required', '.transformed');
+}