Add stylelint #1216

karlhorky · 2016-12-09T17:11:43Z

Hi there! First of all, thanks to all the contributors for this awesome project. Having all the tools, configuration and setup in one place helps tons.

create-react-app doesn't have any CSS linting yet. I noticed that there was tentative agreement for further consideration in #636 (comment), so I decided to open a PR for this, since I need it for a project anyway.

I've included the standard config because I don't have a full opinionated stylelint config yet, but this can of course be changed.

Note: This depends on my fork of @vieron's stylelint webpack plugin, because the errors were not displaying correctly using watch mode in CRA. I've opened a pull request on the plugin here: webpack-contrib/stylelint-webpack-plugin#43

Edit: Pull request has been merged!

facebook-github-bot · 2016-12-09T17:11:49Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at [email protected]. Thanks!

If you are contributing on behalf of someone else (eg your employer): the individual CLA is not sufficient - use https://developers.facebook.com/opensource/cla?type=company instead. Contact [email protected] if you have any questions.

facebook-github-bot · 2016-12-09T17:18:19Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

cr101 · 2016-12-10T05:21:00Z

Or you could use a Sass linter for both SASS and SCSS syntax!

karlhorky · 2016-12-10T11:01:55Z

stylelint also supports CSS-like syntaxes like SCSS, SugarSS and Less. This is however not relevant for create-react-app, which currently only supports vanilla CSS.

The sasslint-webpack-plugin is also deprecated in favor of stylelint: https://github.com/alleyinteractive/sasslint-webpack-plugin/blob/master/README.md

karlhorky · 2016-12-18T14:46:51Z

webpack-contrib/stylelint-webpack-plugin#43 has been merged and released as 0.4.1! I've updated the dependency accordingly.

JaKXz · 2016-12-18T17:18:15Z

packages/react-scripts/package.json

@@ -60,6 +61,9 @@
    "recursive-readdir": "2.1.0",
    "strip-ansi": "3.0.1",
    "style-loader": "0.13.1",
+    "stylelint": "7.6.0",
+    "stylelint-config-standard": "15.0.0",
+    "stylelint-webpack-plugin": "0.4.1",


@karlhorky I recommend another update here to capture our fixes from this morning (v0.4.2).

gaearon · 2017-02-12T01:17:27Z

Can you provide some details about node_modules disk size before and after this change please?

Also, would this work well for people compiling Sass/Less into CSS, and importing the compiled CSS?

Does this plugin work well with Webpack 2?

karlhorky · 2017-02-12T17:05:26Z

some details about node_modules disk size before and after

du -sh node_modules before and after (13M difference):

109M    node_modules # before
122M    node_modules # after

would this work well for people compiling Sass/Less into CSS

It could lint the original source Sass/Less if I changed the file extensions that are matched by the plugin. I however only enable linting of source files (disabling the linting of any built CSS files) because the built output will be optimized and is thus not a good candidate for linting.

Does this plugin work well with Webpack 2?

I tested this with a simple application and the plugin works. As for working well, I haven't tested extensively yet - maybe @JaKXz can offer some insight here?

karlhorky · 2017-02-12T17:21:09Z

I've modified the eject script to create a stylelint configuration entry as well, although webpack-contrib/stylelint-webpack-plugin#67 may interfere until it's resolved.

Edit: This appears to be resolved in 0.6.0. Bumping the version.

JaKXz · 2017-02-12T17:27:57Z

Does this plugin work well with Webpack 2?

The plugin is actively tested against webpack 2 as of webpack-contrib/stylelint-webpack-plugin#46, so I have confidence in the logic against webpack's compiler [from v0.5.0 on].

gaearon · 2017-02-13T15:11:09Z

It could lint the original source Sass/Less if I changed the file extensions that are matched by the plugin. I however only enable linting of source files (disabling the linting of any built CSS files) because the built output will be optimized and is thus not a good candidate for linting.

The scenario I meant is when people compile Sass to CSS but keep it in src next to the components. That seemed like the most straightforward way to use a preprocessor to me.

karlhorky · 2017-02-13T18:08:00Z

compile Sass to CSS but keep it in src next to the components

Ah yeah, that would also be supported by changing the file extensions.

JaKXz · 2017-02-13T18:26:45Z

packages/react-scripts/config/webpack.config.dev.js

+      configFile: path.join(__dirname, '../.stylelintrc'),
+      // @remove-on-eject-end
+      context: paths.appSrc,
+      files: ['**/*.css'],


one thing to consider is that stylelint can handle .sass/.scss files, and the default glob for stylelint-webpack-plugin supports both so you could drop this line.

Ah, nice idea. If @gaearon agrees we want to go this direction, I will make this change.

karlhorky · 2017-02-15T21:16:08Z

@gaearon any feedback to the files config option? Should I just remove it as @JaKXz suggested to allow Stylelint to lint all supported file extensions?

shai32 · 2017-04-14T03:38:39Z

Is this PR still active?, will it be merged?

karlhorky · 2017-04-14T06:21:51Z

If there's any interest I can rebase and fix conflicts (and upgrade to webpack 2 if necessary).

roytz · 2017-04-14T12:40:53Z

There is much interest :) (and to the upgrade to webpack 2 too)

cr101 · 2017-04-15T08:53:35Z

Handling .sass/.scss files is essential

shai32 · 2017-04-25T20:48:11Z

@karlhorky please upgrade to webpack 2

shai32 · 2017-05-02T07:45:55Z

Is this pr active?

karlhorky · 2018-01-11T09:03:41Z

Ok, I'll get to this in the next day or so.

gaearon · 2018-01-12T22:48:20Z

I'd also like to better understand the performance implications of this. If the project has e.g. 500 300-line CSS files, how much does this plugin affect the development and production build times?

People already complain about the builds being super slow so I'm not really sure we have the capacity to add any more build-time work.

JaKXz · 2018-01-16T22:38:56Z

Perhaps this should be opt-in like some others in #3815? I think the lintDirtyModulesOnly option will help wrt build-time work, so if you have 500 files but only a few have changed then only those will be linted. The separate lint task (#2729) can just call stylelint directly for all files.

FYI v0.10.1 of the plugin was released recently as well as stylelint v8.

gaearon · 2018-01-16T23:33:55Z

Perhaps this should be opt-in like some others in #3815?

This seems a bit trickier. We won't make those opt-in by some configuration flag. Instead if you import .sass, we'll ask you to install node-sass. If you install it, Sass will "just work". Similarly, if you import .module.css instead of .css, we will treat it as CSS Modules. But with Stylelint we can't "guess" whether you want it or not. We also don't know if you're writing CSS or compiling to it. I'm also not sure if it can handle CSS Modules. So it seems like this is potentially more involved than it seems. Could the user just install and run Stylelint themselves? I'm not sure it needs to be integrated with the system in the same way that e.g. Sass needs to be for a good experience.

JaKXz · 2018-01-17T05:57:50Z

I think the intention here is to have stylelint errors side by side with eslint errors in the build, and assuming CRA works with the better errors webpack plugin that should be achievable :) but I understand your point, I agree it's much harder to pinpoint exactly what the user would want from the outset, and that could change with a lot more volatility.

gaearon · 2018-01-20T19:35:06Z

Retagging as 2.x because I don't think this should block the 2.0 release.
If we can get the numbers that show it's not expensive, sure, let's get it in.

If it slows down our already slow builds I don't think we can do this (but you can always use it separately in your IDE etc).

…into add-stylelint

caghand · 2018-01-22T22:09:39Z

Yes, you can use stylelint in your IDE, but since the errors do not appear in the build output (like eslint), you won't be able to implement a check-in policy that prevents style-violating CSS from being pushed in. :)

-Caghan

sstruct · 2018-02-09T12:44:32Z

I'd prefer Prettier

oriSomething · 2018-02-10T17:09:49Z

packages/stylelint-config-react-app/index.js

+  rules: {
+    'at-rule-no-unknown': true,
+    'color-no-invalid-hex': true,
+    'declaration-block-no-duplicate-properties': true,


Wouldn't be better to use declaration-block-no-duplicate-properties with ignore: ["consecutive-duplicates"]?

Moreover, is this rule blocks the pattern of (Added example)?

margin: 1rem; margin-bottom: 2rem;

ai · 2018-09-26T18:35:56Z

If we have ESLint for JS, we definitely should have Stylelint for CSS.

karlhorky mentioned this pull request Dec 9, 2016

Fixes for watch mode of create-react-app webpack-contrib/stylelint-webpack-plugin#43

Merged

facebook-github-bot added the CLA Signed label Dec 9, 2016

fson added the tag: new feature label Dec 14, 2016

karlhorky changed the title ~~Add Stylelint~~ Add stylelint Dec 14, 2016

JaKXz suggested changes Dec 18, 2016

View reviewed changes

JaKXz approved these changes Jan 5, 2017

View reviewed changes

karlhorky force-pushed the add-stylelint branch from 9bff79c to afbb7f7 Compare February 12, 2017 16:47

JaKXz reviewed Feb 13, 2017

View reviewed changes

gaearon mentioned this pull request Feb 20, 2017

Add ability to configure Webpack plugins without eject #1592

Closed

karlhorky added 3 commits May 2, 2017 10:50

Add Stylelint with standard config

69fc63d

Prevent linting built CSS files

0841ae6

Eject Stylelint configuration

6ad3701

gaearon changed the base branch from master to next January 12, 2018 20:09

Timer force-pushed the next branch from 5579d44 to a5ecdf2 Compare January 13, 2018 01:00

gaearon force-pushed the next branch from 197028c to 6c233ea Compare January 13, 2018 19:13

Timer force-pushed the next branch from 6f8e9b8 to 2d07427 Compare January 14, 2018 03:56

gaearon force-pushed the next branch 4 times, most recently from 727f487 to 43bbaf0 Compare January 14, 2018 23:58

Timer force-pushed the next branch from 43bbaf0 to 2e59c54 Compare January 15, 2018 05:15

gaearon modified the milestones: 2.0.0, 2.x Jan 20, 2018

karlhorky force-pushed the add-stylelint branch from 2f0a743 to 3290445 Compare January 22, 2018 17:50

Merge branch 'next' of github.com:facebookincubator/create-react-app …

2f535b4

…into add-stylelint

oriSomething reviewed Feb 10, 2018

View reviewed changes

gucong3000 mentioned this pull request Jul 3, 2018

Add doc for stylelint vuejs/vue-loader#1343

Merged

3 tasks

Timer closed this Sep 26, 2018

Timer reopened this Sep 26, 2018

gaearon closed this Nov 1, 2018

lock bot locked and limited conversation to collaborators Jan 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add stylelint #1216

Add stylelint #1216

karlhorky commented Dec 9, 2016 •

edited

Loading

facebook-github-bot commented Dec 9, 2016

facebook-github-bot commented Dec 9, 2016

cr101 commented Dec 10, 2016 •

edited

Loading

karlhorky commented Dec 10, 2016 •

edited

Loading

karlhorky commented Dec 18, 2016

JaKXz Dec 18, 2016 •

edited

Loading

karlhorky Dec 20, 2016

gaearon commented Feb 12, 2017

karlhorky commented Feb 12, 2017 •

edited

Loading

karlhorky commented Feb 12, 2017 •

edited

Loading

JaKXz commented Feb 12, 2017 •

edited

Loading

gaearon commented Feb 13, 2017

karlhorky commented Feb 13, 2017

JaKXz Feb 13, 2017

karlhorky Feb 14, 2017

karlhorky commented Feb 15, 2017

shai32 commented Apr 14, 2017

karlhorky commented Apr 14, 2017

roytz commented Apr 14, 2017

cr101 commented Apr 15, 2017

shai32 commented Apr 25, 2017

shai32 commented May 2, 2017

karlhorky commented Jan 11, 2018

gaearon commented Jan 12, 2018

JaKXz commented Jan 16, 2018 •

edited

Loading

gaearon commented Jan 16, 2018 •

edited

Loading

JaKXz commented Jan 17, 2018

gaearon commented Jan 20, 2018

caghand commented Jan 22, 2018

sstruct commented Feb 9, 2018

oriSomething Feb 10, 2018

ai commented Sep 26, 2018

Add stylelint #1216

Add stylelint #1216

Conversation

karlhorky commented Dec 9, 2016 • edited Loading

facebook-github-bot commented Dec 9, 2016

facebook-github-bot commented Dec 9, 2016

cr101 commented Dec 10, 2016 • edited Loading

karlhorky commented Dec 10, 2016 • edited Loading

karlhorky commented Dec 18, 2016

JaKXz Dec 18, 2016 • edited Loading

Choose a reason for hiding this comment

karlhorky Dec 20, 2016

Choose a reason for hiding this comment

gaearon commented Feb 12, 2017

karlhorky commented Feb 12, 2017 • edited Loading

karlhorky commented Feb 12, 2017 • edited Loading

JaKXz commented Feb 12, 2017 • edited Loading

gaearon commented Feb 13, 2017

karlhorky commented Feb 13, 2017

JaKXz Feb 13, 2017

Choose a reason for hiding this comment

karlhorky Feb 14, 2017

Choose a reason for hiding this comment

karlhorky commented Feb 15, 2017

shai32 commented Apr 14, 2017

karlhorky commented Apr 14, 2017

roytz commented Apr 14, 2017

cr101 commented Apr 15, 2017

shai32 commented Apr 25, 2017

shai32 commented May 2, 2017

karlhorky commented Jan 11, 2018

gaearon commented Jan 12, 2018

JaKXz commented Jan 16, 2018 • edited Loading

gaearon commented Jan 16, 2018 • edited Loading

JaKXz commented Jan 17, 2018

gaearon commented Jan 20, 2018

caghand commented Jan 22, 2018

sstruct commented Feb 9, 2018

oriSomething Feb 10, 2018

Choose a reason for hiding this comment

ai commented Sep 26, 2018

karlhorky commented Dec 9, 2016 •

edited

Loading

cr101 commented Dec 10, 2016 •

edited

Loading

karlhorky commented Dec 10, 2016 •

edited

Loading

JaKXz Dec 18, 2016 •

edited

Loading

karlhorky commented Feb 12, 2017 •

edited

Loading

karlhorky commented Feb 12, 2017 •

edited

Loading

JaKXz commented Feb 12, 2017 •

edited

Loading

JaKXz commented Jan 16, 2018 •

edited

Loading

gaearon commented Jan 16, 2018 •

edited

Loading