CSS sign() and abs() support?

[u2re-dev]

What would you want to propose?

I want to ask support for CSS sign() and abs().

Suggested solution

@support (opacity: abs(-1)) {
  // legal sign()
}

@support not (opacity: abs(-1)) {
  // workaround math
  // such as max(value, calc(0 - value))
}

@support (opacity: sign(0.5)) {
  // legal sign()
}

@support not (opacity: sign(0.5)) {
  // workaround math
  // such as clamp(value / max(abs(value), 0.0001), -1, 1)
}

Additional context

About spec and chrome support:

• https://www.w3.org/TR/css-values-4/
• https://issues.chromium.org/issues/40253181

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[romainmenke]

Hi @unit-404,

We already support abs() and sign() in css-calc, the underlying package behind all math related fallbacks.

So it would be relatively straightforward to create a plugin for this.
You can see this package in action here: https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-trigonometric-functions/src/index.ts

If you have time, please consider contributing : https://github.com/csstools/postcss-plugins/blob/main/CONTRIBUTING.md#creating-a-new-plugin-here

The name for this plugin should be sign-functions to mirror: https://cssdb.org/#sign-functions

[romainmenke]

This has shipped in postcss-preset-env v10.1: https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/CHANGELOG.md#1010

Thank you again for requesting this

[u2re-dev]

Solutions for fallback with custom properties (I didn't reinterpret to CSS)...
In general, you can leave the pre-calculation solution with math if the values allow it.

/* solution for dynamic custom properties */
/* I didn't include `@supports` feature here. */

// added
$cps: 0.00001;

// any type (abs only)
@function abs($a) {
    @return string.unquote("max(#{$a}, calc(-1 * #{$a}))");
}

// if number type
@function sign($a) {
    @return string.unquote("round(to-zero, clamp(-1, calc(#{$a} / max(#{abs($a)}, #{$cps})), 1), 1)");
}

// if length such as px
@function sign-unit($a, $unit: "px") {
    @return string.unquote("round(to-zero, clamp(-1#{$unit}, calc(#{$a} / max(tan(tan2(#{abs($a)}, 1#{$unit})), #{$cps})), 1#{$unit}), 1#{$unit})");
}

[romainmenke]

As before, PR's are welcome

If you have time, please consider contributing : https://github.com/csstools/postcss-plugins/blob/main/CONTRIBUTING.md