CSS Utilities Task Group

Attributes

Context

The frontend department faces recurring challenges around writing CSS utilities, using them in the product, controlling CSS bundles’ size and ensuring pages only import the style definitions they actually need. This task group aims at alleviating those pain points through the following driving factors:

• Reduce CSS bundle sizes.
• Compartmentalize style definitions.
• Keep enforcing Pajamas-compliance through consistent and design token ready CSS utilities.
• Increase our dark theme readiness.
• Improve developer experience (DX).

Exit Criteria

1. CSS utilities are generated with Tailwind: https://docs.gitlab.com/ee/architecture/blueprints/tailwindcss/.
   1. They strictly enforce Pajamas specifications through the use of design tokens.
   2. Color utilities support dark theme overrides.
   3. Any necessary migrations have been completed: https://gitlab.com/groups/gitlab-org/-/epics/12108.
   4. Development guidelines have been updated to reflect any direction change in how we write CSS.
2. Page-specific style definitions have been moved to individual bundles: https://gitlab.com/groups/gitlab-org/-/epics/3694.
3. CSS rules have been migrated to CSS utilities: https://gitlab.com/groups/gitlab-org/-/epics/8326.
4. Color declarations have been consolidated to only use Pajamas-compliant ones: https://gitlab.com/groups/gitlab-org/-/epics/8599.

Roles and Responsibilities

View page source - Edit this page - please contribute.