diff --git a/packages/canon/catalog-info.yaml b/packages/canon/catalog-info.yaml
index 4e649b6e82..8369c314b3 100644
--- a/packages/canon/catalog-info.yaml
+++ b/packages/canon/catalog-info.yaml
@@ -5,5 +5,5 @@ metadata:
   title: '@backstage/canon'
 spec:
   lifecycle: experimental
-  type: backstage-node-library
+  type: backstage-web-library
   owner: design-system-maintainers
diff --git a/packages/canon/package.json b/packages/canon/package.json
index 5b62d67898..0929111546 100644
--- a/packages/canon/package.json
+++ b/packages/canon/package.json
@@ -2,7 +2,7 @@
   "name": "@backstage/canon",
   "version": "0.0.0",
   "backstage": {
-    "role": "node-library"
+    "role": "web-library"
   },
   "publishConfig": {
     "access": "public",
diff --git a/packages/canon/scripts/build-css.mjs b/packages/canon/scripts/build-css.mjs
index 912a8fbeff..221d483e03 100644
--- a/packages/canon/scripts/build-css.mjs
+++ b/packages/canon/scripts/build-css.mjs
@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
+/* eslint-disable no-restricted-imports */
 import { transform, bundle } from 'lightningcss';
 import fs from 'fs';
 import path from 'path';
+/* eslint-enable no-restricted-imports */
 
 // Check if core.css and components.css exist
 const cssFiles = ['src/css/core.css', 'src/css/components.css'];