Skip to content
代码片段 群组 项目
该项目从 https://gitlab.com/gitlab-org/gitlab.git 镜像。 拉取镜像更新于
  1. 4月 05, 2024
    • Lukas 'ai-pi' Eipert's avatar
      Create extraction script for utility classes · 7bcb70e6
      Lukas 'ai-pi' Eipert 创作于
      This is the first step towards generating all utility classes with
      tailwind. The idea behind this is the following:
      
      Parse all utility classes being provided by @gitlab/ui into a JSON
      object where each class is represented as something like this:
      
      ```
      '.bg-gray-10': {
        'background-color': 'var(--gray-10, #fbfafd)',
      },
      ```
      
      We then let tailwind generate all the utilities and compare the class
      definitions above with the class definitions in @gitlab/ui. They can
      fall into four categories:
      
      - exact matches: The tailwind generated class matches @gitlab/ui 1:1
      - potential mismatches: The tailwind generated class mismatches
        significantly. This can be okay or we may need some adjustments to the
        tailwind config.
      - hardcoded colors: Some of the utility classes have hard coded colors
        which the conversion script is not able to resolve to a CSS variable.
      - safe to use legacy utils: These utils have no overlap with tailwind at
        all. The class names completely differ. This means we can feed the
        definitions above into tailwind, so that tailwind is able to generate
        the classes
      
      As part of the conversion certain aspects are normalized, for example
      colors like `#fbfafd` are normalized to `var(--gray-10, #fbfafd)`, but
      only if the class name contains `gray-10`.
      
      Furthermore we currently check-in two files that later will be
      git-ignored:
      1. config/helpers/tailwind/css_in_js.js – containing the css-in-js
         definitions for tailwind to generate the legacy utils with tailwind
      2. config/helpers/tailwind/all_utilities.haml – containing a list of all
         utility classes, so that tailwind is able to generate _all utilities_
         and not just the used ones
      未验证
      7bcb70e6
  2. 4月 03, 2024
加载中