Get CSS Modules working in Vue (#53)

15 files changed, 251 insertions, 92 deletions

diff --git a/package-lock.json b/package-lock.json
index 11dba039c..02500b099 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -245,11 +245,11 @@
       }
     },
     "@snowpack/plugin-vue": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@snowpack/plugin-vue/-/plugin-vue-2.3.0.tgz",
-      "integrity": "sha512-W53I7nZrHaV85yNqo9PaD1M0FS0Ftw9+eiGf8mez7lyvSd//MGAhdIjXO7Xn2RhnBauM/BnbnUxu/L/2/P5FiA==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@snowpack/plugin-vue/-/plugin-vue-2.4.0.tgz",
+      "integrity": "sha512-46EHyTvd7Qo38ShTG7paV/x4b0PRTgOtBegjFL/xyzV5sETeNDuNPfXbT9LaFoQhiW0Q/8eq/peWQlls0l5+uw==",
       "requires": {
-        "@vue/compiler-sfc": "^3.0.0",
+        "@vue/compiler-sfc": "^3.0.10",
         "hash-sum": "^2.0.0"
       }
     },
@@ -266,6 +266,7 @@
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.2.tgz",
       "integrity": "sha512-MdSJnBjl+bdwkLskZ3NGFp9YcXGx5ggLpQQPqtgakVhsWK0hTtNYhjpZLlWQTviGTvF8at+Bvli3jV7faPdgeQ==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.0.0"
       }
@@ -274,6 +275,7 @@
       "version": "7.11.1",
       "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.11.1.tgz",
       "integrity": "sha512-Vs0hm0vPahPMYi9tDjtP66llufgO3ST16WXaSTtDGEl9cewAl3AibmxWw6TINOqHPT9z0uABKAYjT9jNSg4npw==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.3.0"
       }
@@ -281,7 +283,8 @@
     "@types/estree": {
       "version": "0.0.46",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz",
-      "integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg=="
+      "integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==",
+      "dev": true
     },
     "@types/github-slugger": {
       "version": "1.3.0",
@@ -309,7 +312,8 @@
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "dev": true
     },
     "@types/pug": {
       "version": "2.0.4",
@@ -320,6 +324,7 @@
       "version": "17.0.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz",
       "integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==",
+      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -329,7 +334,8 @@
         "csstype": {
           "version": "3.0.7",
           "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
-          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
+          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==",
+          "dev": true
         }
       }
     },
@@ -337,6 +343,7 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.2.tgz",
       "integrity": "sha512-Icd9KEgdnFfJs39KyRyr0jQ7EKhq8U6CcHRMGAS45fp5qgUvxL3ujUCfWFttUK2UErqZNj97t9gsVPNAqcwoCg==",
+      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -352,7 +359,8 @@
     "@types/scheduler": {
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
-      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA=="
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==",
+      "dev": true
     },
     "@types/unist": {
       "version": "2.0.3",
@@ -471,13 +479,13 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.7.tgz",
-      "integrity": "sha512-JFohgBXoyUc3mdeI2WxlhjQZ5fakfemJkZHX8Gu/nFbEg3+lKVUZmNKWmmnp9aOzJQZKoj77LjmFxiP+P+7lMQ==",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.10.tgz",
+      "integrity": "sha512-rayD+aODgX9CWgWv0cAI+whPLyMmtkWfNGsZpdpsaIloh8mY2hX8+SvE1Nn3755YhGWJ/7oaDEcNpOctGwZbsA==",
       "requires": {
         "@babel/parser": "^7.12.0",
         "@babel/types": "^7.12.0",
-        "@vue/shared": "3.0.7",
+        "@vue/shared": "3.0.10",
         "estree-walker": "^2.0.1",
         "source-map": "^0.6.1"
       },
@@ -490,25 +498,25 @@
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz",
-      "integrity": "sha512-VnIH9EbWQm/Tkcp+8dCaNVsVvhm/vxCrIKWRkXY9215hTqOqQOvejT8IMjd2kc++nIsYMsdQk6H9qqBvoLe/Cw==",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.10.tgz",
+      "integrity": "sha512-SzN1li9xAxtqkZimR1AFU2t1N0vzsAJxR/5764xoS0xedwhUU9s8s+Tks2FNMLsXiqdkP2Qd4zAM+9EwTbZmRw==",
       "requires": {
-        "@vue/compiler-core": "3.0.7",
-        "@vue/shared": "3.0.7"
+        "@vue/compiler-core": "3.0.10",
+        "@vue/shared": "3.0.10"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.7.tgz",
-      "integrity": "sha512-37/QILpGE+J3V+bP9Slg9e6xGqfk+MmS2Yj8ChR4fS0/qWUU/YoYHE0GPIzjmBdH0JVOOmJqunxowIXmqNiHng==",
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.11.tgz",
+      "integrity": "sha512-7fNiZuCecRleiyVGUWNa6pn8fB2fnuJU+3AGjbjl7r1P5wBivfl02H4pG+2aJP5gh2u+0wXov1W38tfWOphsXw==",
       "requires": {
-        "@babel/parser": "^7.12.0",
-        "@babel/types": "^7.12.0",
-        "@vue/compiler-core": "3.0.7",
-        "@vue/compiler-dom": "3.0.7",
-        "@vue/compiler-ssr": "3.0.7",
-        "@vue/shared": "3.0.7",
+        "@babel/parser": "^7.13.9",
+        "@babel/types": "^7.13.0",
+        "@vue/compiler-core": "3.0.11",
+        "@vue/compiler-dom": "3.0.11",
+        "@vue/compiler-ssr": "3.0.11",
+        "@vue/shared": "3.0.11",
         "consolidate": "^0.16.0",
         "estree-walker": "^2.0.1",
         "hash-sum": "^2.0.0",
@@ -521,6 +529,32 @@
         "source-map": "^0.6.1"
       },
       "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.11.tgz",
+          "integrity": "sha512-6sFj6TBac1y2cWCvYCA8YzHJEbsVkX7zdRs/3yK/n1ilvRqcn983XvpBbnN3v4mZ1UiQycTvOiajJmOgN9EVgw==",
+          "requires": {
+            "@babel/parser": "^7.12.0",
+            "@babel/types": "^7.12.0",
+            "@vue/shared": "3.0.11",
+            "estree-walker": "^2.0.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.11.tgz",
+          "integrity": "sha512-+3xB50uGeY5Fv9eMKVJs2WSRULfgwaTJsy23OIltKgMrynnIj8hTYY2UL97HCoz78aDw1VDXdrBQ4qepWjnQcw==",
+          "requires": {
+            "@vue/compiler-core": "3.0.11",
+            "@vue/shared": "3.0.11"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.11.tgz",
+          "integrity": "sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA=="
+        },
         "estree-walker": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -542,54 +576,129 @@
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.7.tgz",
-      "integrity": "sha512-nHRbHeSpfXwjypettjrA16TjgfDcPEwq3m/zHnGyLC1QqdLtklXmpSM43/CPwwTCRa/qdt0pldJf22MiCEuTSQ==",
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.11.tgz",
+      "integrity": "sha512-66yUGI8SGOpNvOcrQybRIhl2M03PJ+OrDPm78i7tvVln86MHTKhM3ERbALK26F7tXl0RkjX4sZpucCpiKs3MnA==",
       "requires": {
-        "@vue/compiler-dom": "3.0.7",
-        "@vue/shared": "3.0.7"
+        "@vue/compiler-dom": "3.0.11",
+        "@vue/shared": "3.0.11"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.11.tgz",
+          "integrity": "sha512-6sFj6TBac1y2cWCvYCA8YzHJEbsVkX7zdRs/3yK/n1ilvRqcn983XvpBbnN3v4mZ1UiQycTvOiajJmOgN9EVgw==",
+          "requires": {
+            "@babel/parser": "^7.12.0",
+            "@babel/types": "^7.12.0",
+            "@vue/shared": "3.0.11",
+            "estree-walker": "^2.0.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.11.tgz",
+          "integrity": "sha512-+3xB50uGeY5Fv9eMKVJs2WSRULfgwaTJsy23OIltKgMrynnIj8hTYY2UL97HCoz78aDw1VDXdrBQ4qepWjnQcw==",
+          "requires": {
+            "@vue/compiler-core": "3.0.11",
+            "@vue/shared": "3.0.11"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.11.tgz",
+          "integrity": "sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA=="
+        },
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+        }
       }
     },
     "@vue/reactivity": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.7.tgz",
-      "integrity": "sha512-FotWcNNaKhqpFZrdgsUOZ1enlJ5lhTt01CNTtLSyK7jYFgZBTuw8vKsEutZKDYZ1XKotOfoeO8N3pZQqmM6Etw==",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.10.tgz",
+      "integrity": "sha512-0GOSqlIv/a5wy4r6fAcdaglQ8v2sLYMRUpu49yK8Z2vHccK85Ym3R9C9K3vo6dfBRGbbCVvoKxYtQw49LvE8Ug==",
       "requires": {
-        "@vue/shared": "3.0.7"
+        "@vue/shared": "3.0.10"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz",
-      "integrity": "sha512-DBAZAwVvdmMXuyd6/9qqj/kYr/GaLTmn1L2/QLxLwP+UfhIboiTSBc/tUUb8MRk7Bb98GzNeAWkkT6AfooS3dQ==",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.10.tgz",
+      "integrity": "sha512-qKhCOwHGff5YEdyClO1gf9Q9xgaPPz/qJ2GyzNZkPb00WcXJ3l+yTgHZWaSywRLs9GD1y9Ff3C0MIowzj95NHA==",
       "requires": {
-        "@vue/reactivity": "3.0.7",
-        "@vue/shared": "3.0.7"
+        "@vue/reactivity": "3.0.10",
+        "@vue/shared": "3.0.10"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz",
-      "integrity": "sha512-Oij4ruOtnpQpCj+/Q3JPzgpTJ1Q7+N67pA53A8KVITEtxfvKL46NN6dhAZ5NGqwX6RWZpYqWQNewITeF0pHr8g==",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.10.tgz",
+      "integrity": "sha512-8yRAALc/884UlYWY7hJImecvow1Cngbl2B6n0ThYTms08FVQ3W9tdW0MEvR3JVit06JyQLS1Qvwdn1PwNPPDqg==",
       "requires": {
-        "@vue/runtime-core": "3.0.7",
-        "@vue/shared": "3.0.7",
+        "@vue/runtime-core": "3.0.10",
+        "@vue/shared": "3.0.10",
         "csstype": "^2.6.8"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.0.7.tgz",
-      "integrity": "sha512-3idEbDTQ0GSPgGTiM9Ml4IwPOityotTRUyrDttAyFoSz6DI1RvE1QR0nSQR7TMgMDXwbO22gf+nMYVkj7c9VRg==",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.0.10.tgz",
+      "integrity": "sha512-8WR/OdFdwLIhLmw82euU4NEQcucz1h3LWgKsfFfzmx0OLaQiaafXm2vNpYlN3lPpVi3s2GzDbMBmIrUNSliI7g==",
       "requires": {
-        "@vue/compiler-ssr": "3.0.7",
-        "@vue/shared": "3.0.7"
+        "@vue/compiler-ssr": "3.0.10",
+        "@vue/shared": "3.0.10"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.10.tgz",
+          "integrity": "sha512-rayD+aODgX9CWgWv0cAI+whPLyMmtkWfNGsZpdpsaIloh8mY2hX8+SvE1Nn3755YhGWJ/7oaDEcNpOctGwZbsA==",
+          "requires": {
+            "@babel/parser": "^7.12.0",
+            "@babel/types": "^7.12.0",
+            "@vue/shared": "3.0.10",
+            "estree-walker": "^2.0.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.10.tgz",
+          "integrity": "sha512-SzN1li9xAxtqkZimR1AFU2t1N0vzsAJxR/5764xoS0xedwhUU9s8s+Tks2FNMLsXiqdkP2Qd4zAM+9EwTbZmRw==",
+          "requires": {
+            "@vue/compiler-core": "3.0.10",
+            "@vue/shared": "3.0.10"
+          }
+        },
+        "@vue/compiler-ssr": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.10.tgz",
+          "integrity": "sha512-skrPSp9pjZG3unqHpUaEaRRpO1yYxbCXRfJ1kZW8PTGAg5g3Y/hrUet5+Q6zCIZwr5j1mSMBSLXMDCjFuyyZLg==",
+          "requires": {
+            "@vue/compiler-dom": "3.0.10",
+            "@vue/shared": "3.0.10"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.10.tgz",
+          "integrity": "sha512-p8GJ+bGpEGiEHICwcCH/EtJnkZQllrOfm1J2J+Ep0ydMte25bPnArgrY/h2Tn1LKqqR3LXyQlOSYY6gJgiW2LQ=="
+        },
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+        }
       }
     },
     "@vue/shared": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz",
-      "integrity": "sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg=="
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.10.tgz",
+      "integrity": "sha512-p8GJ+bGpEGiEHICwcCH/EtJnkZQllrOfm1J2J+Ep0ydMte25bPnArgrY/h2Tn1LKqqR3LXyQlOSYY6gJgiW2LQ=="
     },
     "abbrev": {
       "version": "1.1.1",
@@ -3409,9 +3518,9 @@
       }
     },
     "snowpack": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.1.2.tgz",
-      "integrity": "sha512-LsYlBNjB/t/p5QP434Pa1TqjyuX8VtXiYQaAWZkOn1d1TVKEt7nigMBr8Z+EDXYn6YlLXYKHXDvv/NhUS7Ri9A==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.2.2.tgz",
+      "integrity": "sha512-lt2FEFpvrWSBhFPlQxDr2hG7hnyucLEh7QSJqUUcAljrt8UoWJjTZlvZ4shGiJLkNjxMgGrJKj37y08/9OvXMw==",
       "requires": {
         "cli-spinners": "^2.5.0",
         "default-browser-id": "^2.0.0",
@@ -3925,13 +4034,13 @@
       }
     },
     "vue": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.7.tgz",
-      "integrity": "sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw==",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.10.tgz",
+      "integrity": "sha512-6arZ722uqIArSNUU94aqx0Pq0IMHFqYZuJ+U+q9HGdZZu11VFpyFP/L/hakijGFKp56Jr0yxJdWbDiJGWPxwww==",
       "requires": {
-        "@vue/compiler-dom": "3.0.7",
-        "@vue/runtime-dom": "3.0.7",
-        "@vue/shared": "3.0.7"
+        "@vue/compiler-dom": "3.0.10",
+        "@vue/runtime-dom": "3.0.10",
+        "@vue/shared": "3.0.10"
       }
     },
     "which": {
diff --git a/package.json b/package.json
index 8c947396c..2f37c278c 100644
--- a/package.json
+++ b/package.json
@@ -28,14 +28,8 @@
     "@babel/traverse": "^7.13.0",
     "@snowpack/plugin-sass": "^1.4.0",
     "@snowpack/plugin-svelte": "^3.6.0",
-    "@snowpack/plugin-vue": "^2.3.0",
-    "@types/babel__generator": "^7.6.2",
-    "@types/babel__traverse": "^7.11.1",
-    "@types/estree": "0.0.46",
-    "@types/node": "^14.14.31",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
-    "@vue/server-renderer": "^3.0.7",
+    "@snowpack/plugin-vue": "^2.4.0",
+    "@vue/server-renderer": "^3.0.10",
     "acorn": "^7.4.0",
     "acorn-jsx": "^5.3.1",
     "astring": "^1.7.0",
@@ -45,6 +39,7 @@
     "domhandler": "^4.0.0",
     "es-module-lexer": "^0.4.1",
     "esbuild": "^0.10.1",
+    "fdir": "^5.0.0",
     "find-up": "^5.0.0",
     "github-slugger": "^1.3.0",
     "gray-matter": "^4.0.2",
@@ -63,14 +58,20 @@
     "rollup": "^2.43.1",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.32.8",
-    "snowpack": "^3.1.2",
+    "snowpack": "^3.2.2",
     "svelte": "^3.35.0",
-    "vue": "^3.0.7",
+    "vue": "^3.0.10",
     "yargs-parser": "^20.2.7"
   },
   "devDependencies": {
     "@babel/parser": "^7.13.11",
+    "@types/babel__generator": "^7.6.2",
+    "@types/babel__traverse": "^7.11.1",
+    "@types/estree": "0.0.46",
     "@types/github-slugger": "^1.3.0",
+    "@types/node": "^14.14.31",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.2",
     "@types/sass": "^1.16.0",
     "@types/yargs-parser": "^20.2.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
diff --git a/src/frontend/render/preact.ts b/src/frontend/render/preact.ts
index 359202372..8705c5504 100644
--- a/src/frontend/render/preact.ts
+++ b/src/frontend/render/preact.ts
@@ -7,7 +7,7 @@ Function.prototype(render);
 
 const Preact: Renderer = {
   renderStatic(Component) {
-    return (props, ...children) => renderToString(h(Component, props, ...children));
+    return async (props, ...children) => renderToString(h(Component, props, ...children));
   },
   imports: {
     preact: ['render', 'h'],
diff --git a/src/frontend/render/react.ts b/src/frontend/render/react.ts
index 8b127cf96..7143516f6 100644
--- a/src/frontend/render/react.ts
+++ b/src/frontend/render/react.ts
@@ -4,7 +4,7 @@ import ReactDOMServer from 'react-dom/server';
 
 const ReactRenderer: Renderer = {
   renderStatic(Component) {
-    return (props, ...children) => ReactDOMServer.renderToString(React.createElement(Component, props, children));
+    return async (props, ...children) => ReactDOMServer.renderToString(React.createElement(Component, props, children));
   },
   imports: {
     react: ['default as React'],
diff --git a/src/frontend/render/renderer.ts b/src/frontend/render/renderer.ts
index 272f4ef5c..e0d1fccce 100644
--- a/src/frontend/render/renderer.ts
+++ b/src/frontend/render/renderer.ts
@@ -5,7 +5,7 @@ interface DynamicRenderContext {
 }
 
 export interface Renderer {
-  renderStatic(Component: any): (props: Record<string, any>, ...children: any[]) => string;
+  renderStatic(Component: any): (props: Record<string, any>, ...children: any[]) => Promise<string>;
   render(context: { root: string; Component: string; props: string; [key: string]: string }): string;
   imports?: Record<string, string[]>;
 }
@@ -36,10 +36,10 @@ export function createRenderer(renderer: Renderer) {
     wrapperEnd: string | ((context: ReturnType<typeof createContext>) => string)
   ) => (Component: any, renderContext: DynamicRenderContext) => {
     const innerContext = createContext();
-    return (props: Record<string, any>, ...children: any[]) => {
+    return async (props: Record<string, any>, ...children: any[]) => {
       let value: string;
       try {
-        value = _static(Component)(props, ...children);
+        value = await _static(Component)(props, ...children);
       } catch (e) {
         value = '';
       }
diff --git a/src/frontend/render/svelte.ts b/src/frontend/render/svelte.ts
index 15676e8c6..2f67eb79f 100644
--- a/src/frontend/render/svelte.ts
+++ b/src/frontend/render/svelte.ts
@@ -2,7 +2,7 @@ import { Renderer, createRenderer } from './renderer';
 
 const SvelteRenderer: Renderer = {
   renderStatic(Component) {
-    return (props, ...children) => {
+    return async (props, ...children) => {
       const { html } = Component.render(props);
       return html;
     };
diff --git a/src/frontend/render/vue.ts b/src/frontend/render/vue.ts
index bcf6b70bd..3ffa4ed0d 100644
--- a/src/frontend/render/vue.ts
+++ b/src/frontend/render/vue.ts
@@ -4,7 +4,7 @@ import { Renderer, createRenderer } from './renderer';
 
 const Vue: Renderer = {
   renderStatic(Component) {
-    return (props, ...children) => {
+    return async (props, ...children) => {
       const app = createSSRApp({
         components: {
           Component,
@@ -13,8 +13,8 @@ const Vue: Renderer = {
           return createElement(Component as any, props);
         },
       });
-      // Uh oh, Vue's `renderToString` is async... Does that mean everything needs to be?
-      return renderToString(app) as any;
+      const html = await renderToString(app);
+      return html;
     };
   },
   imports: {
@@ -22,7 +22,7 @@ const Vue: Renderer = {
   },
   render({ Component, root, props }) {
     return `const App = { render() { return createElement(${Component}, ${props} )} };
-createApp(App).mount(${root})`;
+createApp(App).mount(${root});`;
   },
 };
 
diff --git a/test/astro-styles-ssr.test.js b/test/astro-styles-ssr.test.js
index 2342fcda4..8293e4996 100644
--- a/test/astro-styles-ssr.test.js
+++ b/test/astro-styles-ssr.test.js
@@ -34,7 +34,13 @@ StylesSSR.after(async () => {
 });
 
 StylesSSR('Has <link> tags', async () => {
-  const MUST_HAVE_LINK_TAGS = ['/_astro/components/SvelteScoped.svelte.css', '/_astro/components/VueCSS.vue.css', '/_astro/components/ReactCSS.css'];
+  const MUST_HAVE_LINK_TAGS = [
+    '/_astro/components/ReactCSS.css',
+    '/_astro/components/SvelteScoped.svelte.css',
+    '/_astro/components/VueCSS.vue.css',
+    '/_astro/components/VueModules.vue.css',
+    '/_astro/components/VueScoped.vue.css',
+  ];
 
   const result = await runtime.load('/');
   const $ = doc(result.contents);
@@ -46,14 +52,32 @@ StylesSSR('Has <link> tags', async () => {
 });
 
 StylesSSR('Has correct CSS classes', async () => {
-  const MUST_HAVE_CSS_CLASSES = ['react-title', 'vue-title', 'svelte-title'];
-
   const result = await runtime.load('/');
   const $ = doc(result.contents);
 
-  for (const className of MUST_HAVE_CSS_CLASSES) {
-    const el = $(`.${className}`);
-    assert.equal(el.length, 1);
+  const MUST_HAVE_CLASSES = {
+    '#react-css': 'react-title',
+    '#vue-css': 'vue-title',
+    '#vue-css-modules': '_title_1gi0u_2', // ⚠️ may be flaky
+    '#vue-scoped': 'vue-title', // also has data-v-* property
+    '#svelte-scoped': 'svelte-title', // also has additional class
+  };
+
+  for (const [selector, className] of Object.entries(MUST_HAVE_CLASSES)) {
+    const el = $(selector);
+    assert.ok(el.attr('class').includes(className));
+
+    // add’l test: Vue Scoped styles should have data-v-* attribute
+    if (selector === '#vue-scoped') {
+      const { attribs } = el.get(0);
+      const scopeId = Object.keys(attribs).find((k) => k.startsWith('data-v-'));
+      assert.ok(scopeId);
+    }
+
+    // add’l test: Svelte should have another class
+    if (selector === '#svelte-title') {
+      assert.not.equal(el.attr('class'), className);
+    }
   }
 });
 
diff --git a/test/fixtures/astro-styles-ssr/astro.config.mjs b/test/fixtures/astro-styles-ssr/astro.config.mjs
index 30955cef0..c7cbdb435 100644
--- a/test/fixtures/astro-styles-ssr/astro.config.mjs
+++ b/test/fixtures/astro-styles-ssr/astro.config.mjs
@@ -2,5 +2,4 @@ export default {
   projectRoot: '.',
   astroRoot: './astro',
   dist: './_site',
-  // No extensions needed, React is the default.
 };
diff --git a/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.jsx b/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.jsx
index edf9eea1f..1f3c42759 100644
--- a/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.jsx
+++ b/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.jsx
@@ -2,6 +2,10 @@ import React from 'react';
 import './ReactCSS.css';
 
 function ReactCSS() {
-  return <h1 className="react-title">React CSS</h1>;
+  return (
+    <h1 id="react-css" className="react-title">
+      React CSS
+    </h1>
+  );
 }
 export default ReactCSS;
diff --git a/test/fixtures/astro-styles-ssr/astro/components/SvelteScoped.svelte b/test/fixtures/astro-styles-ssr/astro/components/SvelteScoped.svelte
index 38d24bf8b..25ed8dce2 100644
--- a/test/fixtures/astro-styles-ssr/astro/components/SvelteScoped.svelte
+++ b/test/fixtures/astro-styles-ssr/astro/components/SvelteScoped.svelte
@@ -1,4 +1,4 @@
-<h1 class="svelte-title">Svelte Scoped</h1>
+<h1 id="svelte-scoped" class="svelte-title">Svelte Scoped</h1>
 
 <style>
   .svelte-title {
diff --git a/test/fixtures/astro-styles-ssr/astro/components/VueCSS.vue b/test/fixtures/astro-styles-ssr/astro/components/VueCSS.vue
index 755884354..ec6e7cd97 100644
--- a/test/fixtures/astro-styles-ssr/astro/components/VueCSS.vue
+++ b/test/fixtures/astro-styles-ssr/astro/components/VueCSS.vue
@@ -5,5 +5,5 @@
 </style>
 
 <template>
-  <h1 class="vue-title">Vue CSS</h1>
+  <h1 id="vue-css" class="vue-title">Vue CSS Modules</h1>
 </template>
diff --git a/test/fixtures/astro-styles-ssr/astro/components/VueModules.vue b/test/fixtures/astro-styles-ssr/astro/components/VueModules.vue
new file mode 100644
index 000000000..9bebf528b
--- /dev/null
+++ b/test/fixtures/astro-styles-ssr/astro/components/VueModules.vue
@@ -0,0 +1,9 @@
+<style module>
+.title {
+  font-family: cursive;
+}
+</style>
+
+<template>
+  <h1 id="vue-css-modules" :class="$style.title">Vue CSS Modules</h1>
+</template>
diff --git a/test/fixtures/astro-styles-ssr/astro/components/VueScoped.vue b/test/fixtures/astro-styles-ssr/astro/components/VueScoped.vue
new file mode 100644
index 000000000..0eee4dff1
--- /dev/null
+++ b/test/fixtures/astro-styles-ssr/astro/components/VueScoped.vue
@@ -0,0 +1,9 @@
+<style scoped>
+.vue-title {
+  font-family: cursive;
+}
+</style>
+
+<template>
+  <h1 id="vue-scoped" class="vue-title">Vue Scoped CSS</h1>
+</template>
diff --git a/test/fixtures/astro-styles-ssr/astro/pages/index.astro b/test/fixtures/astro-styles-ssr/astro/pages/index.astro
index 7333fac21..ed788e217 100644
--- a/test/fixtures/astro-styles-ssr/astro/pages/index.astro
+++ b/test/fixtures/astro-styles-ssr/astro/pages/index.astro
@@ -1,6 +1,8 @@
 ---
 import ReactCSS from '../components/ReactCSS.jsx';
 import VueCSS from '../components/VueCSS.vue';
+import VueScoped from '../components/VueScoped.vue';
+import VueModules from '../components/VueModules.vue';
 import SvelteScoped from '../components/SvelteScoped.svelte';
 ---
 
@@ -19,6 +21,8 @@ import SvelteScoped from '../components/SvelteScoped.svelte';
     <div class="wrapper">
       <ReactCSS />
       <VueCSS />
+      <VueScoped />
+      <VueModules />
       <SvelteScoped />
     </div>
   </body>