diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index 2c7fb64b67..2b792b6a9d 100644 --- a/src/compiler/compile/Component.ts +++ b/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 diff --git a/src/compiler/compile/index.ts b/src/compiler/compile/index.ts index 5d29f71e35..12b161aeeb 100644 --- a/src/compiler/compile/index.ts +++ b/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); } diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 6edb946c29..df5c550aff 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/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[]) { diff --git a/src/compiler/compile/render_ssr/index.ts b/src/compiler/compile/render_ssr/index.ts index 00157cc256..ad22869d32 100644 --- a/src/compiler/compile/render_ssr/index.ts +++ b/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[]) { diff --git a/src/compiler/interfaces.ts b/src/compiler/interfaces.ts index e7362b9313..a5e286462f 100644 --- a/src/compiler/interfaces.ts +++ b/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; } \ No newline at end of file