0

I'm trying to add customMedia option to my postcss-cssnext features config with importFrom file location, but that doesnt work and I dont have any errors on project build, only final Missing @custom-media definition for '--small-viewport'. The entire rule has been removed from the output. when I'm trying to use the media. How do I debug this?

module.exports = {
    plugins: [
        require('postcss-import')(),
        require('postcss-nested')(),
        require('postcss-simple-vars')({
            variables: {
                ...require('./src/ui/variables')
            }
        }),
        require('postcss-cssnext')({
            features: {
                customProperties: false,
                browsers: ['> 0.5%, last 2 versions, Firefox ESR, not dead'],
                customMedia: {
                    importFrom: require('path').join(__dirname, './src/ui/custom-media.css')
                }
            },
        }),
        require('cssnano')({
            autoprefixer: false,
            zindex: false,
            reduceIdents: false,
            discardComments: { removeAll: true },
            discardUnused: { fontFace: false },
            colormin: false,
        }),
    ]
};
godblessstrawberry
  • 4,556
  • 2
  • 40
  • 58

2 Answers2

1

Okay so as per postcss-custom-media CHANGELOG importFrom was added only in 7.0.0 while my cssnext uses 6.0.0. As CSSNext is deprecated I will switch to postcss-preset-env

godblessstrawberry
  • 4,556
  • 2
  • 40
  • 58
0

you know how to use custom media in postcss-preset-env, they work for me only if you create a custom media in the component and refer to it if I want to take custom media from index.css or vars.css they do not work , with variables everything is fine

Batyodie
  • 161
  • 1
  • 4
  • you should post another question - I'm unable to provide code here – godblessstrawberry Jun 22 '20 at 05:46
  • config ```const customMediaUnprefixed = require('./src/hooks/useMedia/custom-media.js'); const customMediaCache = { customMedia: Object.assign( {}, ...Object.keys(customMediaUnprefixed).map((key) => ({[`--${key}`]: customMediaUnprefixed[key]})) ), }; const config = { plugins: [ require('postcss-preset-env')({ stage: 0, customProperties: false, browsers: ['> 0.5%, last 2 versions, Firefox ESR, not dead'], importFrom: [customMediaCache], features: { 'color-mod-function': {unresolved: 'warn'}, }, }), ], }; module.exports = config; ``` – godblessstrawberry Jun 22 '20 at 05:47
  • custom-media.js ```module.exports = { sm: '(max-width: 719px)', md: '(min-width: 720px)', lg: '(min-width: 1280px)', xl: '(min-width: 1920px)', mdHeight: '(min-height: 550px)', lgHeight: '(min-height: 768px)', }; ``` – godblessstrawberry Jun 22 '20 at 05:48