How to use with css modules?

[betancourtl]

Why are the classnames from flexboxgrid not being purged?
CSS

@import "../../assets/flexboxgrid";

Webpack

// webpack
      new PurgecssPlugin({
        paths: globAll.sync([
          `${__dirname}/../src/creatives/${folderName}/*`,
          __dirname + '/../src/assets/*',
        ]),
      })

Preact file

  render() {
    return (
      <div className={s.row}>
        <div>
          {this.props.images.slice(2).map(img => {
            return (
              <div>
                <img
                  key ={img.src}
                  src={img.src}
                  alt={img.src}
                />
              </div>
            );
          })}
        </div>
        <div>
          <h2>{this.props.ctaText}</h2>
          <button>{this.props.ctaBtnText}</button>
        </div>
      </div>
    );
  }

Generated CSS

/* Uncomment and set these variables to customize the grid. */
._3q8Eua0Xl8bpvVFmOZX3B4 {
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem; }
._2irZL_uA1ubzAHS3bni29j {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex: 0 1 auto;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -1rem;
  margin-left: -1rem; }
._2irZL_uA1ubzAHS3bni29j._26S2TElU0rBfGKHZDfulSb {
  -ms-flex-direction: row-reverse;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  flex-direction: row-reverse; }
._2KCFhKrVt0G--18z5Y1JPW._26S2TElU0rBfGKHZDfulSb {
  -ms-flex-direction: column-reverse;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  flex-direction: column-reverse; }
._1AWtYzylpz7dI6CpDFnDBb,
._3mPATRVq6KXEHwXeBO-Spu,
.Uj2bx6ScNFzzt4OBQBPXh,
._3Bhc0dshSNPOAmgigNJl85,
._1ajOxNM_-pl2WTHhhLiBth,
._2BuhK70WNRc87W9Y2LF9Ih,
._2NVHpN_rmCc4_IoZa2eDCk,
._3y_tQDHVaYbABGADnadSRG,
._35dVHEPwxFt3qdkG_OB93P,
.lrkzlSLAhir9insPIG9uW,
._29Uki2wzBj5bdD6MVN0T9o,
.cAx6zQ0bi-xVteNmlnG2c,
._2AwCaKp3ue-_henbhr-EGi {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-flex: 0 0 auto;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  padding-right: 1rem;
  padding-left: 1rem; }
._1AWtYzylpz7dI6CpDFnDBb {
  -ms-flex-positive: 1;
  -webkit-box-flex: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%; }
._3mPATRVq6KXEHwXeBO-Spu {
  -ms-flex-preferred-size: 8.333%;
  flex-basis: 8.333%;
  max-width: 8.333%; }
.Uj2bx6ScNFzzt4OBQBPXh {
  -ms-flex-preferred-size: 16.667%;
  flex-basis: 16.667%;
  max-width: 16.667%; }
._3Bhc0dshSNPOAmgigNJl85 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%; }
._1ajOxNM_-pl2WTHhhLiBth {
  -ms-flex-preferred-size: 33.333%;
  flex-basis: 33.333%;
  max-width: 33.333%; }
._2BuhK70WNRc87W9Y2LF9Ih {
  -ms-flex-preferred-size: 41.667%;
  flex-basis: 41.667%;
  max-width: 41.667%; }
._2NVHpN_rmCc4_IoZa2eDCk {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%; }
._3y_tQDHVaYbABGADnadSRG {
  -ms-flex-preferred-size: 58.333%;
  flex-basis: 58.333%;
  max-width: 58.333%; }
._35dVHEPwxFt3qdkG_OB93P {
  -ms-flex-preferred-size: 66.667%;
  flex-basis: 66.667%;
  max-width: 66.667%; }
.lrkzlSLAhir9insPIG9uW {
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%; }
._29Uki2wzBj5bdD6MVN0T9o {
  -ms-flex-preferred-size: 83.333%;
  flex-basis: 83.333%;
  max-width: 83.333%; }
.cAx6zQ0bi-xVteNmlnG2c {
  -ms-flex-preferred-size: 91.667%;
  flex-basis: 91.667%;
  max-width: 91.667%; }
._2AwCaKp3ue-_henbhr-EGi {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%; }
._1ZcqisFafmJ1OcKP_VGhmd {
  margin-left: 8.333%; }
.yKDIe7el0sgAIVdf9APHX {
  margin-left: 16.667%; }
._3QtmgxBw8YwikHXczwgZwp {
  margin-left: 25%; }
.FjCQ0SR-VpxRs6IKk4CQY {
  margin-left: 33.333%; }
._2nX7PVu2mi9by-xtNX48H8 {
  margin-left: 41.667%; }
._3YxqDUlXPF0pJICOEl_Ws7 {
  margin-left: 50%; }
._3loFUkaBUoDFOYTfzMFAgy {
  margin-left: 58.333%; }
._39Km30wX4C4OaZcG6A6J6V {
  margin-left: 66.667%; }
._26iXllXLEciIiP14w6rVNX {
  margin-left: 75%; }
._39tVnv7vPsKZXs_y9KecVz {
  margin-left: 83.333%; }
._10aoMv6q5hjkYEP1Gq4XGm {
  margin-left: 91.667%; }
[dir="ltr"] ._3e4uyaccgvMmvHHjRuTOhi {
  text-align: left; }
[dir="rtl"] ._3e4uyaccgvMmvHHjRuTOhi {
  text-align: right; }
._3e4uyaccgvMmvHHjRuTOhi {
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start; }
._3l9jDhT5cJQj2799MQeon9 {
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  text-align: center; }
[dir="ltr"] ._1D1Jgh8gwvSwe9-fkhB9W8 {
  text-align: right; }
[dir="rtl"] ._1D1Jgh8gwvSwe9-fkhB9W8 {
  text-align: left; }
._1D1Jgh8gwvSwe9-fkhB9W8 {
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  justify-content: flex-end; }
._2WEvbMcSgbUezaxpt_T_KV {
  -ms-flex-align: start;
  -webkit-box-align: start;
  align-items: flex-start; }
._1OQBRtZqqId_YbpskVrVDt {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center; }
._2qm92s_aSOCeMZ4dfQv_kr {
  -ms-flex-align: end;
  -webkit-box-align: end;
  align-items: flex-end; }
._14z6yVnvxqbwIYIfi3KL4j {
  -ms-flex-pack: distribute;
  justify-content: space-around; }
._2MmNcwB0SNuHjXhZPlPn_W {
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between; }
._2Ugt_mLe84_RaYzhjsghlN {
  -ms-flex-order: -1;
  -webkit-box-ordinal-group: 0;
  order: -1; }
._1IM1paE10dIyimSDwOreG3 {
  -ms-flex-order: 1;
  -webkit-box-ordinal-group: 2;
  order: 1; }
@media only screen and (min-width: 48em) {
  ._34KuURz9QhvErP4YRd00Bx {
    width: 46rem; }
  ._2E3q623xQv-b6UCWYPN6O,
  ._2a_9RysYe_umE_UxFcZKpA,
  ._1hBvn_Ex5gkNaGjyi0gf-m,
  ._28qG4iY0piQpeDzjMFFT0Z,
  ._30Wipn5kdq2K3h-P5MyRqC,
  .LJTTxge32DSWj7fNAtKn0,
  ._1YxwggUGNuE9etxU492xIR,
  ._3j3M0LywC9GyLPsnpdNG8V,
  ._2LTKo-nlyYLVRKsj1X6eGI,
  ._1v9ZE7w0-S_n77qak6xec_,
  ._2E5f9dcBHy3qnWSeU-8cd5,
  ._88qgE4CMD4qM_00ZKVzc,
  ._1i8s3bFlnaNt_6va2mTgzO {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    padding-right: 1rem;
    padding-left: 1rem; }
  ._2E3q623xQv-b6UCWYPN6O {
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%; }
  ._2a_9RysYe_umE_UxFcZKpA {
    -ms-flex-preferred-size: 8.333%;
    flex-basis: 8.333%;
    max-width: 8.333%; }
  ._1hBvn_Ex5gkNaGjyi0gf-m {
    -ms-flex-preferred-size: 16.667%;
    flex-basis: 16.667%;
    max-width: 16.667%; }
  ._28qG4iY0piQpeDzjMFFT0Z {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }
  ._30Wipn5kdq2K3h-P5MyRqC {
    -ms-flex-preferred-size: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%; }
  .LJTTxge32DSWj7fNAtKn0 {
    -ms-flex-preferred-size: 41.667%;
    flex-basis: 41.667%;
    max-width: 41.667%; }
  ._1YxwggUGNuE9etxU492xIR {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }
  ._3j3M0LywC9GyLPsnpdNG8V {
    -ms-flex-preferred-size: 58.333%;
    flex-basis: 58.333%;
    max-width: 58.333%; }
  ._2LTKo-nlyYLVRKsj1X6eGI {
    -ms-flex-preferred-size: 66.667%;
    flex-basis: 66.667%;
    max-width: 66.667%; }
  ._1v9ZE7w0-S_n77qak6xec_ {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }
  ._2E5f9dcBHy3qnWSeU-8cd5 {
    -ms-flex-preferred-size: 83.333%;
    flex-basis: 83.333%;
    max-width: 83.333%; }
  ._88qgE4CMD4qM_00ZKVzc {
    -ms-flex-preferred-size: 91.667%;
    flex-basis: 91.667%;
    max-width: 91.667%; }
  ._1i8s3bFlnaNt_6va2mTgzO {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }
  .SzM2n8dX-iX0D1f_zNyAJ {
    margin-left: 8.333%; }
  ._1FfY_ak1ommD8iqjB4vCEL {
    margin-left: 16.667%; }
  ._2cYfWyHGVXiIItkC_e8RPl {
    margin-left: 25%; }
  ._2dLjfWAKe527Yl24V-6GSZ {
    margin-left: 33.333%; }
  ._cvy_b6wdaU6IZVWkJH3z {
    margin-left: 41.667%; }
  ._2nrB6Nq10148uJV4TBmDTU {
    margin-left: 50%; }
  ._3y_eCqXeGDud-BATfzThEP {
    margin-left: 58.333%; }
  ._1yTsBmV26qA9HfbyXP4BtW {
    margin-left: 66.667%; }
  ._3rC-eX8CQcGHMb6eBUAxJo {
    margin-left: 75%; }
  ._1IqVlesbIUHWNVnnj8412T {
    margin-left: 83.333%; }
  ._30jVm0syrvXXS9SEOVRM_e {
    margin-left: 91.667%; }
  [dir="ltr"] .xX4_2LrvAE5JJl3PlIGnW {
    text-align: left; }
  [dir="rtl"] .xX4_2LrvAE5JJl3PlIGnW {
    text-align: right; }
  .xX4_2LrvAE5JJl3PlIGnW {
    -ms-flex-pack: start;
    -webkit-box-pack: start;
    justify-content: flex-start; }
  ._2FfW4wo0Q6ZrjzKUAOapvD {
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center; }
  [dir="ltr"] ._1DJKxe2Ed0zaacEGvHC5CV {
    text-align: right; }
  [dir="rtl"] ._1DJKxe2Ed0zaacEGvHC5CV {
    text-align: left; }
  ._1DJKxe2Ed0zaacEGvHC5CV {
    -ms-flex-pack: end;
    -webkit-box-pack: end;
    justify-content: flex-end; }
  ._1vYP8NymEuD-dgRqvdBIv8 {
    -ms-flex-align: start;
    -webkit-box-align: start;
    align-items: flex-start; }
  ._2CLfM8_7CC0yqKA_cvXhYS {
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center; }
  .Nv3k5VQ6qm1h-NOKLvNGZ {
    -ms-flex-align: end;
    -webkit-box-align: end;
    align-items: flex-end; }
  ._1_kpp3CX4XKdYD9jjYN35w {
    -ms-flex-pack: distribute;
    justify-content: space-around; }
  ._1VM0qxf3WQ6xgnJygQ35H5 {
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between; }
  ._1ypXkoZvzu5kGpcO7vcdij {
    -ms-flex-order: -1;
    -webkit-box-ordinal-group: 0;
    order: -1; }
  ._1jC6zYNbU617wDxSjjOpCS {
    -ms-flex-order: 1;
    -webkit-box-ordinal-group: 2;
    order: 1; } }
@media only screen and (min-width: 62em) {
  ._34KuURz9QhvErP4YRd00Bx {
    width: 61rem; }
  ._1l4RyPOYm16bm2rEEEgWnS,
  ._156vPeB8572ZHtK-nc3Y3i,
  ._2g4cYCBP1tboYSf2h5eduo,
  ._1s2kjKLy4Ems6LlcGvdVb7,
  .qSc95M68XfLy1CMe1qo19,
  ._32TnR6x6_8vE7S6cOA9Jri,
  ._3aYTWge9uiG9zkqdhR1JCW,
  ._1m4gEDNEPLAS8qU3kpBtvh,
  ._2YAJ57XDHnddKm2rZyomkF,
  .ynRGIywrA9qQnM7enRP1L,
  .VJa7IqZB-7dEmWr_r2a7U,
  ._3CUUjBBiamTAoX_HMl98XV,
  ._1zNiQsN1Ek7293I9vYRIAS {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    padding-right: 1rem;
    padding-left: 1rem; }
  ._1l4RyPOYm16bm2rEEEgWnS {
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%; }
  ._156vPeB8572ZHtK-nc3Y3i {
    -ms-flex-preferred-size: 8.333%;
    flex-basis: 8.333%;
    max-width: 8.333%; }
  ._2g4cYCBP1tboYSf2h5eduo {
    -ms-flex-preferred-size: 16.667%;
    flex-basis…

[betancourtl]

I am only using s.row and the css output is including all the css classes. What am I doing wrong?

[Ffloriel]

Closing this issue as it seems similar to the #163.