feat: add stylelint (#1787)

Co-authored-by: castastrophe <castastrophe@users.noreply.github.com>
adobe · Jun 1, 2023 · a450904 · a450904
1 parent 04108f3
commit a450904
Show file tree

Hide file tree

Showing 24 changed files with 1,144 additions and 123 deletions.
diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml
@@ -0,0 +1,33 @@
+name: Linting
+
+on:
+  push:
+    branches:
+      - "main"
+  pull_request:
+    types: [opened, synchronize, reopened, labeled, unlabeled]
+    paths:
+      - "**.css"
+
+jobs:
+  styles:
+    name: Lint CSS
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+      - name: Use Node LTS version
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install dependencies
+        run: yarn install
+      - name: Compile assets
+        run: yarn build
+      - name: Lint assets using stylelint
+        uses: reviewdog/action-stylelint@v1
+        with:
+          reporter: github-pr-review
+          fail_on_error: true
diff --git a/.prettierignore b/.prettierignore
@@ -7,6 +7,7 @@ components/*/dist
 components/expressvars/css/**/*.css
 components/vars/css/**/*.css
 components/tokens/custom-*/*.css
+tools/preview/storybook-static/**
 dist
 template.hbs
 

diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,6 @@
+components/**/*-generated.css
+components/tokens/*
+components/vars/*
+components/express/*
+components/expressvars/*
+components/site/*
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,37 @@
+{
+	"extends": ["stylelint-config-standard"],
+	"plugins": [
+		"stylelint-use-logical",
+		"stylelint-no-missing-parenthesis",
+		"stylelint-no-missing-var",
+		"stylelint-suit-naming-pattern"
+	],
+	"rules": {
+		"rule-empty-line-before": null,
+		"block-no-empty": null,
+		"at-rule-empty-line-before": null,
+		"at-rule-no-unknown": null,
+		"no-descending-specificity": null,
+		"selector-class-pattern": null,
+		"declaration-empty-line-before": null,
+		"custom-property-empty-line-before": null,
+		"comment-whitespace-inside": null,
+		"comment-empty-line-before": null,
+		"no-duplicate-selectors": null,
+		"property-no-vendor-prefix": null,
+		"max-nesting-depth": 2,
+		"csstools/use-logical": true,
+		"custom-rule/no-missing-parenthesis": true,
+		"custom-rule/no-missing-var": true,
+		"custom-rule/suit-naming-pattern": true,
+		"custom-property-pattern": "^[a-zA-Z0-9]+(-[a-z0-9]([a-zA-Z0-9]+)?)+$",
+		"alpha-value-notation": null,
+		"color-function-notation": null,
+		"import-notation": null,
+		"no-empty-source": null,
+		"property-no-unknown": true,
+		"declaration-property-value-no-unknown": true,
+		"value-keyword-case": null,
+		"selector-not-notation": null
+	}
+}
diff --git a/components/checkbox/index.css b/components/checkbox/index.css
@@ -962,8 +962,6 @@ governing permissions and limitations under the License.
 
 		--highcontrast-checkbox-disabled-color-default: GrayText;
 
-		--highcontrast-checkbox-focus-indicator-color: ButtonText;
-
 		--highcontrast-checkbox-highlight-color-focus: Highlight;
 		--highcontrast-checkbox-focus-indicator-color: FieldText;
 		--highcontrast-checkbox-color-focus: FieldText;

diff --git a/components/switch/index.css b/components/switch/index.css
@@ -738,8 +738,6 @@ governing permissions and limitations under the License.
 		--highcontrast-switch-handle-background-color: ButtonFace;
 
 		--highcontrast-switch-handle-border-color-default: ButtonText;
-		--highcontrast-switch-handle-border-color-hover: Highlight;
-		--highcontrast-switch-handle-border-color-down: Highlight;
 		--highcontrast-switch-handle-border-color-focus: Highlight;
 		--highcontrast-switch-handle-border-color-disabled: Highlight;
 

diff --git a/package.json b/package.json
@@ -1,109 +1,118 @@
 {
-	"private": true,
-	"name": "spectrum-css-monorepo",
-	"version": "0.0.0",
-	"license": "Apache-2.0",
-	"author": "Adobe",
-	"contributors": [
-		"Cassondra Roberts <castastrophe@users.noreply.github.com> (https://allons-y.llc)",
-		"Garth Braithwaite <garthdb@gmail.com> (https://garthdb.com)",
-		"Larry Davis <lazdnet@gmail.com>",
-		"Patrick Fulton <pfulton@users.noreply.github.com>",
-		"Steve Gill <stevengill97@gmail.com>"
-	],
-	"homepage": "https://opensource.adobe.com/spectrum-css/",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/adobe/spectrum-css.git"
-	},
-	"bugs": {
-		"url": "https://github.com/adobe/spectrum-css/issues"
-	},
-	"scripts": {
-		"build": "yarn build:components",
-		"build:all": "run-s build:components build:site build:preview",
-		"postbuild:all": "yarn mv:preview",
-		"build:clean": "run-s clean build",
-		"build:components": "lerna run --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" build",
-		"postbuild:components": "yarn docs:mod",
-		"build:preview": "nx build @spectrum-css/preview",
-		"build:site": "gulp buildDocs -LLL",
-		"cache:clean": "nx reset",
-		"ci": "yarn build:all",
-		"ci:storybook": "nx storybook @spectrum-css/preview",
-		"clean": "yarn cache:clean && run-p clean:*",
-		"clean:components": "lerna exec --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" -- rimraf dist",
-		"clean:docs": "rimraf dist",
-		"clean:preview": "nx clean @spectrum-css/preview",
-		"predev": "yarn build:components",
-		"dev": "NODE_ENV=development BROWSERSYNC_OPEN=true gulp dev",
-		"docs:mod": "node tasks/mod-extractor.js",
-		"lint:components": "node ./tasks/packageLint.js",
-		"mv:preview": "rimraf dist/preview && mv -f tools/preview/storybook-static dist/preview",
-		"new": "nx run @spectrum-css/generator:new",
-		"precommit": "lint-staged",
-		"prepare": "husky install",
-		"prepare:site": "run-s clean:docs build:all",
-		"prerelease": "yarn version:build",
-		"release": "lerna publish",
-		"release:beta-from-package": "yarn release from-package --conventional-prerelease --preid beta --pre-dist-tag beta --no-private",
-		"prerelease:site": "yarn prepare:site",
-		"release:site": "gh-pages -d dist/ -f -e .",
-		"prestart": "yarn build:components",
-		"start": "NODE_ENV=development yarn workspace @spectrum-css/preview start",
-		"test": "nx test @spectrum-css/preview",
-		"test:scope": "nx test:scope @spectrum-css/preview",
-		"version:build": "lerna run --since origin/main build",
-		"watch": "gulp watch"
-	},
-	"workspaces": [
-		"components/*",
-		"tools/*"
-	],
-	"devDependencies": {
-		"@adobe/focus-ring-polyfill": "^0.1.5",
-		"@commitlint/cli": "^17.6.3",
-		"@commitlint/config-conventional": "^17.6.3",
-		"gh-pages": "^5.0.0",
-		"gulp": "^4.0.0",
-		"gulp-replace": "^1.0.0",
-		"gulplog": "^1.0.0",
-		"husky": "^8.0.3",
-		"lerna": "^6.6.2",
-		"lint-staged": "^13.2.2",
-		"loadicons": "^1.0.0",
-		"lunr": "^2.3.6",
-		"markdown-it": "^12.3.2",
-		"npm-run-all": "^4.1.5",
-		"nx": "^16.2.2",
-		"prettier": "^2.8.8",
-		"prettier-package-json": "^2.8.0",
-		"prismjs": "^1.23.0",
-		"rimraf": "^5.0.1",
-		"semver": "^7.5.1",
-		"through2": "^3.0.1",
-		"yargs": "^17.7.2"
-	},
-	"engines": {
-		"node": ">=14.0.0 <18"
-	},
-	"browserslist": [
-		"last 2 Edge versions",
-		"last 2 Chrome versions",
-		"last 2 Firefox versions",
-		"last 2 Safari versions",
-		"last 2 iOS versions"
-	],
-	"lint-staged": {
-		"*.{md,js,css,yml,hbs}": [
-			"prettier --write"
-		],
-		"components/*/package.json": [
-			"yarn lint:components",
-			"prettier-package-json --write"
-		],
-		"package.json": [
-			"prettier-package-json --write"
-		]
-	}
+  "private": true,
+  "name": "spectrum-css-monorepo",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "author": "Adobe",
+  "contributors": [
+    "Cassondra Roberts <castastrophe@users.noreply.github.com> (https://allons-y.llc)",
+    "Garth Braithwaite <garthdb@gmail.com> (https://garthdb.com)",
+    "Larry Davis <lazdnet@gmail.com>",
+    "Patrick Fulton <pfulton@users.noreply.github.com>",
+    "Steve Gill <stevengill97@gmail.com>"
+  ],
+  "homepage": "https://opensource.adobe.com/spectrum-css/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/spectrum-css.git"
+  },
+  "bugs": {
+    "url": "https://github.com/adobe/spectrum-css/issues"
+  },
+  "scripts": {
+    "build": "yarn build:components",
+    "build:all": "run-s build:components build:site build:preview",
+    "postbuild:all": "yarn mv:preview",
+    "build:clean": "run-s clean build",
+    "build:components": "lerna run --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" build",
+    "postbuild:components": "yarn docs:mod",
+    "build:preview": "nx build @spectrum-css/preview",
+    "build:site": "gulp buildDocs -LLL",
+    "cache:clean": "nx reset",
+    "ci": "yarn build:all",
+    "ci:storybook": "nx storybook @spectrum-css/preview",
+    "clean": "yarn cache:clean && run-p clean:*",
+    "clean:components": "lerna exec --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" -- rimraf dist",
+    "clean:docs": "rimraf dist",
+    "clean:preview": "nx clean @spectrum-css/preview",
+    "predev": "yarn build:components",
+    "dev": "NODE_ENV=development BROWSERSYNC_OPEN=true gulp dev",
+    "docs:mod": "node tasks/mod-extractor.js",
+    "postdocs:mod": "prettier --cache --write components/*/metadata/*.md > /dev/null",
+    "lint:components": "node ./tasks/packageLint.js",
+    "lint:styles": "stylelint",
+    "mv:preview": "rimraf dist/preview && mv tools/preview/storybook-static dist/preview",
+    "new": "nx run @spectrum-css/generator:new",
+    "precommit": "lint-staged",
+    "prepare": "husky install",
+    "prepare:site": "run-s clean:docs build:all",
+    "prerelease": "yarn version:build",
+    "release": "lerna publish",
+    "release:beta-from-package": "yarn release from-package --conventional-prerelease --preid beta --pre-dist-tag beta --no-private",
+    "prerelease:site": "yarn prepare:site",
+    "release:site": "gh-pages -d dist/ -f -e .",
+    "prestart": "yarn build:components",
+    "start": "NODE_ENV=development yarn workspace @spectrum-css/preview start",
+    "test": "nx test @spectrum-css/preview",
+    "test:scope": "nx test:scope @spectrum-css/preview",
+    "version:build": "lerna run --since origin/main build",
+    "watch": "gulp watch"
+  },
+  "workspaces": [
+    "components/*",
+    "tools/*",
+    "plugins/*"
+  ],
+  "devDependencies": {
+    "@adobe/focus-ring-polyfill": "^0.1.5",
+    "@commitlint/cli": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.3",
+    "gh-pages": "^5.0.0",
+    "gulp": "^4.0.0",
+    "gulp-replace": "^1.0.0",
+    "gulplog": "^1.0.0",
+    "husky": "^8.0.3",
+    "lerna": "^6.6.2",
+    "lint-staged": "^13.2.2",
+    "loadicons": "^1.0.0",
+    "lunr": "^2.3.6",
+    "markdown-it": "^12.3.2",
+    "npm-run-all": "^4.1.5",
+    "nx": "^16.2.2",
+    "prettier": "^2.8.8",
+    "prettier-package-json": "^2.8.0",
+    "prismjs": "^1.23.0",
+    "rimraf": "^5.0.1",
+    "semver": "^7.5.1",
+    "stylelint": "^15.5.0",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-use-logical": "^2.1.0",
+    "through2": "^3.0.1",
+    "yargs": "^17.7.2"
+  },
+  "engines": {
+    "node": ">=14.0.0 <18"
+  },
+  "browserslist": [
+    "last 2 Edge versions",
+    "last 2 Chrome versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "last 2 iOS versions"
+  ],
+  "lint-staged": {
+    "*.{md,js,css,yml,hbs}": [
+      "prettier --write --cache"
+    ],
+    "components/*/*.css": [
+      "stylelint --write"
+    ],
+    "components/*/package.json": [
+      "yarn lint:components",
+      "prettier-package-json --write"
+    ],
+    "package.json": [
+      "prettier-package-json --write"
+    ]
+  }
 }
diff --git a/plugins/README.md b/plugins/README.md
@@ -0,0 +1,66 @@
+# Stylelint for Adobe Spectrum CSS
+
+Design tokens are supported by linting rules, which warn you if a token is deprecated, missing, missing vars or using deprecated formatting. Design token lint rules are provided by the Adobe Design System Stylelint plugins.
+
+If you are an Adobe employee, you must configure the lint rule in your repository and keep it up-to-date. If you are a partner developer, we strongly recommend you to use it as well.
+
+## Installation (Custom Plugins)
+
+```
+yarn add stylelint-no-missing-var
+yarn add stylelint-suit-naming-pattern
+yarn add stylelint-no-missing-parenthesis
+```
+
+## Configuration
+
+Add the plugins to your Stylelint configuration file.
+
+```js
+// .stylelintrc.js
+
+module.exports = {
+	extends: ["stylelint-config-standard"],
+	plugins: [
+		"stylelint-use-logical",
+		+"stylelint-no-missing-parenthesis",
+		+"stylelint-suit-naming-pattern",
+		+"stylelint-no-missing-var",
+	],
+};
+```
+
+Enable any desired rules. The rules and options shown below are strongly recommended
+
+```json
+module.exports = {
+    "rules" : {
+        "rule-empty-line-before": null,
+        "block-no-empty": null,
+        "at-rule-empty-line-before": null,
+        "at-rule-no-unknown": null,
+        "no-descending-specificity": null,
+        "selector-class-pattern": null,
+        "declaration-empty-line-before": null,
+        "custom-property-empty-line-before": null,
+        "comment-whitespace-inside": null,
+        "comment-empty-line-before": null,
+        "no-duplicate-selectors": null,
+        "property-no-vendor-prefix": null,
+        "max-nesting-depth": 2,
+        "csstools/use-logical": true,
+        "custom-rule/no-missing-parenthesis": true,
+        "custom-rule/no-missing-var": true,
+        "custom-rule/suit-naming-pattern": true,
+        "custom-property-pattern": "^[a-zA-Z0-9]+(-[a-z0-9]([a-zA-Z0-9]+)?)+$",
+        "alpha-value-notation": null,
+        "color-function-notation": null,
+        "import-notation": null,
+        "no-empty-source": null,
+        "property-no-unknown": true,
+        "declaration-property-value-no-unknown": true,
+        "value-keyword-case":null,
+        "selector-not-notation":null
+    }
+}
+```