Support for rbg(R G B / T) color notation

[Razunter]

Currently, there is no support for modern rgb() and the plugin generates warnings, for example:

a {
  background-image: linear-gradient(
    to top,
    rgb(0 0 0 / 0.6),
    10%,
    transparent,
    95%,
    rgb(0 0 0 / 0.3)
  );
}

This code causes

Cannot calculate transparency for an invalid color. Please check your color stop definitions. [postcss-gradient-transparency-fix]

Same issue with oklch(0.452 0.313 264.1)

[gilmoreorless]

The parsing of colour values is offloaded to the color package, but this plugin is admittedly using an older version. Perhaps updating the dependencies will fix a lot of these issues. I'll take a look.

I'm curious though — what's your current PostCSS setup for handling these different values (other than this plugin)? What browser compatibility are you targeting?

The reason I ask is that oklch support was natively added in Safari 15.4, which is the same version that added premultiplied alpha support (and therefore made this plugin redundant for modern browsers).

[Razunter]

I'm targeting Safari 14.0+, it's still too common (>0.2%). As for PostCSS setup, it's used via Vite. In my config I have LightningCSS before transparency fix, but it doesn't help since rgb() with transparency is supported on Safari 14.

const browserslist = require('browserslist')
const postcssLightningcss = require('postcss-lightningcss')
const path = require("node:path")

module.exports = {
  plugins: [
    require('postcss-inline-svg')({
      paths: [path.resolve('./scss/embeds'), path.resolve('../css')],
    }),
    require('postcss-assets')({
      loadPaths: [path.resolve('sparkles/css'), path.resolve('./')],
      relative: true,
    }),
    require('postcss-discard-empty'),
    require('postcss-svgo'),
    require('postcss-sort-media-queries')({}),
    require('postcss-pxtorem')(),
    postcssLightningcss({
      browsers: browserslist(),
      lightningcssOptions: {
        minify: false,
      },
    }),
    require('postcss-gradient-transparency-fix'),
  ],
}

[gilmoreorless]

Ah thanks, that makes sense. That sample config is a great help, too. I'll take a look at a fix.

[gilmoreorless]

After doing some testing, it turns out the newer colour syntaxes are already handled (caveat: oklch has the syntax handled but not the actual colour interpolation, as it only understands rgb models).

What's actually breaking this plugin is the interpolation hints (the 10% and 95% in your code sample). The plugin's trying to parse them as colours and complaining. I'll try to get a fix in soon.

[gilmoreorless]

I've published version 4.1.0 containing a fix for the interpolation hints. Give it a try and let me know if there are still some errors.

[Razunter]

The warning is now gone, thank you!