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

CSS Module dependencies are not transformed correctly #7919

Closed
joshhunt opened this issue Nov 1, 2019 · 5 comments
Closed

CSS Module dependencies are not transformed correctly #7919

joshhunt opened this issue Nov 1, 2019 · 5 comments
Labels
issue: bug report needs triage

Comments

@joshhunt
Copy link

joshhunt commented Nov 1, 2019 •
edited

Describe the bug

When using CSS modules, if you compose a class from a .module.scss file, the dependency (that is, the module you import to compose from) does not have its scss transformed correctly. While the compose will work correctly, and SCSS is not preprocessed away down to recular css.

Did you try recovering your dependencies?

Yes. This is on a newly created test reproduction project.

$ yarn --version
1.17.3

Which terms did you search for in User Guide?

CSS Modules, SCSS, Sass, CSS

Environment

$ npx create-react-app --info
npx: installed 91 in 12.837s

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.12.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.87
    Firefox: 67.0.4
    Safari: Not Found
  npmPackages:
    react: ^16.11.0 => 16.11.0
    react-dom: ^16.11.0 => 16.11.0
    react-scripts: 3.2.0 => 3.2.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

  1. npx create-react app
  2. yarn add node-sass
  3. Create common.module.scss and write a class with some scss in it.
  4. Create App.module.scss and write some scss in it, with an element that composes the class from common.module.scss
  5. Import the class from App.module.scss and apply it to an element
  6. yarn start

Expected behavior

common.module.scss will have its styles in the <head> of the page, and the scss variables would be preprocessed out to regular css.

The element will have the correct styles applied to it from common.module.scss.

It should look like this:

Screenshot 2019-11-01 at 5 05 05 pm

Actual behavior

common.module.scss will have its styles in the <head> of the page, but the scss language features (such as variables) will still be present.

The element will have the correct styles applied to it from common.module.scss.

It looks like this:

Screenshot 2019-11-01 at 5 05 18 pm

Reproducible demo

https://github.com/joshhunt/create-react-app-repro

Clone it, yarn install, yarn start. The box should be pink, but it is not.
@joshhunt joshhunt changed the title CSS Module dependencies are not transformed CSS Module dependencies are not transformed correctly Nov 8, 2019
@joshhunt
Copy link
Author

joshhunt commented Nov 8, 2019

I think I've identified the problem.

It was reported that this bug was introduced in 3.1.0 #7596 (comment), so I was looking to see what changed in that release.

In 914c95e#diff-dc0c4e7c623b73660da1809fc60cf6ba, an additional loader was introduced when a preprocessor was used. Unfortunately, css-loader's importLoaders option was not incremented to account for this change.

@joshhunt joshhunt mentioned this issue Nov 8, 2019
Closed
joshhunt added a commit to joshhunt/create-react-app that referenced this issue Dec 5, 2019
@joshhunt
Increment importLoaders for rulesets where there's a preprocessor (fixes
891eb94 
 facebook#7919)
@saiichihashimoto
Copy link

Any news on this?

@stale
Copy link

stale bot commented Jan 7, 2020

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stale stale bot added the stale label Jan 7, 2020
@terebentina
Copy link

still happening

@stale stale bot removed the stale label Jan 11, 2020
@ianschmitz
Copy link
Contributor

Fixed in #8281. Released in 3.3.1

@lock lock bot locked and limited conversation to collaborators Feb 5, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
issue: bug report needs triage
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix preprocessors not running on stylesheets imported from stylesheets joshhunt/create-react-app
4 participants
@joshhunt @terebentina @saiichihashimoto @ianschmitz