search

postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
595 stars 77 forks source link

wrong box-shadow resolution (v9.1.1) #218

Closed Artess999 closed 4 years ago

Artess999 commented 4 years ago 
:root {
  --shadow-color: rgb(255,0,0);
  --shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
}

.btn {
   box-shadow: var(--shadow);
}

(with preserve: false) becomes:

.btn {
  box-shadow: 06 px14px0color(red a(.15))
}

in v7.0.0 result was correct:

.btn {
  box-shadow: 0 6px 14px 0 rgba(255, 0, 0, .15)
}

But on v9.1.1 result is correct if code is

:root {
  --shadow-color: red;
  --shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
}

.btn {
   box-shadow: var(--shadow);
}
rikbrowning commented 4 years ago

I have a similar issue:

:root {
  --shadow-inset: inset 0 0 0 2px black, inset 0 0 0 4px rgba(255, 255, 255, 0.48), inset 0 0 0 5px rgba(255, 255, 255, 0.24);
  --shadow-1: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.cls{
  box-shadow: var(--shadow-inset), var(--shadow-1);
}

Produces

.cls{
  box-shadow: inset0002pxblack,inset0004pxrgba(255, 255, 255, 0.48),inset0005pxrgba(255, 255, 255, 0.24), 0 2px 4px -1px rgba(0, 0, 0, 0.2) , 0 4px 5px 0 rgba(0, 0, 0, 0.14) , 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: var(--feather-button-primary-border), var(--feather-shadow-4);
}
Semigradsky commented 4 years ago

Fixed in https://github.com/postcss/postcss-custom-properties/releases/tag/9.2.0