Skip to content

Add script to automate utility classes generation base on utility mixins

Paul Gascou-Vaillancourt requested to merge 378-mixins-utilities-generator into master

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:

  1. Read the contents of scss/utility-mixins.scss, this file contains all our utility mixins
  2. Parse the contents to retrieve every pattern matching @mixin <mixin_name>
  3. 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 alias start)
  • stylelint (and its child script stylelint: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

Merge request reports