feat: add title attribute to Compiled style tag

[pancaspe87]

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

VS

Prod mode
We can easily discern what style is for Compiled.

[changeset-bot]

🦋 Changeset detected

Latest commit: b2531bf

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

[pancaspe87]

Btw, do we inline CSS also in webpack? I don't think I have seen inlineCss for it

[dddlr]

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]

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

compiled/packages/react/src/runtime/style.tsx

Line 48 in 44b1323

data-cmpld

[dddlr]

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

compiled/packages/react/src/runtime/style.tsx

Line 48 in 44b1323

data-cmpld

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

compiled/packages/react/src/runtime/style-cache.tsx

Line 20 in 44b1323

const ssrStyles = document.querySelectorAll<HTMLStyleElement>('style[data-cmpld]');

)

[pancaspe87]

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