[Experiment] Convert to Stylelint V16 (#28)

.eslintrc.json

@@ -7,7 +7,8 @@
   "extends": "eslint:recommended",
   "overrides": [],
   "parserOptions": {
-    "ecmaVersion": "latest"
+    "ecmaVersion": "latest",
+    "sourceType": "module"
   },
   "rules": {}
 }

README.md

@@ -8,6 +8,12 @@ A Stylelint plugin to enforce defensive CSS best practices.
 
 > [Read more about Defensive CSS](https://defensivecss.dev/)
 
+## 🚀 Version 1.0.0
+
+With the release of version 1.0.0 of the plugin, we now support Stylelint 16.
+
+---
+
 ## Getting Started
 
 > Before getting started with the plugin, you must first have

commitlint.config.js

@@ -1 +1 @@
-module.exports = { extends: ['@commitlint/config-conventional'] };
+export default { extends: ['@commitlint/config-conventional'] };

jest.config.js

@@ -1,7 +1,8 @@
-module.exports = {
-  preset: 'jest-preset-stylelint',
+export default {
   clearMocks: true,
+  preset: 'jest-preset-stylelint',
+  roots: ['src'],
+  runner: 'jest-light-runner',
   setupFiles: ['./jest.setup.js'],
   testEnvironment: 'node',
-  roots: ['src'],
 };

jest.setup.js

@@ -1,6 +1,4 @@
-'use strict';
-
-const { getTestRule } = require('jest-preset-stylelint');
+import { getTestRule } from 'jest-preset-stylelint';
 
 global.testRule = getTestRule({
   plugins: ['./src'],

package.json

@@ -1,15 +1,19 @@
 {
   "name": "stylelint-plugin-defensive-css",
-  "version": "0.10.4",
+  "version": "1.0.0",
   "description": "A Stylelint plugin to enforce defensive CSS best practices.",
   "main": "src/index.js",
+  "type": "module",
+  "exports": "./src/index.js",
   "files": [
     "src/**/*.js",
     "!**/**/*.test.js"
   ],
   "scripts": {
     "prepare": "husky install",
-    "test": "jest"
+    "jest": "cross-env NODE_OPTIONS=\"--experimental-vm-modules\" jest --runInBand",
+    "test": "npm run jest",
+    "test:watch": "npm run jest -- --watch"
   },
   "repository": {
     "type": "git",
@@ -22,33 +26,37 @@
   },
   "homepage": "https://github.com/yuschick/stylelint-plugin-defensive-css#readme",
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.12.0"
   },
   "keywords": [
-    "Stylelint",
-    "plugin",
-    "CSS",
-    "defensive CSS",
-    "best practices"
+    "css",
+    "csslint",
+    "defensive css",
+    "lint",
+    "linter",
+    "stylelint",
+    "stylelint-plugin"
   ],
   "peerDependencies": {
-    "stylelint": "^14.0.0 || ^15.0.0"
+    "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.2.0",
-    "@commitlint/config-conventional": "^18.1.0",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "cross-env": "^7.0.3",
     "eslint": "^8.35.0",
-    "husky": "^8.0.0",
+    "husky": "^8.0.3",
     "jest": "^29.4.3",
     "jest-cli": "^29.4.3",
-    "jest-preset-stylelint": "^6.1.0",
+    "jest-light-runner": "^0.6.0",
+    "jest-preset-stylelint": "^7.0.0",
     "lint-staged": "^15.0.2",
     "prettier": "^3.0.3",
     "prettier-eslint": "^16.1.2",
-    "stylelint": "^15.2.0"
+    "stylelint": "^16.1.0"
   },
   "lint-staged": {
-    "**/*.{js|md}": [
+    "**/*.js|md|json": [
       "eslint",
       "prettier --write"
     ]

src/index.js

@@ -1,3 +1,3 @@
-const useDefensiveCSS = require('./rules/use-defensive-css');
+import useDefensiveCSS from './rules/use-defensive-css/index.js';
 
-module.exports = [useDefensiveCSS];
+export default [useDefensiveCSS];

src/rules/use-defensive-css/base.js

@@ -1,10 +1,8 @@
-'use strict';
+import stylelint from 'stylelint';
 
-const stylelint = require('stylelint');
+export const ruleName = 'plugin/use-defensive-css';
 
-const ruleName = 'plugin/use-defensive-css';
-
-const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
+export const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
   accidentalHover() {
     return 'To prevent accidental hover states on mobile devices, wrap `:hover` selectors inside a `@media (hover: hover) { ...your styles }` query. Learn more: https://defensivecss.dev/tip/hover-media/';
   },
@@ -28,12 +26,6 @@ const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
   },
 });
 
-const ruleMeta = {
+export const ruleMeta = {
   url: 'https://github.com/yuschick/stylelint-plugin-defensive-css',
 };
-
-module.exports = {
-  ruleName,
-  ruleMessages,
-  ruleMeta,
-};

src/rules/use-defensive-css/index.js

@@ -1,13 +1,9 @@
-'use strict';
+import stylelint from 'stylelint';
 
-const stylelint = require('stylelint');
-
-const { ruleName, ruleMessages, ruleMeta } = require('./base');
-const {
-  findShorthandBackgroundRepeat,
-} = require('../../utils/findShorthandBackgroundRepeat');
-const { findVendorPrefixes } = require('../../utils/findVendorPrefixes');
-const { findCustomProperties } = require('../../utils/findCustomProperties');
+import { ruleName, ruleMessages, ruleMeta } from './base.js';
+import { findShorthandBackgroundRepeat } from '../../utils/findShorthandBackgroundRepeat.js';
+import { findVendorPrefixes } from '../../utils/findVendorPrefixes.js';
+import { findCustomProperties } from '../../utils/findCustomProperties.js';
 
 const defaultBackgroundRepeatProps = {
   hasBackgroundImage: false,
@@ -283,4 +279,4 @@ ruleFunction.ruleName = ruleName;
 ruleFunction.messages = ruleMessages;
 ruleFunction.meta = ruleMeta;
 
-module.exports = stylelint.createPlugin(ruleName, ruleFunction);
+export default stylelint.createPlugin(ruleName, ruleFunction);

src/rules/use-defensive-css/index.test.js

@@ -1,8 +1,5 @@
-'use strict';
-
-const {
-  rule: { messages, ruleName },
-} = require('./index.js');
+import rule from './index.js';
+const { messages, ruleName } = rule.rule;
 
 /* eslint-disable-next-line no-undef  */
 testRule({

src/utils/findCustomProperties.js

@@ -1,14 +1,10 @@
 const expression = /var\(.+?\)/g;
 
-function findCustomProperties(value) {
+export function findCustomProperties(value) {
   if (!value) return false;
 
   let propertiesFound = [...value.trim().matchAll(expression)];
   return propertiesFound
     .map(([property]) => (property.includes(',') ? undefined : property))
     .filter((value) => value);
 }
-
-module.exports = {
-  findCustomProperties,
-};

src/utils/findShorthandBackgroundRepeat.js

@@ -1,9 +1,5 @@
 const expression = /\b(repeat|repeat-x|repeat-y|space|round|no-repeat|)\b/g;
 
-function findShorthandBackgroundRepeat(value) {
+export function findShorthandBackgroundRepeat(value) {
   return value.match(expression).some((val) => val);
 }
-
-module.exports = {
-  findShorthandBackgroundRepeat,
-};

src/utils/findVendorPrefixes.js

@@ -1,12 +1,8 @@
 const expression = /-\b(moz|ms|o|webkit)\b-/g;
 
-function findVendorPrefixes(selector) {
+export function findVendorPrefixes(selector) {
   if (!selector) return false;
 
   let prefixesFound = [...selector.trim().matchAll(expression)];
   return prefixesFound.length > 1;
 }
-
-module.exports = {
-  findVendorPrefixes,
-};