PostCss CQFill plugin

sage
1

I’m trying to add this GitHub - jsxtools/cqfill: Polyfill for CSS Container Queries plugin like any normal postcss plugin. My .scss files are transforming properly according to the example below, but the script isn’t being applied.

Example:

// before

.contained {
  contain: layout inline-size;
	background: gray;
	width: 100%;
	height: 300px;
}

.box {
	background: blue;
	width: 100%;
	height: 100%;
}
@container (min-width: 400px) {
  .box {
	background: green;
  }
}

// after 

.contained {
  --css-contain: layout inline-size;
  contain: layout inline-size;
  background: gray;
  width: 100%;
  height: 300px;
}

.box {
  background: blue;
  width: 100%;
  height: 100%;
}

@media --css-container and (min-width: 400px) {
  .box {
    background: green;
  }
}

@container (min-width: 400px) {
  .box {
    background: green;
  }
}

// postcss.config.js

module.exports = (api) => {

  const cssnanoConfig = {
    preset: ['default', { discardComments: { removeAll: true } }]
  };

  return {
    parser: api.options.ctx.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      'cqfill/postcss': true,
      autoprefixer: false,
      cssnano: api.options.ctx.enabled.optimize ? cssnanoConfig : false,
    },
  };

};

I’m probably confused here. Do I need to add anything else to the common.js file based on the readme? cqfill/README.md at main · jsxtools/cqfill · GitHub

I tried import { cqfill } from 'cqfill' into my common.js file. Then calling the cqfill() function, but that resulted in an error.

2

It looks like I just have to import 'cqfill' within common.js