background-clip: text doesn't get expected vendor prefix

[jmmarco]

Hello 👋
I was trying to get the necessary vendor prefix for the background-clip property using https://autoprefixer.github.io/.

Input:

p {
  background: coral;
  background-clip: text;
  color: transparent;
}

Expected Output:

p {
  background: coral;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Current Output:

p {
  background: coral;
  background-clip: text;
  color: transparent;
}

According to caniuse, support for Firefox, Chrome and Safari can be achieved by using the unoficial:
-webkit-background-clip: text

[ai]

Seems like text finally become part of the standard, so we can add support to Autoprefixer.

@jmmarco can you help me and send PR to caniuse with additional JSON file of text value? We can’t add support to Autoprefixer without explicit (not comment) data on Can I Use.

[jmmarco]

Hi @ai sure thing! Just to clarify, you mean an example JSON file with the example code?

[jmmarco]

Ah, I think you're referring to the features-json file from caniuse

[ai]

Yeap, you need to create new JSON file about text value in features-json/

[jmmarco]

Done! Let's see if I did well.. Here's the link to the PR

[ai]

@jmmarco awesome! Do you want to send PR to the Autoprefixer as well to got so big project in GitHub profile? You need:

1. Add text value with props: ['background-clip'] data to data/prefixes.js
2. Add lib/hacks/text.js with the class which will extends Value.
3. Load this hack in lib/prefixes.js
4. In that hack class change the prefix for IE to -webkit-. See appearance hack.
5. Add tests to autoprefixer.test.js to test that Autoprefixer with Chrome and Edge browsers adds only -webkit- prefix.

[HM100]

Edge 15+ Supports the text value without any prefixes according to what I read on MDN before

[ai]

@jmmarco yeap @HM100 is right. Can you send additional PR to Can I Use? Also it will be good to add explicit note for Edge, that they used -webkit- instead of -ms- prefix.

But the plan for Autoprefixer is the same. Autoprefixer anyway need a hack for Edge in case if somebody will need prefixes for Edge 12.

[jmmarco]

Sure, I'll be happy to create the PR for autoprefixer. First, I'll go ahead and update the PR on caniuse to reflect that Edge 15+ supports background-clip: text natively.

[jmmarco]

Created a new PR with the requested support for Edge 15+

[ai]

Cool. You can send PR to Autoprefixer before accepting that Can I Use PR.

[jmmarco]

Hi @ai I'm trying to figure out how to do this PR, however I'm not sure of where to add text to data/prefixes.js. Can I get some pointers or perhaps a similar PR so I can learn from that?

[ai]

@jmmarco sure. It should be something like https://github.com/postcss/autoprefixer/blob/master/data/prefixes.js#L446-L453

f(require('caniuse-lite/data/features/JSON_NAME'), browsers =>
   prefix([WHAT TO PREFIX], {
     props: PROPS_WHERE_YOU_CAN_FIND_VALUE,
     feature: 'JSON_NAME',
    browsers
   })
)

[ai]

Done 73c7b6a

[ai]

Released in 9.1