chore: update ci tooling and docs to reflect change in linter

Author: castastrophe

.circleci/config.yml

@@ -217,7 +217,6 @@ jobs:
             - run:
                   name: Lint
                   command: yarn lint
-            - run: yarn analyze
             - run:
                   name: Are there changes?
                   command: git diff-files --exit-code

.gitignore

@@ -65,6 +65,7 @@ tools/**/*.test-vrt.ts
 # cache directories
 .wireit
 .eslintcache
+.stylelintcache
 
 stats.html
 

.husky/pre-commit

@@ -1,8 +1 @@
-#!/usr/bin/env bash
-bash << EOF
-    yarn lint-staged
-
-    VERSION_FILE=$(dirname "$0")/../tools/base/src/version.js
-    yarn genversion --es6 --semi $VERSION_FILE
-    git add $VERSION_FILE
-EOF
+yarn lint-staged --allow-empty

README.md

@@ -6,16 +6,16 @@ To this end, Spectrum Web Components only targets _modern_, evergreen browsers t
 
 # Requirements
 
--   NodeJS >= 20.0.0
--   Typescript
--   Supported desktop browsers:
-    -   Last 2 versions of Chrome
-    -   Last 2 versions of Firefox
-    -   Last 2 versions of Safari
-    -   Last 2 versions of Edge
--   Or appropriate [polyfills](https://github.com/webcomponents/webcomponentsjs) in older browsers.
--   We support all viewport sizes across supported desktop browsers.
--   While our components are designed to be responsive and mobile-friendly, we do not yet fully support mobile browsers due to limited testing in mobile hardware. We advise testing updates on mobile devices before updating and are happy to address any reported issues.
+- NodeJS >= 20.0.0
+- Typescript
+- Supported desktop browsers:
+    - Last 2 versions of Chrome
+    - Last 2 versions of Firefox
+    - Last 2 versions of Safari
+    - Last 2 versions of Edge
+- Or appropriate [polyfills](https://github.com/webcomponents/webcomponentsjs) in older browsers.
+- We support all viewport sizes across supported desktop browsers.
+- While our components are designed to be responsive and mobile-friendly, we do not yet fully support mobile browsers due to limited testing in mobile hardware. We advise testing updates on mobile devices before updating and are happy to address any reported issues.
 
 # Getting started
 
@@ -34,7 +34,7 @@ Typical development will involve running `yarn storybook`, `yarn test`, and `yar
 Creating a new component from the command line can be done by running the following:
 
 ```bash
-$ yarn new-package
+yarn new-package
 ```
 
 This will scaffold your component's required architecture by prompting you for 2 data points - the desired name for your package and the name of the Spectrum CSS asset from which you will be building.
@@ -81,8 +81,8 @@ yarn docs:build
 
 There are two mechanisms for broadly updating SWC's Spectrum CSS dependencies:
 
--   `yarn update:spectrum-css` brings all Spectrum CSS dependencies to 'latest'
--   `yarn update:spectrum-css:nonbreaking` brings them to the latest minor or patch version
+- `yarn update:spectrum-css` brings all Spectrum CSS dependencies to 'latest'
+- `yarn update:spectrum-css:nonbreaking` brings them to the latest minor or patch version
 
 We aim to keep Spectrum CSS as current as possible, to track the Spectrum design system closely.
 The `:nonbreaking` variant lets us release patch updates quickly in cases where more work is required to be compatible with 'latest.'
@@ -91,11 +91,10 @@ The `:nonbreaking` variant lets us release patch updates quickly in cases where
 
 There are several commands that can be useful in specific scenarios:
 
--   `yarn build:clear-cache` to remove previously created artifacts of the `tsc build` process.
--   `yarn spectrum-vars` to ensure that theme files are up-to-date.
--   `yarn process-icons` to make sure that the most recent icons are included.
--   `yarn process-spectrum` to process the spectrum CSS style sources into the individual packages.
--   `yarn build` to make sure the available JS has been built from the current TS source.
+- `yarn build:clear-cache` to remove previously created artifacts of the `tsc build` process.
+- `yarn process-icons` to make sure that the most recent icons are included.
+- `yarn process-spectrum` to process the spectrum CSS style sources into the individual packages.
+- `yarn build` to make sure the available JS has been built from the current TS source.
 
 ## Linting
 
@@ -179,23 +178,23 @@ This will run the defined [Tachometer](https://www.npmjs.com/package/tachometer)
 
 There is extended documentation on adding a new component to the library in the [documentation site](https://opensource.adobe.com/spectrum-web-components/guides/generating-components). However, at a high level, you will be building the following structure:
 
--   packages
-    -   new-component-name
-        -   src
-            -   index.ts
-            -   new-component-name.css
-            -   new-component-name.ts
-            -   spectrum-config.js
-            -   spectrum-new-component-name.css
-        -   stories
-            -   new-component-name.stories.ts
-        -   test
-            -   benchmark
-                -   test-basic.ts
-            -   new-component-name.test.ts
-        -   package.json
-        -   README.md
-        -   tsconfig.json
+- packages
+    - new-component-name
+        - src
+            - index.ts
+            - new-component-name.css
+            - new-component-name.ts
+            - spectrum-config.js
+            - spectrum-new-component-name.css
+        - stories
+            - new-component-name.stories.ts
+        - test
+            - benchmark
+                - test-basic.ts
+            - new-component-name.test.ts
+        - package.json
+        - README.md
+        - tsconfig.json
 
 For a list of component waiting to be implemented, visit our [`missing components`](https://github.com/adobe/spectrum-web-components/labels/missing%20components) tag.
 

lint-staged.config.js

@@ -11,19 +11,22 @@ governing permissions and limitations under the License.
 */
 
 export default {
-    '*': [
-        'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write',
-    ],
     '*.css': [
-        'stylelint --fix --cache --allow-empty-input --report-descriptionless-disables --report-invalid-scope-disables --report-needless-disables',
+        'stylelint --fix --cache --allow-empty-input',
+        'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write',
     ],
-    '{packages,tools}/**/*.ts': [
+    '*.ts': [
         'eslint --fix --format pretty --cache --no-error-on-unmatched-pattern --quiet',
+        'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write',
     ],
     '{packages,tools}/*/src/**/!(*.css).ts': ['yarn lit-analyzer'],
     'package.json': () => [
+        'genversion --es6 --semi tools/base/src/version.js',
         'yarn constraints --fix',
         'yarn install --refresh-lockfile',
-        'git add yarn.lock',
+        'git add tools/base/src/version.js yarn.lock',
+    ],
+    '!(*.css|*.ts)': [
+        'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write',
     ],
 };

package.json

@@ -36,12 +36,11 @@
         "docs:review": "alex packages/**/*.md",
         "docs:start": "yarn workspace documentation serve --watch",
         "find": "test -f custom-elements.json",
-        "format:css": "stylelint --fix --cache --allow-empty-input --report-descriptionless-disables --report-invalid-scope-disables --report-needless-disables {packages,tools}/**/*.css && prettier --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write --config .prettierrc {packages,tools}/**/*.css",
         "gen-react-wrapper": "node ./tasks/gen-react-wrapper.js",
         "icons": "wireit",
         "icons:ui": "wireit",
         "icons:workflow": "wireit",
-        "lint": "git status --porcelain && git add . && yarn lint-staged",
+        "lint": "git status --porcelain && git add . && lint-staged --allow-empty",
         "lint:versions": "node ./scripts/lint-versions.js",
         "new-package": "cd projects/templates && plop",
         "postcustom-element-json": "node ./tasks/run-check-cem.js",
@@ -85,7 +84,7 @@
         "test:watch:flags:focus": "yarn build && run-p build:watch \"test:start --watch --group {1} --config web-test-runner.config.ci-chromium-flags.js\" --",
         "test:watch:focus": "yarn build && run-p build:watch \"test:start --watch --group {1}\" --",
         "update:spectrum-css": "node ./scripts/update-spectrum-css.js --latest || yarn update:spectrum-css:cleanup",
-        "update:spectrum-css:cleanup": "yarn lint-staged && yarn --ignore-scripts && yarn process-spectrum",
+        "update:spectrum-css:cleanup": "yarn --ignore-scripts && yarn process-spectrum && yarn lint",
         "update:spectrum-css:nonbreaking": "node ./scripts/update-spectrum-css.js || yarn update:spectrum-css:cleanup",
         "verify-build-artifacts": "node ./scripts/verify-build-artifacts.js",
         "vrt:preview": "yarn wds --config test/visual/wds-vrt.config.js",
@@ -316,7 +315,7 @@
             ]
         },
         "icons": {
-            "command": "node ./scripts/process-icons.js && git status --porcelain && git add . && yarn lint-staged",
+            "command": "node ./scripts/process-icons.js && yarn lint",
             "files": [
                 "scripts/process-icons.js"
             ],
@@ -381,7 +380,7 @@
             ]
         },
         "process-spectrum": {
-            "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn format:css",
+            "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint",
             "files": [
                 "tasks/process-spectrum.js",
                 "packages/**/spectrum-config.js",

tools/styles/express/spectrum-core-global.css

@@ -390,24 +390,24 @@
     --spectrum-global-color-static-transparent-black-900: rgb(
         var(--spectrum-global-color-static-transparent-black-900-rgb)
     );
-    --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7,
-        #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d,
-        #1a4b83, #1a3979, #1a266f, #191264, #180057;
-    --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95,
-        #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a,
-        #196b47, #105c45, #094d41, #033f3e, #00313a;
-    --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb,
-        #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83,
-        #71167c, #560f74, #370b6e, #000968;
-    --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b,
-        #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be,
-        #3ea8a6, #208288, #076769, #00494b, #002c2d;
-    --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747,
-        #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9,
-        #397aa8, #1c5796, #163771, #10194d;
-    --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945,
-        #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb,
-        #2f74b3, #265191, #163670, #0b194c;
+    --spectrum-global-color-sequential-cerulean:
+        #e9fff1, #c8f1e4, #a5e3d7, #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac,
+        #2280a2, #1f6d98, #1d5c8d, #1a4b83, #1a3979, #1a266f, #191264, #180057;
+    --spectrum-global-color-sequential-forest:
+        #ffffdf, #e2f6ba, #c4eb95, #a4e16d, #8dd366, #77c460, #5fb65a, #48a754,
+        #36984f, #2c894d, #237a4a, #196b47, #105c45, #094d41, #033f3e, #00313a;
+    --spectrum-global-color-sequential-rose:
+        #fff4dd, #ffddd7, #ffc5d2, #feaecb, #fa96c4, #f57ebd, #ef64b5, #e846ad,
+        #d238a1, #bb2e96, #a3248c, #8a1b83, #71167c, #560f74, #370b6e, #000968;
+    --spectrum-global-color-diverging-orange-yellow-seafoam:
+        #580000, #79260b, #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0,
+        #bbe4d1, #76c7be, #3ea8a6, #208288, #076769, #00494b, #002c2d;
+    --spectrum-global-color-diverging-red-yellow-blue:
+        #4a001e, #751232, #a52747, #c65154, #e47961, #f0a882, #fad4ac, #ffffe0,
+        #bce2cf, #89c0c4, #579eb9, #397aa8, #1c5796, #163771, #10194d;
+    --spectrum-global-color-diverging-red-blue:
+        #4a001e, #731331, #9f2945, #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff,
+        #c6d0f2, #92b2de, #5d94cb, #2f74b3, #265191, #163670, #0b194c;
     --spectrum-semantic-cta-background-color-default: var(
         --spectrum-global-color-static-indigo-600
     );
@@ -723,11 +723,11 @@
     --spectrum-global-dimension-static-font-size-800: 32px;
     --spectrum-global-dimension-static-font-size-900: 36px;
     --spectrum-global-dimension-static-font-size-1000: 40px;
-    --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro',
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
-        'Trebuchet MS', 'Lucida Grande', sans-serif;
-    --spectrum-global-font-family-serif: adobe-clean-serif, 'Source Serif Pro',
-        Georgia, serif;
+    --spectrum-global-font-family-base:
+        adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+        'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
+    --spectrum-global-font-family-serif:
+        adobe-clean-serif, 'Source Serif Pro', Georgia, serif;
     --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace;
     --spectrum-global-font-weight-thin: 100;
     --spectrum-global-font-weight-ultra-light: 200;
@@ -750,26 +750,32 @@
     --spectrum-global-font-multiplier-0: 0em;
     --spectrum-global-font-multiplier-25: 0.25em;
     --spectrum-global-font-multiplier-75: 0.75em;
-    --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean,
-        'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-        Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
-    --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean,
-        'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-        Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
-    --spectrum-global-font-font-family-zh: adobe-clean-han-traditional,
-        source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif';
-    --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c,
-        source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif';
-    --spectrum-global-font-font-family-ko: adobe-clean-han-korean,
-        source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif';
-    --spectrum-global-font-font-family-ja: adobe-clean-han-japanese,
-        'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Osaka', YuGothic,
-        'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic',
-        'sans-serif';
-    --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional,
-        source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean,
-        'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-        Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
+    --spectrum-global-font-font-family-ar:
+        myriad-arabic, adobe-clean, 'Source Sans Pro', -apple-system,
+        BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS',
+        'Lucida Grande', sans-serif;
+    --spectrum-global-font-font-family-he:
+        myriad-hebrew, adobe-clean, 'Source Sans Pro', -apple-system,
+        BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS',
+        'Lucida Grande', sans-serif;
+    --spectrum-global-font-font-family-zh:
+        adobe-clean-han-traditional, source-han-traditional, 'MingLiu',
+        'Heiti TC Light', 'sans-serif';
+    --spectrum-global-font-font-family-zhhans:
+        adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun',
+        'Heiti SC Light', 'sans-serif';
+    --spectrum-global-font-font-family-ko:
+        adobe-clean-han-korean, source-han-korean, 'Malgun Gothic',
+        'Apple Gothic', 'sans-serif';
+    --spectrum-global-font-font-family-ja:
+        adobe-clean-han-japanese, 'Hiragino Kaku Gothic ProN',
+        'ヒラギノ角ゴ ProN W3', 'Osaka', YuGothic, 'Yu Gothic', 'メイリオ',
+        Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
+    --spectrum-global-font-font-family-condensed:
+        adobe-clean-han-traditional, source-han-traditional, 'MingLiu',
+        'Heiti TC Light', adobe-clean, 'Source Sans Pro', -apple-system,
+        BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS',
+        'Lucida Grande', sans-serif;
     --spectrum-alias-border-size-thin: var(
         --spectrum-global-dimension-static-size-10
     );