Merge pull request #89 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,23 @@
+# 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
+   - Removed rules which are already configured by `stylint-config-scss-standard`
+   - Disabled deprecated rules `scss/at-import-no-partial-leading-underscore` and `scss/at-import-partial-extension-blacklist`
+- Updated dep: `stylelint-config-scss` from `11.0.0` to `14.0.0`. This introduces the following changes:
+    - Removed: Node.js less than 18.12.0 support.
+    - Changed: updated to stylelint-config-standard@36.0.0
+    - Changed: updated to stylelint-config-recommended-scss@14.1.0
+    - Changed: scss/dollar-variable-colon-space-after from always to always-single-line to be compatible with the default formatting of Prettier.
+- 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.1
 
 -   disable `media-query-no-invalid` rule.

README.md

@@ -22,16 +22,6 @@ npm install --save-dev @team23/stylelint-config-team23-scss
 npm install --save-dev @team23/stylelint-config-team23-scss@1.0.3
 ```
 
-or using github (deprecated):
-
-```bash
-# latest version
-npm install --save-dev github:team23/stylelint-config-team23-scss
-
-# specific version
-npm install --save-dev "github:team23/stylelint-config-team23-scss#v1.0.3"
-```
-
 ## Usage
 
 If you've installed `stylelint-config-team23-scss` locally within your project, just set your `stylelint` config to:
@@ -58,11 +48,11 @@ For example, to change the `at-rule-no-unknown` rule to use its `ignoreAtRules`
 
 ```json
 {
-  "extends": "@team23/stylelint-config-team23-scss",
-  "rules": {
-    "scss/at-extend-no-missing-placeholder": true,
-    # ...
-  }
+    "extends": "@team23/stylelint-config-team23-scss",
+     "rules": {
+         "scss/at-extend-no-missing-placeholder": true,
+         # ...
+     }
 }
 ```
 

__tests__/index.test.js

@@ -1,83 +1,66 @@
 '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__/valid.scss', 'utf-8');
-const invalidCss = fs.readFileSync('./__tests__/invalid.scss', 'utf-8');
+const validScss = fs.readFileSync('./__tests__/valid.scss', 'utf-8');
+const invalidScss = fs.readFileSync('./__tests__/invalid.scss', 'utf-8');
 
-describe('flags no warnings with valid css', () => {
+const expectedErrorRules = [
+    'scss/at-function-pattern',
+    'scss/at-mixin-pattern',
+    'scss/dollar-variable-pattern',
+    'scss/percent-placeholder-pattern',
+    'at-rule-empty-line-before',
+    'no-duplicate-selectors',
+];
+
+describe('flags no warnings with valid SCSS', () => {
     let result;
 
     beforeEach(() => {
         result = stylelint.lint({
-            code: validCss,
+            code: validScss,
             config,
         });
     });
 
-    it('did not error', async () => {
-        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', () => {
+describe('flags warnings with invalid SCSS', () => {
     let result;
 
     beforeEach(() => {
         result = stylelint.lint({
-            code: invalidCss,
+            code: invalidScss,
             config,
         });
     });
 
-    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(2));
-    });
-
-    it('correct warning text', () => {
-        return result.then(
-            (data) => (
-                expect(data.results[0].warnings[0].text).toBe('Unexpected unknown at-rule "@invalid" (scss/at-rule-no-unknown)'),
-                expect(data.results[0].warnings[1].text).toBe('Unexpected at-rule "debug" (at-rule-disallowed-list)')
-            ),
-        );
-    });
-
-    it('correct rule flagged', () => {
-        return result.then(
-            (data) => (
-                expect(data.results[0].warnings[0].rule).toBe('scss/at-rule-no-unknown'),
-                expect(data.results[0].warnings[1].rule).toBe('at-rule-disallowed-list')
-            ),
-        );
-    });
-
-    it('correct severity flagged', () => {
-        return result.then(
-            (data) => (
-                expect(data.results[0].warnings[0].severity).toBe('error'), expect(data.results[0].warnings[1].severity).toBe('error')
-            ),
-        );
-    });
-
-    it('correct line number', () => {
-        return result.then((data) => (expect(data.results[0].warnings[0].line).toBe(1), expect(data.results[0].warnings[1].line).toBe(3)));
-    });
+    it('should flag the correct number of errors', () => result.then(
+        data => {
+            const expectedErrorCount = expectedErrorRules.length;
+            const actualErrorCount = data.results[0].warnings.filter(w => w.severity === 'error').length;
+            expect(actualErrorCount).toBe(expectedErrorCount);
+        },
+    ));
 
-    it('correct column number', () => {
-        return result.then(
-            (data) => (expect(data.results[0].warnings[0].column).toBe(1), expect(data.results[0].warnings[1].column).toBe(1)),
-        );
+    it.each(expectedErrorRules)('should contain error for rule: "%s"', async rule => {
+        const _result = await result;
+        const rules = _result.results[0].warnings.map(warning => warning.rule);
+        expect(rules).toContain(rule);
     });
 });

__tests__/invalid.scss

@@ -1,3 +1,42 @@
-@invalid foo;
+// Invalid Annotations
+@unknown-annotation;
 
-@debug 'foo';
+// Invalid Variables
+$BaseColor: #333; // Violates variable naming pattern
+
+// Invalid Functions
+@function CalculateSpacing($Factor) { // Violates function naming pattern
+    @return $Factor * 1rem;
+}
+
+// Invalid Mixins
+@mixin FlexCenter() { // Violates mixin naming pattern
+    display: flex;
+}
+
+// Invalid Placeholders
+%block_Placeholder { // Violates placeholder naming pattern
+    color: $BaseColor;
+}
+
+// Invalid Nesting
+.block {
+    & & { // Redundant nesting
+        &__element {
+            font-size: 16px;
+        }
+    }
+}
+
+// Invalid @each Loop
+$map: (key1: value1, key2: value2);
+@each $key, $value in map-keys($map) { // Violates scss/at-each-key-value-single-line
+    .block {
+        content: $key $value;
+    }
+}
+
+// Invalid Global Function
+.block {
+    color: test($BaseColor, 10%); // Using a global function instead of a Sass module
+}

__tests__/valid.scss

@@ -1,10 +1,47 @@
-@import 'x.css';
+// Annotations
+@use 'sass:map';
 
-/*
-  annotation-no-unknown should allow scss !default annotation
- */
-$font-family-text: 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif !default;
+// Variables
+$base-color: #333;
+$header-background: #f5f5f5;
 
-@mixin foo() {
-    border: 0;
+// Functions
+@function calculate-spacing($factor) {
+    @return $factor * 1rem;
+}
+
+// Mixins
+@mixin flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+// Placeholders
+%block-placeholder {
+    color: $base-color;
+}
+
+// Block
+.block {
+    @extend %block-placeholder;
+
+    background-color: $header-background;
+
+    // Element
+    &__element {
+        padding: calculate-spacing(2);
+
+        // Modifier
+        &--active {
+            font-weight: bold;
+        }
+    }
+}
+
+// No redundant nesting
+.list {
+    li {
+        color: $base-color;
+    }
 }

eslint.config.js

@@ -0,0 +1,18 @@
+import { createJSEslintConfig } from '@team23/eslint-config-team23-standard';
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
+import path from 'node:path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const gitignorePath = path.resolve(__dirname, '.gitignore');
+
+export default [
+    includeIgnoreFile(gitignorePath),
+    ...createJSEslintConfig(),
+    {
+        rules: {
+            'no-magic-numbers': ['off'],
+        },
+    },
+];