Skip to content

Commit a450904

Browse files
pfultoncastastrophe
pfulton
and
castastrophe
authored
feat: add stylelint (#1787)
Co-authored-by: castastrophe <castastrophe@users.noreply.github.com>
1 parent 04108f3 commit a450904

File tree

24 files changed

+1144
-123
lines changed

24 files changed

+1144
-123
lines changed

‎.github/workflows/linting.yml

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: Linting
2+
3+
on:
4+
push:
5+
branches:
6+
- "main"
7+
pull_request:
8+
types: [opened, synchronize, reopened, labeled, unlabeled]
9+
paths:
10+
- "**.css"
11+
12+
jobs:
13+
styles:
14+
name: Lint CSS
15+
16+
runs-on: ubuntu-latest
17+
18+
steps:
19+
- name: Check out code
20+
uses: actions/checkout@v3
21+
- name: Use Node LTS version
22+
uses: actions/setup-node@v3
23+
with:
24+
node-version: 16
25+
- name: Install dependencies
26+
run: yarn install
27+
- name: Compile assets
28+
run: yarn build
29+
- name: Lint assets using stylelint
30+
uses: reviewdog/action-stylelint@v1
31+
with:
32+
reporter: github-pr-review
33+
fail_on_error: true

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ components/*/dist
77
components/expressvars/css/**/*.css
88
components/vars/css/**/*.css
99
components/tokens/custom-*/*.css
10+
tools/preview/storybook-static/**
1011
dist
1112
template.hbs
1213

‎.stylelintignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
components/**/*-generated.css
2+
components/tokens/*
3+
components/vars/*
4+
components/express/*
5+
components/expressvars/*
6+
components/site/*

‎.stylelintrc.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"extends": ["stylelint-config-standard"],
3+
"plugins": [
4+
"stylelint-use-logical",
5+
"stylelint-no-missing-parenthesis",
6+
"stylelint-no-missing-var",
7+
"stylelint-suit-naming-pattern"
8+
],
9+
"rules": {
10+
"rule-empty-line-before": null,
11+
"block-no-empty": null,
12+
"at-rule-empty-line-before": null,
13+
"at-rule-no-unknown": null,
14+
"no-descending-specificity": null,
15+
"selector-class-pattern": null,
16+
"declaration-empty-line-before": null,
17+
"custom-property-empty-line-before": null,
18+
"comment-whitespace-inside": null,
19+
"comment-empty-line-before": null,
20+
"no-duplicate-selectors": null,
21+
"property-no-vendor-prefix": null,
22+
"max-nesting-depth": 2,
23+
"csstools/use-logical": true,
24+
"custom-rule/no-missing-parenthesis": true,
25+
"custom-rule/no-missing-var": true,
26+
"custom-rule/suit-naming-pattern": true,
27+
"custom-property-pattern": "^[a-zA-Z0-9]+(-[a-z0-9]([a-zA-Z0-9]+)?)+$",
28+
"alpha-value-notation": null,
29+
"color-function-notation": null,
30+
"import-notation": null,
31+
"no-empty-source": null,
32+
"property-no-unknown": true,
33+
"declaration-property-value-no-unknown": true,
34+
"value-keyword-case": null,
35+
"selector-not-notation": null
36+
}
37+
}

‎components/checkbox/index.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -962,8 +962,6 @@ governing permissions and limitations under the License.
962962

963963
--highcontrast-checkbox-disabled-color-default: GrayText;
964964

965-
--highcontrast-checkbox-focus-indicator-color: ButtonText;
966-
967965
--highcontrast-checkbox-highlight-color-focus: Highlight;
968966
--highcontrast-checkbox-focus-indicator-color: FieldText;
969967
--highcontrast-checkbox-color-focus: FieldText;

‎components/switch/index.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -738,8 +738,6 @@ governing permissions and limitations under the License.
738738
--highcontrast-switch-handle-background-color: ButtonFace;
739739

740740
--highcontrast-switch-handle-border-color-default: ButtonText;
741-
--highcontrast-switch-handle-border-color-hover: Highlight;
742-
--highcontrast-switch-handle-border-color-down: Highlight;
743741
--highcontrast-switch-handle-border-color-focus: Highlight;
744742
--highcontrast-switch-handle-border-color-disabled: Highlight;
745743

‎package.json

Lines changed: 116 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,118 @@
11
{
2-
"private": true,
3-
"name": "spectrum-css-monorepo",
4-
"version": "0.0.0",
5-
"license": "Apache-2.0",
6-
"author": "Adobe",
7-
"contributors": [
8-
"Cassondra Roberts <castastrophe@users.noreply.github.com> (https://allons-y.llc)",
9-
"Garth Braithwaite <garthdb@gmail.com> (https://garthdb.com)",
10-
"Larry Davis <lazdnet@gmail.com>",
11-
"Patrick Fulton <pfulton@users.noreply.github.com>",
12-
"Steve Gill <stevengill97@gmail.com>"
13-
],
14-
"homepage": "https://opensource.adobe.com/spectrum-css/",
15-
"repository": {
16-
"type": "git",
17-
"url": "https://github.com/adobe/spectrum-css.git"
18-
},
19-
"bugs": {
20-
"url": "https://github.com/adobe/spectrum-css/issues"
21-
},
22-
"scripts": {
23-
"build": "yarn build:components",
24-
"build:all": "run-s build:components build:site build:preview",
25-
"postbuild:all": "yarn mv:preview",
26-
"build:clean": "run-s clean build",
27-
"build:components": "lerna run --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" build",
28-
"postbuild:components": "yarn docs:mod",
29-
"build:preview": "nx build @spectrum-css/preview",
30-
"build:site": "gulp buildDocs -LLL",
31-
"cache:clean": "nx reset",
32-
"ci": "yarn build:all",
33-
"ci:storybook": "nx storybook @spectrum-css/preview",
34-
"clean": "yarn cache:clean && run-p clean:*",
35-
"clean:components": "lerna exec --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" -- rimraf dist",
36-
"clean:docs": "rimraf dist",
37-
"clean:preview": "nx clean @spectrum-css/preview",
38-
"predev": "yarn build:components",
39-
"dev": "NODE_ENV=development BROWSERSYNC_OPEN=true gulp dev",
40-
"docs:mod": "node tasks/mod-extractor.js",
41-
"lint:components": "node ./tasks/packageLint.js",
42-
"mv:preview": "rimraf dist/preview && mv -f tools/preview/storybook-static dist/preview",
43-
"new": "nx run @spectrum-css/generator:new",
44-
"precommit": "lint-staged",
45-
"prepare": "husky install",
46-
"prepare:site": "run-s clean:docs build:all",
47-
"prerelease": "yarn version:build",
48-
"release": "lerna publish",
49-
"release:beta-from-package": "yarn release from-package --conventional-prerelease --preid beta --pre-dist-tag beta --no-private",
50-
"prerelease:site": "yarn prepare:site",
51-
"release:site": "gh-pages -d dist/ -f -e .",
52-
"prestart": "yarn build:components",
53-
"start": "NODE_ENV=development yarn workspace @spectrum-css/preview start",
54-
"test": "nx test @spectrum-css/preview",
55-
"test:scope": "nx test:scope @spectrum-css/preview",
56-
"version:build": "lerna run --since origin/main build",
57-
"watch": "gulp watch"
58-
},
59-
"workspaces": [
60-
"components/*",
61-
"tools/*"
62-
],
63-
"devDependencies": {
64-
"@adobe/focus-ring-polyfill": "^0.1.5",
65-
"@commitlint/cli": "^17.6.3",
66-
"@commitlint/config-conventional": "^17.6.3",
67-
"gh-pages": "^5.0.0",
68-
"gulp": "^4.0.0",
69-
"gulp-replace": "^1.0.0",
70-
"gulplog": "^1.0.0",
71-
"husky": "^8.0.3",
72-
"lerna": "^6.6.2",
73-
"lint-staged": "^13.2.2",
74-
"loadicons": "^1.0.0",
75-
"lunr": "^2.3.6",
76-
"markdown-it": "^12.3.2",
77-
"npm-run-all": "^4.1.5",
78-
"nx": "^16.2.2",
79-
"prettier": "^2.8.8",
80-
"prettier-package-json": "^2.8.0",
81-
"prismjs": "^1.23.0",
82-
"rimraf": "^5.0.1",
83-
"semver": "^7.5.1",
84-
"through2": "^3.0.1",
85-
"yargs": "^17.7.2"
86-
},
87-
"engines": {
88-
"node": ">=14.0.0 <18"
89-
},
90-
"browserslist": [
91-
"last 2 Edge versions",
92-
"last 2 Chrome versions",
93-
"last 2 Firefox versions",
94-
"last 2 Safari versions",
95-
"last 2 iOS versions"
96-
],
97-
"lint-staged": {
98-
"*.{md,js,css,yml,hbs}": [
99-
"prettier --write"
100-
],
101-
"components/*/package.json": [
102-
"yarn lint:components",
103-
"prettier-package-json --write"
104-
],
105-
"package.json": [
106-
"prettier-package-json --write"
107-
]
108-
}
2+
"private": true,
3+
"name": "spectrum-css-monorepo",
4+
"version": "0.0.0",
5+
"license": "Apache-2.0",
6+
"author": "Adobe",
7+
"contributors": [
8+
"Cassondra Roberts <castastrophe@users.noreply.github.com> (https://allons-y.llc)",
9+
"Garth Braithwaite <garthdb@gmail.com> (https://garthdb.com)",
10+
"Larry Davis <lazdnet@gmail.com>",
11+
"Patrick Fulton <pfulton@users.noreply.github.com>",
12+
"Steve Gill <stevengill97@gmail.com>"
13+
],
14+
"homepage": "https://opensource.adobe.com/spectrum-css/",
15+
"repository": {
16+
"type": "git",
17+
"url": "https://github.com/adobe/spectrum-css.git"
18+
},
19+
"bugs": {
20+
"url": "https://github.com/adobe/spectrum-css/issues"
21+
},
22+
"scripts": {
23+
"build": "yarn build:components",
24+
"build:all": "run-s build:components build:site build:preview",
25+
"postbuild:all": "yarn mv:preview",
26+
"build:clean": "run-s clean build",
27+
"build:components": "lerna run --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" build",
28+
"postbuild:components": "yarn docs:mod",
29+
"build:preview": "nx build @spectrum-css/preview",
30+
"build:site": "gulp buildDocs -LLL",
31+
"cache:clean": "nx reset",
32+
"ci": "yarn build:all",
33+
"ci:storybook": "nx storybook @spectrum-css/preview",
34+
"clean": "yarn cache:clean && run-p clean:*",
35+
"clean:components": "lerna exec --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" -- rimraf dist",
36+
"clean:docs": "rimraf dist",
37+
"clean:preview": "nx clean @spectrum-css/preview",
38+
"predev": "yarn build:components",
39+
"dev": "NODE_ENV=development BROWSERSYNC_OPEN=true gulp dev",
40+
"docs:mod": "node tasks/mod-extractor.js",
41+
"postdocs:mod": "prettier --cache --write components/*/metadata/*.md > /dev/null",
42+
"lint:components": "node ./tasks/packageLint.js",
43+
"lint:styles": "stylelint",
44+
"mv:preview": "rimraf dist/preview && mv tools/preview/storybook-static dist/preview",
45+
"new": "nx run @spectrum-css/generator:new",
46+
"precommit": "lint-staged",
47+
"prepare": "husky install",
48+
"prepare:site": "run-s clean:docs build:all",
49+
"prerelease": "yarn version:build",
50+
"release": "lerna publish",
51+
"release:beta-from-package": "yarn release from-package --conventional-prerelease --preid beta --pre-dist-tag beta --no-private",
52+
"prerelease:site": "yarn prepare:site",
53+
"release:site": "gh-pages -d dist/ -f -e .",
54+
"prestart": "yarn build:components",
55+
"start": "NODE_ENV=development yarn workspace @spectrum-css/preview start",
56+
"test": "nx test @spectrum-css/preview",
57+
"test:scope": "nx test:scope @spectrum-css/preview",
58+
"version:build": "lerna run --since origin/main build",
59+
"watch": "gulp watch"
60+
},
61+
"workspaces": [
62+
"components/*",
63+
"tools/*",
64+
"plugins/*"
65+
],
66+
"devDependencies": {
67+
"@adobe/focus-ring-polyfill": "^0.1.5",
68+
"@commitlint/cli": "^17.6.3",
69+
"@commitlint/config-conventional": "^17.6.3",
70+
"gh-pages": "^5.0.0",
71+
"gulp": "^4.0.0",
72+
"gulp-replace": "^1.0.0",
73+
"gulplog": "^1.0.0",
74+
"husky": "^8.0.3",
75+
"lerna": "^6.6.2",
76+
"lint-staged": "^13.2.2",
77+
"loadicons": "^1.0.0",
78+
"lunr": "^2.3.6",
79+
"markdown-it": "^12.3.2",
80+
"npm-run-all": "^4.1.5",
81+
"nx": "^16.2.2",
82+
"prettier": "^2.8.8",
83+
"prettier-package-json": "^2.8.0",
84+
"prismjs": "^1.23.0",
85+
"rimraf": "^5.0.1",
86+
"semver": "^7.5.1",
87+
"stylelint": "^15.5.0",
88+
"stylelint-config-standard": "^33.0.0",
89+
"stylelint-use-logical": "^2.1.0",
90+
"through2": "^3.0.1",
91+
"yargs": "^17.7.2"
92+
},
93+
"engines": {
94+
"node": ">=14.0.0 <18"
95+
},
96+
"browserslist": [
97+
"last 2 Edge versions",
98+
"last 2 Chrome versions",
99+
"last 2 Firefox versions",
100+
"last 2 Safari versions",
101+
"last 2 iOS versions"
102+
],
103+
"lint-staged": {
104+
"*.{md,js,css,yml,hbs}": [
105+
"prettier --write --cache"
106+
],
107+
"components/*/*.css": [
108+
"stylelint --write"
109+
],
110+
"components/*/package.json": [
111+
"yarn lint:components",
112+
"prettier-package-json --write"
113+
],
114+
"package.json": [
115+
"prettier-package-json --write"
116+
]
117+
}
109118
}

‎plugins/README.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Stylelint for Adobe Spectrum CSS
2+
3+
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.
4+
5+
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.
6+
7+
## Installation (Custom Plugins)
8+
9+
```
10+
yarn add stylelint-no-missing-var
11+
yarn add stylelint-suit-naming-pattern
12+
yarn add stylelint-no-missing-parenthesis
13+
```
14+
15+
## Configuration
16+
17+
Add the plugins to your Stylelint configuration file.
18+
19+
```js
20+
// .stylelintrc.js
21+
22+
module.exports = {
23+
extends: ["stylelint-config-standard"],
24+
plugins: [
25+
"stylelint-use-logical",
26+
+"stylelint-no-missing-parenthesis",
27+
+"stylelint-suit-naming-pattern",
28+
+"stylelint-no-missing-var",
29+
],
30+
};
31+
```
32+
33+
Enable any desired rules. The rules and options shown below are strongly recommended
34+
35+
```json
36+
module.exports = {
37+
"rules" : {
38+
"rule-empty-line-before": null,
39+
"block-no-empty": null,
40+
"at-rule-empty-line-before": null,
41+
"at-rule-no-unknown": null,
42+
"no-descending-specificity": null,
43+
"selector-class-pattern": null,
44+
"declaration-empty-line-before": null,
45+
"custom-property-empty-line-before": null,
46+
"comment-whitespace-inside": null,
47+
"comment-empty-line-before": null,
48+
"no-duplicate-selectors": null,
49+
"property-no-vendor-prefix": null,
50+
"max-nesting-depth": 2,
51+
"csstools/use-logical": true,
52+
"custom-rule/no-missing-parenthesis": true,
53+
"custom-rule/no-missing-var": true,
54+
"custom-rule/suit-naming-pattern": true,
55+
"custom-property-pattern": "^[a-zA-Z0-9]+(-[a-z0-9]([a-zA-Z0-9]+)?)+$",
56+
"alpha-value-notation": null,
57+
"color-function-notation": null,
58+
"import-notation": null,
59+
"no-empty-source": null,
60+
"property-no-unknown": true,
61+
"declaration-property-value-no-unknown": true,
62+
"value-keyword-case":null,
63+
"selector-not-notation":null
64+
}
65+
}
66+
```

0 commit comments

Comments
 (0)