Update changest + move import to index

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.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.

.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.

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

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);

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: {

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 />);

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 }) {

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 />);