Skip to content

feat(tailwind): add check for max-width CSS utils

Peter Hegman requested to merge add-check-for-max-width-tailwind-utils into main

We want to try and only use min-width CSS utils to keep our codebase consistent and our bundle size small. There may be exceptions such as gitlab-stylelint-config!42 (comment 2096850187) and that is okay. This rule can always be disabled on a line by line basis.

Screenshots

Offenses in JavaScript

Screenshot_2024-10-01_at_8.12.49_AM Screenshot_2024-10-01_at_8.13.11_AM Screenshot_2024-10-01_at_2.43.28_PM

Offenses in Vue <script>

Screenshot_2024-10-01_at_8.13.57_AM Screenshot_2024-10-01_at_8.14.16_AM Screenshot_2024-10-01_at_2.42.56_PM

Offenses in Vue <template>

Screenshot_2024-10-01_at_8.10.10_AM Screenshot_2024-10-01_at_2.42.30_PM

How to test this locally?

  1. Install yalc if you haven't already: https://github.com/wclr/yalc
  2. Checkout this branch and publish it with yalc:
    yalc publish
  3. In your GitLab repo install the published development package:
    yalc add @gitlab/eslint-plugin
  4. Cleanup after testing
yalc remove @gitlab/eslint-plugin
Edited by Peter Hegman

Merge request reports

Loading