CSS `sign()` and `abs()` support? - Githubissues

csstools / postcss-plugins

PostCSS Tools and Plugins

https://preset-env.cssdb.org/

MIT No Attribution

888 stars 71 forks source link

CSS `sign()` and `abs()` support? #1449

Open unit-404 opened 1 month ago

unit-404 commented 1 month ago

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:

Validations

[X] Follow our Code of Conduct
[X] 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 commented 1 month ago

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