Create Stylelint Configuration to Be Shared
Create a stylelint configuration that will be used with all the projects using our boilerplate. It should by default enable all rules which should be accomplishable by including the following plugins in the configuration:
- https://www.npmjs.com/package/stylelint
- https://github.com/stylelint/stylelint-config-standard
- https://github.com/kristerkari/stylelint-config-recommended-scss
-
https://www.npmjs.com/package/stylelint-order (this might require some experimentation - the properties should follow the same ordering that is shown on this page https://www.npmjs.com/package/stylelint-config-rational-order -- that project however does not support autofixing -- this plugin needs to support autofixing.. I suggest using stylelint-order to handle the autofixing and add a configuration that applies the same changes that
stylelint-config-rational-orderapplies. This is important because it is neater to view things liketop: 0,right: 0,left: 0when they are grouped together rather than everything being in alphabetical order although for anything that isn't manually configured then it should be in alphabetical order at the end) - https://www.npmjs.com/package/stylelint-no-unsupported-browser-features
- https://www.npmjs.com/package/stylelint-declaration-block-no-ignored-properties
- https://github.com/filipekiss/stylelint-color-format (color format should always be rgb)
- https://www.npmjs.com/package/stylelint-high-performance-animation
- https://github.com/AndyOGo/stylelint-declaration-strict-value (implement the auto-fix for this one on color/background-color by allowing the user to specify a variable file that has CSS stored as CSS vars) Take the following for an example:
Hardcoded variable file named src/theme/vars.scss
:root {
--blue: #1e90ff;
--white: #ffffff;
}
Random SCSS file anywhere in the project:
div {
background-color: #1e90ff;
}
In this example, the div's background-color should be changed to var(--blue).
Ideally, you should be a web developer who uses CSS and wants to perfect their own stylelint configuration. The .stylelintrc.js format should be used. The file will be stored in all projects under .common/.stylelintrc.js. The stylelintrc.js file should detect whether a file exists in the root directory that is named .stylelintrc and import the settings from .stylelintrc as overrides. This way the root for projects that don't need to customize the settings stay clutter free but we also allow project owners to manually override our settings which will not be very permissive.
Configure default formatter to be https://www.npmjs.com/package/stylelint-formatter-pretty