11ty / eleventy-plugin-vite

A plugin to use Vite with Eleventy
134 stars 10 forks source link

Build converts svg to css and base64 encodes png files #21

Closed ChrisPlease closed 1 year ago

ChrisPlease commented 1 year ago

Package versions:

{
    "@11ty/eleventy": "^2.0.0-canary.23",
    "@11ty/eleventy-plugin-vite": "^2.0.0-canary.2",
}

I'm trying to set up an svg/png favicon. I have the 2 files in my /public directory. Taking advantage of the automatic passthrough for the /public/ directory, when I run npm run serve, favicon assets are copied as expected, and favicon appears in dev.

However, when I run npm run build (node --require esbuild-register node_modules/.bin/eleventy), assets are not copied, and the index file is transformed.

The href for the png is converted to a base64 encoded string, the svg is parsed as a css file resulting in a favicon.[hash].css file. Neither of the assets are copied, and the favicon is missing.

<link rel="icon" type="image/svg+xml" href="/assets/styles/favicon.87206af2.css">
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAhUlEQVRoQ+3SsQ0AIAzEwGT/pRniChTJ9H6Bzc7xs8fvPz3gd8EKVAAN9IVQIOMVYIU4UAEUyHgFWCEOVAAFMl4BVogDFUCBjFeAFeJABVAg4xVghThQARTIeAVYIQ5UAAUyXgFWiAMVQIGMV4AV4kAFUCDjFWCFOFABFMh4BVghDpwv8ACa9QAx8lijdQAAAABJRU5ErkJggg==">

When running in debug mode, I can see that the assets are indeed copied by Eleventy

  Eleventy:TemplatePassthrough Copying individual file 'public/favicon.png' +229ms
  Eleventy:TemplatePassthrough Copying individual file 'public/favicon.svg' +0ms

This seems like it's a vite config issue, but not sure.

ChrisPlease commented 1 year ago

nvm, this is def user error. This is caused by my rollupOptions.output configuration.