Implement Stylelint for CSS/SCSS linting and confirm ESLint for JS

- Added Stylelint configuration to enforce styling rules in CSS/SCSS.

Signed-off-by: Timothy Asir Jeyasingh <[email protected]>

Author: TimothyAsirJeyasing

.eslintrc.js

@@ -68,6 +68,7 @@ module.exports = {
     'default-case': 'off',
     'global-require': 'off',
     'implicit-arrow-linebreak': 'off',
+    camelcase: ['error', { allow: ['pfV5', 'pfM'] }],
     'import/no-extraneous-dependencies': [
       'error',
       {

.stylelintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: ['./stylelint-pf-prefix-rule.js'],
+  rules: {
+    'custom/pf-prefix': true,
+  },
+};

stylelint-pf-prefix-rule.js

@@ -0,0 +1,61 @@
+const stylelint = require('stylelint');
+
+const ruleName = 'custom/pf-prefix';
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  expected: (name) =>
+    `Expected "${name}" to be prefixed with "pf-v5-" or "pf-m-" if it starts with "pf-" or ".pf-".`,
+});
+
+module.exports = stylelint.createPlugin(ruleName, () => {
+  return (root, result) => {
+    // Regular expression to match variables, class names, mixins, etc., that start with pf- or .pf-
+    const pfRegex = /(\.pf-|pf-)(?!v5-|m-)/;
+
+    root.walkDecls((decl) => {
+      const value = decl.value;
+      const prop = decl.prop;
+
+      // Check the value and property of the declaration
+      if (pfRegex.test(value) || pfRegex.test(prop)) {
+        stylelint.utils.report({
+          message: messages.expected(prop),
+          node: decl,
+          result,
+          ruleName,
+        });
+      }
+    });
+
+    root.walkRules((rule) => {
+      const selector = rule.selector;
+
+      // Check the selector (e.g., class names, IDs)
+      if (pfRegex.test(selector)) {
+        stylelint.utils.report({
+          message: messages.expected(selector),
+          node: rule,
+          result,
+          ruleName,
+        });
+      }
+    });
+
+    root.walkAtRules((atRule) => {
+      const name = atRule.name;
+      const params = atRule.params;
+
+      // Check the name and parameters of at-rules (e.g., mixins, functions)
+      if (pfRegex.test(name) || pfRegex.test(params)) {
+        stylelint.utils.report({
+          message: messages.expected(name),
+          node: atRule,
+          result,
+          ruleName,
+        });
+      }
+    });
+  };
+});
+
+module.exports.ruleName = ruleName;
+module.exports.messages = messages;