From 05e9d41e020fe5c33d1d0e57d707aac925edabaf Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 18 Mar 2025 08:23:53 +0000
Subject: [PATCH] Update changest + move import to index

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/common-candies-kiss.md                            | 4 +---
 .changeset/neat-paths-see.md                                 | 5 +++++
 packages/app-next/src/App.tsx                                | 2 --
 packages/app-next/src/index.tsx                              | 1 +
 packages/app/src/App.tsx                                     | 2 --
 packages/app/src/index.tsx                                   | 1 +
 .../templates/default-app/packages/app/src/App.tsx           | 2 --
 .../templates/default-app/packages/app/src/index.tsx         | 1 +
 8 files changed, 9 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/neat-paths-see.md

diff --git a/.changeset/common-candies-kiss.md b/.changeset/common-candies-kiss.md
index cce95a47ba..9b7a1ca427 100644
--- a/.changeset/common-candies-kiss.md
+++ b/.changeset/common-candies-kiss.md
@@ -1,7 +1,5 @@
 ---
-'@backstage/create-app': minor
-'example-app-next': minor
-'@backstage/canon': minor
+'@backstage/create-app': patch
 ---
 
 Canon is now ready to be used in Alpha. We are adding a custom CSS file at the root of the app to make all styles available for Canon components.
diff --git a/.changeset/neat-paths-see.md b/.changeset/neat-paths-see.md
new file mode 100644
index 0000000000..f540a22535
--- /dev/null
+++ b/.changeset/neat-paths-see.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Introducing Canon to Backstage. Canon styling system is based on pure CSS. We are adding our styles.css at the top of your Backstage instance.
diff --git a/packages/app-next/src/App.tsx b/packages/app-next/src/App.tsx
index b2e98f2201..1992d5b35f 100644
--- a/packages/app-next/src/App.tsx
+++ b/packages/app-next/src/App.tsx
@@ -45,8 +45,6 @@ import { convertLegacyPlugin } from '@backstage/core-compat-api';
 import { convertLegacyPageExtension } from '@backstage/core-compat-api';
 import { convertLegacyEntityContentExtension } from '@backstage/plugin-catalog-react/alpha';
 
-import '@backstage/canon/css/styles.css';
-
 /*
 
 # Notes
diff --git a/packages/app-next/src/index.tsx b/packages/app-next/src/index.tsx
index 37a2574484..82b9595c84 100644
--- a/packages/app-next/src/index.tsx
+++ b/packages/app-next/src/index.tsx
@@ -17,5 +17,6 @@
 import '@backstage/cli/asset-types';
 import ReactDOM from 'react-dom/client';
 import app from './App';
+import '@backstage/canon/css/styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(app);
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 95c0c4e305..7e914bdc9b 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -86,8 +86,6 @@ import {
   UserNotificationSettingsCard,
 } from '@backstage/plugin-notifications';
 
-import '@backstage/canon/css/styles.css';
-
 const app = createApp({
   apis,
   icons: {
diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx
index e5ca03fe64..a26c26e284 100644
--- a/packages/app/src/index.tsx
+++ b/packages/app/src/index.tsx
@@ -18,5 +18,6 @@ import '@backstage/cli/asset-types';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import '@backstage/canon/css/styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx
index 266001dea9..e24c4689bb 100644
--- a/packages/create-app/templates/default-app/packages/app/src/App.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx
@@ -37,8 +37,6 @@ import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 
-import '@backstage/canon/css/styles.css';
-
 const app = createApp({
   apis,
   bindRoutes({ bind }) {
diff --git a/packages/create-app/templates/default-app/packages/app/src/index.tsx b/packages/create-app/templates/default-app/packages/app/src/index.tsx
index d875c774c8..604afbe3c4 100644
--- a/packages/create-app/templates/default-app/packages/app/src/index.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/index.tsx
@@ -2,5 +2,6 @@ import '@backstage/cli/asset-types';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import '@backstage/canon/css/styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />);