diff --git a/README.md b/README.md index 1c7e5f15..ee8226a4 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 **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 077a368f..c80fd2d0 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.default(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