@vtex/shoreline-stylelint
v1.0.74
Published
A configuration of [Stylelint](https://stylelint.io/) rules to help with the Shoreline adoption.
Downloads
443
Maintainers
Keywords
Readme
Shoreline Stylelint
A configuration of Stylelint rules to help with the Shoreline adoption.
How to run?
All files:
pnpm stylelint **/*.css
Specific file:
pnpm run stylelint src/example.css
Fix:
pnpm stylelint **/*.css --fix
Development
Add new rules
- Refer to the Writing rules guide of the Stylelint documentation
Build custom rules
- Refer to the Writing plugins guide of the Stylelint documentation
- Create your rule in the
/src/plugins
directory - Validate your plugin with tests (reference sibling plugins for examples)
Useful references:
- PostCSS API: It is useful when writing a new plugin.
- jest-preset-stylelint: Use this documentation when writing tests.
- stylelint-prettier
Setup new rule or plugin
You must set the new rule or plugin on the Stylelint configuration file
Rules
no-px-values
This rule prevents your CSS properties from having a px
value defined.
/* Don't 🚫 */
margin: 4px;
padding-bottom: 8px;
padding-top: 8px;
height: 24px;
/* Do ✅ */
margin: 0.25rem;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
height: 1.5rem;
Using the --fix
command will convert the px
values to rem
.
no-text-property
/* Don't 🚫 */
text: var(--sl-text-caption-2);
/* Do ✅ */
font: var(--sl-text-caption-2-font);
letter-spacing: var(--sl-text-caption-2-letter-spacing);
Using the --fix
command will split the text
property into font
and letter-spacing
.