v3 - Drop support for node 12, simplify recommended config in light o…

…f stylelint v15 deprecations (#286) * v3 changes - Drop support for node 12 - Run tests using stylelint v15 - Update recommended config to only enable the prettier/prettier rule. It is now up to consumers to enable stylelint-config-prettier if they desire as stylelint v15 deprecates all the rules that stylelint-config-prettier disabled - Tweak expected test output to account for error counts - Tweak e2e test config to account for changes in css-in-js behaviour * Update devDependencies * changelog
prettier · Feb 23, 2023 · 4149a0b · 4149a0b
1 parent 0200b6d
commit 4149a0b
Show file tree

Hide file tree

Showing 9 changed files with 1,315 additions and 1,332 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -1,26 +1,28 @@
 name: CI
 
 on:
+  pull_request: ~
   push:
-    branches: [master]
-  pull_request:
+    branches: [main]
 
 jobs:
   ci:
     name: 'Test: Node ${{ matrix.node-version }} - Stylelint ${{ matrix.stylelint-version }} - Prettier ${{ matrix.prettier-version }}'
     runs-on: ubuntu-latest
     strategy:
+      fail-fast: false
       matrix:
-        stylelint-version: [14.x]
-        node-version: [16.x, 14.x, 12.x]
+        stylelint-version: [14.x, 15.x]
+        node-version: [18.x, 16.x, 14.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
+          cache: yarn
 
       - name: Use Stylelint ${{ matrix.stylelint-version }}
         run: yarn upgrade stylelint@${{ matrix.stylelint-version }}

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## 3.0.0 (2023-02-22)
+
+Remove `stylelint-config-prettier` from the recommended config. [Stylelint v15 deprecated the rules that `stylelint-config-prettier` disabled](https://stylelint.io/migration-guide/to-15/#deprecated-stylistic-rules), thus if you do not use those deprecated rules then you do not need `stylelint-config-prettier`. If you are still using these deprecated rules then you should install and configure `stylelint-config-prettier` separatly.
+
+Increase the mimimum required node version. No code changes have been required and v2.0.0 works with stylelint v15, however continuing to test with the unsupported node 12 is a burden that is not worth carrying.
+
+- Minimum node requirement is now "^14.17.0 || >=16.0.0" (drop support for v12.x)
+- If you extended from the `stylelint-prettier/recommended` in v2 then you must add an explict extend from `stylelint-config-prettier` to retain the same behaviour.
+
 ## 2.0.0 (2021-11-05)
 
 Increase the minimum required versions of `stylelint`, `prettier` and `node`. No code changes have been required and v1.2.0 works with stylelint v14, however continuing to test old these old unsupported versions is getting more difficult thanks to internal API changes. (#198)

diff --git a/README.md b/README.md
@@ -49,33 +49,41 @@ Then, in your `.stylelintrc`:
 }
 ```
 
-## Recommended Configuration
+Alternatively you can extend from the `stylelint-prettier/recommended` config,
+which does the same thing:
 
-This plugin works best if you disable all other Stylelint rules relating to code formatting, and only enable rules that detect patterns in the AST. (If another active Stylelint rule disagrees with `prettier` about how code should be formatted, it will be impossible to avoid lint errors.) You can use [stylelint-config-prettier](https://github.com/prettier/stylelint-config-prettier) to disable all formatting-related Stylelint rules.
+```json
+{
+  "extends": ["stylelint-prettier/recommended"]
+}
+```
 
-If your desired formatting does not match the `prettier` output, you should use a different tool such as [prettier-stylelint](https://github.com/hugomrdias/prettier-stylelint) instead.
+## Disabling rules that may conflict with Prettier
 
-To integrate this plugin with `stylelint-config-prettier`, you can use the `"recommended"` configuration:
+As of Stylelint v15, [Stylelint deprecated all stylistic rules that conflict
+with prettier](https://stylelint.io/migration-guide/to-15/#deprecated-stylistic-rules).
+If you are using Stylelint v15 and are not using any of these deprecated rules then you do not need to do anything extra; this section does not apply to you.
 
-1.  In addition to the above installation instructions, install `stylelint-config-prettier`:
+If you are using Stylelint's stylistic rules, then many of them shall conflict with Prettier. This plugin works best if you disable all other Stylelint rules relating to stylistic opinions. If another active Stylelint rule disagrees with `prettier` about how code should be formatted, it will be impossible to avoid lint errors. You should use [stylelint-config-prettier](https://github.com/prettier/stylelint-config-prettier) to disable all stylistic Stylelint rules.
 
-    ```sh
-    npm install --save-dev stylelint-config-prettier
-    ```
+To integrate this plugin with `stylelint-config-prettier`:
 
-2.  Then replace the plugins and rules declarations in your `.stylelintrc` that you added in the prior section with:
+1. In addition to the above installation instructions, install `stylelint-config-prettier`:
 
-    ```json
-    {
-      "extends": ["stylelint-prettier/recommended"]
-    }
-    ```
+   ```sh
+   npm install --save-dev stylelint-config-prettier
+   ```
 
-This does three things:
+2. Then add `stylelint-config-prettier` to the list of extended configs in your `.stylelintrc` that you added in the prior section. `stylelint-config-prettier` should go last in the array so that it will override other configs:
 
-1.  Enables the `stylelint-plugin-prettier` plugin.
-2.  Enables the `prettier/prettier` rule.
-3.  Extends the `stylelint-config-prettier` configuration.
+   ```json
+   {
+     "extends": [
+       "stylelint-prettier/recommended"
+       "stylelint-config-prettier"
+     ]
+   }
+   ```
 
 You can then set Prettier's own options inside a `.prettierrc` file.
 

diff --git a/package.json b/package.json
@@ -36,27 +36,27 @@
     "stylelint": ">=14.0.0"
   },
   "devDependencies": {
-    "@stylelint/postcss-css-in-js": "^0.37.2",
-    "eslint": "^8.1.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^27.3.1",
-    "jest-preset-stylelint": "^4.2.0",
-    "postcss": "^8.3.11",
-    "postcss-html": "^1.2.0",
-    "postcss-markdown": "^1.1.0",
-    "postcss-scss": "^4.0.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jest": "^29.4.3",
+    "jest-preset-stylelint": "^6.1.0",
+    "postcss": "^8.4.21",
+    "postcss-html": "^1.5.0",
+    "postcss-markdown": "^1.2.0",
+    "postcss-scss": "^4.0.6",
+    "postcss-styled-syntax": "^0.3.3",
     "postcss-syntax": "^0.36.2",
-    "prettier": "^2.4.1",
-    "prettier-plugin-svelte": "^2.4.0",
+    "prettier": "^2.8.4",
+    "prettier-plugin-svelte": "^2.9.0",
     "strip-ansi": "^6.0.0",
-    "stylelint": "^14.0.0",
-    "stylelint-config-prettier": "^9.0.3",
-    "svelte": "^3.34.0"
+    "stylelint": "^15.0.0",
+    "svelte": "^3.55.0",
+    "typescript": "4.9.5"
   },
   "engines": {
-    "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+    "node": "^14.17.0 || >=16.0.0"
   },
   "jest": {
     "preset": "jest-preset-stylelint",
@@ -65,4 +65,4 @@
     ]
   },
   "license": "MIT"
-}
+}
diff --git a/recommended.js b/recommended.js
@@ -1,5 +1,4 @@
 module.exports = {
   plugins: ['.'],
-  extends: ['stylelint-config-prettier'],
   rules: {'prettier/prettier': true},
 };
diff --git a/test/fixtures/stylelint.config.js b/test/fixtures/stylelint.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: [`../..`],
-  extends: ['stylelint-config-prettier'],
   rules: {
     'prettier/prettier': [true, {singleQuote: true, trailingComma: 'all'}],
   },
@@ -11,7 +10,7 @@ module.exports = {
     },
     {
       "files": ["**/*.{js,jsx,tsx}"],
-      "customSyntax": "@stylelint/postcss-css-in-js",
+      "customSyntax": "postcss-styled-syntax",
     },
     {
       "files": ["**/*.{html,svelte,vue}"],

diff --git a/test/stylelint-prettier-e2e.test.js b/test/stylelint-prettier-e2e.test.js
@@ -15,9 +15,12 @@ describe('E2E Tests', () => {
     const expectedResult = `
 check.invalid.css
  2:25  ✖  Replace ""x"" with "'x'"  prettier/prettier
+
+1 problem (1 error, 0 warnings)
 `.trim();
 
     expect(result.output).toEqual(expectedResult);
+    expect(result.error).toEqual('');
     expect(result.status).toEqual(2);
   });
 
@@ -28,9 +31,12 @@ check.invalid.css
 check.invalid.scss
  2:25  ✖  Replace ""x"" with "'x'"  prettier/prettier
  8:14  ✖  Insert ","                prettier/prettier
+
+2 problems (2 errors, 0 warnings)
 `.trim();
 
     expect(result.output).toEqual(expectedResult);
+    expect(result.error).toEqual('');
     expect(result.status).toEqual(2);
   });
 
@@ -44,6 +50,7 @@ check.invalid.scss
     const expectedResult = ``;
 
     expect(result.output).toEqual(expectedResult);
+    expect(result.error).toEqual('');
     expect(result.status).toEqual(0);
   });
 
@@ -57,6 +64,7 @@ check.invalid.scss
     const expectedResult = ``;
 
     expect(result.output).toEqual(expectedResult);
+    expect(result.error).toEqual('');
     expect(result.status).toEqual(0);
   });
 });

diff --git a/test/stylelint-prettier.test.js b/test/stylelint-prettier.test.js
@@ -156,6 +156,7 @@ testRule({
 testRule({
   ruleName,
   config: true,
+  customSyntax: 'postcss',
   codeFilename: filename('default', 'dummy.wxss'),
   accept: [
     {