@gitlab/eslint-plugin 20.2.1 → 20.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [20.4.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v20.3.0...v20.4.0) (2024-10-10)
+
+
+### Features
+
+* **Tailwind:** split up Tailwind rules into separate rules ([e581cee](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/e581ceede5a4637deab52a204555be4ea43724b4))
+
+# [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)
 
 

package/docs/rules/{tailwind.md → tailwind-no-interpolation.md}

@@ -1,4 +1,4 @@
-# @gitlab/tailwind
+# @gitlab/tailwind-no-interpolation
 
 This rule lints against string interpolation being used to build CSS utility class
 names as that would prevent Tailwind from parsing those classes and adding them to the bundle.
@@ -31,7 +31,7 @@ No options.
 
 ## Related rules
 
-- [vue-tailwind](./vue-tailwind.md)
+- [vue-tailwind-no-interpolation](./vue-tailwind-no-interpolation.md)
 
 ## When Not To Use It
 

package/docs/rules/tailwind-no-max-width-media-queries.md

@@ -0,0 +1,30 @@
+# @gitlab/tailwind-no-max-width-media-queries
+
+This rule lints against using max-width media query Tailwind classes.
+Min-width media query Tailwind classes should be used instead.
+
+## Rule Details
+
+### Examples of **incorrect** code for this rule
+
+```js
+const cssClasses = ['gl-mt-5', 'max-md:gl-mt-3'];
+```
+
+### Examples of **correct** code for this rule
+
+```js
+const cssClasses = ['gl-mt-3', 'md:gl-mt-5'];
+```
+
+## Options
+
+No options.
+
+## Related rules
+
+- [vue-tailwind-no-max-width-media-queries](./vue-tailwind-no-max-width-media-queries.md)
+
+## When Not To Use It
+
+If the codebase doesn't leverage Tailwind CSS, keep this rule disabled.

package/docs/rules/{vue-tailwind.md → vue-tailwind-no-interpolation.md}

@@ -1,6 +1,6 @@
-# @gitlab/vue-tailwind
+# @gitlab/vue-tailwind-no-interpolation
 
-This rule enforces the same conventions as [tailwind](./tailwind.md) in Vue templates.
+This rule enforces the same conventions as [tailwind-no-interpolation](./tailwind-no-interpolation.md) in Vue templates.
 
 ## Rule Details
 
@@ -38,7 +38,7 @@ No options.
 
 ## Related rules
 
-- [tailwind](./tailwind.md)
+- [tailwind-no-interpolation](./tailwind-no-interpolation.md)
 
 ## When Not To Use It
 

package/docs/rules/vue-tailwind-no-max-width-media-queries.md

@@ -0,0 +1,33 @@
+# @gitlab/vue-tailwind-no-max-width-media-queries
+
+This rule enforces the same conventions as [tailwind-no-max-width-media-queries](./tailwind-no-max-width-media-queries.md) in Vue templates.
+
+## Rule Details
+
+### Examples of **incorrect** code for this rule
+
+```html
+<template>
+  <span class="gl-mt-5 max-md:gl-mt-3"></span>
+</template>
+  ```
+
+### Examples of **correct** code for this rule
+
+```html
+<template>
+  <span class="gl-mt-3 md:gl-mt-5"></span>
+</template>
+```
+
+## Options
+
+No options.
+
+## Related rules
+
+- [tailwind-no-max-width-media-queries](./tailwind-no-max-width-media-queries.md)
+
+## When Not To Use It
+
+If the codebase doesn't leverage Tailwind CSS, keep this rule disabled.

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 → tailwind-no-interpolation.js}

@@ -12,9 +12,9 @@ module.exports = {
   meta: {
     type: 'error',
     docs: {
-      description: 'Ensures Tailwind CSS is used according to our internal guidelines.',
+      description: 'Prevents building Tailwind CSS utility classes with string interpolation.',
       category: 'css',
-      url: DOCS_BASE_URL + '/tailwind.md',
+      url: DOCS_BASE_URL + '/tailwind-no-interpolation.md',
     },
   },
   create(context) {

package/lib/rules/tailwind-no-max-width-media-queries.js

@@ -0,0 +1,30 @@
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+const { DOCS_BASE_URL } = require('../constants');
+const { validateMaxWidthMediaQueryUtils } = require('../utils/tailwind-utils');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'error',
+    docs: {
+      description: 'Prevents the usage of max-width media query Tailwind CSS utility classes.',
+      category: 'css',
+      url: DOCS_BASE_URL + '/tailwind-no-max-width-media-queries.md',
+    },
+  },
+  create(context) {
+    return {
+      TemplateElement(node) {
+        validateMaxWidthMediaQueryUtils(context, node);
+      },
+      Literal(node) {
+        validateMaxWidthMediaQueryUtils(context, node);
+      },
+    };
+  },
+};

package/lib/rules/{vue-tailwind.js → vue-tailwind-no-interpolation.js}

@@ -1,4 +1,3 @@
-
 // ------------------------------------------------------------------------------
 // Requirements
 // ------------------------------------------------------------------------------
@@ -14,18 +13,18 @@ module.exports = {
   meta: {
     type: 'error',
     docs: {
-      description: 'Ensures Tailwind CSS is used according to our internal guidelines in Vue templates.',
+      description: 'Prevents building Tailwind CSS utility classes with string interpolation.',
       category: 'css',
-      url: DOCS_BASE_URL + '/vue-tailwind.md',
+      url: DOCS_BASE_URL + '/vue-tailwind-no-interpolation.md',
     },
   },
   create(context) {
     return defineTemplateBodyVisitor(context, {
       BinaryExpression(node) {
-        validateInterpolatedUtils(context, node)
+        validateInterpolatedUtils(context, node);
       },
       TemplateLiteral(node) {
-        validateInterpolatedUtils(context, node)
+        validateInterpolatedUtils(context, node);
       },
     });
   },

package/lib/rules/vue-tailwind-no-max-width-media-queries.js

@@ -0,0 +1,34 @@
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+const { DOCS_BASE_URL } = require('../constants');
+const { defineTemplateBodyVisitor } = require('../utils/index');
+const { validateMaxWidthMediaQueryUtils } = require('../utils/tailwind-utils');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'error',
+    docs: {
+      description: 'Prevents the usage of max-width media query Tailwind CSS utility classes.',
+      category: 'css',
+      url: DOCS_BASE_URL + '/vue-tailwind-no-max-width-media-queries.md',
+    },
+  },
+  create(context) {
+    return defineTemplateBodyVisitor(context, {
+      VLiteral(node) {
+        validateMaxWidthMediaQueryUtils(context, node);
+      },
+      Literal(node) {
+        validateMaxWidthMediaQueryUtils(context, node);
+      },
+      TemplateElement(node) {
+        validateMaxWidthMediaQueryUtils(context, node);
+      },
+    });
+  },
+};

package/lib/utils/tailwind-utils.js

@@ -6,6 +6,15 @@ const INTERPOLATED_UTILS_VALIDATORS = {
   TemplateLiteral: templateLiteralHasInterpolatedUtils,
 };
 
+const MAX_WIDTH_MEDIA_QUERY_PATTERN = /max-(sm|md|lg|xl):gl-/;
+const MAX_WIDTH_MEDIA_QUERY_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_MEDIA_QUERY_UTIL_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_MEDIA_QUERY_PATTERN.test(node.value);
+}
+
+function templateElementHasMaxWidthUtils(node) {
+  return MAX_WIDTH_MEDIA_QUERY_PATTERN.test(node.value.raw);
+}
+
+function validateMaxWidthMediaQueryUtils(context, node) {
+  if (MAX_WIDTH_MEDIA_QUERY_UTIL_VALIDATORS[node.type] === undefined) {
+    return;
+  }
+
+  if (MAX_WIDTH_MEDIA_QUERY_UTIL_VALIDATORS[node.type](node)) {
+    context.report({
+      node,
+      message: MAX_WIDTH_MEDIA_QUERY_UTIL_ERROR,
+    });
+  }
+}
+
 module.exports = {
   validateInterpolatedUtils,
+  validateMaxWidthMediaQueryUtils,
   INTERPOLATED_UTIL_ERROR,
+  MAX_WIDTH_MEDIA_QUERY_UTIL_ERROR,
 };

package/package.json

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