Inject CSS loading with Rollup

Author: benmccann

package-lock.json

@@ -57,6 +57,7 @@
     "require-relative": "^0.8.7",
     "rollup": "^2.21.0",
     "rollup-dependency-tree": "0.0.14",
+    "rollup-plugin-css-chunks": "^1.2.6",
     "rollup-plugin-svelte": "^5.1.0",
     "rollup-plugin-typescript2": "^0.27.1",
     "sade": "^1.6.1",

package.json

@@ -359,27 +359,8 @@ export async function hydrate_target(dest: Target): Promise<HydratedTarget> {
 	return { redirect, props, branch };
 }
 
-function load_css(chunk: string) {
-	const href = `client/${chunk}`;
-	if (document.querySelector(`link[href="${href}"]`)) return;
-
-	return new Promise((fulfil, reject) => {
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = href;
-
-		link.onload = () => fulfil();
-		link.onerror = reject;
-
-		document.head.appendChild(link);
-	});
-}
-
 export function load_component(component: DOMComponentLoader): Promise<DOMComponentModule> {
-	// TODO this is temporary — once placeholders are
-	// always rewritten, scratch the ternary
-	const promises: Array<Promise<any>> = (typeof component.css === 'string' ? [] : component.css.map(load_css));
-	promises.unshift(component.js());
+	const promises: Array<Promise<any>> = [component.js()];
 	return Promise.all(promises).then(values => values[0]);
 }
 

runtime/src/app/app.ts

@@ -19,8 +19,7 @@ export interface DOMComponentConstructor {
 }
 
 export interface DOMComponentLoader {
-  js: () => Promise<DOMComponentModule>,
-  css: string[]
+  js: () => Promise<DOMComponentModule>
 }
 
 export interface Route {

runtime/src/internal/manifest-client.d.ts

@@ -4,7 +4,6 @@ import minify_html from './utils/minify_html';
 import { create_compilers, create_app, create_manifest_data, create_serviceworker_manifest } from '../core';
 import { copy_shimport } from './utils/copy_shimport';
 import read_template from '../core/read_template';
-import inject_resources from '../core/create_compilers/inject';
 import { CompileResult } from '../core/create_compilers/interfaces';
 import { noop } from './utils/noop';
 import validate_bundler from './utils/validate_bundler';
@@ -103,16 +102,9 @@ export async function build({
 		build_info.legacy_assets = legacy_client_result.assets;
 		delete process.env.SAPPER_LEGACY_BUILD;
 	}
-
 	fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify(build_info, null, '  '));
-	if (bundler === 'rollup') {
-		inject_resources(path.join(dest, 'build.json'), path.join(dest, 'client'));
-	}
 
 	const server_stats = await server.compile();
-	if (bundler === 'rollup') {
-		inject_resources(path.join(dest, 'build.json'), path.join(dest, 'server'));
-	}
 	oncompile({
 		type: 'server',
 		result: server_stats

src/api/build.ts

@@ -6,7 +6,6 @@ import * as ports from 'port-authority';
 import { EventEmitter } from 'events';
 import { create_manifest_data, create_app, create_compilers, create_serviceworker_manifest } from '../core';
 import { Compiler, Compilers } from '../core/create_compilers';
-import inject_resources from '../core/create_compilers/inject';
 import { CompileResult } from '../core/create_compilers/interfaces';
 import Deferred from './utils/Deferred';
 import validate_bundler from './utils/validate_bundler';
@@ -233,10 +232,6 @@ class Watcher extends EventEmitter {
 				this.restart(filename, 'server');
 			},
 
-			// Note that we don't inject the CSS path into the server in dev mode, which means
-			// that styles might not work if you have JavaScript disabled. We skip it because if
-			// the server completes before the client it will fail to find build.json. This is not
-			// an issue for production builds because we don't have two simultaneous watchers then.
 			handle_result: (result: CompileResult) => {
 				deferred.promise.then(() => {
 					const restart = () => {
@@ -341,10 +336,6 @@ class Watcher extends EventEmitter {
 					JSON.stringify(result.to_json(manifest_data, this.dirs), null, '  ')
 				);
 
-				if (this.bundler === 'rollup') {
-					inject_resources(path.join(this.dirs.dest, 'build.json'), path.join(this.dirs.dest, 'client'));
-				}
-
 				const client_files = result.chunks.map(chunk => `client/${chunk.file}`);
 
 				create_serviceworker_manifest({

src/api/dev.ts

@@ -102,8 +102,7 @@ function generate_client_manifest(
 			component_indexes[component.name] = i;
 
 			return `{
-					js: () => import(${annotation}${stringify(source)}),
-					css: "__SAPPER_CSS_PLACEHOLDER:${stringify(component.file, false)}__"
+					js: () => import(${annotation}${stringify(source)})
 				}`;
 		}).join(',\n\t\t\t\t')}
 	]`.replace(/^\t/gm, '');