Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(linting): Improve sass linting using stylelint and a custom formatter #1359

Merged
merged 12 commits into from Jul 14, 2020

Conversation

soniadeveloper
Copy link
Contributor

Closes #527

Summary

  • Stylelint rules are added to the package.json to enforce proper use of Carbon tokens.
  • A custom formatting function is also included to give more specific error messages when linting and redirect the user to the Carbon guidelines

Change List (commits, features, bugs, etc)

  • Added stylelint rules to package.json
  • Created a custom formatting file (sass-msg-formatter.js) to create custom error messages

Acceptance Test (how to verify the PR)

  • Run yarn lint in the main project folder
  • If there are linting errors in any SCSS files, the user should be presented with (color coded) errors and warnings.

Screen Shot 2020-07-01 at 1 36 55 PM

Copy link
Contributor

@sstone2423 sstone2423 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Could you add test coverage and jsdoc along with it?

sass-msg-formatter.js Outdated Show resolved Hide resolved
/*
* createCustomMessage: returns a custom message with a link to the carbon documentation depending on what the error is
*/
function createCustomMessage(text) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could you add test coverage for this?
also could you add jsdocs for the param?

sass-msg-formatter.js Outdated Show resolved Hide resolved
sass-msg-formatter.js Outdated Show resolved Hide resolved
sass-msg-formatter.js Outdated Show resolved Hide resolved
sass-msg-formatter.js Outdated Show resolved Hide resolved
@netlify
Copy link

netlify bot commented Jul 7, 2020

Deploy preview for carbon-addons-iot-react ready!

Built with commit 82bfd2c

https://deploy-preview-1359--carbon-addons-iot-react.netlify.app

Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like there are two files here - sass-msg-formatter.js and sassMsgFormatter.js. Should there only be one? I don't see any usages of sass-msg-formatter.js

Instead of being at the root folder location, let's put these formatter config/js files in a new folder at ./config/stylelint

package.json Outdated Show resolved Hide resolved
@tay1orjones tay1orjones dismissed sstone2423’s stale review July 14, 2020 21:19

Feedback was implemented in a separate file

@tay1orjones tay1orjones merged commit 614112f into master Jul 14, 2020
@tay1orjones tay1orjones deleted the 527-sass-linting branch July 14, 2020 21:19
@tay1orjones
Copy link
Member

🎉 This PR is included in version 2.101.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve sass linting for Carbon vars, mixins, etc
4 participants