feat: add title attribute to Compiled style tag

.changeset/fluffy-lies-shake.md

@@ -0,0 +1,5 @@
+---
+'@compiled/parcel-optimizer': minor
+---
+
+Add title attribute to Compiled style tag to discern with other style within the page

CONTRIBUTING.md

@@ -99,7 +99,7 @@ yarn test <filter> --watch
 
 Looking at tests first is generally the best way to get started.
 
-- Run a specific test file: `yarn test <filename> --watch`
+- Run a specific test file: `yarn test <filename> --watch` OR `yarn test:parcel <filename>` if the test file name ends with `parceltest.{ts,tsx}`
 - Run tests related to a package `yarn test:packageName --watch`
 - Update snapshot tests after implementing a code change: `yarn test <filter> --watch --updateSnapshot`
 

packages/parcel-optimizer/src/__tests__/optimizer.parceltest.ts

@@ -44,7 +44,7 @@ describe('optimizer', () => {
       'utf8'
     );
 
-    const css = /<style>(.*?)<\/style>/.exec(outputHtml)?.pop();
+    const css = /<style title="compiled">(.*?)<\/style>/.exec(outputHtml)?.pop();
 
     if (!css) throw new Error('No CSS is found.');
 

packages/parcel-optimizer/src/index.ts

@@ -71,7 +71,7 @@ export default new Optimizer<ParcelOptimizerOpts, unknown>({
           .use(
             insertAt({
               selector: 'head',
-              append: '<style>' + stylesheet + '</style>',
+              append: '<style title="compiled">' + stylesheet + '</style>',
               behavior: 'inside',
             })
           )

packages/parcel-transformer-external/src/__tests__/transformer.parceltest.ts

@@ -44,7 +44,7 @@ it('transforms assets with compiled and extraction babel plugins', async () => {
     'utf8'
   );
 
-  const css = /<style>(.*?)<\/style>/.exec(outputHtml)?.pop();
+  const css = /<style title="compiled">(.*?)<\/style>/.exec(outputHtml)?.pop();
 
   if (!css) throw new Error('No CSS is found.');
 

packages/parcel-transformer/src/__tests__/transformer.parceltest.ts

@@ -215,7 +215,7 @@ it('transforms assets with compiled and extraction babel plugins', async () => {
     'utf8'
   );
 
-  const css = /<style>(.*?)<\/style>/.exec(outputHtml)?.pop();
+  const css = /<style title="compiled">(.*?)<\/style>/.exec(outputHtml)?.pop();
 
   if (!css) throw new Error('No CSS is found.');
 
@@ -310,7 +310,7 @@ it('transforms assets with class name compression enabled', async () => {
     'utf8'
   );
 
-  const css = /<style>(.*?)<\/style>/.exec(outputHtml)?.pop();
+  const css = /<style title="compiled">(.*?)<\/style>/.exec(outputHtml)?.pop();
 
   if (!css) throw new Error('No CSS is found.');