feat!: Upgrade to Stylelint 14 🎉 (#254)

* feat!: Upgrade to Stylelint 14 🎉 Closes #233 - Stylelint dependency changed to point to v14 branch on GitHub (Will need to be changed to the packaged version once Stylelint 14 is published to npm.) - Default values for `validate` and `snippet` options set to `['css', 'postcss']` - Removed `syntax` option - Removed `configOverrides` option - Documented changes and provided migration path in readme - Made appropriate changes in tests - Removed tests for removed features * fix: fix links to sections in readme * docs: various improvements to readme * fix: fix section link in readme * docs: updates suggested by @jeddy3 * test: remove html and markdown tests TODO: Restore once postcss-html and postcss-markdown are PostCSS 8 compatible. re: #254 (comment)
stylelint · Oct 10, 2021 · a4e0454 · a4e0454
1 parent 82a8a90
commit a4e0454
Show file tree

Hide file tree

Showing 21 changed files with 581 additions and 1,895 deletions.
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -62,35 +62,11 @@
           "default": "",
           "description": "Path to a JSON, YAML, or JS file that contains your configuration object. Use this option if you don't want stylelint to search for a configuration file."
         },
-        "stylelint.configOverrides": {
-          "type": [
-            "object",
-            "null"
-          ],
-          "default": null,
-          "description": "A partial stylelint config whose properties override the existing ones."
-        },
         "stylelint.configBasedir": {
           "type": "string",
           "default": "",
           "description": "A path to the directory that relative paths defining \"extends\" and \"plugins\" are relative to."
         },
-        "stylelint.syntax": {
-          "type": "string",
-          "default": "",
-          "enum": [
-            "css",
-            "css-in-js",
-            "html",
-            "less",
-            "markdown",
-            "sass",
-            "scss",
-            "sugarss",
-            ""
-          ],
-          "description": "Specify a syntax. Only use this option if you want to force a specific syntax."
-        },
         "stylelint.customSyntax": {
           "type": "string",
           "default": "",
@@ -135,26 +111,7 @@
           },
           "default": [
             "css",
-            "html",
-            "javascript",
-            "javascriptreact",
-            "less",
-            "markdown",
-            "postcss",
-            "sass",
-            "scss",
-            "source.css.styled",
-            "source.markdown.math",
-            "styled-css",
-            "sugarss",
-            "svelte",
-            "typescript",
-            "typescriptreact",
-            "vue",
-            "vue-html",
-            "vue-postcss",
-            "xml",
-            "xsl"
+            "postcss"
           ],
           "description": "An array of language ids which should be validated by stylelint."
         },
@@ -166,9 +123,7 @@
           },
           "default": [
             "css",
-            "less",
-            "postcss",
-            "scss"
+            "postcss"
           ],
           "description": "An array of language ids which snippets are provided by stylelint."
         }
@@ -208,6 +163,7 @@
     "vscode-uri": "^3.0.2"
   },
   "devDependencies": {
+    "@stylelint/postcss-css-in-js": "^0.37.2",
     "@stylelint/prettier-config": "^2.0.0",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.0.1",
@@ -224,9 +180,11 @@
     "jest-runner-vscode": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "p-wait-for": "^3.1.0",
+    "postcss": "^8.3.9",
     "postcss-sass": "^0.5.0",
+    "postcss-scss": "^4.0.1",
     "prettier": "^2.3.0",
-    "stylelint": "^13.13.1",
+    "stylelint": "git+https://git@github.com/stylelint/stylelint#v14",
     "stylelint-processor-glamorous": "^0.3.0",
     "stylelint-processor-styled-components": "^1.10.0",
     "typescript": "^4.4.3",

diff --git a/scripts/stylelint-types.js b/scripts/stylelint-types.js
@@ -47,12 +47,32 @@ const checkTypesVersion = async () => {
 	}
 };
 
+/**
+ * Gets the GitHub tag/commit for the given version of Stylelint.
+ * @param {string} lockfileVersion The version of stylelint from the package-lock.json file.
+ * @returns {string}
+ */
+const getTypesTagOrCommitHash = (lockfileVersion) => {
+	if (lockfileVersion.startsWith('git+')) {
+		const match = lockfileVersion.match(/#(.+)$/);
+
+		if (!match || !match[1]) {
+			throw new Error(`Could not find commit hash for ${lockfileVersion}`);
+		}
+
+		return match[1];
+	}
+
+	return lockfileVersion;
+};
+
 /**
  * Downloads the stylelint types file for the currently installed version of Stylelint.
  * @returns {Promise<void>}
  */
 const downloadTypes = async () => {
-	const typesURL = `https://raw.githubusercontent.com/stylelint/stylelint/${version}/types/stylelint/index.d.ts`;
+	const repoVersion = getTypesTagOrCommitHash(version);
+	const typesURL = `https://raw.githubusercontent.com/stylelint/stylelint/${repoVersion}/types/stylelint/index.d.ts`;
 
 	await fs.ensureDir(typesDir);
 

diff --git a/src/server.js b/src/server.js
@@ -51,14 +51,10 @@ const StylelintSourceFixAll = `${CodeActionKind.SourceFixAll}.stylelint`;
 let config;
 /** @type {string} */
 let configFile;
-/** @type {StylelintConfiguration} */
-let configOverrides;
 /** @type {string} */
 let configBasedir;
 /** @type {PackageManager} */
 let packageManager;
-/** @type { "css-in-js" | "html" | "less" | "markdown" | "sass" | "scss" | "sugarss" | undefined } */
-let syntax;
 /** @type {string} */
 let customSyntax;
 /** @type {boolean} */
@@ -110,10 +106,6 @@ async function buildStylelintOptions(document, baseOptions = {}) {
 			: configFile;
 	}
 
-	if (configOverrides) {
-		options.configOverrides = configOverrides;
-	}
-
 	if (ignoreDisables) {
 		options.ignoreDisables = ignoreDisables;
 	}
@@ -126,10 +118,6 @@ async function buildStylelintOptions(document, baseOptions = {}) {
 		options.reportInvalidScopeDisables = reportInvalidScopeDisables;
 	}
 
-	if (syntax) {
-		options.syntax = syntax;
-	}
-
 	if (customSyntax) {
 		options.customSyntax = workspaceFolder
 			? customSyntax.replace(/\$\{workspaceFolder\}/gu, workspaceFolder)
@@ -375,10 +363,8 @@ connection.onDidChangeConfiguration(({ settings }) => {
 	const oldValidateLanguages = validateLanguages || [];
 
 	config = settings.stylelint.config;
-	configOverrides = settings.stylelint.configOverrides;
 	configFile = settings.stylelint.configFile;
 	configBasedir = settings.stylelint.configBasedir;
-	syntax = settings.stylelint.syntax || undefined;
 	customSyntax = settings.stylelint.customSyntax;
 	ignoreDisables = settings.stylelint.ignoreDisables;
 	reportNeedlessDisables = settings.stylelint.reportNeedlessDisables;

diff --git a/src/stylelint-vscode.js b/src/stylelint-vscode.js
@@ -23,7 +23,6 @@ const stylelintWarningToVscodeDiagnostic = require('./warnings-to-diagnostics');
  * @property {({ diagnostic: Diagnostic, range: DisableReportRange })[]} [invalidScopeDisables]
  * @typedef { import('stylelint').StylelintStandaloneOptions } BaseStylelintLinterOptions
  * @typedef { Partial<BaseStylelintLinterOptions> } StylelintLinterOptions
- * @typedef { "css-in-js" | "html"  | "less"  | "markdown"  | "sass"   | "scss" | "sugarss" } SyntaxType
  * @typedef { {unusedRule:string,start:number,end:?number} } DisableReportRange
  * @typedef { { source?: string, ranges: DisableReportRange[] } } StylelintDisableReportEntry
  * @typedef { import('./warnings-to-diagnostics').RuleDocUrlProvider } RuleDocUrlProvider
@@ -40,41 +39,6 @@ class InvalidOptionError extends Error {
 	}
 }
 
-// https://github.com/stylelint/stylelint/blob/12.0.1/lib/getPostcssResult.js#L82-L88
-/** @type {Set<SyntaxType> } */
-const SUPPORTED_SYNTAXES = new Set([
-	'css-in-js',
-	'html',
-	'less',
-	'markdown',
-	'sass',
-	'scss',
-	'sugarss',
-]);
-
-/** @type {Map<string, SyntaxType> } */
-const LANGUAGE_EXTENSION_EXCEPTION_PAIRS = new Map([
-	['javascript', 'css-in-js'],
-	['javascriptreact', 'css-in-js'],
-	['source.css.styled', 'css-in-js'],
-	['source.markdown.math', 'markdown'],
-	['styled-css', 'css-in-js'],
-	['svelte', 'html'],
-	['typescript', 'css-in-js'],
-	['typescriptreact', 'css-in-js'],
-	['vue-html', 'html'],
-	['xml', 'html'],
-	['xsl', 'html'],
-]);
-
-/**
- * @param {string} lang
- * @returns {lang is SyntaxType}
- */
-function isSupportedSyntax(lang) {
-	return SUPPORTED_SYNTAXES.has(/** @type {SyntaxType} */ (lang));
-}
-
 /**
  * @param {import('stylelint').StylelintStandaloneReturnValue} resultContainer
  * @param {TextDocument} textDocument
@@ -186,22 +150,8 @@ module.exports = async function stylelintVSCode(textDocument, options = {}, serv
 
 	if (codeFilename) {
 		priorOptions.codeFilename = codeFilename;
-	} else {
-		if (!has(options, 'syntax')) {
-			if (isSupportedSyntax(textDocument.languageId)) {
-				priorOptions.syntax = textDocument.languageId;
-			} else {
-				const syntax = LANGUAGE_EXTENSION_EXCEPTION_PAIRS.get(textDocument.languageId);
-
-				if (syntax) {
-					priorOptions.syntax = syntax;
-				}
-			}
-		}
-
-		if (!at(options, 'config.rules')[0]) {
-			priorOptions.config = { rules: {} };
-		}
+	} else if (!at(options, 'config.rules')[0]) {
+		priorOptions.config = { rules: {} };
 	}
 
 	const stylelint = await resolveStylelint({ ...serverOptions, textDocument });

diff --git a/test/lib/stylelint-vscode/__snapshots__/test.js.snap b/test/lib/stylelint-vscode/__snapshots__/test.js.snap
@@ -88,11 +88,11 @@ Array [
     "range": Object {
       "end": Object {
         "character": 10,
-        "line": 5,
+        "line": 0,
       },
       "start": Object {
         "character": 10,
-        "line": 5,
+        "line": 0,
       },
     },
     "severity": 1,
@@ -129,11 +129,11 @@ Array [
     "message": "At-rule without name (CssSyntaxError)",
     "range": Object {
       "end": Object {
-        "character": 7,
+        "character": 0,
         "line": 0,
       },
       "start": Object {
-        "character": 7,
+        "character": 0,
         "line": 0,
       },
     },
@@ -169,7 +169,7 @@ Array [
 ]
 `;
 
-exports[`stylelintVSCode() should support CSS-in-JS 1`] = `
+exports[`stylelintVSCode() should support CSS-in-JS with customSyntax 1`] = `
 Array [
   Object {
     "code": "font-weight-notation",

diff --git a/test/lib/stylelint-vscode/no-unknown.config.js b/test/lib/stylelint-vscode/no-unknown.config.js
@@ -0,0 +1,11 @@
+'use strict';
+
+const baseConfig = require('./stylelint.config');
+
+module.exports = {
+	...baseConfig,
+	rules: {
+		...baseConfig.rules,
+		'property-no-unknown': [true, { ignoreProperties: 'what' }],
+	},
+};