Roots Discourse

Sage 10: SASS BEM modifier being ignored in production builds

I’m trying to figure out why SASS BEM modifier classes are being ignored in my production builds.

For example (not my actual code)

.post {
  display: block;
  position: relative;

  &--feature {
    display: flex;
  }
}

The rendered output is missing .post--feature {}

I came across this thread about bootstrap causing issues. This doesn’t apply to me because I’m not importing the navbar component.

I will continue to dig and update this thread upon resolving the issue. Any help would be appreciated. Thanks!

It looks like .purgeCss() is the culprit. I had to whitelist the pattern:

mix
  .sass('resources/assets/styles/app.scss', 'styles')
  .sass('resources/assets/styles/editor.scss', 'styles')
  .sass('resources/assets/styles/editor-admin.scss', 'styles')
  .purgeCss({
    whitelist: wpWhiteList,
    whitelistPatterns: ['&--', ...wpWhiteListPatterns],
  })
1 Like

Hi @cspicuzza,

can you post your full webpack.mix.js?

Don’t get how do you get your wpWhiteList and wpWhiteListPatterns vars

@carlosfaria This is most likely from the package purgecss-with-wordpress.

@cspicuzza Do you have the PurgeCSS ignore comment in this file / for this rules? I don’t think whitelisting &-- by default is a good choice (since it somehow defeats the purpose of PurgeCSS).

Yes @kero, I know, but as I’m a mess using javascript I need to know how to fill up those vars to use them as @cspicuzza showed up in his code.

I don’t know how to initialize those vars using the require function. The import method doesn’t seem to work here :sweat_smile:

@carlosfaria You might want to try the 2.3.0 version (if I’m reading that correctly), did you check the usage example:

import purgecssWordpress from 'purgecss-with-wordpress'

// ...
  .purgeCss({
    whitelist: purgecssWordpress.whitelist,
    whitelistPatterns: purcecssWordpress.whitelistPatterns,
  })

If I do that I get the following error:

Cannot use import statement outside a module

I can do this instead:

const purgeCssWordPress = require('purgecss-with-wordpress');

But then the build fails if I use the array in the whitelistPatterns like this:

whitelistPatterns: ['&--', ...purgeCssWordPress.whitelistPatterns],

I really need that pattern 'cause I’m using BEM in my entire styles, and without this solution the styles are not properly built.

Mmmmmm… I think that I have to make some more tests as this has nothing to do with BEM. Nested styles like this:

.info-cta{
  .wrap{
    position: relative;
  }

  .info{
    text-align: center;
    max-width: 40rem;
    margin: 0 auto;
  }

are also not applied in the app.css result file when building for production…

Ok, seems like PurgeCss is removing a lot of styles that are required in my site when building for production. I don’t know what’s the reason not including some code from a single class.

For instance, these styles are applied, but the .menu-item style is gone from the production build app.css:

.banner{
  .nav{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    font-size: $font-size;
    font-weight: 400;
    @extend %simple-list;

    .menu-item{
      margin-left: 30px; 
    }    
  }
}

I think that I’m going to remove the purgeCss part from the mix file and let all the styles be there…