Skip to content
  • Lukas 'ai-pi' Eipert's avatar
    Create extraction script for utility classes · 7bcb70e6
    Lukas 'ai-pi' Eipert authored
    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....
    7bcb70e6