Optionally preserve - Githubissues

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

Optionally preserve #94

Open ar53n opened 5 years ago

ar53n commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 4 years ago

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 */