CSS opacity capped at 1% when using percentage units

Do you want to request a feature or report a bug?

bug

What is the current behaviour?

CSS opacity with units as a [percentage] is capped at 1% for production builds.

If the current behaviour is a bug, please provide the steps to reproduce.

Minimal example: https://github.com/jennydaman/opacity-onepercent-bug/commit/c98943de9f8b90df501f5a2690498d7f21d7ec5c

Repo above was created using preact create --yarn --git default preact-opacity-bug

yarn run build && yarn run serve

What is the expected behaviour?

opacity: 67% or whatever

Please mention other relevant information.

I think this might be a bug with webpack’s css-loader, however I am unfamiliar with the code base (both preact-cli and css-loader). I’m hoping for a pointer on where this bug report should be made to or hints on how to trace/isolate the bug.

[rschristian]

so do we need to bumpsome of our dep and re-release?

Well currently there’s nothing to bump. The lib author just says a fix “will be released soon”. The fix was merged back on Feb 21, so “soon” is pretty vague, as the fix has already been around for 3 months without a release to make that fix public. In the meantime, the author suggests using postcss-ignore-plugin to ignore it, or just disable the plugin (cssnano) outright.

However, opacity with percentages as units isn’t even supported across the board by browsers, so there’s always the possibility of ignoring this for a bit. Don’t know how much effort anyone wants to put into fixing something that already won’t work on a significant portion of the internet anyways.

[rschristian]

The bug stems from an issue with cssnano, which is used by optimize-css-assets-webpack-plugin. It’s known and been fixed, just waiting on a new release. A workaround is offered, but if the fix is released soon enough, it might not be worth doing.

Here’s the PR in which it has been fixed