Yarn build: "Failed because of a stylelint error"

sage
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.
1 Like
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 Likes
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.

1 Like
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”,
1 Like
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

9 Likes
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 Likes
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 @ben wouldn’t that make sense?

1 Like
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

2 Likes
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

1 Like
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:

13 Likes
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",
3 Likes
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

18

Appreciate the pointer, as I was stuck on this for a couple of hours.

Long time Sage developer on v7 and v8, but new to Sage 9 and the yarn build process.

Diagnosing this was obscure at best. I know my scss syntax well, but the lack of stylelint errors left me stumped.

Was also not aware of yarn run lint:styles, which gave pretty clear direction.

I would suggest a touch of documentation here on styelint so that a Sage 9 newbie doesn’t get stuck. And obviously if there is a way to output stylint errors in the yarn build process, that would be great.

19

I also had that error, thanks for the yarn run lint:styles command, it help me see the problem. Zero values for css styles cause mine to break and the normal yarn build command couldn’t point out the errors, thanks again.

20

anyway to make rules only apply for ‘watching’ - ie locally or on staging? I can see how this strictness may be useful for production but when you’re fleshing out scss files it blocks the whole site with the black screen.