Use stylelint to enfore css prefixes

[anandthakker]

To avoid regressions on fixes like #4357, we should use https://github.com/stylelint/stylelint to enforce that every CSS class we define is prefixed with mapbox.

[ai-santos]

@anandthakker I'm looking in to this issue. Is there a preference on how stylelint should be used? Here are the options for stylelint.

Decide how you want to use stylelint:
via the stylelint CLI
via a plugin for your build tool (gulp, webpack etc)
via a plugin for your text editor (atom, sublime text etc)
via the stylelint Node API
via the stylelint PostCSS plugin

[anandthakker]

@asantos3026 thanks for looking into it!

I think using the CLI is probably our best bet. Using the stylelint CLI, we could add a "lint-css" script to package.json, and then include that script in the list of scripts run by "test"

[ai-santos]

I was just reading this blog and I came to the same conclusion 👍
Stylelint

Using the command line is useful when you want to lint a project that doesn’t have stylelint or you want to use stylelint in an npm script. Then, it will be available everywhere in your terminal: stylelint "styles/**/*.css" This command will lint all CSS files in the styles directory and any of its subdirectories.

[ai-santos]

I'm new to developing and contributing to open source as part of my project this week :) I love Mapbox so wanted to contribute. Apologies for my novice question but for the style linter, is the declaration output in the css file supposed to be:

.mapbox-(class-name) {
  /* css code */
}

[anandthakker]

@asantos3026 questions to clarify an issue are very welcome!

Yes, I think what you've got there looks right to me: every CSS class in our output file should be in the form .mapbox-(blah-blah-blah)

[ai-santos]

Thanks @anandthakker. I added style lint and the naming convention seems to be working.

[mollymerp]

closed by #4584
thanks again @asantos3026 !