Able to export custom-media but not custom-properties

[mantismamita]

Hello, I seem to be having a problem using importFrom and exportTo in the project I am working on. I've tried exporting to both json and js and both work for custom-media but not for custom-properties. Here is my config file:

module.exports = {
  preprocess: sveltePreprocess({
    postcss: {
      plugins: [
        require('postcss-import')(),
        require('postcss-mixins'),
        require('autoprefixer'),
        require('postcss-custom-media'),
        require('postcss-custom-properties'),
        postcssPresetEnv({
          stage: 3,
          features: {
            'custom-media-queries': true,
            'nesting-rules': true,
          },
          importFrom: [
            './src/assets/styles/__customMedia.css',
            './src/assets/styles/__customProperties.css',
            './src/assets/styles/customProperties.json'
          ],
          exportTo: (customProperties, fileContent) => {
            console.log(customProperties)
          }
        }),
        require('postcss-nested')(),
        require('postcss-global-nested')(),
        require('cssnano')({
          preset: 'default',
        }),
      ],
    },
    typescript: {
      tsconfigFile: './tsconfig.json',
    },
  }),
};

I am using svelte with webpack. the console.log outputs:

{
   customMedia: {
     '--xs-min-viewport': '(min-width: 375px)',
     '--small-min-viewport': '(min-width: 600px)',
    '--medium-min-viewport': '(min-width: 768px)',
    '--large-min-viewport': '(min-width: 1024px)',
    '--xl-min-viewport': '(min-width: 1200px)',
},
  customProperties: {},
  customSelectors: {}
}

Incidently, I don't have this problem in my reduced test case where I used the same config file although I did have to upgrade to postcss 8.1 to get some of the plugins working. I tried to do the same in the larger project but the output is the same.

[mantismamita]

I think the problem might already have been corrected. I think I found the commit that deals with my issue specifically https://github.com/csstools/postcss-preset-env/commit/ca9d4ff2daf34dc0a83f0cb29de087027235e27b

Also it works as expected when I link the package via npm link but not when I use v6.7.0 directly.

is there another release scheduled ?

[mantismamita]

When I remove development from browserlist and run the built package it also works as expected.

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "not IE 11",
      "not IE_Mob 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "not IE 11"
    ]
  }

[mantismamita]

So it turns out I needed to move exportTo and importFrom to stand-alone postcss-custom-properties and disable postcss-custom-properties in postcss-preset-env.

module.exports = {
  preprocess: sveltePreprocess({
    postcss: {
      plugins: [
        require('postcss-import')(),
        require('postcss-mixins'),
        require('autoprefixer'),
        require('postcss-custom-media'),
        require('postcss-custom-properties')({
          exportTo: [
            './src/assets/styles/customProperties.js',
          ],
          importFrom: [
            './src/assets/styles/__customProperties.css',
            './src/assets/styles/customProperties.json'
          ],
        }),
        postcssPresetEnv({
          stage: 3,
          features: {
            'custom-media-queries': true,
            'nesting-rules': true,
          },
          importFrom: [
            './src/assets/styles/__customMedia.css',
          ]
        }),
        require('postcss-nested')(),
        require('postcss-global-nested')(),
        require('cssnano')({
          preset: 'default',
        }),
      ],
    },
    typescript: {
      tsconfigFile: './tsconfig.json',
    },
  }),
};