Update Stylelint and Configs to Latest Versions

CHANGELOG.md

@@ -1,3 +1,9 @@
+# Unreleased
+
+- Updated `stylelint-config-suitcss` to v21
+- Updated `stylelint-config-standard-scss` to v13
+- Updated `stylelint` peer dependency to v16
+
 # 9.0.0 - 2023-09-19
 
 - Updated `stylelint-config-standard-scss` to v11

__tests__/cloudfour/cloudfour.test.mjs

@@ -0,0 +1,102 @@
+import { beforeEach, describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+
+import stylelint from 'stylelint';
+
+import config from '../../index.js';
+
+const validScss = readFileSync('./__tests__/cloudfour/valid.scss', 'utf-8');
+const invalidScss = readFileSync('./__tests__/cloudfour/invalid.scss', 'utf-8');
+
+describe('cloudfour test', () => {
+	describe('flags no warnings with valid css', () => {
+		let result;
+
+		beforeEach(async () => {
+			result = await stylelint.lint({
+				code: validScss,
+				config,
+			});
+		});
+
+		it('has no errors', () => {
+			assert.equal(result.errored, false);
+		});
+
+		it('flags no warnings', () => {
+			assert.equal(result.results[0].warnings.length, 0);
+		});
+
+		// Useful for logging when unexpected warning text is flagged.
+		it('no warning text', () => {
+			assert.deepEqual(
+				result.results[0].warnings.map((w) => w.text),
+				[],
+			);
+		});
+
+		// Useful for logging when unexpected rules are flagged.
+		it('no rules flagged', () => {
+			assert.deepEqual(
+				result.results[0].warnings.map((w) => w.rule),
+				[],
+			);
+		});
+	});
+
+	describe('flags warnings with invalid css', () => {
+		let result;
+
+		beforeEach(async () => {
+			result = await stylelint.lint({
+				code: invalidScss,
+				config,
+			});
+		});
+
+		it('includes an error', () => {
+			assert.equal(result.errored, true);
+		});
+
+		it('flags warnings', () => {
+			assert.equal(result.results[0].warnings.length, 4);
+		});
+
+		it('correct warning text', () => {
+			assert.deepEqual(
+				result.results[0].warnings.map((w) => w.text),
+				[
+					'Unnecessary nesting selector (&) (scss/selector-no-redundant-nesting-selector)',
+					'Prefer @use and @forward rather than @import.',
+					'Prefer @use and @forward rather than @import.',
+					'Unexpected unknown property "weight" (property-no-unknown)',
+				],
+			);
+		});
+
+		it('correct rule flagged', () => {
+			assert.deepEqual(
+				result.results[0].warnings.map((w) => w.rule),
+				[
+					'scss/selector-no-redundant-nesting-selector',
+					'at-rule-disallowed-list',
+					'at-rule-disallowed-list',
+					'property-no-unknown',
+				],
+			);
+		});
+
+		it('corrects severity flagged', () => {
+			assert.equal(result.results[0].warnings[0].severity, 'error');
+		});
+
+		it('corrects line number', () => {
+			assert.equal(result.results[0].warnings[0].line, 10);
+		});
+
+		it('corrects column number', () => {
+			assert.equal(result.results[0].warnings[0].column, 3);
+		});
+	});
+});

__tests__/engines.test.mjs

@@ -0,0 +1,26 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { execFileSync } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+
+const pkg = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'));
+
+describe('engines.node', () => {
+	it("is the same as stylelint's one", () => {
+		const stylelintVersion = pkg.peerDependencies.stylelint;
+		const nodeVersion = JSON.parse(
+			execFileSync('npm', [
+				'view',
+				'--json',
+				`stylelint@${stylelintVersion}`,
+				'engines.node',
+			]).toString(),
+		);
+
+		// `^x.y.z` range can return multiple versions.
+		const nodeVersions = Array.isArray(nodeVersion) ? [...new Set(nodeVersion)] : [nodeVersion];
+
+		assert.equal(nodeVersions.length, 1);
+		assert.ok(nodeVersions.includes(pkg.engines.node));
+	});
+});

__tests__/high-performance-animation/high-performance-animation.test.mjs

@@ -0,0 +1,92 @@
+import { beforeEach, describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+
+import stylelint from 'stylelint';
+
+import config from '../../index.js';
+
+const validCss = readFileSync('./__tests__/high-performance-animation/valid.css', 'utf-8');
+const invalidCss = readFileSync('./__tests__/high-performance-animation/invalid.css', 'utf-8');
+
+describe('stylelint-high-performance-animation', () => {
+	describe('flags no warnings with valid css', () => {
+		let result;
+
+		beforeEach(async () => {
+			result = await stylelint.lint({
+				code: validCss,
+				config,
+			});
+		});
+
+		it('has no errors', () => {
+			assert.equal(result.errored, false);
+		});
+
+		it('flags no warnings', () => {
+			assert.equal(result.results[0].warnings.length, 0);
+		});
+
+		// Useful for logging when unexpected warning text is flagged.
+		it('no warning text', () => {
+			assert.deepEqual(
+				result.results[0].warnings.map((w) => w.text),
+				[],
+			);
+		});
+
+		// Useful for logging when unexpected rules are flagged.
+		it('no rules flagged', () => {
+			assert.deepEqual(
+				result.results[0].warnings.map((w) => w.rule),
+				[],
+			);
+		});
+	});
+
+	describe('flags warnings with invalid css', () => {
+		let result;
+
+		beforeEach(async () => {
+			result = await stylelint.lint({
+				code: invalidCss,
+				config,
+			});
+		});
+
+		it('includes an error', () => {
+			assert.equal(result.errored, true);
+		});
+
+		it('flags one warning', () => {
+			assert.equal(result.results[0].warnings.length, 1);
+		});
+
+		it('corrects warning text', () => {
+			assert.equal(
+				result.results[0].warnings[0].text,
+				'Unexpected use of low performance transition property (margin-left). (plugin/no-low-performance-animation-properties)',
+			);
+		});
+
+		it('corrects rule flagged', () => {
+			assert.equal(
+				result.results[0].warnings[0].rule,
+				'plugin/no-low-performance-animation-properties',
+			);
+		});
+
+		it('corrects severity flagged', () => {
+			assert.equal(result.results[0].warnings[0].severity, 'error');
+		});
+
+		it('corrects line number', () => {
+			assert.equal(result.results[0].warnings[0].line, 2);
+		});
+
+		it('corrects column number', () => {
+			assert.equal(result.results[0].warnings[0].column, 15);
+		});
+	});
+});