Yarn build: "Failed because of a stylelint error"

#1

Yarn build (and start) fails.

Anyone else encountering this problem? Bug in the latest stylelint it seems?

EDIT: still the same error after downgrading to Stylelint 7.10.1

Sage 9 Beta 3
NodeJS: v6.11.0
Stylelint: 7.11.0

yarn run v0.24.6
$ webpack --progress --config resources/assets/build/webpack.config.js 

resources/assets/styles/components/_comments.scss
 1:1  ✖  Unexpected empty source   no-empty-source

resources/assets/styles/components/_forms.scss
 1:1  ✖  Unexpected empty source   no-empty-source

resources/assets/styles/components/_wp-classes.scss
 1:1  ✖  Unexpected empty source   no-empty-source

resources/assets/styles/layouts/_header.scss
 1:1  ✖  Unexpected empty source   no-empty-source

resources/assets/styles/main.scss
 6:1  ✖  Expected empty line before at-rule   at-rule-empty-line-before


Error: Failed because of a stylelint error.

    at linterSuccess (/path/to/my/site/web/app/themes/mytheme/node_modules/stylelint-webpack-plugin/lib/run-compilation.js:34:14)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
#2

Yep Same Issue.

I just commented stylelint out in the wepback.config.js to get this to build.

// new StyleLintPlugin({
//   failOnError: ! config.enabled.watcher,
//   syntax: 'scss',
// }),

Seems a pain to set up to not error at almost everything? if someone has a config file for stylelint that would be handy?

#3

Have something in those empty sass files, like a comment (and an emtpy line before :6 in main.scss) fixed the error for me (Foundation framework).

Still silly though, another new project that I started about a week ago and with the same empty files builds just fine :confused:

EDIT: never mind, still issues. No dist/styles folder and a bunch of errors when yarn run starting last weeks project as well.

#4

Oops. I merged stylelint stuff but if you select a framework besides Bootstrap it currently clears out some Sass files. Those files need at least a comment at the top, so will get that fixed.

@Jake_Dickinson are you not seeing https://github.com/roots/sage/blob/master/.stylelintrc?

So, what errors?

Created an issue: https://github.com/roots/sage/issues/1905

#5

Errors are gone now. Not sure what I did (wrong).

#6

FWIW, I’m getting this error when I run yarn build:

Error: Failed because of a stylelint error.

    at linterSuccess (/Users/[…]/node_modules/stylelint-webpack-plugin/lib/run-compilation.js:34:14)
error Command failed with exit code 1.

But there are no errors when I run yarn run lint:styles:

yarn run v0.27.5
$ stylelint resources/assets/styles/**/*.{css,sass,scss,sss,less}
Done in 2.43s.

Using

  • Sage 9.0.0-beta.3
  • Stylelint 7.12
  • Node 6.9.4

Not sure what’s going on, but commenting out the Stylelint plugin as @Jake_Dickinson suggested fixes it.

I tried updating to the following but still got the error:

  • Node 8.2.1
  • “stylelint”: “~8.0”,
  • “stylelint-config-standard”: “~17.0”,
  • “stylelint-webpack-plugin”: “^0.9”,
#7

The default error when building with yarn build isn’t very helpful. However, I was able to get a more detailed response using yarn run lint:styles:

yarn run v0.27.5
$ stylelint resources/assets/styles/**/*.{css,sass,scss,sss,less}

resources/assets/styles/common/_variables.scss
 2:25  ✖  Expected "#FF5722" to be "#ff5722"   color-hex-case                  
 5:29  ✖  Unexpected missing end-of-source     no-missing-end-of-source-newline
          newline

error Command failed with exit code 2.

I made those two changes to _variables.scss and it compiled happily.

Sage 9 Beta 3
yarn 0.27.5
Node 8.2.1
npm 5.3.0
Stylelint 7.13.0

#8

This was driving me nuts - no error messages when running build or start.

anyway by updating the config to:

    new StyleLintPlugin({
      failOnError: !config.enabled.watcher,
      emitErrors: true,
      quiet: false,
      syntax: 'scss',
    }),

I was able to lint - and see the cause of the lint errors - sanity restored.

also FYI the style lint rules are defined in package json now - in case like me you had a .rc file that stopped working.

"stylelint": {
    "extends": "stylelint-config-standard",
    "rules": {
      "no-empty-source": null,
      "max-empty-lines": 6
    }
  },
#9

Thanks, that saved my day. Got to wonder why this is not in the default Webpack config. If the build process fails we should see helpful error message by default @benword wouldn’t that make sense?

Lack of meaningful SCSS error messages in Sage 9
#10

I created .stylelintignore file in theme root, he has same syntax as .gitignore and added *.scss *.css to it. You can check docs here https://stylelint.io/user-guide/configuration/#stylelintignore

#11

Excuse me, Is there a way to disable this garbage? I’m sorry but I really could give a crap if there’s an extra space at the end of the line or a comment doesn’t have a line before it. WTF

How do I disable this at least for the time being while I’m developing my theme? I HATE this stylelint thing and I don’t know a lot about using packages and such so I’m not sure how to just remove it if that can even be done?

I’m importing UIKit CSS which I have no control over how they make their code and this is giving me all sorts of errors about Unexpected empty line before at-rule

#12

Yeah man, it’s real easy. You might have been able to figure it out in the time it took you to write about how it’s garbage.

Remove these lines 4 lines:

Stylelint not outputting errors after update
#13

If anyone’s interested in an SCSS / SASS setup, I followed this guide to create something that’s working pretty well.

As @chrisk2020 mentioned, a good first step is to update your webpack.config.js file with the following, so you get the benefit of Stylelint’s errors.

new StyleLintPlugin({
  failOnError: !config.enabled.watcher,
  emitErrors: true,
  quiet: false,
  syntax: 'scss',
}),

That way, you’ll get this kind of thing in your terminal
06

Next, if you’re using SCSS I found the following settings work well in my package.json file:

"stylelint": {
    "extends": "stylelint-config-sass-guidelines",
    "rules": {
      "indentation": 2,
      "max-nesting-depth": 10,
      "selector-max-compound-selectors": 5,
      "string-quotes": null
    }

This requires a couple of additional devDependencies in the same package.json file too.

"stylelint-config-sass-guidelines": "~4.1",
"stylelint-scss": "~2.0",
#14

Very helpful, thanks!

#15

Nice one! Thank you Ben.

#16

For some reason the above didn’t work for me but simply changing failOnError: false, did work.

#17

it helps! Thanks Ben