Allow to filter preserved custom properties

[jiayihu]

Due to runtime performance of root current properties on large applications, it would be nice to allow a mix of preserved and removed custom properties. The idea is to remove runtime properties which you want to be static to improve performance, whereas to leave at runtime those who are dynamic such as involved in the theme.

Article about runtime performance of CSS variables.

[jonathantneal]

This can be accomplished using the importFrom feature with preserve false.

[jiayihu]

It doesn't seem so, but first I'd like to explain better my case. There are two possible scenarios:

1. Specify which custom properties to preserve. From the PR, this can be almost achieved by allowing to pass options to each source in importFrom

   postcssCustomProperties({
     importFrom: [
       { path: 'path/to/file.css', preserve: true },
       { path: 'and/then/this.js', preserve: false }
   });

2. Specify which declarations using custom properties to preserve, maybe by using comments:

   /* Assuming preserve: true for this source */
   :root {
   --color: red;
   }
   
   /* postcss-custom-properties-disable preserve */
   
   h1 {
   color: var(--color);
   }
   
   /* postcss-custom-properties-enable preserve */
   
   .themed-box {
   color: var(--color)
   }
   
   /* becomes */
   :root {
   --color: red;
   }
   
   h1 {
   color: red;
   }
   
   .themed-box {
   color: red;
   color: var(--color)
   }

The rational of these requests are to allow tuning performance. Even if runtime custom properties are not changed, they still have an impact on start-up performance.

[jonathantneal]

Hmm, okay you are doing some very custom tuning. Another plugin should handle this. This plugin was already doing too much beyond the spec.

[garygreen]

I know this is an old issue but I too would like to register my interest in this.

We use variables defining fontawesome unicodes:

:root {
    --fa-search: "\F002";
    --fa-envelope-o: "\F003";
    --fa-heart: "\F004";
    --fa-star: "\F005";
    --fa-star-o: "\F006";
    --fa-user: "\F007";
    --fa-th-large: "\F009";
    --fa-check: "\F00C";
    --fa-remove: "\F00D";
    --fa-close: "\F00D";
.... the massive list goes on

These values never change during the lifetime of the application so we would like to convert these to static values. Anything else that can change during the lifetime of the app e.g. anything related to theme due to switch of a colour scheme light/dark mode - these should be preserved.

It be would great if there was a way of customising what variables are preserved rather than a one/or the other type situation. Maybe the preserve option can accept a function that is called per variable and decides whether to preserve it or not?

[garygreen]

@jiayihu did you ever find a solution to this? 😃

[jiayihu]

Yes, although I don't know if it can be applied to your case. To put it simply, I use Custom Properties along with SCSS variables so I use the latter for static values. This is also due runtime performance of Custom Properties, which provoke a noticeable slow down: https://blog.jiayihu.net/css-custom-properties-performance-in-2018/