-
由 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
由 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
代码所有者
将用户和群组指定为特定文件更改的核准人。 了解更多。