diff --git a/.changeset/fluffy-lies-shake.md b/.changeset/fluffy-lies-shake.md
new file mode 100644
index 000000000..63001210d
--- /dev/null
+++ b/.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
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 06cec9cb6..9d11cb4f7 100644
--- a/CONTRIBUTING.md
+++ b/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`
 
diff --git a/packages/parcel-optimizer/src/__tests__/optimizer.parceltest.ts b/packages/parcel-optimizer/src/__tests__/optimizer.parceltest.ts
index 7f1804f6a..815323e0a 100644
--- a/packages/parcel-optimizer/src/__tests__/optimizer.parceltest.ts
+++ b/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.');
 
diff --git a/packages/parcel-optimizer/src/index.ts b/packages/parcel-optimizer/src/index.ts
index bed0c60fb..cc9e71b63 100644
--- a/packages/parcel-optimizer/src/index.ts
+++ b/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',
             })
           )
diff --git a/packages/parcel-transformer-external/src/__tests__/transformer.parceltest.ts b/packages/parcel-transformer-external/src/__tests__/transformer.parceltest.ts
index 11d69fa4c..573a3ce7c 100644
--- a/packages/parcel-transformer-external/src/__tests__/transformer.parceltest.ts
+++ b/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.');
 
diff --git a/packages/parcel-transformer/src/__tests__/transformer.parceltest.ts b/packages/parcel-transformer/src/__tests__/transformer.parceltest.ts
index a9fb82695..29386992d 100644
--- a/packages/parcel-transformer/src/__tests__/transformer.parceltest.ts
+++ b/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.');