How to Reduce Spruce CSS Size

We try to make Spruce CSS smaller but still, we talk about 1000+ lines of code. Sometimes we don’t need all of them.

This framework only writes out any code if we tell it explicitly through a mixin. We call these mixins generators. We can control the size of our codebase by using or omitting them.

Usually, we use generate-styles:

@use 'sprucecss/scss/spruce' as *;

@include generate-styles;

and we configure what to generate through the $generators map.

You can see that from the source code that these mixin contains a lot of condition based on the previously mentioned map.

@use 'sprucecss/scss/spruce' with (
  $generators: (
    'form': (
      'btn': false,
    ),
  ),
);

Using this setting we turn off the button style generation.