From a094540f7dcb01ad6e5192c1bcbcf80ae0fed094 Mon Sep 17 00:00:00 2001
From: Peter Hegman <phegman@gitlab.com>
Date: Mon, 29 Jul 2024 11:19:38 -0700
Subject: [PATCH] Turn on `tailwind/disallow-max-width-media-query` stylelint
rule
To prevent usage of max-width media query Tailwind utils
---
.stylelintrc | 15 +++++++++++++++
.../javascripts/ci/pipelines_page/pipelines.vue | 6 +++---
.../filtered_search_bar_root.vue | 6 ++++--
.../list/components/issuable_list_root.vue | 2 +-
.../components/iteration_report_issues.vue | 2 +-
package.json | 6 ++++--
scripts/static-analysis | 2 +-
7 files changed, 29 insertions(+), 10 deletions(-)
diff --git a/.stylelintrc b/.stylelintrc
index a2fc8bb15f1ff..378cb71431bf8 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/app/assets/javascripts/ci/pipelines_page/pipelines.vue b/app/assets/javascripts/ci/pipelines_page/pipelines.vue
index 24757248bbf4e..a183bead994de 100644
--- a/app/assets/javascripts/ci/pipelines_page/pipelines.vue
+++ b/app/assets/javascripts/ci/pipelines_page/pipelines.vue
@@ -372,7 +372,7 @@ export default {
<div v-if="stateToRender !== $options.stateMap.emptyState" class="gl-flex">
<div
- class="row-content-block gl-max-w-full gl-flex max-sm:gl-flex-wrap gl-gap-4 gl-flex-grow gl-border-b-0"
+ class="row-content-block gl-max-w-full gl-flex gl-flex-wrap sm:gl-flex-nowrap gl-gap-4 gl-flex-grow gl-border-b-0"
>
<pipelines-filtered-search
class="gl-flex gl-flex-grow gl-max-w-full"
@@ -383,8 +383,8 @@ export default {
/>
<gl-collapsible-listbox
v-model="visibilityPipelineIdType"
- class="max-sm:gl-flex-grow"
- toggle-class="gl-flex-grow"
+ class="gl-grow sm:gl-grow-0"
+ toggle-class="gl-grow"
:toggle-text="selectedPipelineKeyOption.text"
:items="$options.pipelineKeyOptions"
@select="changeVisibilityPipelineIDType"
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
index 140937c978722..49b0f5efbc437 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
@@ -350,7 +350,9 @@ export default {
</script>
<template>
- <div class="vue-filtered-search-bar-container gl-flex gl-min-w-0 max-sm:gl-flex-col sm:gl-gap-3">
+ <div
+ class="vue-filtered-search-bar-container gl-flex gl-min-w-0 gl-flex-col sm:gl-flex-row sm:gl-gap-3"
+ >
<gl-form-checkbox
v-if="showCheckbox"
class="gl-self-center"
@@ -401,7 +403,7 @@ export default {
:sort-options="transformedSortOptions"
:sort-by="sortById"
:is-ascending="sortDirectionAscending"
- class="sort-dropdown-container max-sm:gl-w-full sm:!gl-m-0"
+ class="sort-dropdown-container gl-w-full sm:gl-w-auto sm:!gl-m-0"
dropdown-class="gl-grow"
dropdown-toggle-class="gl-grow"
sort-direction-toggle-class="!gl-shrink !gl-grow-0"
diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
index d2ab63afe6db6..47de72837eab4 100644
--- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
+++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
@@ -330,7 +330,7 @@ export default {
:checkbox-checked="allIssuablesChecked"
:show-friendly-text="showFilteredSearchFriendlyText"
terms-as-tokens
- class="row-content-block gl-grow gl-border-t-0 max-md:gl-border-t max-md:-gl-ml-5 max-md:-gl-mt-1 max-md:gl-w-screen sm:gl-flex"
+ class="row-content-block gl-grow sm:gl-flex gl-border-t-none"
data-testid="issuable-search-container"
@checked-input="handleAllIssuablesCheckedInput"
@onFilter="$emit('filter', $event)"
diff --git a/ee/app/assets/javascripts/iterations/components/iteration_report_issues.vue b/ee/app/assets/javascripts/iterations/components/iteration_report_issues.vue
index 5bf28032cc4ed..4db336791ec75 100644
--- a/ee/app/assets/javascripts/iterations/components/iteration_report_issues.vue
+++ b/ee/app/assets/javascripts/iterations/components/iteration_report_issues.vue
@@ -302,7 +302,7 @@ export default {
</template>
<template #cell(assignees)="{ item: { assignees } }">
- <div class="gl-flex gl-flex-col gl-gap-3 max-sm:gl-items-end">
+ <div class="gl-flex gl-flex-col gl-gap-3 gl-items-end sm:gl-items-start">
<div
v-for="assignee in assignees"
:key="assignee.username"
diff --git a/package.json b/package.json
index 19901a3ad1265..9b70fb7bc94c5 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",
@@ -37,7 +38,8 @@
"lint:prettier:fix": "yarn run prettier --write '**/*.{graphql,js,vue}'",
"lint:prettier:staged": "scripts/frontend/execute-on-staged-files.sh prettier '(graphql|js|vue)' --check",
"lint:prettier:staged:fix": "scripts/frontend/execute-on-staged-files.sh prettier '(graphql|js|vue)' --write",
- "lint:stylelint": "stylelint '{ee/,}app/assets/stylesheets/**/*.{css,scss}'",
+ "lint:stylelint": "stylelint '{ee/,}app/assets/{stylesheets/**/*.{css,scss},builds/tailwind.css}'",
+ "prelint:stylelint": "yarn run tailwindcss:build",
"lint:stylelint:fix": "yarn run lint:stylelint --fix",
"lint:stylelint:staged": "scripts/frontend/execute-on-staged-files.sh stylelint '(css|scss)' -q",
"lint:stylelint:staged:fix": "yarn run lint:stylelint:staged --fix",
diff --git a/scripts/static-analysis b/scripts/static-analysis
index 68480bb82f576..a9e2883841c86 100755
--- a/scripts/static-analysis
+++ b/scripts/static-analysis
@@ -47,7 +47,7 @@ class StaticAnalysis
Task.new(%w[bin/rake config_lint], 10),
Task.new(%w[bin/rake gitlab:sidekiq:all_queues_yml:check], 15),
(Gitlab.ee? ? Task.new(%w[bin/rake gitlab:sidekiq:sidekiq_queues_yml:check], 11) : nil),
- Task.new(%w[yarn run internal:stylelint], 8),
+ Task.new(%w[yarn run internal:stylelint], 23),
Task.new(%w[scripts/lint-conflicts.sh], 1),
Task.new(%w[yarn run block-dependencies], 1),
Task.new(%w[yarn run check-dependencies], 1),
--
GitLab