docs(shoreline-stylelint): add package documentation

Author: lucasaarcoverde

packages/components/src/text-input/text-input.css

@@ -7,6 +7,7 @@
   [data-sl-text-input-container] {
     height: 2.75rem;
     width: 100%;
+    text: var(--sl-text-body);
     font: var(--sl-text-body-font);
     letter-spacing: var(--sl-text-body-letter-spacing);
     border-radius: var(--sl-border-radius-medium);

packages/stylelint/README.md

@@ -0,0 +1,45 @@
+# Shoreline Stylelint
+
+A configuration of [Stylelint]() rules to help with the Shoreline adoption.
+
+## How to run?
+
+All files:
+
+```bash
+pnpm stylelint **/*.css
+```
+
+Specific file:
+
+```bash
+pnpm run stylelint src/example.css
+```
+
+Fix:
+
+```bash
+pnpm stylelint **/*.css --fix
+```
+
+### Development
+
+### Add new rules
+
+1. Refer to the [Writing rules](https://stylelint.io/developer-guide/rules) guide of the Stylelint documentation
+
+### Build custom rules
+
+1. Refer to the [Writing plugins](https://stylelint.io/developer-guide/plugins) guide of the Stylelint documentation
+2. Create your rule in the `/src/plugins` directory
+3. Validate your plugin with tests (reference sibling plugins for examples)
+
+Useful references:
+
+1. [PostCSS API](https://postcss.org/api/): It is useful when writing a new plugin.
+2. [jest-preset-stylelint](https://github.com/stylelint/jest-preset-stylelint#usage): Use this documentation when writing tests.
+3. [stylelint-prettier](https://github.com/prettier/stylelint-prettier)
+
+### Setup new rule/plugin
+
+You must setup the new rule or plugin on [the Stylelint configuration file](./src/index.js)

packages/stylelint/src/index.js

@@ -1,29 +1,12 @@
 'use strict'
 
 const textPlugin = require('./plugins/no-text-property')
-const spacePlugin = require('./plugins/no-space-in-px')
-
-const colorRules = {
-  'color-no-invalid-hex': [
-    true,
-    {
-      message: 'Please use a Shoreline color token instead of %s',
-    },
-  ],
-}
-
-const typographyRules = {
-  'shoreline/no-text-property': true,
-}
-
-const spaceRules = {
-  'shoreline/no-space-in-px': true,
-}
+const spacePlugin = require('./plugins/no-px-values')
 
 module.exports = {
   plugins: [textPlugin, spacePlugin],
   reportDescriptionlessDisables: true,
   reportNeedlessDisables: true,
   reportInvalidScopeDisables: true,
-  rules: { ...colorRules, ...typographyRules, ...spaceRules },
+  rules: { 'shoreline/no-text-property': true, 'shoreline/no-px-values': true },
 }

packages/stylelint/src/plugins/no-px-values/README.md

@@ -0,0 +1,55 @@
+# shoreline/no-px-values
+
+Disallows use of `px` values.
+
+```diff
+
+// Do
++ padding: 1rem;
++ margin: 1rem 0.5rem;
+// Don't
+- padding: 16px;
+- margin: 16px 8px;
+```
+
+## How to configure?
+
+```js
+const stylelintConfig = {
+  rules: {
+    'shoreline/no-px-values': true,
+  },
+}
+```
+
+## How to run?
+
+All files:
+
+```bash
+pnpm stylelint **/*.css
+```
+
+Specific file:
+
+```bash
+pnpm run stylelint src/example.css
+```
+
+## Fix
+
+```bash
+pnpm stylelint **/*.css --fix
+```
+
+```diff
+- margin: 16px 8px;
++ margin: 1rem 0.5rem;
+```
+
+## Output
+
+```bash
+ 10:5  ✖  Expected "padding: 16px" to be "padding: 1rem".             shoreline/no-px-values
+ 11:5  ✖  Expected "margin: 8px 4px" to be "margin: 0.5rem 0.25rem".  shoreline/no-px-values
+```

packages/stylelint/src/plugins/no-space-in-px/index.js packages/stylelint/src/plugins/no-px-values/index.js

@@ -3,7 +3,7 @@ const { replaceDeclaration } = require('../../utils/replace-declaration.js')
 
 const { ruleMessages, validateOptions, report } = stylelint.utils
 
-const ruleName = 'shoreline/no-space-in-px'
+const ruleName = 'shoreline/no-px-values'
 const messages = ruleMessages(ruleName, {
   expected: (prop, value, expectedValue) =>
     `Expected "${prop}: ${value}" to be "${prop}: ${expectedValue}".`,

packages/stylelint/src/plugins/no-space-in-px/index.test.js packages/stylelint/src/plugins/no-px-values/index.test.js

@@ -0,0 +1,54 @@
+# shoreline/no-text-property
+
+Disallows use of `px` values.
+
+```diff
+
+// Do
++ font: var(--sl-text-body-font);
++ letter-spacing: var(--sl-text-body-letter-spacing);
+// Don't
+- text: var(--sl-text-body);
+```
+
+## How to configure?
+
+```js
+const stylelintConfig = {
+  rules: {
+    'shoreline/no-text-property': true,
+  },
+}
+```
+
+## How to run?
+
+All files:
+
+```bash
+pnpm stylelint **/*.css
+```
+
+Specific file:
+
+```bash
+pnpm run stylelint src/example.css
+```
+
+## Fix
+
+```bash
+pnpm stylelint **/*.css --fix
+```
+
+```diff
+- text: var(--sl-text-body);
++ font: var(--sl-text-body-font);
++ letter-spacing: var(--sl-text-body-letter-spacing);
+```
+
+## Output
+
+```bash
+ 10:5  ✖  Expected "text" property to be splited in "font" and "letter-spacing"  shoreline/no-text-property
+```

packages/stylelint/src/plugins/no-text-property/README.md

@@ -30,19 +30,19 @@ module.exports = stylelint.createPlugin(
         if (isAutoFixing) {
           const hasShorelinePrefix = decl.value.includes(textTokenPrefix)
 
-          const newFontValue = hasShorelinePrefix
+          const fontValue = hasShorelinePrefix
             ? decl.value.replace(')', '-font)')
             : decl.value
 
-          const newLetterSpacingValue = hasShorelinePrefix
-            ? newFontValue.replace('font', 'letter-spacing')
+          const letterSpacingValue = hasShorelinePrefix
+            ? fontValue.replace('font', 'letter-spacing')
             : decl.value
 
-          replaceDeclaration(decl, newFontValue, 'font')
+          replaceDeclaration(decl, fontValue, 'font')
 
           decl.cloneAfter({
             prop: 'letter-spacing',
-            value: newLetterSpacingValue,
+            value: letterSpacingValue,
           })
         } else {
           report({