Optionally preserve

[ar53n]

My idea is to add an option to exclude only some variables. Because I have postcss-color-function plugin, I don't want preserve all these variables.

For example I don't want preserve variables with color function.

Input:

.box {
    color: color(var(--red) a(90));
    padding-left: var(--pl);
}

Ideal/expected Result:

.box {
    background: rgba(255, 0, 0, 0.9);
    padding-left: 20px;
    padding-left: var(--pl);
}

[MadLittleMods]

Currently, if it is an invalid declaration, it will just fallback and work as expected.

• Is the goal to reduce the resultant size of your CSS?
• Does postcss-color-function choke and throw an error with color: color(var(--red) a(90));? Can you ignore those errors?
• Any ideas on how this option would be configured?

---

Input:

:root {
	--red: #f00;
	--pl: 15px;
}

.box {
    color: color(var(--red) a(90));
    padding-left: var(--pl);
}

Current output running just postcss-css-variables with options.preserve = true

:root {
	--red: #f00;
	--pl: 15px;
}

.box {
    color: color(#f00 a(90));
    color: color(var(--red) a(90));
    padding-left: 15px;
    padding-left: var(--pl);
}

[ar53n]

@MadLittleMods I did want just ignore some rules for preserve. For example not preserve line for color function. Because in Chrome its line work, but not correctly. And I want delete source line and to stay only fallback. Also have many plugins that can't work with custom properties and throw error when try to parse

options: {
    preserve: [
         true, 
         {
           // some strings or regexp for ignore
          }
    ]
}

[MadLittleMods]

@ar53n So I can understand your use case better:

• Why do you want the variables preserved at all?
• Could your use case be solved by setting preserve: false? If not, why?
• This seems like something that postcss-color-function could handle on removing any color() declarations it fails to parse

---

For reference on color: color(var(--red) a(90)); looking valid in Chrome so it doesn't fallback.

[zachleat]

I too would like some sort of way to declare that a specific var should be left as is and not transformed. Maybe like

padding-left: var(--p1); /* @postcss-css-variables-exception */