Skip to content

Generate a different Tailwind bundle with CQs

Paul Gascou-Vaillancourtrequested to merge
gitlab-ui-tailwind-mqs-cqs-plugin into master

What does this MR do and why?

Integration branch for gitlab-org/gitlab-services/design.gitlab.com!4981 (merged)

With this MR, we leverage the new Tailwind plugin that was created in Create a Tailwind CQs/MQs plugin (gitlab-org/gitlab-services/design.gitlab.com!4981 - merged).

That plugin adds support for min-width and max-width container queries through the @ prefix. By default however, it generates the usual media queries for those utils, which means that any consumer that any project that consumes @gitlab/ui@119.1.0 can start using the new @ syntax, but they won't see any difference just yet, as those will compute to media queries.

For the @ utils to compile to container queries, the USE_TAILWIND_CONTAINER_QUERIES env var needs to be set when building the Tailwind CSS bundle.

Why are we doing this?

This approach gives us the ability to migrate to the new syntax without affecting the product. This is a large migration which requires touching many areas with shared components, affecting pages that may or may not react well to being containerized.

By having the ability to compile the new utils as if they were media queries responsive utils, we can move to the new syntax without worrying about the impact in production.

We are also compiling a new tailwind_cqs.css bundle which does compile the new utils to container queries. On top of all that, we are introducing the tailwind_container_queries feature flag. When the flag is enabled, we swap tailwind.css out with tailwind_cqs.css, and all pages become containerized. We are therefore able to evaluate the migration's impact internally without affecting other users.

This should give much more confidence in migrating large chunks of the codebase quickly.

References

How to set up and validate locally

  1. Run the GDK with the USE_TAILWIND_CONTAINER_QUERIES flag enabled:

    USE_TAILWIND_CONTAINER_QUERIES=true gdk start

  2. Enable the tailwind_container_queries feature flag: https://gdk.test:3443/rails/features/tailwind_container_queries.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Paul Gascou-Vaillancourt

Merge request reports