fix: installs postcss-import and postcss-url to ensure asset paths are correct

Author: iOvergaard

package-lock.json

@@ -106,10 +106,11 @@
     "lint-staged": "16.0.0",
     "npm-check-updates": "18.0.1",
     "plop": "3.1.2",
-    "postcss": "8.5.3",
+    "postcss": "8.5.4",
     "postcss-advanced-variables": "5.0.0",
     "postcss-cli": "11.0.1",
-    "postcss-custom-properties": "14.0.4",
+    "postcss-custom-properties": "14.0.5",
+    "postcss-import": "^16.1.0",
     "postcss-jsx": "0.36.4",
     "postcss-load-config": "6.0.1",
     "postcss-syntax": "0.36.2",

package.json

@@ -3,6 +3,8 @@ import { nodeResolve } from '@rollup/plugin-node-resolve';
 import minifyHTML from 'rollup-plugin-minify-html-literals';
 import { readPackageJson } from '../scripts/modify-pkgjson.mjs';
 import rollupPostcss from 'rollup-plugin-postcss';
+import postcssUrl from 'postcss-url';
+import postcssImport from 'postcss-import';
 import postcssCustomPropertiesFallback from '../scripts/postcss-custom-properties-fallback/plugin.mjs';
 import path from 'path';
 import processLitCSSPlugin from '../scripts/processLitCSSPlugin.mjs';
@@ -50,6 +52,11 @@ const createCSSFilesConfig = (cssFiles = []) => {
           rollupPostcss({
             plugins: [
               postcssCustomPropertiesFallback({ importFrom: properties }),
+              postcssImport({
+                plugins: [
+                  postcssUrl(), // This plugin is used to handle URLs in imported CSS files
+                ],
+              }),
             ],
             extract: path.resolve(`./dist/${name}.css`),
           }),