build(UI): migrate from normalize.css to modern-normalize (#2114)

AprilSylph · web-flow · commit 2281461a632c · 2026-02-19T09:15:55.000Z
diff --git a/dev/copy-libs.sh b/dev/copy-libs.sh
@@ -1,6 +1,7 @@
 cp node_modules/@melloware/coloris/dist/coloris.css src/lib/
 cp node_modules/@melloware/coloris/dist/esm/coloris.js src/lib/
 cp node_modules/jquery/dist/jquery.slim.min.js src/lib/
+cp node_modules/modern-normalize/modern-normalize.css src/lib/
 cp node_modules/moment/dist/moment.js src/lib/
 cp node_modules/remixicon/fonts/*.{css,eot,woff2,woff,ttf,svg} src/lib/remixicon/
 cp node_modules/sortablejs/modular/sortable.esm.js src/lib/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,8 +19,8 @@
   "dependencies": {
     "@melloware/coloris": "^0.25.0",
     "jquery": "^4.0.0",
+    "modern-normalize": "^3.0.1",
     "moment": "^2.30.1",
-    "normalize.css": "^8.0.1",
     "remixicon": "^4.9.1",
     "sortablejs": "^1.15.6"
   },
diff --git a/src/action/backup.css b/src/action/backup.css
@@ -33,7 +33,6 @@
 
 #backup pre,
 #backup textarea {
-  box-sizing: border-box;
   max-height: calc(10em + 2ch);
   overflow: auto;
   overflow-wrap: break-word;
diff --git a/src/action/components/checkbox-preference/index.js b/src/action/components/checkbox-preference/index.js
@@ -10,7 +10,7 @@ const templateDocument = new DOMParser().parseFromString(`
 `, 'text/html');
 
 const adoptedStyleSheets = await fetchStyleSheets([
-  '/lib/normalize.min.css',
+  '/lib/modern-normalize.css',
   './index.css',
 ].map(import.meta.resolve));
 
diff --git a/src/action/components/color-preference/index.js b/src/action/components/color-preference/index.js
@@ -14,7 +14,7 @@ const templateDocument = new DOMParser().parseFromString(`
 
 const adoptedStyleSheets = await fetchStyleSheets([
   '/lib/coloris.css',
-  '/lib/normalize.min.css',
+  '/lib/modern-normalize.css',
   './index.css',
 ].map(import.meta.resolve));
 
diff --git a/src/action/components/iframe-preference/index.js b/src/action/components/iframe-preference/index.js
@@ -9,7 +9,7 @@ const templateDocument = new DOMParser().parseFromString(`
 `, 'text/html');
 
 const adoptedStyleSheets = await fetchStyleSheets([
-  '/lib/normalize.min.css',
+  '/lib/modern-normalize.css',
   './index.css',
 ].map(import.meta.resolve));
 
diff --git a/src/action/components/select-preference/index.css b/src/action/components/select-preference/index.css
@@ -13,7 +13,6 @@ label {
 select {
   flex-shrink: 1;
 
-  box-sizing: border-box;
   padding: 4px;
   border: none;
   border-radius: 3px;
diff --git a/src/action/components/select-preference/index.js b/src/action/components/select-preference/index.js
@@ -10,7 +10,7 @@ const templateDocument = new DOMParser().parseFromString(`
 `, 'text/html');
 
 const adoptedStyleSheets = await fetchStyleSheets([
-  '/lib/normalize.min.css',
+  '/lib/modern-normalize.css',
   './index.css',
 ].map(import.meta.resolve));
 
diff --git a/src/action/components/text-preference/index.css b/src/action/components/text-preference/index.css
@@ -13,7 +13,6 @@ label {
 input {
   flex-shrink: 1;
 
-  box-sizing: border-box;
   min-width: 0;
   padding: 4px;
   border: none;
diff --git a/src/action/components/text-preference/index.js b/src/action/components/text-preference/index.js
@@ -10,7 +10,7 @@ const templateDocument = new DOMParser().parseFromString(`
 `, 'text/html');
 
 const adoptedStyleSheets = await fetchStyleSheets([
-  '/lib/normalize.min.css',
+  '/lib/modern-normalize.css',
   './index.css',
 ].map(import.meta.resolve));
 
diff --git a/src/action/components/textarea-preference/index.css b/src/action/components/textarea-preference/index.css
@@ -12,7 +12,6 @@ label {
 textarea {
   align-self: stretch;
 
-  box-sizing: border-box;
   padding: 4px;
   border: none;
   border-radius: 3px;
diff --git a/src/action/components/textarea-preference/index.js b/src/action/components/textarea-preference/index.js
@@ -10,7 +10,7 @@ const templateDocument = new DOMParser().parseFromString(`
 `, 'text/html');
 
 const adoptedStyleSheets = await fetchStyleSheets([
-  '/lib/normalize.min.css',
+  '/lib/modern-normalize.css',
   './index.css',
 ].map(import.meta.resolve));
 
diff --git a/src/action/components/xkit-feature/index.js b/src/action/components/xkit-feature/index.js
@@ -30,7 +30,7 @@ const templateDocument = new DOMParser().parseFromString(`
 `, 'text/html');
 
 const adoptedStyleSheets = await fetchStyleSheets([
-  '/lib/normalize.min.css',
+  '/lib/modern-normalize.css',
   '/lib/remixicon/remixicon.css',
   '/lib/toggle-button.css',
   './index.css',
diff --git a/src/action/popup.css b/src/action/popup.css
@@ -53,9 +53,6 @@ html, main {
 }
 
 body {
-  padding: 0;
-  margin: 0;
-
   background-color: rgb(var(--white));
   color: rgb(var(--black));
   font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
@@ -65,7 +62,6 @@ body {
 
 #permissions-banner,
 #embedded-banner {
-  box-sizing: border-box;
   width: 375px;
   min-width: 100%;
   max-width: 100%;
diff --git a/src/action/popup.html b/src/action/popup.html
@@ -6,13 +6,13 @@
     <title>XKit Control Panel</title>
     <link rel="icon" href="../icons/128.png" type="image/png">
     <link rel="stylesheet" href="../lib/coloris.css">
-    <link rel="stylesheet" href="../lib/normalize.min.css">
+    <link rel="stylesheet" href="../lib/modern-normalize.css">
     <link rel="stylesheet" href="../lib/remixicon/remixicon.css">
     <link rel="stylesheet" href="./backup.css">
     <link rel="stylesheet" href="./configuration.css">
     <link rel="stylesheet" href="./links.css">
     <link rel="stylesheet" href="./popup.css">
-    <script defer src="/browser_polyfill.js"></script>
+    <script defer src="../browser_polyfill.js"></script>
     <script defer src="../lib/jquery.slim.min.js"></script>
     <script defer src="./popup.js"></script>
     <script defer src="./render_backup.js"></script>
diff --git a/src/features/postblock/options/index.html b/src/features/postblock/options/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>XKit: Manage blocked posts</title>
     <link rel="icon" href="/icons/128.png" type="image/png">
-    <link rel="stylesheet" href="/lib/normalize.min.css">
+    <link rel="stylesheet" href="/lib/modern-normalize.css">
     <link rel="stylesheet" href="index.css">
     <script defer src="/action/resize_frames.js"></script>
     <script defer src="/browser_polyfill.js"></script>
diff --git a/src/features/quick_tags/options/index.html b/src/features/quick_tags/options/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>XKit: Manage tag bundles</title>
-    <link rel="stylesheet" href="/lib/normalize.min.css">
+    <link rel="stylesheet" href="/lib/modern-normalize.css">
     <link rel="stylesheet" href="/lib/remixicon/remixicon.css">
     <link rel="stylesheet" href="index.css">
     <script defer src="/action/resize_frames.js"></script>
diff --git a/src/lib/modern-normalize.css b/src/lib/modern-normalize.css
diff --git a/src/lib/normalize.min.css b/src/lib/normalize.min.css
