I’m trying to figure out why SASS BEM modifier classes are being ignored in my production builds.
For example (not my actual code)
The rendered output is missing
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:
whitelistPatterns: ['&--', ...wpWhiteListPatterns],
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
@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).
I don’t know how to initialize those vars using the require function. The import method doesn’t seem to work here
@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'
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:
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:
I think that I’m going to remove the purgeCss part from the mix file and let all the styles be there…
const wpWhiteList = require('purgecss-with-wordpress').whitelist
const wpWhiteListPatterns = require('purgecss-with-wordpress').whitelistPatterns
Yeah I’m seeing the same…
Very strange and dangerous!