Skip to content
This repository has been archived by the owner on Mar 31, 2022. It is now read-only.

Commit

Permalink
[FIX] fix css sourcemaps (sveltejs#768)
Browse files Browse the repository at this point in the history 
* fix css sourcemaps

* use rollups sourcemap output option for css maps
  • Loading branch information
@teoxoy @Conduitry
teoxoy authored and Conduitry committed Jul 28, 2019
1 parent 910d28e commit 9146059
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 20 deletions.
10 changes: 6 additions & 4 deletions src/core/create_compilers/RollupCompiler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,15 @@ export default class RollupCompiler {

async compile(): Promise<CompileResult> {
const config = await this._;
const sourcemap = config.output.sourcemap;

const start = Date.now();

try {
const bundle = await rollup.rollup(config);
await bundle.write(config.output);

return new RollupResult(Date.now() - start, this);
return new RollupResult(Date.now() - start, this, sourcemap);
} catch (err) {
if (err.filename) {
// TODO this is a bit messy. Also, can
Expand All @@ -85,6 +86,7 @@ export default class RollupCompiler {

async watch(cb: (err?: Error, stats?: any) => void) {
const config = await this._;
const sourcemap = config.output.sourcemap;

const watcher = rollup.watch(config);

Expand Down Expand Up @@ -113,7 +115,7 @@ export default class RollupCompiler {

case 'ERROR':
this.errors.push(event.error);
cb(null, new RollupResult(Date.now() - this._start, this));
cb(null, new RollupResult(Date.now() - this._start, this, sourcemap));
break;

case 'START':
Expand All @@ -126,7 +128,7 @@ export default class RollupCompiler {
break;

case 'BUNDLE_END':
cb(null, new RollupResult(Date.now() - this._start, this));
cb(null, new RollupResult(Date.now() - this._start, this, sourcemap));
break;

default:
Expand Down Expand Up @@ -166,4 +168,4 @@ export default class RollupCompiler {

return config;
}
}
}
6 changes: 4 additions & 2 deletions src/core/create_compilers/RollupResult.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ export default class RollupResult implements CompileResult {
main: string,
chunks: Record<string, string[]>
};
sourcemap: boolean | 'inline';
summary: string;

constructor(duration: number, compiler: RollupCompiler) {
constructor(duration: number, compiler: RollupCompiler, sourcemap: boolean | 'inline') {
this.duration = duration;
this.sourcemap = sourcemap

this.errors = compiler.errors.map(munge_warning_or_error);
this.warnings = compiler.warnings.map(munge_warning_or_error); // TODO emit this as they happen
Expand Down Expand Up @@ -93,7 +95,7 @@ export default class RollupResult implements CompileResult {
bundler: 'rollup',
shimport: require('shimport/package.json').version,
assets: this.assets,
css: extract_css(this, manifest_data.components, dirs)
css: extract_css(this, manifest_data.components, dirs, this.sourcemap)
};
}

Expand Down
49 changes: 35 additions & 14 deletions src/core/create_compilers/extract_css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ type SourceMap = {
mappings: string;
};

function get_css_from_modules(modules: string[], css_map: Map<string, string>, dirs: Dirs) {
function get_css_from_modules(modules: string[], css_map: Map<string, string>, asset_dir: string) {
const parts: string[] = [];
const mappings: number[][][] = [];

Expand Down Expand Up @@ -94,7 +94,7 @@ function get_css_from_modules(modules: string[], css_map: Map<string, string>, d
if (parts.length > 0) {
combined_map.mappings = codec.encode(mappings);

combined_map.sources = combined_map.sources.map(source => path.relative(`${dirs.dest}/client`, source));
combined_map.sources = combined_map.sources.map(source => path.relative(asset_dir, source).replace(/\\/g, '/'));

return {
code: parts.join('\n'),
Expand All @@ -105,7 +105,12 @@ function get_css_from_modules(modules: string[], css_map: Map<string, string>, d
return null;
}

export default function extract_css(client_result: CompileResult, components: PageComponent[], dirs: Dirs) {
export default function extract_css(
client_result: CompileResult,
components: PageComponent[],
dirs: Dirs,
sourcemap: boolean | 'inline'
) {
const result: {
main: string | null;
chunks: Record<string, string[]>
Expand Down Expand Up @@ -138,17 +143,25 @@ export default function extract_css(client_result: CompileResult, components: Pa
const css_modules = chunk.modules.filter(m => css_map.has(m));
if (!css_modules.length) return;

const css = get_css_from_modules(css_modules, css_map, dirs);
const css = get_css_from_modules(css_modules, css_map, asset_dir);

const { code, map } = css;
let { code, map } = css;

const output_file_name = chunk.file.replace(/\.js$/, '.css');

map.file = output_file_name;
map.sources = map.sources.map(source => path.relative(`${asset_dir}`, source));

fs.writeFileSync(`${asset_dir}/${output_file_name}`, `${code}\n/* sourceMappingURL=./${output_file_name}.map */`);
fs.writeFileSync(`${asset_dir}/${output_file_name}.map`, JSON.stringify(map, null, ' '));
if (sourcemap === true) {
fs.writeFileSync(`${asset_dir}/${output_file_name}.map`, JSON.stringify(map, null, ' '));
code += `\n/*# sourceMappingURL=${output_file_name}.map */`;
}

if (sourcemap === 'inline') {
const base64 = Buffer.from(JSON.stringify(map), 'utf8').toString('base64')
code += `\n/*# sourceMappingURL=${inline_sourcemap_header}${base64} */`;
}

fs.writeFileSync(`${asset_dir}/${output_file_name}`, code);

chunks_with_css.add(chunk);
});
Expand Down Expand Up @@ -227,22 +240,30 @@ export default function extract_css(client_result: CompileResult, components: Pa
entry_css_modules.push(file);
});

const leftover = get_css_from_modules(entry_css_modules, css_map, dirs);
const leftover = get_css_from_modules(entry_css_modules, css_map, asset_dir);
if (leftover) {
const { code, map } = leftover;
let { code, map } = leftover;

const main_hash = hash(code);

const output_file_name = `main.${main_hash}.css`;

map.file = output_file_name;
map.sources = map.sources.map(source => path.relative(asset_dir, source));

fs.writeFileSync(`${asset_dir}/${output_file_name}`, `${code}\n/* sourceMappingURL=client/${output_file_name}.map */`);
fs.writeFileSync(`${asset_dir}/${output_file_name}.map`, JSON.stringify(map, null, ' '));
if (sourcemap === true) {
fs.writeFileSync(`${asset_dir}/${output_file_name}.map`, JSON.stringify(map, null, ' '));
code += `\n/*# sourceMappingURL=client/${output_file_name}.map */`;
}

if (sourcemap === 'inline') {
const base64 = Buffer.from(JSON.stringify(map), 'utf8').toString('base64')
code += `\n/*# sourceMappingURL=${inline_sourcemap_header}${base64} */`;
}

fs.writeFileSync(`${asset_dir}/${output_file_name}`, code);

result.main = output_file_name;
}

return result;
}
}

0 comments on commit 9146059

Please sign in to comment.