[CSS utilities TG] Handle dynamic classes
Summary
Tailwind does not support dynamically generated classes such as gl-mt-${count}
. We need to follow the documentation guidelines and rewrite them in a format that Tailwind can understand them.
Here are the ripgrep
command we are using to spot potential offences in GitLab:
- Frontend stuff:
rg "gl-[0-9a-z-]+\\\$\{"
spec/frontend/lib/utils/table_utility_spec.js
7: expect(tableUtils.thWidthPercent(width)).toBe(`gl-w-${width}p`);
spec/frontend/admin/abuse_reports/components/abuse_category_spec.js
41: expect(findLabel().attributes('class')).toBe(`gl-text-${category.color}`);
app/assets/javascripts/lib/utils/table_utility.js
10:export const thWidthPercent = (width) => `gl-w-${width}p`;
spec/frontend/vue_alerts_spec.js
61: (variant) => cssClass === `gl-alert-${variant}`,
ee/app/assets/javascripts/tracing/details/tracing_spans_chart.vue
175: :class="`gl-bg-data-viz-${serviceToColor[span.service]}`"
ee/app/assets/javascripts/vue_shared/components/accordion/accordion_item.vue
7:const accordionItemUniqueId = (name) => uniqueId(`gl-accordion-item-${name}-`);
app/assets/javascripts/admin/abuse_reports/components/abuse_category.vue
31: :class="`gl-text-${categoryObject.color}`"
- HAML/Ruby:
rg "gl-[0-9a-z-]+#\{"
app/helpers/application_helper.rb
405: "gl-browser-#{browser_id} gl-platform-#{platform_id}"
app/helpers/icons_helper.rb
86: content_tag(:span, "", class: "gl-snippet-icon gl-snippet-icon-#{name}")
ee/lib/remote_development/workspaces/create/creator.rb
25: value[:workspace_namespace] = "gl-rd-ns-#{agent.id}-#{user.id}-#{random_string}"
app/components/pajamas/spinner_component.rb
23: ["gl-spinner", "gl-spinner-#{@size}", "gl-spinner-#{@color} gl-vertical-align-text-bottom!"]
app/components/pajamas/avatar_component.rb
30: classes = ["gl-avatar", "gl-avatar-s#{@size}", @class]
36: classes.push("gl-avatar-identicon-bg#{((@item.id || 0) % 7) + 1}")
app/components/pajamas/alert_component.rb
24: classes = ["gl-alert-#{@variant}"]
51: "gl-alert-icon#{' gl-alert-icon-no-title' if @title.nil?}"
app/presenters/label_presenter.rb
16: "gl-label-text-#{label.color.contrast.luminosity}"
ee/spec/lib/remote_development/workspaces/create/workspace_creator_spec.rb
44: workspace_namespace: "gl-rd-ns-#{agent.id}-#{user.id}-#{random_string}",
ee/spec/lib/remote_development/workspaces/create/main_integration_spec.rb
91: expect(workspace.namespace).to eq("gl-rd-ns-#{agent.id}-#{user.id}-#{random_string}")
ee/spec/factories/remote_development/workspaces.rb
15: add_attribute(:namespace) { "gl-rd-ns-#{agent.id}-#{user.id}-#{random_string}" }
spec/components/pajamas/alert_component_spec.rb
180: expect(page).to have_selector(".gl-alert-#{variant}")
The only actual offences are in frontend assets:
app/assets/javascripts/lib/utils/table_utility.js
10:export const thWidthPercent = (width) => `gl-w-${width}p`;
ee/app/assets/javascripts/tracing/details/tracing_spans_chart.vue
175: :class="`gl-bg-data-viz-${serviceToColor[span.service]}`"
app/assets/javascripts/admin/abuse_reports/components/abuse_category.vue
31: :class="`gl-text-${categoryObject.color}`"
Edited by Paul Gascou-Vaillancourt