Sage 10: SASS BEM modifier being ignored in production builds

sage
,
1

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!

2

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
3

Hi @cspicuzza,

can you post your full webpack.mix.js?

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

4

@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).

5

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:

6

@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,
  })
7

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.

8

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…

9

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…

10 
const wpWhiteList = require('purgecss-with-wordpress').whitelist
const wpWhiteListPatterns = require('purgecss-with-wordpress').whitelistPatterns
1 Like
11

Yeah I’m seeing the same…
Very strange and dangerous!