Ability to write full path to a component's file in className

[rifler]

trafficstars

Hi there!

Our common pattern is to write template in index.tsx (or view.tsx) and styles in styles.tsx. So the most common component dir structure looks like: client/components/AwesomeComponent:

• index.tsx
• styles.tsx

That's why classes looks like styles__Header-sc-1ei6mxn-18 and you can't easily identify what Header is it, from Component1/styles.tsx or from Component2/styles.tsx. It would be great for us to write full path to a file from cwd in className, like so client_components_component1_styles__Header-sc-1ei6mxn-18.

What do you think?

btw we absolutely love styled components

[quantizor]

What do you think @mxstbr? My only concern is this could greatly increase the payload size of both the CSS and the HTML, though some of it would get gzipped away. Perhaps it could make sense behind a flag that isn't enabled by default.

[rifler]

+1 for flag, it should be used in development only

[elie222]

I added a flag for it in this PR: https://github.com/styled-components/babel-plugin-styled-components/pull/259