minify and add source maps

build.js

@@ -51,16 +51,19 @@ function buildDocs() {
 function buildCSS() {
   return postcss()
     .use(require("postcss-inline-svg"))
-    .use(require("postcss-css-variables")({ preserve: "computed" }))
+    .use(require("postcss-css-variables"))
     .use(require("postcss-calc"))
     .use(require("postcss-copy")({ dest: "build", template: "[name].[ext]" }))
+    .use(require("cssnano"))
     .process(fs.readFileSync("style.css"), {
       from: "style.css",
       to: "build/98.css",
+      map: { inline: false },
     })
     .then((result) => {
       mkdirp.sync("build");
       fs.writeFileSync("build/98.css", result.css);
+      fs.writeFileSync("build/98.css.map", result.map);
     });
 }
 

docs/docs.css

@@ -1,7 +1,7 @@
 body {
   margin: 0;
   padding: 0;
-  background: var(--surface);
+  background: #c0c0c0;
 }
 
 main {
@@ -75,7 +75,7 @@ p {
 blockquote {
   margin: 0 0 20px;
   padding: 20px;
-  background: var(--button-face);
+  background: #dfdfdf;
 }
 
 blockquote footer {
@@ -85,7 +85,7 @@ blockquote footer {
 .example {
   margin: 16px 0;
   padding: 12px 24px;
-  border-left: 1px solid var(--button-shadow);
+  border-left: 1px solid #808080;
 }
 
 details {
@@ -108,7 +108,9 @@ button.focused {
 }
 
 button.active {
-  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
+  box-shadow: inset -1px -1px var(--button-highlight),
+    inset 1px 1px var(--window-frame), inset -2px -2px var(--button-face),
+    inset 2px 2px var(--button-shadow);
 }
 
 @media (max-width: 480px) {

package.json

@@ -25,6 +25,7 @@
   },
   "homepage": "https://github.com/jdan/98.css#readme",
   "devDependencies": {
+    "cssnano": "^4.1.10",
     "dedent": "^0.7.0",
     "ejs": "^3.0.2",
     "glob": "^7.1.6",