[Enhance] | make eslint default extention and render extendible 'styl…

…elint' via file precision (#28)

.github/workflows/publish.yml

@@ -12,6 +12,10 @@ jobs:
           node-version: "20.x"
           registry-url: "https://registry.npmjs.org"
       - run: npm ci
-      - run: npm publish
+      - name: Test rules
+        run: npm run test
+
+      - name: Publish to npm
+        run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,15 @@
+name: CI
+on:
+  push:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+      - run: npm ci
+      - name: Test linters
+        run: npm run test

.stylelintignore

@@ -15,4 +15,5 @@ Dockerfile
 *.ico
 !.prettierrc.js
 */env.d.ts
-eslint.config.mjs
+eslint.config.mjs
+**/*.js

.stylelintrc.js

@@ -0,0 +1,3 @@
+export default {
+  extends: "./stylelint/index.js",
+};

README.md

@@ -1,6 +1,9 @@
 # eslint-config-epsvue
 
-![NPM Version](https://img.shields.io/npm/v/eslint-config-epsvue) ![NPM Downloads](https://img.shields.io/npm/dm/eslint-config-epsvue)
+ [![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com)
+
+![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/eslint-config-epsvue)
+ ![NPM Version](https://img.shields.io/npm/v/eslint-config-epsvue) ![NPM Downloads](https://img.shields.io/npm/dm/eslint-config-epsvue) ![NPM Downloads](https://img.shields.io/npm/dw/eslint-config-epsvue) ![GA CI](https://github.com/IT-WIBRC/eslint-config-epsvue/actions/workflows/test.yml/badge.svg)
 
 These are my settings for ESLint, Prettier and Stylelint that you can use for Vuejs app
 
@@ -13,6 +16,9 @@ This version `1.1.0` use `eslint version >= 9.0.0`, this support only the nodejs
 > [!WARNING]  
 > Make sure you upgrade to at least `Node.js v18.18.0` when using `ESLint v9.0.0`. One important thing to double check is the Node.js version supported by your editor when using ESLint via editor integrations. If you are unable to upgrade, we recommend continuing to use ESLint v8.56.0 until you are able to upgrade Node.js. You can read it on the [eslint's official documentation](https://eslint.org/docs/latest/use/migrate-to-9.0.0#drop-old-node)
 
+>[!NOTE]
+>The current version doesn't support the legacy .eslintrc* configuration format. If ?you want to use this format, feel free to install this version [v1.0.4](https://www.npmjs.com/package/eslint-config-epsvue/v/1.0.4)
+
 And you need to note that:
 
 > [!NOTE]  
@@ -32,7 +38,7 @@ It's recommended you install this once per every project. ESLint used to have gl
 1. Installation
 
    ```bash
-     npm install -D eslint-config-epsvue@1.2.1
+     npm install -D eslint-config-epsvue
    ```
 
 2. Extend the eslint configuration
@@ -47,19 +53,19 @@ It's recommended you install this once per every project. ESLint used to have gl
 
 3. Extend the stylelint configuration by adding this in the `package.json`
 
-    ```json
-    "stylelint": {
-        "extends": ["eslint-config-epsvue/.stylelintrc.json"]
-      }
-    ```
+   ```json
+   "stylelint": {
+       "extends": ["eslint-config-epsvue/stylelint"]
+     }
+   ```
 
-    You can also extends it in your own `.styelintrc.json` file
+   You can also extends it in your own `.styelintrc.json` file
 
-    ```json
-      {
-        "extends": ["eslint-config-epsvue/.stylelintrc.json"]
-      }
-    ```
+   ```json
+   {
+     "extends": ["eslint-config-epsvue/stylelint"]
+   }
+   ```
 
 4. You can add two scripts to your package.json to lint, lint fix, format and style css:
 
@@ -68,7 +74,7 @@ It's recommended you install this once per every project. ESLint used to have gl
       "lint": "eslint .", // Detect errors
       "lint:fix": "eslint src/ --fix", //fix all resolvable eslint problems found starting from the base directory
       "format": "prettier src/ -w", // format code starting from the base directory
-      "stylelint": "stylelint '**/*.{css,vue,scss}'",
+      "stylelint": "stylelint --aei '**/*.{css,vue,scss}'",
     },
    ```
 
@@ -111,19 +117,19 @@ import pluginEpsVue from "eslint-plugin-epsvue";
 export default [
   ...pluginEpsVue,
   {
-    "rules": {
-      ... any eslint rules here
+    rules: {
+      //... any eslint rules here
       "no-console": 2,
       "prettier/prettier": [
-       "error",
-       {
-         "singleQuote": true,
-         "endOfLine": "auto",
-         "tabWidth": 4
-       },
-     ],
-    }
-  }
+        "error",
+        {
+          singleQuote: true,
+          endOfLine: "auto",
+          tabWidth: 4,
+        },
+      ],
+    },
+  },
 ];
 ```
 

__tests__/stylelint/TheInvalid.vue

@@ -0,0 +1,5 @@
+<style>
+tag {
+  color: #0000;
+}
+</style>

__tests__/stylelint/TheValid.vue

@@ -0,0 +1,14 @@
+<style scoped>
+a {
+  color: v-bind(color);
+}
+
+:global(.foo),
+::v-deep(.foo),
+::v-slotted(.foo),
+::v-global(.foo),
+:deep(.foo),
+:slotted(.foo) {
+  color: red;
+}
+</style>

__tests__/stylelint/importedCss.css

@@ -0,0 +1,3 @@
+p {
+  text-align: center;
+}

__tests__/stylelint/index.test.mjs

@@ -0,0 +1,164 @@
+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 "../../stylelint/index.js";
+
+describe("With css file", () => {
+  const validCss = readFileSync("./__tests__/stylelint/validCss.css", "utf-8");
+  const invalidCss = readFileSync(
+    "./__tests__/stylelint/invalidCss.css",
+    "utf-8",
+  );
+
+  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);
+    });
+  });
+
+  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 unknown type selector "madeup" (selector-type-no-unknown)',
+      );
+    });
+
+    it("corrects rule flagged", () => {
+      assert.equal(
+        result.results[0].warnings[0].rule,
+        "selector-type-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, 1);
+    });
+
+    it("corrects column number", () => {
+      assert.equal(result.results[0].warnings[0].column, 1);
+    });
+  });
+});
+
+describe("With css inside vue file", () => {
+  const validVueCss = readFileSync(
+    "./__tests__/stylelint/TheValid.vue",
+    "utf-8",
+  );
+  const invalidVueCss = readFileSync("./__tests__/stylelint/TheInvalid.vue", "utf-8");
+
+  describe("flags no warnings with valid css", () => {
+    let result;
+
+    beforeEach(async () => {
+      result = await stylelint.lint({
+        code: validVueCss,
+        config,
+      });
+    });
+
+
+    it("flags one warnings", () => {
+      assert.equal(result.results[0].warnings.length, 1);
+      assert.equal(result.results[0].warnings[0].rule, "CssSyntaxError");
+      assert.equal(result.results[0].warnings[0].text, "Unknown word (CssSyntaxError)");
+    });
+  });
+
+  describe("flags warnings with invalid css", () => {
+    let result;
+
+    beforeEach(async () => {
+      result = await stylelint.lint({
+        code: invalidVueCss,
+        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", () => {
+      console.log(result.results[0].warnings[0].text);
+      assert.equal(
+        result.results[0].warnings[0].text,
+        "Unknown word (CssSyntaxError)",
+      );
+    });
+
+    it("corrects rule flagged", () => {
+      assert.equal(result.results[0].warnings[0].rule, "CssSyntaxError");
+    });
+
+    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, 5);
+    });
+
+    it("corrects column number", () => {
+      assert.equal(result.results[0].warnings[0].column, 1);
+    });
+  });
+});
+
+describe("deprecated rules are excluded", () => {
+  const ruleNames = Object.keys(config.rules);
+
+  it("is not empty", () => {
+    assert.ok(ruleNames.length > 0);
+  });
+
+  for (const ruleName of ruleNames) {
+    it(`${ruleName}`, async () => {
+      const rule = await stylelint.rules[ruleName];
+
+      assert.ok(!rule.meta.deprecated);
+    });
+  }
+});

__tests__/stylelint/invalidCss.css

@@ -0,0 +1,3 @@
+madeup {
+  top: 0;
+}

__tests__/stylelint/validCss.css

@@ -0,0 +1,10 @@
+@import url("./importedCss.css");
+
+.selector-1,
+.selector-2,
+.selector-3[type="text"] {
+  background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
+  box-sizing: border-box;
+  display: block;
+  color: #333;
+}