lit-css
lit-css copied to clipboard
esbuild sourcemap loses filename on web components
With esbuild
0.23.1 and 0.24.0, when the esbuild-plugin-minify-html-literals
is enabled, if a component is not explicitly imported by name then the sourcemap output is absent the filename.
Example:
... "../../src/frontend/components", "../../src/frontend/components", "../../src/frontend/components", "../../src/frontend/components", ...
With the following esbuild
script:
import esbuild from 'esbuild';
import { minifyHTMLLiteralsPlugin } from 'esbuild-plugin-minify-html-literals';
import { compressPlugin } from '@liber-ufpe/esbuild-plugin-compress';
const commonOptions = {
bundle: true,
sourcemap: true,
logLevel: 'info',
};
const compress = compressPlugin({
gzip: false,
brotli: true,
deflate: false,
});
await esbuild.build({
minify: true,
splitting: true,
entryPoints: ['src/frontend/index.ts'],
outdir: 'dist/frontend',
format: 'esm',
platform: 'browser',
target: 'esnext',
tsconfig: 'src/frontend/tsconfig.json',
metafile: true,
plugins: [
minifyHTMLLiteralsPlugin(),
compress,
],
...commonOptions,
})
With the index.ts
basically re-exporting components,
export * from './components/boris-plaintext-input.js';
export * from './components/boris-poster.js';
export * from './components/boris-progress.js';
export * from './components/boris-publish-dialog.js';
With components looking similar to:
import { LitElement, css, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
@customElement('boris-plaintext-input')
export class BorisPlaintextInputElement extends LitElement {
}