Build CSS using Vite

2023-01-25 18:27:00 +01:00 · 2023-01-25 18:27:00 +01:00 · 1550573923
parent ae67a19233
commit 1550573923
4 changed files with 9 additions and 5 deletions
--- a/index.html
+++ b/index.html
@ -22,7 +22,6 @@
      }
    </style>

-    <link rel="stylesheet" href="./src/shareon.css" />
  </head>

  <body>
--- a/package.json
+++ b/package.json
@ -42,9 +42,7 @@
    "dist"
  ],
  "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css",
-    "build:js": "vite build",
-    "build:css": "postcss src/shareon.css -o dist/shareon.min.css --map",
+    "build": "vite build",
    "dev": "vite",
    "lint": "prettier --check . && eslint .",
    "size": "size-limit",
@ -63,7 +61,6 @@
    "postcss": "^8.4.19",
    "postcss-banner": "^4.0.1",
    "postcss-calc": "^8.2.4",
-    "postcss-cli": "^10.0.0",
    "postcss-css-variables": "^0.18.0",
    "postcss-csso": "^6.0.1",
    "prettier": "^2.7.1",
--- a/src/shareon.js
+++ b/src/shareon.js
@ -1,3 +1,5 @@
+import "./shareon.css";
+
 // prettier-ignore
 /**
 * Map of social networks to their respective URL builders.
--- a/vite.config.js
+++ b/vite.config.js
@ -15,6 +15,12 @@ export default defineConfig({
    },
    rollupOptions: {
      output: {
+        // Workaround for a correct file name
+        // See: https://github.com/vitejs/vite/issues/4863
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === "style.css") return "shareon.min.css";
+          return assetInfo.name;
+        },
        banner: `/*! ${package_.name} v${package_.version} */`,
      },
    },