Purge CSS is breaking Main Header component mobile functionality

[JonQuayle]

Hi,

I'm noticing that the purge CSS functionality is removing the functionality of the Main Header component on mobile - https://codyhouse.co/ds/components/info/main-header.

I'm using Webpack rather than the gulpfile included with the framework, everything else is working fine, even other components. My postcss.config.js is as follows:

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      browsers: 'last 2 versions',
    }),
    purgecss({
      content: [
	'./src/views/**/*.njk',
	'./src/js/index.js'
      ],
      safelist: {
        standard: ['.is-hidden', '.is-visible'],
        deep: [/class$/],
        greedy: []
      },
      defaultExtractor: content => content.match(/[\w-/:%@]+(?<!:)/g) || []
    })
  ],
};

Simply commenting out the purgecss part of the above code will allow the components mobile functionality to work, but then you lose the benefits of purgecss throughout a project. My style.scss file is as follows which is using the purgecss ignore flags:

@use './base' with (
  $breakpoints: (
    'xs': 32rem, // ~512px
    'sm': 48rem, // ~768px
    'md': 64rem, // ~1024px
    'lg': 80rem, // ~1280px
    'xl': 100rem  // ~1440px
  ),
  $grid-columns: 12
);

/*! purgecss start ignore */
@use './custom-style';
@use './components';
/*! purgecss end ignore */

Any ideas how to get around this? I haven't tried other components that contain similar functionality also, so this might occur with others.

[claudia-romano]

Hi Jon, sorry for that.

There's an issue with how comments are handled by the new sass module system. Basically, the purge start comment is moved at the bottom of the style file.

We are still looking into this (the SASS team does not consider it a bug unfortunately).

As a temporary fix, you could add the purge start comment in the _base.scss file:

@forward '../../../node_modules/codyhouse-framework/main/assets/css/base';

/*! purgecss start ignore */

This should fix your issue.

We will make sure to push a fix as soon as possible and add a note in our Docs. Let me know if you are still having problems with that!

[JonQuayle]

Hi Claudia,

Thanks for the update, your fix worked like a charm! As an FYI to anyone else experiencing this, I added:

/is-visible$/, /is-hidden$/

to the safelist in postcss config file and that fixed it also.

Thanks!