CSS opacity capped at 1% when using percentage units

[jennydaman]

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:
jennydaman/opacity-onepercent-bug@c98943d

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]

I have checked out the repository you've provided but the opacity seems to work correctly on my system.

Have you tried deleting node_modules and your lock file, then reinstalling? You haven't pushed a lock file, so it's possible the versions of our dependencies are different, which causes you errors, but works for me.

[jennydaman]

Oh sorry for that, I forgot to mention something important. This bug only happens for production builds. I will edit my first comment....

yarn run build && yarn run serve

Also it seems like the lock file is included in .gitignore by default. You're right, isn't it a good practice to push the package lock file?
preactjs-templates/default@f67ea78#diff-0e2612bf56ebdfc6966ee7e8970361a9R1-R6

[rschristian]

Thanks, that I can reproduce.

It seems to be an issue only affecting CSS Modules. Importing the style sheet into the component works without issue. I'll try to take a look, see what might cause that.

I don't know why the lock file is excluded by the .gitignore for that template, as none of the other templates have it ignored. Simple PR to fix though. Generally, yes, it is good practice to push. Yarn says it should always be pushed, NPM suggests that there are situations when it shouldn't, but none of those situations are web apps.

[jennydaman]

PR for lockfile inclusion
preactjs-templates/default#41

[jennydaman]

minified CSS module is affected.

Inline style in JSX style=opacity: 67% is not affected.

This also means that inline styles are not minified (or at least are not processed the same way).

[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

[prateekbh]

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

[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]

Fixed with cssnano v5