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

feature: support experimental .sass\.scss #69

Closed
wants to merge 2 commits into from
Closed

feature: support experimental .sass\.scss #69

wants to merge 2 commits into from

Conversation

khades
Copy link

@khades khades commented Feb 17, 2020

This will fix #66

Copy link
Owner

@martpie martpie left a comment

Choose a reason for hiding this comment

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

Thank you for tackling this.

I left some comments, could you add integration/end-to-end tests as well?

src/next-transpile-modules.js Outdated Show resolved Hide resolved
src/next-transpile-modules.js Show resolved Hide resolved
// 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$/))

@khades
Copy link
Author

khades commented Feb 18, 2020

Thank you for tackling this.

I left some comments, could you add integration/end-to-end tests as well?

Sadly i have no idea how to do e2e/integration tests.

@martpie
Copy link
Owner

martpie commented Feb 18, 2020

Sadly i have no idea how to do e2e/integration tests.

Everything is already setup, you just have to add tests about the features that are supported by Next.js.

Could be something like that:

  • Create a couple of sass files (global and local)
  • Create a new page in the basic app example
  • Import the global styles in _app
  • Import the custom style in a custom page and check the content is correct

Some inspiration:

@khades
Copy link
Author

khades commented Feb 20, 2020

Well it depends on canary version of next. Should we wait till 9.3?

vercel/next.js#10571 according to that PR sass is not experimental anymore

@martpie
Copy link
Owner

martpie commented Feb 20, 2020

You have two options here 😄

  • you can finish this PR, and I'll gladly help you
  • you can wait until I build it myself (but it needs to be supported as it is supported by Next) but there is not guarantee when it will be done (maybe tomorrow or in 2 months, depending on my other projects, energy, amount of work at work, etc)

Your move ;)

@martpie
Copy link
Owner

martpie commented Mar 10, 2020

Closing in favor of #74

@martpie martpie closed this Mar 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for SCSS modules (Next.js 9.2)
2 participants