Twin.macro: Placeholder utility not working as expected

[owaiswiz]

Just came across this yesterday, placeholder utility (ex. placeholder-red-500) does not work as expected. They instead apply the color property on the input element directly instead of the ::placeholder pseudoelement.

Here's a codesandbox .

(I think it's because how they are defined here ?)
https://github.com/ben-rogerson/twin.macro/blob/27bd97600bd706f70068fa40ed6956dfff5ea6f6/src/config/dynamicStyles.js#L165
I think they would need to be handled as a special case (like how you've done with :before and :after). I tried to find how one would do that but couldn't.

For now to get around this for other people who see this (that are using a css-in-jss solution), you have to apply styles using the ::placeholder pseudoelement manually

const Input = styled.input`
 ${tw`p-4`}
 ::placeholder { 
    ${tw`text-red-500`} 
}
`;

[ben-rogerson]

Thanks for submitting this bug and for the perfect demo. I'll fix this bug up pronto.

[ben-rogerson]

The fix is in 1.0.0-alpha.9, closing :)

[ben-rogerson]

Here's your demo working in the new twin version.