Scss support ?

[dbenfouzari]

How can I add SCSS suport ? When I change "include": "**/*.*css" it throws me an error with

You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Is there a way to add support for SASS ? Thanks

[bmatcuk]

You need to configure postcss to handle scss. See the documentation for postcss-scss

[dbenfouzari]

Hey @bmatcuk

I just have to configure it (creating the file etc) and that's all ? eslint-plugin-postcss-modules will handle the rest ? Will it conflict with my create-react-app app ?

[bmatcuk]

You may want to find a tutorial for enabling scss support in create-react-app - you may need to edit a couple files. Once you've set it up appropriately, eslint-plugin-postcss-modules should work.

[dbenfouzari]

I already have the SCSS support in my cra. I'm using x.module.scss files. But not using postcss

[bmatcuk]

Ah, if that's the case, eslint-plugin-postcss-modules might not be the right choice... there may be an eslint plugin for scss modules?

If you still want to use eslint-plugin-postcss-modules, it might be possible if you install postcss-scss and configure postcss to use it without any other plugins. I can't make any promises, though. eslint-plugin-postcss-modules was designed to handle cases where you're using postcss to transpile your css files with webpack (or something similar). Sounds like you aren't using postcss to do any actual transpile, so, you might be able to get it working, but it's possible that eslint-plugin-postcss-modules will give you false positives/negatives if the configuration doesn't exactly match what scss is doing in your build.

[dbenfouzari]

Yeah, that's what I thought. It doesn't exist any plugin other than eslint-plugin-css-modules that is outdated and unmaintained, and this one that doesn't work with a basic create-react-app

Thanks for your support @bmatcuk :)

[bmatcuk]

Well, to be clear, this will work, but I can't promise it'll work perfectly since you aren't actually using postcss for your transpiles. As long as your configs aren't crazy, it'll probably be ok.

[nmkataoka]

Hey @dbenfouzari, if you are using at least create-react-app v2 (released in 2018), postcss comes with it. I think if you just change your include glob you should be able to get this plugin running.

I've tested that eslint-plugin-postcss-modules works for .scss files on both CRA and Next.JS apps with minimal set up. Thanks @bmatcuk, this package is awesome!

Steps:

1. Create a new create-react-app or Next.JS app
2. npm install --save-dev eslint eslint-config-airbnb eslint-plugin-postcss-modules
3. Install sass
   • If you're using create-react app, npm install --save node-sass
   • If you're using Next.JS, npm install --save-dev sass
4. Create an .eslintrc.json file

   {
       "extends": ["airbnb", "plugin:postcss-modules/recommended"],
       "settings": {
           "postcss-modules": {
               "include": ["**.css", "**.scss"]
           }
       }
   }

5. Create a sass css module file my-styles.module.scss

   .sass-container {
       width: 100px;
       height: 100px;
       background-color: lightblue;
   }

6. In a .jsx file:

   import styles from './my-styles.module.scss'
   <div className={styles['misspelled-name']} />

7. You should get a linting error.

[dbenfouzari]

Thanks @nmkataoka ! I will try this asap 😄

[bmatcuk]

Thanks for writing up those instructions @nmkataoka!

[dbenfouzari]

@nmkataoka I tried and it works well. But it does not recognize my classes when they are like :

.my_class {
  background-color: transparent;

  &__extended {
    color: black;
  }
}

It cannot understand that .my_class__extended exists.

[nmkataoka]

@dbenfouzari Sorry, I don't use BEM-styled nesting, so I haven't run into that issue. After taking a quick look, it looks like that might require postcss-nesting. If that's true, it also looks like customizing your postcss config in create-react-app isn't possible without ejecting: https://github.com/facebook/create-react-app/issues/6649, so this might be a dead end.