compile css once (#4143)

Author: tanhauhau

src/compiler/compile/Component.ts

@@ -14,7 +14,7 @@ import Stylesheet from './css/Stylesheet';
 import { test } from '../config';
 import Fragment from './nodes/Fragment';
 import internal_exports from './internal_exports';
-import { Ast, CompileOptions, Var, Warning } from '../interfaces';
+import { Ast, CompileOptions, Var, Warning, CssResult } from '../interfaces';
 import error from '../utils/error';
 import get_code_frame from '../utils/get_code_frame';
 import flatten_reference from './utils/flatten_reference';
@@ -226,7 +226,7 @@ export default class Component {
 		return alias;
 	}
 
-	generate(result?: Node[]) {
+	generate(result?: { js: Node[]; css: CssResult }) {
 		let js = null;
 		let css = null;
 
@@ -236,7 +236,7 @@ export default class Component {
 
 			const banner = `${this.file ? `${this.file} ` : ``}generated by Svelte v${'__VERSION__'}`;
 
-			const program: any = { type: 'Program', body: result };
+			const program: any = { type: 'Program', body: result.js };
 
 			walk(program, {
 				enter: (node, parent, key) => {
@@ -310,7 +310,7 @@ export default class Component {
 
 			css = compile_options.customElement
 				? { code: null, map: null }
-				: this.stylesheet.render(compile_options.cssOutputFilename, true);
+				: result.css;
 
 			js = print(program, {
 				sourceMapSource: compile_options.filename
@@ -752,7 +752,7 @@ export default class Component {
 
 				if (map.has(node)) {
 					scope = scope.parent;
-				}				
+				}
 			},
 		});
 

src/compiler/compile/index.ts

@@ -90,11 +90,11 @@ export default function compile(source: string, options: CompileOptions = {}) {
 	);
 	stats.stop('create component');
 
-	const js = options.generate === false
+	const result = options.generate === false
 		? null
 		: options.generate === 'ssr'
 			? render_ssr(component, options)
 			: render_dom(component, options);
 
-	return component.generate(js);
+	return component.generate(result);
 }

src/compiler/compile/render_dom/index.ts

@@ -1,7 +1,7 @@
 import { b, x, p } from 'code-red';
 import Component from '../Component';
 import Renderer from './Renderer';
-import { CompileOptions } from '../../interfaces';
+import { CompileOptions, CssResult } from '../../interfaces';
 import { walk } from 'estree-walker';
 import { extract_names, Scope } from '../utils/scope';
 import { invalidate } from './invalidate';
@@ -11,7 +11,7 @@ import { ClassDeclaration, FunctionExpression, Node, Statement, ObjectExpression
 export default function dom(
 	component: Component,
 	options: CompileOptions
-) {
+): { js: Node[]; css: CssResult } {
 	const { name } = component;
 
 	const renderer = new Renderer(component, options);
@@ -509,7 +509,7 @@ export default function dom(
 		body.push(declaration);
 	}
 
-	return flatten(body, []);
+	return { js: flatten(body, []), css };
 }
 
 function flatten(nodes: any[], target: any[]) {

src/compiler/compile/render_ssr/index.ts

@@ -1,17 +1,17 @@
 import { b } from 'code-red';
 import Component from '../Component';
-import { CompileOptions } from '../../interfaces';
+import { CompileOptions, CssResult } from '../../interfaces';
 import { string_literal } from '../utils/stringify';
 import Renderer from './Renderer';
 import { INode as TemplateNode } from '../nodes/interfaces'; // TODO
 import Text from '../nodes/Text';
 import { extract_names } from '../utils/scope';
-import { LabeledStatement, Statement, ExpressionStatement, AssignmentExpression } from 'estree';
+import { LabeledStatement, Statement, ExpressionStatement, AssignmentExpression, Node } from 'estree';
 
 export default function ssr(
 	component: Component,
 	options: CompileOptions
-) {
+): {js: Node[]; css: CssResult} {
 	const renderer = new Renderer({
 		name: component.name
 	});
@@ -145,7 +145,7 @@ export default function ssr(
 		main
 	].filter(Boolean);
 
-	return b`
+	const js = b`
 		${css.code ? b`
 		const #css = {
 			code: "${css.code}",
@@ -160,6 +160,8 @@ export default function ssr(
 			${blocks}
 		});
 	`;
+
+	return {js, css};
 }
 
 function trim(nodes: TemplateNode[]) {

src/compiler/interfaces.ts

@@ -1,4 +1,5 @@
 import { Node, Program } from "estree";
+import { SourceMap } from 'magic-string';
 
 interface BaseNode {
 	start: number;
@@ -160,4 +161,9 @@ export interface Var {
 	hoistable?: boolean;
 	subscribable?: boolean;
 	is_reactive_dependency?: boolean;
+}
+
+export interface CssResult { 
+	code: string;
+	map: SourceMap;
 }