@gitlab/eslint-plugin 20.2.0 → 20.3.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [20.3.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v20.2.1...v20.3.0) (2024-10-02)
+
+
+### Features
+
+* **tailwind:** add check for max-width CSS utils ([ec8026a](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/ec8026a4bf1961b90808cdfc7984640ab16fdc40))
+
+## [20.2.1](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v20.2.0...v20.2.1) (2024-09-06)
+
+
+### Bug Fixes
+
+* **tailwind:** catch forward slashes in CSS utils ([42c2133](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/42c2133fb8a0ca677512f0dc4bd555e5fdb51323))
+* **tailwind:** only match the beginning of a string or after a space ([735a6ec](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/735a6ec69d62424a8eb4e764375e9318e0a29428))
+
 # [20.2.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v20.1.0...v20.2.0) (2024-09-03)
 
 

package/docs/rules/tailwind.md

@@ -13,6 +13,9 @@ const cssUtilsStringLiteral = 'gl-bg-red-' + variant;
 
 // Using interpolation to build a utility in a template literal
 const cssUtilsTemplateLiteral = `gl-border-top gl-bg-red-${color} gl-text-gray-400`;
+
+// Using max-width media query utility classes
+const cssClasses = ['gl-mt-5', 'max-md:gl-mt-3'];
 ```
 
 ### Examples of **correct** code for this rule
@@ -23,6 +26,9 @@ const cssUtilsStringLiteral = 'gl-bg-red-800';
 
 // Utilities declared as a template literal without interpolation
 const cssUtils = `gl-border-top gl-bg-red-800 gl-text-gray-400`;
+
+// Using max-width media query utility classes
+const cssClasses = ['gl-mt-3', 'md:gl-mt-5'];
 ```
 
 ## Options

package/docs/rules/vue-tailwind.md

@@ -16,6 +16,11 @@ This rule enforces the same conventions as [tailwind](./tailwind.md) in Vue temp
 <template>
   <span :class="`gl-border-top gl-bg-red-${color} gl-text-gray-400`"></span>
 </template>
+
+<!-- Using max-width media query utility classes -->
+<template>
+  <span class="gl-mt-5 max-md:gl-mt-3"></span>
+</template>
   ```
 
 ### Examples of **correct** code for this rule
@@ -30,6 +35,11 @@ This rule enforces the same conventions as [tailwind](./tailwind.md) in Vue temp
 <template>
   <span :class="`gl-bg-red-800`"></span>
 </template>
+
+<!-- Using max-width media query utility classes -->
+<template>
+  <span class="gl-mt-3 md:gl-mt-5"></span>
+</template>
 ```
 
 ## Options

package/lib/configs/typescript.js

@@ -48,6 +48,12 @@ const tsConfig = {
         '@typescript-eslint/no-shadow': 'error',
         '@typescript-eslint/return-await': 'error',
         '@typescript-eslint/no-floating-promises': 'error',
+        '@typescript-eslint/explicit-member-accessibility': [
+          'error',
+          {
+            accessibility: 'no-public',
+          },
+        ],
         'class-methods-use-this': 'off',
         'import/no-cycle': 'error',
         'promise/param-names': 'off',

package/lib/rules/tailwind.js

@@ -2,7 +2,7 @@
 // Requirements
 // ------------------------------------------------------------------------------
 const { DOCS_BASE_URL } = require('../constants');
-const { validateInterpolatedUtils } = require('../utils/tailwind-utils');
+const { validateInterpolatedUtils, validateMaxWidthUtils } = require('../utils/tailwind-utils');
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -25,6 +25,12 @@ module.exports = {
       TemplateLiteral(node) {
         validateInterpolatedUtils(context, node);
       },
+      TemplateElement(node) {
+        validateMaxWidthUtils(context, node);
+      },
+      Literal(node) {
+        validateMaxWidthUtils(context, node);
+      },
     };
   },
 };

package/lib/rules/vue-tailwind.js

@@ -1,10 +1,9 @@
-
 // ------------------------------------------------------------------------------
 // Requirements
 // ------------------------------------------------------------------------------
 const { DOCS_BASE_URL } = require('../constants');
 const { defineTemplateBodyVisitor } = require('../utils/index');
-const { validateInterpolatedUtils } = require('../utils/tailwind-utils');
+const { validateInterpolatedUtils, validateMaxWidthUtils } = require('../utils/tailwind-utils');
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -14,7 +13,8 @@ module.exports = {
   meta: {
     type: 'error',
     docs: {
-      description: 'Ensures Tailwind CSS is used according to our internal guidelines in Vue templates.',
+      description:
+        'Ensures Tailwind CSS is used according to our internal guidelines in Vue templates.',
       category: 'css',
       url: DOCS_BASE_URL + '/vue-tailwind.md',
     },
@@ -22,10 +22,19 @@ module.exports = {
   create(context) {
     return defineTemplateBodyVisitor(context, {
       BinaryExpression(node) {
-        validateInterpolatedUtils(context, node)
+        validateInterpolatedUtils(context, node);
       },
       TemplateLiteral(node) {
-        validateInterpolatedUtils(context, node)
+        validateInterpolatedUtils(context, node);
+      },
+      VLiteral(node) {
+        validateMaxWidthUtils(context, node);
+      },
+      Literal(node) {
+        validateMaxWidthUtils(context, node);
+      },
+      TemplateElement(node) {
+        validateMaxWidthUtils(context, node);
       },
     });
   },

package/lib/utils/tailwind-utils.js

@@ -1,4 +1,4 @@
-const INTERPOLATION_PATTERN = /gl-[a-z0-9-]*$/i;
+const INTERPOLATION_PATTERN = /(^|\s)gl-[a-z0-9-/]*$/i;
 const INTERPOLATED_UTIL_ERROR =
   'You are building a CSS utility class name using string interpolation which is forbidden because Tailwind CSS needs fully qualified names to properly generate the utilities we use.';
 const INTERPOLATED_UTILS_VALIDATORS = {
@@ -6,6 +6,15 @@ const INTERPOLATED_UTILS_VALIDATORS = {
   TemplateLiteral: templateLiteralHasInterpolatedUtils,
 };
 
+const MAX_WIDTH_PATTERN = /max-(sm|md|lg|xl):gl-/;
+const MAX_WIDTH_UTIL_ERROR =
+  'Do not use max-width media query utility classes unless absolutely necessary. Use min-width media query utility classes instead.';
+const MAX_WIDTH_UTILS_VALIDATORS = {
+  Literal: literalHasMaxWidthUtils,
+  VLiteral: literalHasMaxWidthUtils,
+  TemplateElement: templateElementHasMaxWidthUtils,
+};
+
 function binaryExpressionHasInterpolatedUtils(node) {
   return node.operator === '+' && INTERPOLATION_PATTERN.test(node.left.value);
 }
@@ -29,7 +38,30 @@ function validateInterpolatedUtils(context, node) {
   }
 }
 
+function literalHasMaxWidthUtils(node) {
+  return MAX_WIDTH_PATTERN.test(node.value);
+}
+
+function templateElementHasMaxWidthUtils(node) {
+  return MAX_WIDTH_PATTERN.test(node.value.raw);
+}
+
+function validateMaxWidthUtils(context, node) {
+  if (MAX_WIDTH_UTILS_VALIDATORS[node.type] === undefined) {
+    return;
+  }
+
+  if (MAX_WIDTH_UTILS_VALIDATORS[node.type](node)) {
+    context.report({
+      node,
+      message: MAX_WIDTH_UTIL_ERROR,
+    });
+  }
+}
+
 module.exports = {
   validateInterpolatedUtils,
+  validateMaxWidthUtils,
   INTERPOLATED_UTIL_ERROR,
+  MAX_WIDTH_UTIL_ERROR,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/eslint-plugin",
-  "version": "20.2.0",
+  "version": "20.3.0",
   "description": "GitLab package for our custom eslint rules",
   "main": "lib/index.js",
   "scripts": {