Add script to automate utility classes generation base on utility mixins
What does this MR do?
This adds a generate-utilities
script that generates utility classes based on our utility mixins. Here's what it basically does:
- Read the contents of
scss/utility-mixins.scss
, this file contains all our utility mixins - Parse the contents to retrieve every pattern matching
@mixin <mixin_name>
- Write every occurrence back in
scss/utilities.scss
as a utility class:.<mixin_name> { @include <mixin_name>; }
Pre hooks have been addedto ensure that the script runs before the following scripts:
build
-
storybook
(and its aliasstart
) -
stylelint
(and its child scriptstylelint:fix
)
How to test this?
Run the new script:
yarn generate-utilities
Which should output the following if all went well:
yarn run v1.17.3
$ node generate_utilities.js
Successfully wrote utilities to /project/dir/gitlab-ui/scss/utilities.scss
You should have a new/updated scss/utilities.scss
file containing all utility classes:
.gl-p-0 { @include gl-p-0; }
.gl-p-3 { @include gl-p-3; }
.gl-p-4 { @include gl-p-4; }
.gl-px-3 { @include gl-px-3; }
.gl-px-4 { @include gl-px-4; }
// ...
Closes #378 (closed)
Edited by Paul Gascou-Vaillancourt