postcss-custom-media + postcss-mixins

[spacedawwwg]

I don't know if this is postcss-custom-media or postcss-mixins but I'm not able to get postcss-custom-media to work on CSS generated by postcss-mixins.

.l-grid {
  display: grid;
  gap: var(--grid-gap);
}

/**
* Grid modifiers. Will generate us a suite of classes like:
*
*  .l-grid--2 {} // 2 columns
*  .l-grid--3 {} // 3 columns
*  .l-grid--4 {} // 4 columns etc.
*
* The same classes from above will also be prefixed with a breakpoint value:
*
*  .sm:l-grid--2 {}
*  .md:l-grid--2 {}
*  .lg:l-grid--2 {} // etc.
*
*  .etc
*/
@mixin gridColumns 12, l-grid;

This is my config. + mixin.

const postcssImport = require('postcss-import');
const postcssARulesVariables = require('postcss-at-rules-variables');
const postcssMixins = require('postcss-mixins');
const postcssNested = require('postcss-nested');
const postcssCustomMedia = require('postcss-custom-media');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const breakpoints = require('../packages/core/tokens/dist/tokens.json').breakpoint;

function gridColumnItem(bp, column, prefix) {
  const baseCss = `
    .${prefix}--${column} {
      grid-template-columns: repeat(${column}, 1fr);
    }
  `;

  const breakpointsCss = Object.keys(bp).map(
    key => /* css */ `
      @media (--screen-${key}-min) {
        .${key}\\:${prefix}--${column} {
          grid-template-columns: repeat(${column}, 1fr);
        }
      }
    `
  );

  return [baseCss, ...breakpointsCss].join(' ');
}

function gridColumns(mixin, columns = 12, prefix = 'l-grid') {
  let gridCss = '';
  let column = 0;

  while (column < columns) {
    column += 1;
    gridCss += gridColumnItem(breakpoints, column, prefix);
  }

  mixin.replaceWith(gridCss);
}

const plugins = [
  postcssImport,
  postcssARulesVariables,
  postcssMixins({
    mixins: {
      gridColumns,
    },
  }),
  postcssNested,
  postcssCustomMedia,
  autoprefixer,
  cssnano({
    preset: [
      'default',
      {
        colormin: false,
      },
    ],
  }),
];

module.exports = {
  plugins,
};

Unfortunately it does not process the custom media and the end output is like so:

@media (--screen-xl-min){
  .xl\:l-grid--12{
    grid-template-columns:repeat(12,1fr)
  }
}

When not used in the mixin, --screen-xl-mix etc. are replaced to min-width: 1280px etc.

[cherepanov]

The same. If i replace custom-media with media-minmax everything processed well. Custom media always left unprocessed inside mixins.

[spacedawwwg]

@cherepanov I've not been able to get media-minmax working with the above either. do you have an example of something you have working you could share?

[spacedawwwg]

I've found out that all that needs to happen is this package be bumped! the code to fix this has already been merged in.

@jonathantneal @MoOx @Semigradsky is there any chance you could bump this on NPM to 8.0.1?

https://github.com/postcss/postcss-custom-media/pull/76

[cherepanov]

@spacedawwwg nothing special. just plug it in and it works. postcss config:

{
        syntax: 'postcss-scss',
        parser: 'postcss-scss',
        plugins: {
            'postcss-clamp': {},
            autoprefixer: {
                flexbox: true,
                grid: 'no-autoplace',
                overrideBrowserslist: ['ie >= 11', 'last 2 versions']
            },
            'postcss-import': {
                path: [path.resolve(__dirname, 'node_modules'), 'src'],
                plugins: DEV ? [require('stylelint')({})] : []
            },
            'postcss-modules':  {...},
            'postcss-mixins': {
                mixinsFiles: path.resolve(__dirname, 'packages/common/assets/styles/mixins.css')
            },
            'postcss-nested': {},
            'postcss-media-minmax': {},
            /*'postcss-custom-media': {
                importFrom: path.resolve(__dirname, 'media.css')
            },*/
            'postcss-custom-properties': {...}

[joelmoss]

FYI: until we get a new release, I've pushed a new version to my https://www.npmjs.com/package/@developwithstyle/postcss-custom-media containing the latest.

[romainmenke]

Hi all!

A new version (v8.0.1) has just been released. Can you let us know if this is still giving you problems?