Exported files are invalid

[ikigeg]

Background Hi, first of all thanks for the library, has proven very helpful with rectifying some IE11 issues related to css variables taken from node-sass parsed sass files. Unfortunately, since we have implemented code splitting based on routes it has stopped working! Nightmare, as essentially each route is missing the global variables 🤷‍♂

So, I am currently experimenting with various things and have found if I export the custom properties to a file using exportTo, then run it again with after importing that file using importFrom it works! I have had to modify the code of the library locally though owing to the below issue, and this feels very hacky, so I am creating this issue to couple with an incoming PR.

Issue Integrating this library into create-react-app via craco using config (nothing fancy):

const PostCSSAssetsPlugin = require('postcss-assets-webpack-plugin');
const PostCSSCustomProperties = require('postcss-custom-properties');
module.exports = {
  webpack: {
    plugins: [
      new PostCSSAssetsPlugin({
        test: /\.s?css$/,
        log: true,
        plugins: [
          PostCSSCustomProperties({
            preserve: false,
            exportTo: ['postcssOutput.js'],
          }),
        ],
      }),
    ],
  },
};

We have 7 routes or so, and logging out the export function it appears (maybe coincidentally) to do a write per route to that one same postcssOutput.js, where some of the content sizes are 0. Ultimately, for some reason, this ends up with the file getting messed up (for each of the 4 file types).

Example of expected output:

module.exports = {
    customProperties: {
        '--black': '#000',
        '--while': '#000',
         }
}

Example of actual output:

module.exports = {
    customProperties: {

    }
};
ack': '#000',
        '--white': '#fff',

[SuperPat45]

I have the same bug

[dougestey]

I've also seen this bug using a Stencil + PostCSS setup.

[simplenotezy]

I have the same issue. In my case, in SOME situations, the file look like this:

module.exports = {
    customProperties: {
        '--color-brand': '#06c167',
        '--color-brand-faded': '#0ce578',
        '--color-splash': '#ff6b06',
        '--color-dark': '#000',
        '--color-light': '#fff',
        '--color-figure': 'var(--color-dark)',
        '--color-fill': 'var(--color-light)',
        '--color-gray-1': '#333',
        '--color-gray-2': '#666',
        '--color-gray-3': '#e5e5e5',
        '--color-gray-4': '#f7f7f7',
        '--color-button-primary-border': '#198b47',
        '--color-button-primary-shadow': '#188c47',
        '--color-splash-border': '#9d4816',
        '--color-splash-shadow': '#9d4816',
        '--color-error': '#d71515',
        '--color-warning': '#cee024',
        '--font-size-root-extra-large-desktop': '100%',
        '--font-size-root-large-desktop': '100%',
        '--font-size-root-desktop': '100%',
        '--font-size-root-tablet': '100%',
        '--font-size-root-mobile': '14px',
        '--font-family-default': '\'Gilroy\' , \'system-ui\' , \'Trebuchet MS\' , \'Arial\' , \'Helvetica\' , \'Verdana\'',
        '--font-family-heading': '\'Gilroy\' , \'system-ui\' , \'Trebuchet MS\' , \'Arial\' , \'Helvetica\' , \'Verdana\'',
        '--font-weight-extra-bold': '800',
        '--font-weight-medium': '500',
        '--font-weight-light': '300',
        '--font-size-extra-small': '0.75rem',
        '--font-size-small': '0.9rem',
        '--font-size-medium': '1.1rem',
        '--font-size-large': '2rem',
        '--font-size-extra-large': '2.5rem',
        '--gutter': '1rem',
        '--layout-container-width': '80rem',
        '--layout-site-max-width': '2200px',
        '--layout-site-header-height': '80px',
        '--layout-site-header-height-mobile': '50px',
        '--section-padding': '3.5rem',
        '--section-padding-mobile': 'calc(var(--section-padding) * 0.7)',
        '--container-padding': 'var(--gutter)',
        '--container-padding-mobile': 'calc(var(--gutter) * 2)',
        '--box-shadow-small': '0px 7px 8px rgba(0, 0, 0, 0.04) , 0px 1px 4px rgba(0, 0, 0, 0.12)',
        '--box-shadow-medium': '0px 4px 4px rgba(0, 0, 0, 0.06) , 0px 12px 12px rgba(0, 0, 0, 0.08) , 0px 16px 12px rgba(0, 0, 0, 0.08)',
        '--box-shadow-large': '0px 7px 8px rgba(0, 0, 0, 0.04) , 0px 1px 4px rgba(0, 0, 0, 0.12)',
        '--arrow-size': 'calc(var(--gutter) * 0.5)'
    }
};
w-size': 'calc(var(--gutter) * 0.5)'
    }
};