Bulma: Better modularization: Support for CSS-Modules

[texttechne]

Great library: I love that bulma focusses on being a pure CSS framework.

I would like to use bulma in combination with CSS-Modules, which makes local instead of global css classes possible. My first shot at this led to the following layout:

base.scss: The reusable part which can be imported everywhere

@import "./bulma/config/variables.sass";
@import "bulma/config/generated-variables.sass";
// customize styles

@import "bulma/utilities/functions.sass";
@import "bulma/utilities/mixins.sass";

main.scss: The main entry point for global styles

This is the _only_ part with global styles.

@import "bulma/utilities/reset.sass";
@import "bulma/utilities/animations.sass";

// configuration
@import "./base";

// global base elements
@import "bulma/base/base.sass";

header.local.scss: Example of a local component

@import "base";
@import "bulma/layout/header.sass";

// customize

Explanation

Local css reverts the way how dependencies are declared: Each local component serves as own entry point and thus needs to specify all its dependencies via imports.

The reusable parts, which are needed by every component, are combined within base.scss: Functions, mixins, variables - anything which does not produce classes. So any local component can import base.scss. I think this is the crucial point.

The local component then imports bulma's styles for are specific component. This import (e.g. header.sass) may only occur once, otherwise all classes would occur multiple times in the resulting css file.

Problem

This actually works for the header component. Trying the same approach with a button component failed however: It relies on stuff from controls.sass, which should not be imported more than once.

So the root of the problem lies in an insufficient modularization.

Question

1. Do you think this approach would work or do you make extensive use of extends located in different files (not the base ones)?
2. Would you be willing to pull reusable stuff out, so that this approach would work for all components?
3. Would you accept a PR for this?

[r0st1kuzh]

@texttechne You can use https://github.com/stipsan/bulma-loader