MadLittleMods / postcss-css-variables

PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation
https://madlittlemods.github.io/postcss-css-variables/playground/
Other
536 stars 62 forks source link

It hangs, do I call it wrong? #139

Open kasperkamperman opened 3 months ago

kasperkamperman commented 3 months ago

I'm trying to process bulma.css (v1.00, 636 Kb).

It hangs. Maybe there is an issue with my postcss.config.js? Do I need to use this plugin in a different way? (Other plugins work fine calling like this).

const varRemove = require('postcss-css-variables')

module.exports = {
    plugins: [
        varRemove() // remove css variables
    ],
};

I also found the online tool, but copy-pasting this big file also hangs the browser.

I have fast M2 system, so I think it relates to the plugin or my use of it.

kasperkamperman commented 2 months ago

I could pinpoint that it hangs while processing at this point:

resolveDecl(
              decl,
              map,
              opts.preserve,
              opts.preserveAtRulesOrder,
              logResolveValueResult
            );`
oliwarner commented 1 month ago

Same boat. Bulma v1 is a real pig with variables. I've just seen your thread on Bulma.

With PostCSS's new variables option (which kicks out unused vars) and postcss-variable-compress, I'm down to 20KB/6KB but that dosen't seem to help the runtime performance of postcss-css-variables.

module.exports = {
    plugins: [
        require('@fullhuman/postcss-purgecss')({
            content:  [
                // ...
            ],
            variables: true,
        }),
        require('postcss-variable-compress'),
        require("postcss-css-variables"),
    ],
}