Skip to content
代码片段 群组 项目
  • Lukas 'ai-pi' Eipert's avatar
    7bcb70e6
    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
    历史
    Create extraction script for utility classes
    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
代码所有者
将用户和群组指定为特定文件更改的核准人。 了解更多。