Merge pull request #154 from sveltejs/gh-153

Server-rendered CSS

src/generate/css/process.js

@@ -1,18 +1,6 @@
-import deindent from '../../utils/deindent.js';
 import spaces from '../../utils/spaces.js';
 import transform from './transform.js';
 
 export default function process ( parsed ) {
-	const scoped = transform( spaces( parsed.css.content.start ) + parsed.css.content.styles, parsed.hash );
-
-	return deindent`
-		let addedCss = false;
-		function addCss () {
-			var style = document.createElement( 'style' );
-			style.textContent = ${JSON.stringify( scoped )};
-			document.head.appendChild( style );
-
-			addedCss = true;
-		}
-	`;
+	return transform( spaces( parsed.css.content.start ) + parsed.css.content.styles, parsed.hash );
 }

src/generate/index.js

@@ -392,8 +392,17 @@ export default function generate ( parsed, source, options, names ) {
 		topLevelStatements.push( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` );
 	}
 
-	if ( parsed.css ) {
-		topLevelStatements.push( processCss( parsed ) );
+	if ( parsed.css && options.css !== false ) {
+		topLevelStatements.push( deindent`
+			let addedCss = false;
+			function addCss () {
+				var style = document.createElement( 'style' );
+				style.textContent = ${JSON.stringify( processCss( parsed ) )};
+				document.head.appendChild( style );
+
+				addedCss = true;
+			}
+		` );
 	}
 
 	topLevelStatements.push( ...renderers.reverse() );
@@ -402,7 +411,7 @@ export default function generate ( parsed, source, options, names ) {
 
 	const initStatements = [];
 
-	if ( parsed.css ) {
+	if ( parsed.css && options.css !== false ) {
 		initStatements.push( `if ( !addedCss ) addCss();` );
 	}
 

src/parse/index.js

@@ -25,6 +25,8 @@ export default function parse ( template ) {
 		throw new TypeError( 'Template must be a string' );
 	}
 
+	template = template.replace( /\s+$/, '' );
+
 	const parser = {
 		index: 0,
 		template,

src/server-side-rendering/compile.js

@@ -4,10 +4,11 @@ import deindent from '../utils/deindent.js';
 import isReference from '../utils/isReference.js';
 import flattenReference from '../utils/flattenReference.js';
 import MagicString, { Bundle } from 'magic-string';
+import processCss from '../generate/css/process.js';
 
 const voidElementNames = /^(?:area|base|br|col|command|doctype|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/i;
 
-export default function compile ( source, filename ) {
+export default function compile ( source, { filename }) {
 	const parsed = parse( source, {} );
 	validate( parsed, source, {} );
 
@@ -113,6 +114,8 @@ export default function compile ( source, filename ) {
 		};
 	}
 
+	let elementDepth = 0;
+
 	const stringifiers = {
 		Component ( node ) {
 			const props = node.attributes.map( attribute => {
@@ -187,12 +190,18 @@ export default function compile ( source, filename ) {
 				element += str;
 			});
 
+			if ( parsed.css && elementDepth === 0 ) {
+				element += ` svelte-${parsed.hash}`;
+			}
+
 			if ( voidElementNames.test( node.name ) ) {
 				element += '>';
 			} else if ( node.children.length === 0 ) {
 				element += '/>';
 			} else {
+				elementDepth += 1;
 				element += '>' + node.children.map( stringify ).join( '' ) + `</${node.name}>`;
+				elementDepth -= 1;
 			}
 
 			return element;
@@ -278,10 +287,6 @@ export default function compile ( source, filename ) {
 		topLevelStatements.push( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` );
 	}
 
-	if ( parsed.css ) {
-		throw new Error( 'TODO handle css' );
-	}
-
 	const renderStatements = [
 		templateProperties.data ? `data = Object.assign( template.data(), data || {} );` : `data = data || {};`
 	];
@@ -325,10 +330,55 @@ export default function compile ( source, filename ) {
 		`return rendered;`
 	);
 
+	const renderCssStatements = [
+		`var components = [];`
+	];
+
+	if ( parsed.css ) {
+		renderCssStatements.push( deindent`
+			components.push({
+				filename: exports.filename,
+				css: ${JSON.stringify( processCss( parsed ) )},
+				map: null // TODO
+			});
+		` );
+	}
+
+	if ( templateProperties.components ) {
+		renderCssStatements.push( deindent`
+			var seen = {};
+
+			function addComponent ( component ) {
+				var result = component.renderCss();
+				result.components.forEach( x => {
+					if ( seen[ x.filename ] ) return;
+					seen[ x.filename ] = true;
+					components.push( x );
+				});
+			}
+		` );
+
+		renderCssStatements.push( templateProperties.components.properties.map( prop => `addComponent( template.components.${prop.key.name} );` ).join( '\n' ) );
+	}
+
+	renderCssStatements.push( deindent`
+		return {
+			css: components.map( x => x.css ).join( '\\n' ),
+			map: null,
+			components
+		};
+	` );
+
 	topLevelStatements.push( deindent`
+		exports.filename = ${JSON.stringify( filename )};
+
 		exports.render = function ( data, options ) {
 			${renderStatements.join( '\n\n' )}
 		};
+
+		exports.renderCss = function () {
+			${renderCssStatements.join( '\n\n' )}
+		};
 	` );
 
 	const rendered = topLevelStatements.join( '\n\n' );

src/server-side-rendering/register.js

@@ -2,6 +2,6 @@ import * as fs from 'fs';
 import compile from './compile.js';
 
 require.extensions[ '.html' ] = function ( module, filename ) {
-	const { code } = compile( fs.readFileSync( filename, 'utf-8' ) );
+	const { code } = compile( fs.readFileSync( filename, 'utf-8' ), { filename });
 	return module._compile( code, filename );
 };