search

QuickBase / babel-plugin-styled-components-css-namespace

A babel plugin to add css namespaces (and increase specificity) of styled-component classes.
MIT License
118 stars 32 forks source link

Plugin Not Working with Different Styled Component Syntax #96

Open benpaullamb opened 1 year ago

benpaullamb commented 1 year ago

Hi, I've got an issue with some components in a component library. The class names don't get doubled by this plugin when using the following Styled Components syntax:

Doesn't work

const ArrowButton = styled.button<ArrowButtonProps>(({ disabled = false }) => [
  tw`text-white`,
  disabled ? tw`bg-gray-50` : tw`hover:bg-secondary-700`
]);

Example output: .c0

Works

const PageCount = styled.div`
  ${tw`inline-flex justify-center items-center`};
`;

Example output: .c1.c1

Any ideas? Thank you!

snitin315 commented 1 year ago

This is intentional

https://github.com/QuickBase/babel-plugin-styled-components-css-namespace/blob/22260001b8f85305370ddd435a4c26f7d52e99dc/src/visitors/cssNamespace.js#L41