fix(#81): remove PostCSS from core dependencies

Author: natemoo-re

.changeset/late-lions-leave.md

@@ -0,0 +1,5 @@
+---
+"microsite": patch
+---
+
+Remove PostCSS logic from core dependencies. Microsite will prompt users to install PostCSS locally if detected.

packages/microsite/package.json

@@ -45,7 +45,6 @@
   "dependencies": {
     "@prefresh/snowpack": "^3.0.1",
     "@snowpack/plugin-dotenv": "^2.0.5",
-    "@snowpack/plugin-postcss": "^1.0.11",
     "arg": "^5.0.0",
     "cacache": "^15.0.5",
     "cosmiconfig": "^7.0.0",
@@ -58,10 +57,6 @@
     "open": "^7.3.0",
     "path-browserify": "^1.0.1",
     "polka": "^0.5.2",
-    "postcss": "^8.2.1",
-    "postcss-cli": "^8.3.1",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-preset-env": "^6.7.0",
     "preact": "^10.5.5",
     "preact-render-to-string": "5.1.11",
     "prettier": "^2.1.2",

packages/microsite/src/utils/command.ts

@@ -6,6 +6,7 @@ const require = createRequire(import.meta.url);
 import { fileExists } from "./fs.js";
 import { createConfiguration } from "snowpack";
 import cc from "cosmiconfig";
+import { yellow } from "kleur/colors";
 const { cosmiconfig } = cc;
 const _config = require("microsite/assets/snowpack.config.cjs");
 
@@ -40,6 +41,21 @@ export async function loadConfiguration(mode: "dev" | "build") {
     : {};
   const userConfig = snowpackconfigPath ? require(snowpackconfigPath) : {};
 
+  if (usesPostCSS) {
+    const missing = [];
+    const deps = ['@snowpack/plugin-postcss', 'postcss', 'postcss-cli'];
+    deps.forEach(dependency => {
+      try {
+        require.resolve(dependency);
+      } catch (e) {
+        missing.push(dependency);
+      }
+    });
+    if (missing.length > 0) {
+      console.error(yellow(`It looks like you're trying to use PostCSS!\nMicrosite will automatically use your configuration, but requires some 'devDependencies' to do so.\n\nPlease run 'npm install --save-dev ${missing.join(' ')}'\n`));
+      process.exit(1);
+    }
+  }
   const additionalPlugins = usesPostCSS ? ["@snowpack/plugin-postcss"] : [];
 
   switch (mode) {