From 717601dd7f114cd1ad0179bfc67488ba01b0a0ee Mon Sep 17 00:00:00 2001 From: akki-jat Date: Fri, 10 Aug 2018 04:04:03 -0400 Subject: [PATCH 1/2] fix(addStyles): raise an `{Error}` when `export default` is used (`options.transform`) --- README.md | 2 ++ lib/addStyles.js | 4 +++- test/basic.test.js | 25 +++++++++++++++++++++++++ test/transforms/transform_es6.js | 3 +++ 4 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 test/transforms/transform_es6.js diff --git a/README.md b/README.md index b4725176..c573ce60 100644 --- a/README.md +++ b/README.md @@ -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. +> Warning: In case you are using ES Module syntax in tranform.js then you have to transpile it otherwise it will throw error. + **webpack.config.js** ```js { diff --git a/lib/addStyles.js b/lib/addStyles.js index 077a368f..c2078148 100644 --- a/lib/addStyles.js +++ b/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[Object.keys(options.transform)[0]](obj.css); if (result) { // If transform returns a value, use that instead of the original css. diff --git a/test/basic.test.js b/test/basic.test.js index 22c9baad..194d5140 100644 --- a/test/basic.test.js +++ b/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() { diff --git a/test/transforms/transform_es6.js b/test/transforms/transform_es6.js new file mode 100644 index 00000000..a2b0eecb --- /dev/null +++ b/test/transforms/transform_es6.js @@ -0,0 +1,3 @@ +exports.default = function (css) { + return css.replace('.required', '.transformed'); +} \ No newline at end of file From 684f7f5e411ad7524527557335ae9cac00db73dc Mon Sep 17 00:00:00 2001 From: akki-jat Date: Mon, 8 Oct 2018 09:02:06 -0400 Subject: [PATCH 2/2] Updated readme file & code for issue (#332) --- README.md | 2 +- lib/addStyles.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c573ce60..bdaac3a8 100644 --- a/README.md +++ b/README.md @@ -246,7 +246,7 @@ 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. -> Warning: In case you are using ES Module syntax in tranform.js then you have to transpile it otherwise it will throw error. +> :Warning: 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 diff --git a/lib/addStyles.js b/lib/addStyles.js index c2078148..c80fd2d0 100644 --- a/lib/addStyles.js +++ b/lib/addStyles.js @@ -256,7 +256,7 @@ function addStyle (obj, options) { if (options.transform && obj.css) { result = typeof options.transform === 'function' ? options.transform(obj.css) - : options.transform[Object.keys(options.transform)[0]](obj.css); + : options.transform.default(obj.css); if (result) { // If transform returns a value, use that instead of the original css.