React-redux-starter-kit: CSS Modules issue or misunderstanding

[patbaker82]

Love this project!

I'm quite new to CCS Modules, so my issue might be due to lack of experience in reasoning about this new paradigm. We had a designer develop some styles for a new React based site that we're putting together. These would be base global styles, so I would assume that by putting them into core.scss under the :global {} scope identifier, this would be the appropriate course of action.

:global {
  @import 'base';
  @import 'vendor/styles';
}

However, after compilation I receive this error:

Module build failed: CssSyntaxError: postcss-modules-local-by-default: /Users/pbaker/Projects/React/src/styles/core.scss:1:0: Missing whitespace before :global :global {

If I hoist the @import outside the global identifier it works, but my understanding is that everything is local by default. Can someone point me in the right direction here?

Thanks!

[davezuko]

I believe it has something to do with whatever is being imported in vendor/styles. I'm not a CSS modules expert at all, though I've seen this error before. I'd suggest doing some digging in the css-modules and css-loader (and maybe postcss-loader) repo and see what you can uncover, and I will do the same. Just for reproduction, what are you importing in vendor/styles?.

[patbaker82]

I boiled it down to this.

SCSS

$color-white: #fff;
$color-primary: #6d5cae;
$color-black: #000;
$mix-percentage-dark: 81%;

@mixin button($text-color, $background-color, $border-color) {
  .open .dropdown-toggle#{&} {
    background-color: mix($background-color, $color-black, $mix-percentage-dark);
    border-color: mix($background-color, $color-black, $mix-percentage-dark);
    color: $text-color;
  }
}

.btn-primary {
  @include button($color-white, $color-primary, $color-primary);
}

Which compiles to:

.btn-primary .open .dropdown-toggle.btn-primary {
  background-color: #584b8d;
  border-color: #584b8d;
  color: #fff;
}

Anyways, if that example SCSS is placed into the :global {} it fails to compile. I'm not sure why though.

[patbaker82]

@davezuko I went down a bit of a rabbit hole and I wasn't able to figure it out. I'm a bit new to webpack, so I'm not sure how to really debug it. I believe the issue is occurring somewhere in the css-leader though. For now, I will just disable css modules.

[davezuko]

Ok, going to close this for now then... I don't _believe_ this is an issue directly related to the starter kit, but may stem from something unique to the sass -> postcss -> css modules -> css compilation process. If I can't find anything related to this issue in any of those repos I will re-open.

[kabala]

Same error here. In my situation. I've installed the foundation-apps npm package and imported it into core.scss. When it try to compile throwns me this error.

ERROR in ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./src/styles/core.scss Module build failed: CssSyntaxError: postcss-modules-local-by-default: C:\Users\kabal\Desktop\int\react\redux\node_modules\foundation-apps\scss\components\_iconic.scss:70:4: Missing whitespace before :global

[dkushner]

@kabala, @davezuko: Experiencing the same exact issue when trying to import Bulma. Any fix ever found for this?

[tte]

@davezuko Same issue when trying to import bootstrap-sass.

Edit: solved by https://github.com/davezuko/react-redux-starter-kit/issues/474

[eduardoinnorway]

Same issue with bootstrap-less

[matthew-dean]

I had this issue with something like:

:global {
  h1, h2, h3, h4, h5, h6 {
    & + & {
      margin-top: 1em;
    }
  }
}

This produced output like :global h1 + :global h1, :global h2 + :global h1.

You have to have output that's like :global h1 + h2.