Skip to content
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.

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

fix(addStyles): support exports of transpiled transforms (options.transform) #333

Merged
merged 2 commits into from Oct 8, 2018
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
Expand Up @@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- Warning:
+ :Warning:
- tranform.js
+ `transform.js`
- then you have to transpile it otherwise it will throw error.
+ , you **need to transpile** it or otherwise it will throw an `{Error}`.


**webpack.config.js**
```js
{
Expand Down
4 changes: 3 additions & 1 deletion lib/addStyles.js
Expand Up @@ -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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- 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.
Expand Down
25 changes: 25 additions & 0 deletions test/basic.test.js
Expand Up @@ -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() {
Expand Down
3 changes: 3 additions & 0 deletions test/transforms/transform_es6.js
@@ -0,0 +1,3 @@
exports.default = function (css) {
return css.replace('.required', '.transformed');
}