Skip to content

feat: Disallow Tailwind CSS utility classes with max-width

Peter Hegman requested to merge add-rule-to-disallow-max-with-tailwind-utils into main

We noticed that there has been some usage of max-width media queries with Tailwind CSS utility classes (example - app/assets/javascripts/ci/pipelines_page/pipelines.vue#L375). We should avoid these and instead use min-width to keep things consistent. This is the principal our legacy util library adhered to and is generally a best practice in mobile first development.

Screenshot_2024-07-25_at_3.46.59_PM

How to test

  1. Checkout this branch
  2. Run yarn link
  3. Go to the gitlab-org/gitlab project
  4. Run yarn link "@gitlab/stylelint-config"
  5. Apply the below diff with pbpaste | git apply
diff --git a/.stylelintrc b/.stylelintrc
index a2fc8bb15f1f..378cb71431bf 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -27,6 +27,21 @@
       "rules": {
         "gitlab/no-gl-class": null
       }
+    },
+    {
+      "files": [
+        "app/assets/builds/tailwind.css"
+      ],
+      "rules": {
+        "selector-class-pattern": null,
+        "gitlab/no-gl-class": null,
+        "length-zero-no-unit": null,
+        "property-no-vendor-prefix": null,
+        "value-no-vendor-prefix": null,
+        "scss/at-rule-no-unknown": null,
+        "tailwind/disallow-max-width-media-query": true
+      },
+      "reportNeedlessDisables": false
     }
   ]
 }
diff --git a/package.json b/package.json
index 5f98786399c7..a76b995873a7 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "file-coverage": "scripts/frontend/file_test_coverage.js",
     "lint-docs": "scripts/lint-doc.sh",
     "internal:eslint": "eslint --cache --max-warnings 0 --report-unused-disable-directives --ext .js,.vue,.graphql",
-    "internal:stylelint": "stylelint -q --rd '{ee/,}app/assets/stylesheets/**/*.{css,scss}'",
+    "internal:stylelint": "stylelint -q --rd '{ee/,}app/assets/{stylesheets/**/*.{css,scss},builds/tailwind.css}'",
+    "preinternal:stylelint": "yarn run tailwindcss:build",
     "prejest": "yarn check-dependencies",
     "build:css": "node scripts/frontend/build_css.mjs",
     "tailwindcss:build": "node scripts/frontend/tailwind_all_the_way.mjs --only-used",
  1. Run yarn internal:stylelint --no-cache
Edited by Peter Hegman

Merge request reports

Loading