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.

Sign up for GitHub

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

Jump to bottom

feature: support experimental .sass\.scss #69

Closed
wants to merge 2 commits into from
Closed

feature: support experimental .sass\.scss #69

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
610297a
feature: support experimental .sass\.scss
Feb 17, 2020
63a72c9
feature: support experimental .sass\.scss
Feb 18, 2020
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
19 changes: 11 additions & 8 deletions src/next-transpile-modules.js
View file
Open in desktop
Expand Up @@ -87,32 +87,35 @@ const withTmInitializer = (transpileModules = []) => {
// TODO ask Next.js maintainer to expose the css-loader via defaultLoaders
const nextCssLoaders = config.module.rules.find((rule) => typeof rule.oneOf === 'object');

// .module.css
// .module.css and .module.css
khades marked this conversation as resolved.
Show resolved Hide resolved
if (nextCssLoaders) {
const nextCssLoader = nextCssLoaders.oneOf.find(
(rule) => rule.sideEffects === false && regexEqual(rule.test, /\.module\.css$/)
);

if (nextCssLoader) {
nextCssLoader.issuer.include = nextCssLoader.issuer.include.concat(includes);
nextCssLoader.issuer.exclude = excludes;
}

const nextSassLoader = nextCssLoaders.oneOf.find(
(rule) => rule.sideEffects === false && regexEqual(rule.test, /\.module\.(scss|sass)$/)
);

if (nextSassLoader) {
nextSassLoader.issuer.include = nextSassLoader.issuer.include.concat(includes);
nextSassLoader.issuer.exclude = excludes;
}

// Hack our way to disable errors on node_modules CSS modules
const nextErrorCssLoader = nextCssLoaders.oneOf.find(
(rule) => rule.use && rule.use.loader === 'error-loader' && regexEqual(rule.test, /\.module\.css$/)
(rule) => rule.use && rule.use.loader === 'error-loader' && (Array.isArray(rule.test) ? regexEqual(rule.test[0], /\.module\.css$/) : regexEqual(rule.test, /\.module\.css$/))
Copy link
Owner

Choose a reason for hiding this comment

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

the [0] should be avoided imo, if we can find a more dynamic way to do it, that'd be great

Copy link
Author

Choose a reason for hiding this comment

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

It is either one regexp, that catches .module.css, or array of regexps, one of which captures it.

Either way function will be long if it would be written in such way. Probably that part of code should be written with ifs to be more readable.

Copy link
Author

Choose a reason for hiding this comment

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

Other way is to do

rule.some((regex) => regexEqual(regex,  /\.module\.css$/))

);

if (nextErrorCssLoader) {
nextErrorCssLoader.exclude = includes;
}
}

// Overload the Webpack config if it was already overloaded
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, options);
}

khades marked this conversation as resolved.
Show resolved Hide resolved
return config;
},

Expand Down