Get CSS Modules working in Vue (#53)
This commit is contained in:
Drew Powers
GitHub
parent
2646f800af
commit
003b3c395f
15 changed files with 251 additions and 92 deletions
233
package-lock.json
generated
233
package-lock.json
generated
|
|
@ -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": {
|
||||
|
|
|
|||
21
package.json
21
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",
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
|
|
|
|||
|
|
@ -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 = '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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});`;
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2,5 +2,4 @@ export default {
|
|||
projectRoot: '.',
|
||||
astroRoot: './astro',
|
||||
dist: './_site',
|
||||
// No extensions needed, React is the default.
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<h1 class="svelte-title">Svelte Scoped</h1>
|
||||
<h1 id="svelte-scoped" class="svelte-title">Svelte Scoped</h1>
|
||||
|
||||
<style>
|
||||
.svelte-title {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
9
test/fixtures/astro-styles-ssr/astro/components/VueModules.vue
vendored
Normal file
9
test/fixtures/astro-styles-ssr/astro/components/VueModules.vue
vendored
Normal file
|
|
@ -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>
|
||||
9
test/fixtures/astro-styles-ssr/astro/components/VueScoped.vue
vendored
Normal file
9
test/fixtures/astro-styles-ssr/astro/components/VueScoped.vue
vendored
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue