postcss-custom-media not work for me

[truantdamian]

(sorry by my poor english)

I´m using post-custom-media with css-modules and my custom-media not working.

I dont have a error but the break media not working

here is my code :

Header.js :

import { container } from './style.css'

const Header = ({ urlAccountImage = '' }) => {
  useEffect(() => {
    urlAccountImage !== '' && setLogo(urlAccountImage)
  }, [])

  const [logo, setLogo] = useState('')
  return (
    <header className={container}>
      <img src={logo} alt="logo"></img>
      <div>
        <button>llamame!</button>
        <button>phone</button>
        <button>whatsapp</button>
      </div>
      <div>
        <p>telefonos disponibles</p>
      </div>
    </header>
  )
}

style.css :

@custom-media --medium-viewport (min-width: 768px);

.container{
....
}

@media( --medium-viewport ){
  .container{
    ....
  }
}

and this my webpack.config.js :

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const postcssCustomMedia = require('postcss-custom-media')
const postcssPresetEnv = require('postcss-preset-env')

const development = 'development'


const jsRules = {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-react',
        '@babel/preset-env']
   }
  }
}

const cssRules = function ({ mode }) {
 return {
 test: /\.css$/i,
 use: [
 {
loader: 'style-loader',
 options: {
          esModule: true,
          modules: {
            namedExport: true
          }
        }
      },
      {
        loader: 'css-loader',
        options: {
          esModule: true,
          modules: {
            namedExport: true,
            localIdentName: mode === development ? '[path][name]__[local]' : '[hash:base64]'
          }
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            plugins: [
              [postcssPresetEnv(),
                postcssCustomMedia()
              ]
            ]
          }
        }
      }
    ]
  }
}

const alias = {
  Pages: path.resolve(__dirname, 'src/pages/'),
  Components: path.resolve(__dirname, 'src/components/'),
  Services: path.resolve(__dirname, 'src/services/'),
  Hooks: path.resolve(__dirname, 'src/hooks/'),
  Constants: path.resolve(__dirname, 'src/constants/')
}

module.exports = function (env, argv) {
  return {
    devtool: argv.mode === development ? 'eval' : 'source-map',
    resolve: { alias },
    output: {
      filename: 'main.[contenthash].js',
      publicPath: '/'
    },
    module: {
      rules: [
        jsRules,
        cssRules(argv)
      ]
    },
    devServer: {
      historyApiFallback: true
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      })
    ]
  }
}

[knupska]

The media rule is:

@media( --medium-viewport ){
  .container{
    ....
  }
}

It contains whitespace, so it's likely @truantdamian was also experiencing issue #421 .

[romainmenke]

@truantdamian

This issue has been fixed in v8.0.1 : https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-custom-media/CHANGELOG.md#801-june-3-2022

Thank you for reporting this!