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

.prettierrc.yaml

@@ -7,6 +7,6 @@ bracketSpacing: true
 arrowParens: always
 htmlWhitespaceSensitivity: ignore
 overrides:
-    - files: '{tools,packages}/*/src/spectrum-*.css'
+    - files: '{tools,packages}/*/src/*.css'
       options:
           printWidth: 500

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',
+        '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',
     ],
+    '!(*.css|*.ts)': [
+        'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write',
+    ],
 };

package.json

@@ -36,7 +36,6 @@
         "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",
@@ -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",
@@ -314,7 +313,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"
             ],
@@ -379,7 +378,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",