Variables are defined for modules but not globals/site.scss - importing redundant code

[flipkickmedia]

When importing formantic.scss and using a variable to include a specific module you get additional CSS included which is not relevant to the use of that module.

By using, for example in a component scss to use a module you might have:

fomantic.scss

// The following path vars are for relative `url()` statements in the SCSS.
// They will be relative to the compiled entrypoint CSS file, which in our
// case is /fomantic.scss.
$theme-folder: '/src/assets/sass/fomantic-scss-custom/themes/default' !default;
$image-path: "#{$theme-folder}/assets/images" !default;
$font-path: "#{$theme-folder}/assets/fonts" !default;

// Generally, we import our custom theme first, then apply any unset variables
// from the default theme over them (variables in the default theme are defined
// with CSS `!default` so they are only used if they aren't already set.
//
// Sometimes, though, we want to use a variable from the default theme in our
// custom rules, in which case we need to either set it or pull in the file here
// before we can use them in our custom theme.
@import '../../../node_modules/fomantic-ui-sass/src/utils/all';
@import '../../../node_modules/fomantic-ui-sass/src/themes/default/globals/fonts/all';
@import '../../../node_modules/fomantic-ui-sass/src/themes/default/globals/colors/all';

// Then, we load up the whole shebang...
@import 'fomantic-custom-theme';                                 // custom theme variables
@import '../../../node_modules/fomantic-ui-sass/src/variables';     // default theme variables

And inside your component you might have:

@import "../assets/sass/fomantic.scss";
$primary: purple;
$use-accordion: true;
@import '../../node_modules/fomantic-ui-sass/src/semantic.scss';

...but this brings in additional CSS from src/definitions/globals/site.scss.

For a component I don't need the body style or a reset as this will have been brought in previously in the main app. So to avoid the unneeded css I might resort to importing the module directly. If you are importing the module directly then why would you need a variable to enable the css for it? Would it be a good idea to have the scss use variables for including/excluding the globals/site.scss styles so you can disable them specifically when using a module when importing the formantic.scss?

Something like this might work inside globals/site.scss:

/*******************************
             Page
*******************************/
@if not variable-exists(use-site-globals) or $use-site-globals==true {
  @if $import-google-fonts != false {
    @import url("#{$google-protocol}fonts.googleapis.com/css?family=#{$google-font-request}");
  }
  html,
  body {

.... etc ....

  textarea::selection,
  input::selection {
    background-color: $input-highlight-background;
    color: $input-highlight-color;
  }
}

and then in my component I can specifically disable that redundant CSS:

@import "../assets/sass/fomantic.scss";
$primary: purple;
$use-accordion: true;
$use-site-globals: false;
@import '../../node_modules/fomantic-ui-sass/src/semantic.scss';

I added this to my scss for globals/site.scss and also globals/reset.scss and it works well but this may conflict with a modules usage if it requires the other styles to be set. In which case, if a module requires css from reset.scss or site.scss it would make sense to import it into the module and separate it from the site/reset pages.