diff --git a/README.md b/README.md index c312eea85..3332a6030 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ This repository is a `mono-repo` containing multiple `packages` that together co | [webpack-plugin](./packages/webpack-plugin) | `@stylable/webpack-plugin` | [![npm version](https://img.shields.io/npm/v/@stylable/webpack-plugin.svg)](https://www.npmjs.com/package/@stylable/webpack-plugin) | `webpack` (`^5.30.0`) integration plugin | | [experimental-loader](./packages/experimental-loader) | `@stylable/experimental-loader` | [![npm version](https://img.shields.io/npm/v/@stylable/experimental-loader.svg)](https://www.npmjs.com/package/@stylable/experimental-loader) | experimental `webpack` loader - not recommended for production use | | [rollup-plugin](./packages/rollup-plugin) | `@stylable/rollup-plugin` | [![npm version](https://img.shields.io/npm/v/@stylable/rollup-plugin.svg)](https://www.npmjs.com/package/@stylable/rollup-plugin) | Rollup (`v2.x`) integration plugin | +| [vite-plugin](./packages/vite-plugin) | `@stylable/vite-plugin` | [![npm version](https://img.shields.io/npm/v/@stylable/vite-plugin.svg)](https://www.npmjs.com/package/@stylable/vite-plugin) | Vite (`v4.x`) integration plugin | | [esbuild](./packages/esbuild) | `@stylable/esbuild` | [![npm version](https://img.shields.io/npm/v/@stylable/rollup-plugin.svg)](https://www.npmjs.com/package/@stylable/esbuild) | esbuild integration plugin | ### Test-kits diff --git a/package-lock.json b/package-lock.json index a24bb31cf..3bcbd2d5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1086,6 +1086,10 @@ "resolved": "packages/uni-driver", "link": true }, + "node_modules/@stylable/vite-plugin": { + "resolved": "packages/vite-plugin", + "link": true + }, "node_modules/@stylable/webpack-extensions": { "resolved": "packages/webpack-extensions", "link": true @@ -4618,6 +4622,17 @@ "node": ">=8.6" } }, + "node_modules/mime": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", + "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -6822,6 +6837,466 @@ "resolved": "https://registry.npmjs.org/vendor-prefixes/-/vendor-prefixes-1.0.0.tgz", "integrity": "sha512-oWOptgqBs948A3V9TmAUcVFvb0dJgmeHrcIcWq4rqtmCfaRs93t0+DfJu90V5n3drN0CKBYm4BTi9yvWyKXA+g==" }, + "node_modules/vite": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz", + "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==", + "peer": true, + "dependencies": { + "esbuild": "^0.18.10", + "postcss": "^8.4.27", + "rollup": "^3.27.1" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/vite/node_modules/@esbuild/android-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", + "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/android-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", + "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/android-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", + "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/darwin-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", + "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/darwin-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", + "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/freebsd-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", + "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/freebsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", + "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", + "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", + "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", + "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-loong64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", + "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", + "cpu": [ + "loong64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-mips64el": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", + "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", + "cpu": [ + "mips64el" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-ppc64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", + "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", + "cpu": [ + "ppc64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-riscv64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", + "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", + "cpu": [ + "riscv64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-s390x": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", + "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", + "cpu": [ + "s390x" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", + "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/netbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", + "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "netbsd" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/openbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", + "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "openbsd" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/sunos-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", + "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "sunos" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/win32-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", + "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/win32-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", + "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/win32-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", + "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/esbuild": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", + "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==", + "hasInstallScript": true, + "peer": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.18.20", + "@esbuild/android-arm64": "0.18.20", + "@esbuild/android-x64": "0.18.20", + "@esbuild/darwin-arm64": "0.18.20", + "@esbuild/darwin-x64": "0.18.20", + "@esbuild/freebsd-arm64": "0.18.20", + "@esbuild/freebsd-x64": "0.18.20", + "@esbuild/linux-arm": "0.18.20", + "@esbuild/linux-arm64": "0.18.20", + "@esbuild/linux-ia32": "0.18.20", + "@esbuild/linux-loong64": "0.18.20", + "@esbuild/linux-mips64el": "0.18.20", + "@esbuild/linux-ppc64": "0.18.20", + "@esbuild/linux-riscv64": "0.18.20", + "@esbuild/linux-s390x": "0.18.20", + "@esbuild/linux-x64": "0.18.20", + "@esbuild/netbsd-x64": "0.18.20", + "@esbuild/openbsd-x64": "0.18.20", + "@esbuild/sunos-x64": "0.18.20", + "@esbuild/win32-arm64": "0.18.20", + "@esbuild/win32-ia32": "0.18.20", + "@esbuild/win32-x64": "0.18.20" + } + }, + "node_modules/vite/node_modules/rollup": { + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "peer": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/vlq": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/vlq/-/vlq-2.0.4.tgz", @@ -7456,6 +7931,65 @@ "node": ">=14.14.0" } }, + "packages/vite": { + "name": "@stylable/vite", + "version": "5.17.0", + "extraneous": true, + "license": "MIT", + "dependencies": { + "@stylable/build-tools": "^5.17.0", + "@stylable/cli": "^5.17.0", + "@stylable/core": "^5.17.0", + "@stylable/node": "^5.17.0", + "@stylable/optimizer": "^5.17.0", + "@stylable/runtime": "^5.17.0", + "decache": "^4.6.2", + "mime": "^3.0.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "vite": "^4.5.1" + } + }, + "packages/vite-plugin": { + "version": "5.17.0", + "license": "MIT", + "dependencies": { + "@stylable/build-tools": "^5.17.0", + "@stylable/cli": "^5.17.0", + "@stylable/core": "^5.17.0", + "@stylable/node": "^5.17.0", + "@stylable/optimizer": "^5.17.0", + "@stylable/runtime": "^5.17.0", + "decache": "^4.6.2", + "mime": "^3.0.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "vite": "^4.5.1" + } + }, + "packages/vite-plugin-stylable": { + "name": "@stylable/vite", + "version": "1.0.0", + "extraneous": true, + "dependencies": { + "@stylable/build-tools": "^5.11.0", + "@stylable/cli": "^5.11.0", + "@stylable/core": "^5.11.0", + "@stylable/node": "^5.11.0", + "@stylable/optimizer": "^5.11.0", + "@stylable/runtime": "^5.11.0", + "decache": "^4.6.1" + }, + "peerDependencies": { + "vite": "^4.0.0" + } + }, "packages/webpack-extensions": { "name": "@stylable/webpack-extensions", "version": "5.17.0", @@ -8235,6 +8769,19 @@ "@stylable/uni-driver": { "version": "file:packages/uni-driver" }, + "@stylable/vite-plugin": { + "version": "file:packages/vite-plugin", + "requires": { + "@stylable/build-tools": "^5.17.0", + "@stylable/cli": "^5.17.0", + "@stylable/core": "^5.17.0", + "@stylable/node": "^5.17.0", + "@stylable/optimizer": "^5.17.0", + "@stylable/runtime": "^5.17.0", + "decache": "^4.6.2", + "mime": "^3.0.0" + } + }, "@stylable/webpack-extensions": { "version": "file:packages/webpack-extensions", "requires": { @@ -10860,6 +11407,11 @@ "picomatch": "^2.3.1" } }, + "mime": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", + "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==" + }, "mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -12382,6 +12934,213 @@ "resolved": "https://registry.npmjs.org/vendor-prefixes/-/vendor-prefixes-1.0.0.tgz", "integrity": "sha512-oWOptgqBs948A3V9TmAUcVFvb0dJgmeHrcIcWq4rqtmCfaRs93t0+DfJu90V5n3drN0CKBYm4BTi9yvWyKXA+g==" }, + "vite": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz", + "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==", + "peer": true, + "requires": { + "esbuild": "^0.18.10", + "fsevents": "~2.3.2", + "postcss": "^8.4.27", + "rollup": "^3.27.1" + }, + "dependencies": { + "@esbuild/android-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", + "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", + "optional": true, + "peer": true + }, + "@esbuild/android-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", + "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", + "optional": true, + "peer": true + }, + "@esbuild/android-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", + "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", + "optional": true, + "peer": true + }, + "@esbuild/darwin-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", + "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==", + "optional": true, + "peer": true + }, + "@esbuild/darwin-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", + "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", + "optional": true, + "peer": true + }, + "@esbuild/freebsd-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", + "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", + "optional": true, + "peer": true + }, + "@esbuild/freebsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", + "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", + "optional": true, + "peer": true + }, + "@esbuild/linux-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", + "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", + "optional": true, + "peer": true + }, + "@esbuild/linux-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", + "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", + "optional": true, + "peer": true + }, + "@esbuild/linux-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", + "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", + "optional": true, + "peer": true + }, + "@esbuild/linux-loong64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", + "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", + "optional": true, + "peer": true + }, + "@esbuild/linux-mips64el": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", + "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", + "optional": true, + "peer": true + }, + "@esbuild/linux-ppc64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", + "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", + "optional": true, + "peer": true + }, + "@esbuild/linux-riscv64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", + "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", + "optional": true, + "peer": true + }, + "@esbuild/linux-s390x": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", + "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", + "optional": true, + "peer": true + }, + "@esbuild/linux-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", + "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", + "optional": true, + "peer": true + }, + "@esbuild/netbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", + "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", + "optional": true, + "peer": true + }, + "@esbuild/openbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", + "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", + "optional": true, + "peer": true + }, + "@esbuild/sunos-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", + "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", + "optional": true, + "peer": true + }, + "@esbuild/win32-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", + "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", + "optional": true, + "peer": true + }, + "@esbuild/win32-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", + "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", + "optional": true, + "peer": true + }, + "@esbuild/win32-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", + "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", + "optional": true, + "peer": true + }, + "esbuild": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", + "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==", + "peer": true, + "requires": { + "@esbuild/android-arm": "0.18.20", + "@esbuild/android-arm64": "0.18.20", + "@esbuild/android-x64": "0.18.20", + "@esbuild/darwin-arm64": "0.18.20", + "@esbuild/darwin-x64": "0.18.20", + "@esbuild/freebsd-arm64": "0.18.20", + "@esbuild/freebsd-x64": "0.18.20", + "@esbuild/linux-arm": "0.18.20", + "@esbuild/linux-arm64": "0.18.20", + "@esbuild/linux-ia32": "0.18.20", + "@esbuild/linux-loong64": "0.18.20", + "@esbuild/linux-mips64el": "0.18.20", + "@esbuild/linux-ppc64": "0.18.20", + "@esbuild/linux-riscv64": "0.18.20", + "@esbuild/linux-s390x": "0.18.20", + "@esbuild/linux-x64": "0.18.20", + "@esbuild/netbsd-x64": "0.18.20", + "@esbuild/openbsd-x64": "0.18.20", + "@esbuild/sunos-x64": "0.18.20", + "@esbuild/win32-arm64": "0.18.20", + "@esbuild/win32-ia32": "0.18.20", + "@esbuild/win32-x64": "0.18.20" + } + }, + "rollup": { + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "peer": true, + "requires": { + "fsevents": "~2.3.2" + } + } + } + }, "vlq": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/vlq/-/vlq-2.0.4.tgz", diff --git a/packages/vite-plugin/LICENSE b/packages/vite-plugin/LICENSE new file mode 100644 index 000000000..f362f7732 --- /dev/null +++ b/packages/vite-plugin/LICENSE @@ -0,0 +1,9 @@ +MIT License + +Copyright 2024 Wix.com + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/vite-plugin/README.md b/packages/vite-plugin/README.md new file mode 100644 index 000000000..13e85457b --- /dev/null +++ b/packages/vite-plugin/README.md @@ -0,0 +1,55 @@ + +# @stylable/vite-plugin + +[![npm version](https://img.shields.io/npm/v/@stylable/vite-plugin.svg)](https://www.npmjs.com/package/@stylable/vite-plugin) + +### Installation + +`npm i @stylable/vite-plugin -D` + +or + +`yarn add @stylable/vite-plugin --dev` + +### Example Usage +```js +// vite.config.js +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import { viteStylable } from '@stylable/vite'; + +export default defineConfig({ + plugins: [react(), viteStylable({})], +}); + + +``` +> If you use any other vite CSS plugins you should exclude Stylable files (`*.st.css`) from them. + + +### Plugin Options + +```ts +export interface StylableVitePluginOptions { + optimization?: { + minify?: boolean; + }; + inlineAssets?: boolean | ((filepath: string, buffer: Buffer) => boolean); + fileName?: string; + mode?: 'development' | 'production'; + diagnosticsMode?: DiagnosticsMode; + resolveNamespace?: typeof resolveNamespaceNode; + /** + * Runs "stc" programmatically with the webpack compilation. + * true - it will automatically detect the closest "stylable.config.js" file and use it. + * string - it will use the provided string as the "stcConfig" file path. + */ + stcConfig?: boolean | string; + projectRoot?: string; +} +``` + +> This package provides a **naive** Stylable vite plugin. It is in early development stages and may not behave expectedly in all cases. Please open a PR/issue if you encounter any problems. + +## License +Copyright (c) 2024 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by an [MIT license](./LICENSE). diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json new file mode 100644 index 000000000..8a4509f8b --- /dev/null +++ b/packages/vite-plugin/package.json @@ -0,0 +1,45 @@ +{ + "name": "@stylable/vite-plugin", + "version": "5.17.0", + "description": "Stylable plugin for Vite", + "main": "dist/index.js", + "scripts": { + "test": "mocha \"dist/test/**/*.spec.js\"" + }, + "peerDependencies": { + "vite": "^4.5.1" + }, + "dependencies": { + "@stylable/build-tools": "^5.17.0", + "@stylable/cli": "^5.17.0", + "@stylable/core": "^5.17.0", + "@stylable/node": "^5.17.0", + "@stylable/optimizer": "^5.17.0", + "@stylable/runtime": "^5.17.0", + "decache": "^4.6.2", + "mime": "^3.0.0" + }, + "files": [ + "dist", + "!dist/test", + "src", + "runtime.js", + "!*/tsconfig.{json,tsbuildinfo}" + ], + "engines": { + "node": ">=16" + }, + "publishConfig": { + "access": "public" + }, + "keywords": [ + "vite", + "css", + "css modules", + "vite-plugin", + "Stylable" + ], + "repository": "https://github.com/wix/stylable/tree/master/packages/vite-plugin", + "author": "Wix.com", + "license": "MIT" +} diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts new file mode 100644 index 000000000..d639ec992 --- /dev/null +++ b/packages/vite-plugin/src/index.ts @@ -0,0 +1,276 @@ +import type { PluginOption } from 'vite'; +import { hasImportedSideEffects } from '@stylable/build-tools'; +import { resolveConfig as resolveStcConfig, STCBuilder } from '@stylable/cli'; +import type { DiagnosticsMode } from '@stylable/core/dist/index-internal'; +import { emitDiagnostics, tryCollectImportsDeep } from '@stylable/core/dist/index-internal'; +import { resolveNamespace as resolveNamespaceNode } from '@stylable/node'; +import { StylableOptimizer } from '@stylable/optimizer'; +import decache from 'decache'; +import fs from 'fs'; +import { Stylable } from '@stylable/core'; +import { + emitAssets, + generateCssString, + generateStylableModuleCode, + getDefaultMode, +} from './plugin-utils'; + +export interface StylableVitePluginOptions { + optimization?: { + minify?: boolean; + }; + inlineAssets?: boolean | ((filepath: string, buffer: Buffer) => boolean); + fileName?: string; + mode?: 'development' | 'production'; + diagnosticsMode?: DiagnosticsMode; + resolveNamespace?: typeof resolveNamespaceNode; + /** + * Runs "stc" programmatically with the webpack compilation. + * true - it will automatically detect the closest "stylable.config.js" file and use it. + * string - it will use the provided string as the "stcConfig" file path. + */ + stcConfig?: boolean | string; + projectRoot?: string; +} + +const requireModuleCache = new Set(); +const requireModule = (id: string) => { + requireModuleCache.add(id); + return require(id); +}; +const clearRequireCache = () => { + for (const id of requireModuleCache) { + decache(id); + } + requireModuleCache.clear(); +}; + +const ST_CSS = '.st.css'; + +export function viteStylable({ + optimization: { minify = false } = {}, + inlineAssets = true, + // Change when WSR works without it? + diagnosticsMode = 'loose', + mode = getDefaultMode(), + resolveNamespace = resolveNamespaceNode, + stcConfig, + projectRoot = process.cwd(), +}: StylableVitePluginOptions = {}): PluginOption { + let stylable!: Stylable; + let extracted!: Map; + let emittedAssets!: Map; + let stcBuilder: STCBuilder | undefined; + + return { + enforce: 'pre', + name: 'stylable', + async buildStart() { + extracted = extracted || new Map(); + emittedAssets = emittedAssets || new Map(); + if (stylable) { + clearRequireCache(); + stylable.initCache(); + } else { + stylable = new Stylable({ + fileSystem: fs, + projectRoot, + mode, + resolveNamespace, + optimizer: new StylableOptimizer(), + resolverCache: new Map(), + requireModule, + }); + } + + if (stcConfig) { + if (stcBuilder) { + for (const sourceDirectory of stcBuilder.getProjectsSources()) { + this.addWatchFile(sourceDirectory); + } + } else { + const configuration = resolveStcConfig( + projectRoot, + typeof stcConfig === 'string' ? stcConfig : undefined + ); + + if (!configuration) { + throw new Error( + `Could not find "stcConfig"${ + typeof stcConfig === 'string' ? ` at "${stcConfig}"` : '' + }` + ); + } + + stcBuilder = STCBuilder.create({ + rootDir: projectRoot, + configFilePath: configuration.path, + watchMode: this.meta.watchMode, + }); + + await stcBuilder.build(); + + for (const sourceDirectory of stcBuilder.getProjectsSources()) { + this.addWatchFile(sourceDirectory); + } + + stcBuilder.reportDiagnostics( + { + emitWarning: (e) => this.warn(e), + emitError: (e) => this.error(e), + }, + diagnosticsMode + ); + } + } + }, + async watchChange(id) { + if (stcBuilder) { + await stcBuilder.rebuild([id]); + + stcBuilder.reportDiagnostics( + { + emitWarning: (e) => this.warn(e), + emitError: (e) => this.error(e), + }, + diagnosticsMode + ); + } + }, + load(id) { + // Strip any resource queries + const idWithoutQuery = id.split('?')[0]; + + // When loading `*.st.css.js.css` modules - + // we read the virtual css chunk we generated when transforming + if (idWithoutQuery.endsWith(`${ST_CSS}.js.css`)) { + const code = extracted.get( + // We strip away the `.css` extension and the `\0` prefix + idWithoutQuery.slice(1, -1 * '.css'.length) + ); + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + return { code: code!.css }; + } + + // So when loading `*.st.css.js` modules - + // we read the actual `*.st.css` file so our transform alone can process it + if (idWithoutQuery.endsWith(`${ST_CSS}.js`)) { + const code = fs.readFileSync( + // We strip away the `.js` extension and the `\0` prefix + idWithoutQuery.slice(1, -1 * '.js'.length), + 'utf8' + ); + return { code, moduleSideEffects: false }; + } + return null; + }, + async resolveId(id, importer, options) { + const [idWithoutQuery, query] = id.split('?'); + + // Here we fake-resolve our virtual `*.st.css.js.css` CSS modules + // otherwise our generated `*.st.css.js.css` import fails resolution + if (idWithoutQuery.endsWith(`${ST_CSS}.js.css`)) { + const resolution = await this.resolve( + `${idWithoutQuery.slice(1, -1 * '.js.css'.length)}${query ? `?${query}` : ''}`, + importer, + { + skipSelf: true, + ...options, + } + ); + if (!resolution) { + return resolution; + } + + const [resolvedWithoutQuery, resolvedQuery] = resolution.id.split('?'); + return { + ...resolution, + id: `\0${resolvedWithoutQuery}.js.css${ + resolvedQuery ? `?${resolvedQuery}` : '' + }`, + }; + } + + // Here we reroute `*.st.css` imports to `*.st.css.js` imports. + // We do this to avoid Vite's built-in CSS plugin + // from parsing our generated ES module as CSS. + if (idWithoutQuery.endsWith(ST_CSS)) { + const resolution = await this.resolve(id, importer, { + skipSelf: true, + ...options, + }); + + if (!resolution) { + return resolution; + } + + const [resolvedWithoutQuery, query] = resolution.id.split('?'); + return { + ...resolution, + id: `\0${resolvedWithoutQuery}.js${query ? `?${query}` : ''}`, + }; + } + return null; + }, + transform(source, id) { + const [idWithoutQuery] = id.split('?'); + + // We only transform the rerouted `*.st.css.js` imports + if (!idWithoutQuery.endsWith(`${ST_CSS}.js`)) { + return null; + } + const { meta, exports } = stylable.transform( + stylable.analyze( + idWithoutQuery.slice( + // Remove our conventional `\0` prefix + 1, + // We strip away the fake `.js` extension as far as Stylable is concerned + -3 + ), + source + ) + ); + const assetsIds = emitAssets(this, stylable, meta, emittedAssets, inlineAssets); + const css = generateCssString(meta, minify, stylable, assetsIds); + const moduleImports = []; + for (const imported of meta.getImportStatements()) { + if (hasImportedSideEffects(stylable, meta, imported)) { + moduleImports.push(`import ${JSON.stringify(imported.request)};`); + } + } + extracted.set(idWithoutQuery.slice(1), { css }); + + for (const filePath of tryCollectImportsDeep(stylable.resolver, meta)) { + this.addWatchFile(filePath); + } + + /** + * In case this Stylable module has sources the diagnostics will be emitted in `watchChange` hook. + */ + if ( + !stcBuilder?.getSourcesFiles( + idWithoutQuery.slice( + // Remove our conventional `\0` prefix + 1, + // We strip away the fake `.js` extension as far as Stylable is concerned + -3 + ) + ) + ) { + emitDiagnostics( + { + emitWarning: (e: Error) => this.warn(e), + emitError: (e: Error) => this.error(e), + }, + meta, + diagnosticsMode + ); + } + + return { + code: generateStylableModuleCode(id, meta, exports, moduleImports), + map: { mappings: '' }, + }; + }, + }; +} diff --git a/packages/vite-plugin/src/plugin-utils.ts b/packages/vite-plugin/src/plugin-utils.ts new file mode 100644 index 000000000..18cc3d511 --- /dev/null +++ b/packages/vite-plugin/src/plugin-utils.ts @@ -0,0 +1,124 @@ +import type { Stylable, StylableMeta } from '@stylable/core'; +import type { StylableExports } from '@stylable/core/dist/index-internal'; +import { processUrlDependencies } from '@stylable/build-tools'; +import fs from 'fs'; +import { basename, extname, isAbsolute, join } from 'path'; +import { createHash } from 'crypto'; +import mime from 'mime'; +import type { Plugin } from 'vite'; +import type { StylableVitePluginOptions } from './index'; + +type ObjectHook = T | ({ handler: T; order?: 'pre' | 'post' | null } & O); +type GetThisParameters any> = T extends ( + this: infer P, + ...args: any +) => any + ? P + : never; + +type VitePluginTransfrom = GetThisParameters< + Plugin['transform'] extends ObjectHook ? NonNullable : false +>; + +export function generateStylableModuleCode( + id: string, + meta: StylableMeta, + exports: StylableExports, + moduleImports: string[] +) { + const [idWithoutQuery, query] = id.split('?'); + return ` + import { classesRuntime, statesRuntime } from '@stylable/runtime/esm/pure'; + ${moduleImports.join('\n')} + + import '${idWithoutQuery}.css${query ? `?${query}` : ''}'; + + export var namespace = ${JSON.stringify(meta.namespace)}; + export var st = classesRuntime.bind(null, namespace); + export var style = st; + export var cssStates = statesRuntime.bind(null, namespace); + export var classes = ${JSON.stringify(exports.classes)}; + export var keyframes = ${JSON.stringify(exports.keyframes)}; + export var layers = ${JSON.stringify(exports.layers)}; + export var stVars = ${JSON.stringify(exports.stVars)}; + export var vars = ${JSON.stringify(exports.vars)}; + `; +} + +export function generateCssString( + meta: StylableMeta, + minify: boolean, + stylable: Stylable, + assetsIds: string[] +) { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const css = meta + .targetAst!.toString() + .replace(/__stylable_url_asset_(.*?)__/g, (_$0, $1) => assetsIds[Number($1)]); + + if (minify && stylable.optimizer) { + return stylable.optimizer.minifyCSS(css); + } + return css; +} + +export function emitAssets( + ctx: VitePluginTransfrom, + stylable: Stylable, + meta: StylableMeta, + emittedAssets: Map, + inlineAssets: StylableVitePluginOptions['inlineAssets'] +): string[] { + const assets = processUrlDependencies({ + meta, + rootContext: stylable.projectRoot, + host: { + isAbsolute, + join, + }, + }); + const assetsIds: string[] = []; + for (const asset of assets) { + const fileBuffer = fs.readFileSync(asset); + const shouldInline = + typeof inlineAssets === 'function' ? inlineAssets(asset, fileBuffer) : inlineAssets; + + if (shouldInline) { + const mimeType = mime.getType(extname(asset)); + assetsIds.push(`data:${mimeType};base64,${fileBuffer.toString('base64')}`); + } else { + const name = basename(asset); + let hash = emittedAssets.get(asset); + if (hash) { + assetsIds.push(`${hash}_${name}`); + } else { + const fileBuffer = fs.readFileSync(asset); + hash = createHash('sha1').update(fileBuffer).digest('hex'); + const fileName = `${hash}_${name}`; + if (emittedAssets.has(fileName)) { + assetsIds.push(fileName); + } else { + emittedAssets.set(fileName, hash); + emittedAssets.set(asset, hash); + assetsIds.push(fileName); + ctx.emitFile({ + type: 'asset', + fileName, + source: fileBuffer, + }); + } + } + } + } + return assetsIds; +} + +export function getDefaultMode(): 'development' | 'production' { + if (process.env.NODE_ENV === 'production') { + return 'production'; + } + if (process.env.ROLLUP_WATCH) { + return 'development'; + } + return 'production'; +} diff --git a/packages/vite-plugin/src/tsconfig.json b/packages/vite-plugin/src/tsconfig.json new file mode 100644 index 000000000..e0342d219 --- /dev/null +++ b/packages/vite-plugin/src/tsconfig.json @@ -0,0 +1,14 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "outDir": "../dist" + }, + "references": [ + { "path": "../../build-tools/src" }, + { "path": "../../cli/src" }, + { "path": "../../core/src" }, + { "path": "../../node/src" }, + { "path": "../../runtime/src" }, + { "path": "../../optimizer/src" } + ] +} diff --git a/packages/vite-plugin/test/fixtures/vite-app/index.html b/packages/vite-plugin/test/fixtures/vite-app/index.html new file mode 100644 index 000000000..05a4fd406 --- /dev/null +++ b/packages/vite-plugin/test/fixtures/vite-app/index.html @@ -0,0 +1,12 @@ + + + + + + Vite + React + TS + Stylable + + +
+ + + diff --git a/packages/vite-plugin/test/fixtures/vite-app/src/main.js b/packages/vite-plugin/test/fixtures/vite-app/src/main.js new file mode 100644 index 000000000..9f9b4364f --- /dev/null +++ b/packages/vite-plugin/test/fixtures/vite-app/src/main.js @@ -0,0 +1,6 @@ +import { style, classes } from './stuff.st.css'; + +const root = document.getElementById('root'); +root.className = classes.root; +root.textContent = 'This
should be blue'; +root.setAttribute('data-hook', 'target'); diff --git a/packages/vite-plugin/test/fixtures/vite-app/src/stuff.st.css b/packages/vite-plugin/test/fixtures/vite-app/src/stuff.st.css new file mode 100644 index 000000000..b0acb82c9 --- /dev/null +++ b/packages/vite-plugin/test/fixtures/vite-app/src/stuff.st.css @@ -0,0 +1,3 @@ +.root { + background-color: #1337AF; +} diff --git a/packages/vite-plugin/test/tsconfig.json b/packages/vite-plugin/test/tsconfig.json new file mode 100644 index 000000000..4fe1e9185 --- /dev/null +++ b/packages/vite-plugin/test/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "outDir": "../dist/test", + "types": ["node", "externals", "mocha"] + }, + "references": [ + { "path": "../../core/src" }, + { "path": "../../cli/src" }, + { "path": "../../e2e-test-kit/src" }, + { "path": "../../core-test-kit/src" }, + { "path": "../../optimizer/src" }, + { "path": "../src" } + ] +} diff --git a/packages/vite-plugin/test/vite-build.spec.ts b/packages/vite-plugin/test/vite-build.spec.ts new file mode 100644 index 000000000..def3fb4c7 --- /dev/null +++ b/packages/vite-plugin/test/vite-build.spec.ts @@ -0,0 +1,83 @@ +import { dirname } from 'path'; +import { expect } from 'chai'; +import { type UserConfig as ViteConfig, build, preview } from 'vite'; +import { viteStylable } from '@stylable/vite-plugin'; +import playwright from 'playwright-core'; + +const project = 'vite-app'; +const projectDir = dirname( + require.resolve(`@stylable/vite-plugin/test/fixtures/${project}/index.html`) +); + +const viteConfig: ViteConfig = { + root: projectDir, + plugins: [viteStylable()], + logLevel: 'silent', + clearScreen: false, +}; + +async function viteBuildAndPreview() { + await build({ + configFile: false, + ...viteConfig, + }); + const vitePreviewServer = await preview({ + configFile: false, + ...viteConfig, + }); + + const viteAddress = vitePreviewServer.httpServer?.address(); + + if (!viteAddress) { + throw new Error('no preview server url for some reason'); + } + const url = + typeof viteAddress === 'string' ? viteAddress : `http://localhost:${viteAddress.port}/`; + + return { + stop() { + vitePreviewServer.httpServer.close(); + return Promise.resolve(); + }, + url, + }; +} + +describe('vite build', () => { + let vitePreviewServer: Awaited> | undefined; + const disposable = new Set<() => Promise | void>(); + before(async () => { + vitePreviewServer = await viteBuildAndPreview(); + }); + + after(async () => { + for (const dispose of disposable) { + await dispose(); + } + await vitePreviewServer?.stop(); + }); + + it('should render stylable-styled content in `vite build && vite preview`', async () => { + const page = await open(vitePreviewServer!.url, disposable); + + const bg = await page.evaluate(() => { + const elm = document.querySelector('[data-hook="target"]')!; + return window.getComputedStyle(elm).getPropertyValue('background-color'); + }); + + expect(bg).to.equal('rgb(19, 55, 175)'); + }); +}); + +async function open(url: string, dispose: Set<() => Promise | void>) { + const launchOptions = {}; + const browser = process.env.PLAYWRIGHT_SERVER + ? await playwright.chromium.connect(process.env.PLAYWRIGHT_SERVER, launchOptions) + : await playwright.chromium.launch(launchOptions); + + const browserContext = await browser.newContext(); + const page = await browserContext.newPage(); + await page.goto(url, { waitUntil: 'networkidle' }); + dispose.add(() => browser.close()); + return page; +} diff --git a/packages/vite-plugin/test/vite-dev.spec.ts b/packages/vite-plugin/test/vite-dev.spec.ts new file mode 100644 index 000000000..661639a0d --- /dev/null +++ b/packages/vite-plugin/test/vite-dev.spec.ts @@ -0,0 +1,79 @@ +import { dirname } from 'path'; +import { expect } from 'chai'; +import type { UserConfig as ViteConfig } from 'vite'; +import { createServer } from 'vite'; +import { viteStylable } from '@stylable/vite-plugin'; +import playwright from 'playwright-core'; + +const project = 'vite-app'; +const projectDir = dirname( + require.resolve(`@stylable/vite-plugin/test/fixtures/${project}/index.html`) +); + +const viteConfig: ViteConfig = { + root: projectDir, + plugins: [viteStylable()], + logLevel: 'silent', + clearScreen: false, +}; + +async function viteDev() { + const viteServer = await createServer({ + configFile: false, + ...viteConfig, + }); + await viteServer.listen(); + const viteAddress = viteServer.httpServer?.address(); + + if (!viteAddress) { + throw new Error('no dev server url for some reason'); + } + const url = + typeof viteAddress === 'string' ? viteAddress : `http://localhost:${viteAddress.port}/`; + + return { + async stop() { + await viteServer.close(); + }, + url, + }; +} + +describe('vite dev', () => { + let viteDevServer: Awaited> | undefined; + const disposable = new Set<() => Promise | void>(); + before(async () => { + viteDevServer = await viteDev(); + }); + + after(async () => { + for (const dispose of disposable) { + await dispose(); + } + await viteDevServer?.stop(); + }); + + it('should render stylable-styled content in `vite dev`', async () => { + const page = await open(viteDevServer!.url, disposable); + + const bg = await page.evaluate(() => { + const elm = document.querySelector('[data-hook="target"]')!; + return window.getComputedStyle(elm).getPropertyValue('background-color'); + }); + + expect(bg).to.equal('rgb(19, 55, 175)'); + }); +}); + +async function open(url: string, dispose: Set<() => Promise | void>) { + const launchOptions = {}; + const browser = process.env.PLAYWRIGHT_SERVER + ? await playwright.chromium.connect(process.env.PLAYWRIGHT_SERVER, launchOptions) + : await playwright.chromium.launch(launchOptions); + + const browserContext = await browser.newContext(); + const page = await browserContext.newPage(); + await page.goto(url, { waitUntil: 'networkidle' }); + dispose.add(() => browser.close()); + return page; +} diff --git a/tsconfig.json b/tsconfig.json index 12f2f4e44..fa51007bc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -45,6 +45,8 @@ { "path": "./packages/webpack-plugin/src" }, { "path": "./packages/webpack-plugin/test" }, { "path": "./packages/esbuild/src" }, - { "path": "./packages/esbuild/test" } + { "path": "./packages/esbuild/test" }, + { "path": "./packages/vite-plugin/src" }, + { "path": "./packages/vite-plugin/test" } ] }