@gitlab/eslint-plugin 20.3.0 → 20.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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)
 
 

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.
@@ -13,9 +13,6 @@ 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
@@ -26,9 +23,6 @@ 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
@@ -37,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
 
@@ -16,11 +16,6 @@ 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
@@ -35,11 +30,6 @@ 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
@@ -48,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/rules/{tailwind.js → tailwind-no-interpolation.js}

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

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}

@@ -3,7 +3,7 @@
 // ------------------------------------------------------------------------------
 const { DOCS_BASE_URL } = require('../constants');
 const { defineTemplateBodyVisitor } = require('../utils/index');
-const { validateInterpolatedUtils, validateMaxWidthUtils } = require('../utils/tailwind-utils');
+const { validateInterpolatedUtils } = require('../utils/tailwind-utils');
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -13,10 +13,9 @@ 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) {
@@ -27,15 +26,6 @@ module.exports = {
       TemplateLiteral(node) {
         validateInterpolatedUtils(context, node);
       },
-      VLiteral(node) {
-        validateMaxWidthUtils(context, node);
-      },
-      Literal(node) {
-        validateMaxWidthUtils(context, node);
-      },
-      TemplateElement(node) {
-        validateMaxWidthUtils(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,10 +6,10 @@ const INTERPOLATED_UTILS_VALIDATORS = {
   TemplateLiteral: templateLiteralHasInterpolatedUtils,
 };
 
-const MAX_WIDTH_PATTERN = /max-(sm|md|lg|xl):gl-/;
-const MAX_WIDTH_UTIL_ERROR =
+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_UTILS_VALIDATORS = {
+const MAX_WIDTH_MEDIA_QUERY_UTIL_VALIDATORS = {
   Literal: literalHasMaxWidthUtils,
   VLiteral: literalHasMaxWidthUtils,
   TemplateElement: templateElementHasMaxWidthUtils,
@@ -39,29 +39,29 @@ function validateInterpolatedUtils(context, node) {
 }
 
 function literalHasMaxWidthUtils(node) {
-  return MAX_WIDTH_PATTERN.test(node.value);
+  return MAX_WIDTH_MEDIA_QUERY_PATTERN.test(node.value);
 }
 
 function templateElementHasMaxWidthUtils(node) {
-  return MAX_WIDTH_PATTERN.test(node.value.raw);
+  return MAX_WIDTH_MEDIA_QUERY_PATTERN.test(node.value.raw);
 }
 
-function validateMaxWidthUtils(context, node) {
-  if (MAX_WIDTH_UTILS_VALIDATORS[node.type] === undefined) {
+function validateMaxWidthMediaQueryUtils(context, node) {
+  if (MAX_WIDTH_MEDIA_QUERY_UTIL_VALIDATORS[node.type] === undefined) {
     return;
   }
 
-  if (MAX_WIDTH_UTILS_VALIDATORS[node.type](node)) {
+  if (MAX_WIDTH_MEDIA_QUERY_UTIL_VALIDATORS[node.type](node)) {
     context.report({
       node,
-      message: MAX_WIDTH_UTIL_ERROR,
+      message: MAX_WIDTH_MEDIA_QUERY_UTIL_ERROR,
     });
   }
 }
 
 module.exports = {
   validateInterpolatedUtils,
-  validateMaxWidthUtils,
+  validateMaxWidthMediaQueryUtils,
   INTERPOLATED_UTIL_ERROR,
-  MAX_WIDTH_UTIL_ERROR,
+  MAX_WIDTH_MEDIA_QUERY_UTIL_ERROR,
 };

package/package.json

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