Override value of variables

[danrot]

We have developed a product, where we use this plugin to have some variables. Now some people want to adjust the styling of this product. I thought it could be as simple as using the onVariables callback and override the value. I imagined something like this:

module.exports = {
    plugins: {
        'postcss-simple-vars': {
            onVariables: function(variables) {
                variables.viewPadding = '20px';
            },
        },
    },
};

However, overriding the variables like this does not seem to work... Isn't that what this function was built for? Is there another way of doing something like this?

[ai]

Maybe it will better to explicitly define changeable variables? You can use https://github.com/csstools/postcss-env-function for this.

It will be better than onVariables hack because this hack will be unclear for a developer who doesn’t know about this hack. A developer will be very suprised when $a: 1 generated variable with 2.

[danrot]

We wouldn't use that "hack" ourself, and in our use case it specifically is about overriding existing variables, so I think a developer using it will know what happens here.

But am I sensing you right, that this does not work currently, and that you don't have any plans to support something like this?

Explicitly defining all variables like this would be quite a lot of work, and since we never know what exactly they want to override it is also hard to do :confused:

[ai]

If you are sure about your way, you can create a simple custom PostCSS plugin and put it before postcss-simple-vars. Something like:

module.exports = postcss.plugin('postcss-override-vars', (opts = { }) => {
  let overrides = opts.overrides || { }
  return root => {
    // Variable definitions ($one: 1) is just declarations in PostCSS AST
    root.walkDecls(decl => {
      if (decl.prop.startsWith('$') && typeof overrides[decl.prop] !== 'undefined') {
        decl.value = overrides[decl.prop]
      }
    })
  }
})

[Saggitarie]

@ai Hi, how are things going for this override feature? Are you planning of including this in postcss?

We are planning to override variables in a single file, so that we can dynamically change the values of css variables that links with one another. We thought that it would be useful to quickly change the design of our website by just changing common values in a single file.

[ai]

@Saggitarie send PR to the plugin.

If it will require a lot of work, create an issue with syntax suggestion.

[Saggitarie]

@ai Thanks for your reply. After further investigation, I realized that we are using precss plugin for our project. I've contacted the maintainer for postcss-advanced-variables about override readonly variable.