feat: Disallow Tailwind CSS utility classes with max-width
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.
How to test
- Checkout this branch
- Run
yarn link
- Go to the
gitlab-org/gitlab
project - Run
yarn link "@gitlab/stylelint-config"
- 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",
- Run
yarn internal:stylelint --no-cache
Edited by Peter Hegman