Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix Vite not being able analyze dynamic CSS styles import in dev

Browse source 
Fix:
```
$ yarn start
[vite] warning:
@theme/default
1  |  import "C:\Users\MLM\Documents\GitHub\element\hydrogen-web\src\platform\web\ui\css\themes\element\theme.css";import "@theme/element/light/variables.css"
   |          ^
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: @theme/default
```

And in the browser, it results in none of the styles loading because of the following error:
```
Uncaught SyntaxError: Invalid Unicode escape sequence (at default:formatted:1:163)
```

---

Before:
```
import { injectQuery as __vite__injectQuery } from "/@vite/client";import "__vite__injectQuery(C:\Users\MLM\Documents\GitHub\element\hydrogen-web\src\platform\web\ui\css\themes\element\theme.css, 'import')";import "/@id/__x00__@theme/element/light/variables.css"
```

After:
```
import "/ui/css/themes/element/theme.css";import "/@id/__x00__@theme/element/light/variables.css"
```
This commit is contained in:
Eric Eastwood 2022-06-07 23:41:45 -05:00
parent 8b2299852e
commit 2b4a7f05a6
1 changed files with 3 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
scripts/build-plugins/rollup-plugin-build-themes.js
View file

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
const path = require('path'); const path = require('path').posix;
async function readCSSSource(location) { async function readCSSSource(location) {
const fs = require("fs").promises; const fs = require("fs").promises;
@ -103,6 +103,7 @@ module.exports = function buildThemes(options) {
if (isDevelopment) { return; } if (isDevelopment) { return; }
const { themeConfig } = options; const { themeConfig } = options;
for (const [name, location] of Object.entries(themeConfig.themes)) { for (const [name, location] of Object.entries(themeConfig.themes)) {
console.log('build', location);
manifest = require(`${location}/manifest.json`); manifest = require(`${location}/manifest.json`);
variants = manifest.values.variants; variants = manifest.values.variants;
for (const [variant, details] of Object.entries(variants)) { for (const [variant, details] of Object.entries(variants)) {
@ -142,6 +143,7 @@ module.exports = function buildThemes(options) {
async load(id) { async load(id) {
if (isDevelopment) { if (isDevelopment) {
//console.log('load', id);
/** /**
* To load the theme during dev, we need to take a different approach because emitFile is not supported in dev. * To load the theme during dev, we need to take a different approach because emitFile is not supported in dev.
* We solve this by resolving virtual file "@theme/name/variant" into the necessary css import. * We solve this by resolving virtual file "@theme/name/variant" into the necessary css import.