search

atlassian-labs / compiled

A familiar and performant compile time CSS-in-JS library for React.
https://compiledcssinjs.com
Apache License 2.0
1.98k stars 68 forks source link

feat: add title attribute to Compiled style tag #1649

Open pancaspe87 opened 5 months ago

pancaspe87 commented 5 months ago

TBH, I am not sure if this is a valuable change considering these devlop issues . Also, we know that classes starting with _ are usually Compiled; hence, we can just look for it. However, it may save some keystrokes when debugging :)

Dev mode It seems that we are having multiple style tags when extraction is not enabled, only one is getting the title attribute Screenshot 2024-03-20 at 3 22 42 pm

VS

Prod mode We can easily discern what style is for Compiled. Screenshot 2024-03-20 at 3 22 01 pm

changeset-bot[bot] commented 5 months ago

🦋 Changeset detected

Latest commit: b2531bf3a2d6fcab7912a62e6bb016778534a8d7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages | Name | Type | | -------------------------- | ----- | | @compiled/parcel-optimizer | Minor | | @compiled/parcel-config | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

dddlr commented 5 months ago

ooh good idea 👍 do you reckon it would be useful to also add this to the SSR styles that have the data-cmpld="true" attribute?

(perhaps we can use title="parcel-compiled" instead of title="compiled" to distinguish which plugin the styles are coming from?)

JakeLane commented 5 months ago

We already have some similar behaviour for the runtime, maybe we should match that? https://github.com/atlassian-labs/compiled/blob/44b13234d50889c1f610102ee2751c9839d2ae35/packages/react/src/runtime/style.tsx#L48

dddlr commented 5 months ago

We already have some similar behaviour for the runtime, maybe we should match that?

https://github.com/atlassian-labs/compiled/blob/44b13234d50889c1f610102ee2751c9839d2ae35/packages/react/src/runtime/style.tsx#L48

hmm yeah maybe we could keep data-cmpld for the SSR stuff and have data-compiled-parcel for the @compiled/parcel-optimizer output? will let @pancaspe87 make the final call on the best name for this

(i'm reluctant to use data-cmpld for everything because of how data-cmpld is being used here https://github.com/atlassian-labs/compiled/blob/44b13234d50889c1f610102ee2751c9839d2ae35/packages/react/src/runtime/style-cache.tsx#L20 )

pancaspe87 commented 5 months ago

Yeahh, I did see data-cmpld and thought it was specific to runtime.

TBH, I am happy to reuse data-cmpld or apply the same title='compiled' to everything . Whatever works best for you @JakeLane @dddlr @liamqma