Merge pull request #84 from team23/dev/update-stylint-to-version-16

Update stylint to version 16

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,14 @@
+### Summary of Changes
+
+- Provide a brief overview of the changes made in this MR.
+- Include any relevant context or background information to help the reviewer understand the purpose and scope of the changes.
+
+### Open Todos
+
+- [ ] List any remaining tasks that need to be completed before this MR can be merged.
+- [ ] If there are no open tasks, please remove this section.
+
+### Additional Notes
+
+- Add any extra information that might be useful for the reviewer.
+- This could include potential impact, performance considerations, or references to related documentation or issues.

.github/workflows/publish.yml

@@ -15,13 +15,13 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [14.x, 16.x, 18.x]
+                node-version: [18.x, 20.x]
                 # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v4
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node-version }}
                   cache: 'npm'
@@ -32,12 +32,12 @@ jobs:
         runs-on: ubuntu-latest
         needs: test
         steps:
-            - uses: actions/checkout@v2
-            - uses: actions/setup-node@v2
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v3
               with:
-                  node-version: 14.x
+                  node-version: 20.x
             - run: npm ci
-            - uses: JS-DevTools/npm-publish@v1
+            - uses: JS-DevTools/npm-publish@v3
               with:
                   token: ${{ secrets.NPM_TOKEN }}
                   access: 'public'

.github/workflows/test.yml

@@ -14,13 +14,13 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [16.x, 18.x, 20.x]
+                node-version: [18.x, 20.x]
                 # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v4
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node-version }}
                   cache: 'npm'

.stylelintrc.js

@@ -1 +1 @@
-module.exports = require('./index.js');
+export { default } from './index.js';

CHANGELOG.md

@@ -1,3 +1,20 @@
+# 5.0.0
+
+- Removed: stylelint less than 16.12.0 from peer dependencies. This introduces the following changes:
+   - Only ESM syntax is now supported
+   - Removed: 76 rules deprecated in 15.0.0
+- Updated dep: `stylelint-config-standard` from `34.0.0` to `36.0.1`. This introduces the following changes:
+    - Removed: Node.js less than 18.12.0 support.
+    - Changed: updated to stylelint-config-recommended@14.0.0.
+    - Added: lightness-notation: "percentage" rule.
+- Other changes in project:
+    - Migrated eslint to latest with flat config setup and usage of eslint-config-team23-standard
+    - Removed prettier
+    - Updated .editorconfig to use official team23 .editorconfig
+    - Removed dependencies @stylelint/remark-preset, cz-conventional-changelog, husky, lint-staged, npm-run-all
+        and remark-cli
+    - Improved tests for stylint errors
+
 # 4.0.0
 
 -   Removed: `stylelint` less than `15.10.0` from peer dependencies. This introduces the following changes:

README.md

@@ -2,9 +2,10 @@
 
 > Standard CSS linting config for TEAM23
 
-Extends [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard), which is the default
-error checking plus a lot of style checking rules. The style checking rules are disabled by also extending [`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier). Our custom ruleset is defined in the
-[`index.js`](./index.js).
+Extends [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard), which is the default error checking plus a lot of style checking rules.
+The style checking rules are disabled by also extending [`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier).
+
+Our custom ruleset is defined in the [`index.js`](./index.js).
 
 ## See also
 
@@ -23,16 +24,6 @@ npm install --save-dev @team23/stylelint-config-team23-standard
 npm install --save-dev @team23/stylelint-config-team23-standard@1.0.5
 ```
 
-or using github (deprecated):
-
-```bash
-# latest version
-npm install --save-dev github:team23/stylelint-config-team23-standard
-
-# specific version
-npm install --save-dev "github:team23/stylelint-config-team23-standard#v1.0.5"
-```
-
 ## Usage
 
 If you've installed `stylelint-config-team23-standard` locally within your project, just set your stylelint config to:

__tests__/css-invalid.css

@@ -1,3 +1,89 @@
-.a .b .c .d .e .f .g .h {
-  margin: 0;
+/* Disallowed at-rule: @debug */
+@debug "This is a debug message"; /* Should trigger at-rule-disallowed-list */
+
+/* Root variables */
+:root {
+    --primary-color: #007bff !important; /* Should trigger declaration-no-important */
+    --secondary-color: #6c757d;
+    --font-family: 'Arial, sans-serif';
+}
+
+/* Block: Header with invalid class name (uppercase letter) */
+.Header { /* Should trigger selector-class-pattern */
+    background-color: var(--primary-color);
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: var(--font-family), serif !important; /* Should trigger declaration-no-important */
+}
+
+/* Element with invalid class name (camelCase) */
+.header__Logo { /* Should trigger selector-class-pattern */
+    width: 150px;
+}
+
+/* Selector with more than 3 compound selectors */
+.header__nav-link .icon .svg .path { /* Should trigger selector-max-compound-selectors */
+    fill: #fff;
+}
+
+/* Using ID selector, which is disallowed */
+#main-header { /* Should trigger selector-max-id */
+    background-color: var(--secondary-color);
+}
+
+/* Invalid use of !important */
+.form__input {
+    padding: 8px !important; /* Should trigger declaration-no-important */
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-family: var(--font-family), serif;
+}
+
+/* Exceeding max-nesting-depth (depth of 5) */
+.container {
+    .header {
+        .nav {
+            .item {
+                .link {
+                    color: blue; /* Should trigger max-nesting-depth */
+                }
+            }
+        }
+    }
+}
+
+/* Disallowed unknown function */
+.button {
+    background-color: darken(var(--primary-color), 10%); /* Should trigger function-no-unknown if 'darken' is not recognized */
+    color: #fff;
+}
+
+/* Using !important in a nested rule */
+.header__nav-link:hover {
+    text-decoration: underline !important; /* Should trigger declaration-no-important */
+}
+
+/* Selector with too many compound selectors */
+.footer .container .row .col .content { /* Should trigger selector-max-compound-selectors */
+    padding: 20px;
+}
+
+/* Using unknown at-rule */
+@custom-media --small-viewport (max-width: 768px); /* Should trigger at-rule-no-unknown */
+
+/* Selector with invalid characters */
+.header__nav@link { /* Should trigger selector-class-pattern */
+    color: #fff;
+}
+
+/* Multiple ID selectors */
+#header #nav { /* Should trigger selector-max-id */
+    display: flex;
+}
+
+/* Invalid class pattern with uppercase and special characters */
+.navBar__Item { /* Should trigger selector-class-pattern */
+    list-style: none;
 }

__tests__/css-valid.css

@@ -1 +1,57 @@
-@import 'x.css';
+/* Importing external styles */
+@import url('styles/reset.css');
+@import url('styles/typography.css');
+
+/* Root variables */
+:root {
+    --primary-color: #007bff;
+    --secondary-color: #6c757d;
+    --font-family: 'Arial, sans-serif';
+}
+
+/* Block: header */
+.header {
+    background-color: var(--primary-color);
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: var(--font-family), serif;
+}
+
+.header__logo {
+    width: 150px;
+}
+
+.header__nav-link {
+    color: #fff;
+    text-decoration: none;
+    transition: text-decoration 0.3s ease;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.form__input,
+.form__textarea,
+.form__select {
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-family: var(--font-family), serif;
+}
+
+/* Responsive Design */
+@media (width <= 768px) {
+    .header {
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .header__navigation {
+        flex-direction: column;
+        gap: 10px;
+    }
+}

__tests__/index.test.js

@@ -1,13 +1,32 @@
 'use strict';
 
 import { beforeEach, describe, expect, it } from 'vitest';
+import config from '../index.js';
 import fs from 'fs';
 import stylelint from 'stylelint';
 
-const config = require('../');
 const validCss = fs.readFileSync('./__tests__/css-valid.css', 'utf-8');
 const invalidCss = fs.readFileSync('./__tests__/css-invalid.css', 'utf-8');
 
+const expectedWarnings = [
+    'Unexpected at-rule "debug" (at-rule-disallowed-list)',
+    'Unexpected unknown at-rule "@debug" (at-rule-no-unknown)',
+    'Unexpected !important (declaration-no-important)',
+    'Unexpected !important (declaration-no-important)',
+    'Unexpected !important (declaration-no-important)',
+    'Unexpected !important (declaration-no-important)',
+    'Selector should be written in lowercase with hyphens or underscores (selector-class-pattern)',
+    'Selector should be written in lowercase with hyphens or underscores (selector-class-pattern)',
+    'Selector should be written in lowercase with hyphens or underscores (selector-class-pattern)',
+    'Selector should be written in lowercase with hyphens or underscores (selector-class-pattern)',
+    'Expected ".header__nav-link .icon .svg .path" to have no more than 3 compound selectors (selector-max-compound-selectors)',
+    'Expected ".item" to have no more than 3 compound selectors (selector-max-compound-selectors)',
+    'Expected ".link" to have no more than 3 compound selectors (selector-max-compound-selectors)',
+    'Expected ".footer .container .row .col .content" to have no more than 3 compound selectors (selector-max-compound-selectors)',
+    'Expected "#main-header" to have no more than 0 ID selectors (selector-max-id)',
+    'Expected "#header #nav" to have no more than 0 ID selectors (selector-max-id)',
+];
+
 describe('flags no warnings with valid css', () => {
     let result;
 
@@ -18,13 +37,13 @@ describe('flags no warnings with valid css', () => {
         });
     });
 
-    it('did not error', () => {
-        return result.then((data) => expect(data.errored).toBeFalsy());
-    });
+    it('did not error', () => result.then(
+        data => expect(data.errored).toBeFalsy(),
+    ));
 
-    it('flags no warnings', () => {
-        return result.then((data) => expect(data.results[0].warnings).toHaveLength(0));
-    });
+    it('flags no warnings', () => result.then(
+        data => expect(data.results[0].warnings).toHaveLength(0),
+    ));
 });
 
 describe('flags warnings with invalid css', () => {
@@ -37,35 +56,20 @@ describe('flags warnings with invalid css', () => {
         });
     });
 
-    it('did error', () => {
-        return result.then((data) => expect(data.errored).toBeTruthy());
-    });
+    it('should flag as errored', () => result.then(data => {
+        expect(data.errored).toBeTruthy();
+    }));
 
-    it('flags one warning', () => {
-        return result.then((data) => expect(data.results[0].warnings).toHaveLength(1));
-    });
-
-    it('correct warning text', () => {
-        return result.then((data) =>
-            expect(data.results[0].warnings[0].text).toBe(
-                'Expected ".a .b .c .d .e .f .g .h" to have no more than 3 compound selectors (selector-max-compound-selectors)',
-            ),
-        );
-    });
-
-    it('correct rule flagged', () => {
-        return result.then((data) => expect(data.results[0].warnings[0].rule).toBe('selector-max-compound-selectors'));
-    });
-
-    it('correct severity flagged', () => {
-        return result.then((data) => expect(data.results[0].warnings[0].severity).toBe('error'));
-    });
-
-    it('correct line number', () => {
-        return result.then((data) => expect(data.results[0].warnings[0].line).toBe(1));
-    });
+    it('should flag the correct number of warnings', () => result.then(
+        data => {
+            const expectedWarningCount = 16;
+            expect(data.results[0].warnings.length).toBe(expectedWarningCount);
+        },
+    ));
 
-    it('correct column number', () => {
-        return result.then((data) => expect(data.results[0].warnings[0].column).toBe(1));
+    it.each(expectedWarnings)('should contain warning: "%s"', async expectedWarning => {
+        const _result = await result;
+        const warnings = _result.results[0].warnings.map(warning => warning.text);
+        expect(warnings).toContain(expectedWarning);
     });
 });