CSS custom properties skipped in position()

[meduzen]

Description

A CSS custom property used as edge value in the position() mixin is skipped.

Steps to Reproduce

.my-selector {
  --my-var: 10rem;

  @include position(absolute, 5rem var(--my-var) null null);
}

Output:

.my-selector {
  --my-var: 10rem;

  position: absolute;
  top: 5rem;
}

Expected:

.my-selector {
  --my-var: 10rem;

  position: absolute;
  top: 5rem;
  right: var(--my-var); // this one is missing
}

Under the hood, it happens because the position mixin ensures the edges are proper CSS lengths using is-length.

is-length allows calc(), but unfortunately it doesn’t allow var() nor env().

Would you accept a PR for this?

I’m not a fan of enforcing values (at least for position): if the value isn’t valid, the browser will naturally skip it. I think the responsibility for validation should be on the CSS author side, not on Bourbon side.

Development Environment

Bourbon 5.0, MacOS, node-sass.

[tysongach]

Thanks for reporting!

Would you accept a PR for this?

Yes, absolutely. That would be hugely helpful!

[tysongach]

Closed via https://github.com/thoughtbot/bourbon/commit/eb23e19bd45aba7e777fbb45cc28eadff92067b3.