include css in compiler output (#409)

Author: Rich-Harris

.gitignore

@@ -11,4 +11,4 @@ coverage
 coverage.lcov
 test/sourcemaps/samples/*/output.js
 test/sourcemaps/samples/*/output.js.map
-_actual.json
+_actual.*

src/generators/Generator.js

@@ -6,6 +6,7 @@ import globalWhitelist from '../utils/globalWhitelist.js';
 import reservedNames from '../utils/reservedNames.js';
 import getIntro from './shared/utils/getIntro.js';
 import getOutro from './shared/utils/getOutro.js';
+import processCss from './shared/processCss.js';
 import annotateWithScopes from './annotateWithScopes.js';
 
 export default class Generator {
@@ -30,6 +31,7 @@ export default class Generator {
 		this.elementDepth = 0;
 
 		this.code = new MagicString( source );
+		this.css = parsed.css ? processCss( parsed, this.code ) : null;
 		this.cssId = parsed.css ? `svelte-${parsed.hash}` : '';
 		this.usesRefs = false;
 
@@ -233,7 +235,8 @@ export default class Generator {
 
 		return {
 			code: compiled.toString(),
-			map: compiled.generateMap({ includeContent: true, file: options.outputFilename })
+			map: compiled.generateMap({ includeContent: true, file: options.outputFilename }),
+			css: this.css
 		};
 	}
 

src/generators/dom/index.js

@@ -2,7 +2,6 @@ import deindent from '../../utils/deindent.js';
 import getBuilders from './utils/getBuilders.js';
 import CodeBuilder from '../../utils/CodeBuilder.js';
 import namespaces from '../../utils/namespaces.js';
-import processCss from '../shared/processCss.js';
 import removeObjectKey from '../../utils/removeObjectKey.js';
 import visitors from './visitors/index.js';
 import Generator from '../Generator.js';
@@ -275,12 +274,12 @@ export default function dom ( parsed, source, options ) {
 		builders.main.addBlock( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` );
 	}
 
-	 if ( parsed.css && options.css !== false ) {
+	if ( generator.css && options.css !== false ) {
 		builders.main.addBlock( deindent`
 			var ${generator.alias( 'addedCss' )} = false;
 			function ${generator.alias( 'addCss' )} () {
 				var style = ${generator.helper( 'createElement' )}( 'style' );
-				style.textContent = ${JSON.stringify( processCss( parsed, generator.code ) )};
+				style.textContent = ${JSON.stringify( generator.css )};
 				${generator.helper( 'appendNode' )}( style, document.head );
 
 				${generator.alias( 'addedCss' )} = true;

src/generators/server-side-rendering/index.js

@@ -1,7 +1,6 @@
 import deindent from '../../utils/deindent.js';
 import CodeBuilder from '../../utils/CodeBuilder.js';
 import flattenReference from '../../utils/flattenReference.js';
-import processCss from '../shared/processCss.js';
 import visitors from './visitors/index.js';
 import Generator from '../Generator.js';
 
@@ -93,11 +92,11 @@ export default function ssr ( parsed, source, options ) {
 		`var components = [];`
 	);
 
-	if ( parsed.css ) {
+	if ( generator.css ) {
 		builders.renderCss.addBlock( deindent`
 			components.push({
 				filename: ${name}.filename,
-				css: ${JSON.stringify( processCss( parsed, generator.code ) )},
+				css: ${JSON.stringify( generator.css )},
 				map: null // TODO
 			});
 		` );

test/css/index.js

@@ -0,0 +1,25 @@
+import assert from 'assert';
+import * as fs from 'fs';
+import { svelte, exists } from '../helpers.js';
+
+describe.only( 'css', () => {
+	fs.readdirSync( 'test/css/samples' ).forEach( dir => {
+		if ( dir[0] === '.' ) return;
+
+		const solo = exists( `test/css/samples/${dir}/solo` );
+
+		if ( solo && process.env.CI ) {
+			throw new Error( 'Forgot to remove `solo: true` from test' );
+		}
+
+		( solo ? it.only : it )( dir, () => {
+			const input = fs.readFileSync( `test/css/samples/${dir}/input.html`, 'utf-8' ).replace( /\s+$/, '' );
+
+			const actual = svelte.compile( input ).css;
+			fs.writeFileSync( `test/css/samples/${dir}/_actual.css`, actual );
+			const expected = fs.readFileSync( `test/css/samples/${dir}/expected.css`, 'utf-8' );
+
+			assert.equal( actual.trim(), expected.trim() );
+		});
+	});
+});

test/css/samples/basic/expected.css

@@ -0,0 +1,4 @@
+
+	div[svelte-281576708], [svelte-281576708] div {
+		color: red;
+	}

test/css/samples/basic/input.html

@@ -0,0 +1,7 @@
+<div>red</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>