Skip to content
This repository has been archived by the owner on Jan 11, 2023. It is now read-only.

fix lazy css bug, add tests #492

Merged
merged 1 commit into from
Oct 25, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/core/create_compilers/extract_css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ export default function extract_css(client_result: CompileResult, components: Pa
});

unclaimed.forEach(file => {
entry_css_modules.push(css_map.get(file));
entry_css_modules.push(file);
});

const leftover = get_css_from_modules(entry_css_modules, css_map, dirs);
Expand Down
64 changes: 64 additions & 0 deletions test/apps/css/rollup.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import resolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';
import svelte from 'rollup-plugin-svelte';

const mode = process.env.NODE_ENV;
const dev = mode === 'development';

const config = require('../../../config/rollup.js');

export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
dev,
hydratable: true,
emitCss: true
}),
resolve()
],

// temporary, pending Rollup 1.0
experimentalCodeSplitting: true
},

server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
generate: 'ssr',
dev
}),
resolve({
preferBuiltins: true
})
],
external: ['sirv', 'polka'],

// temporary, pending Rollup 1.0
experimentalCodeSplitting: true
},

serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
})
]
}
};
9 changes: 9 additions & 0 deletions test/apps/css/src/client.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import * as sapper from '../__sapper__/client.js';

window.start = () => sapper.start({
target: document.querySelector('#sapper')
});

window.prefetchRoutes = () => sapper.prefetchRoutes();
window.prefetch = href => sapper.prefetch(href);
window.goto = href => sapper.goto(href);
7 changes: 7 additions & 0 deletions test/apps/css/src/routes/_components/Title.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<h1>Title</h1>

<style>
h1 {
color: green;
}
</style>
3 changes: 3 additions & 0 deletions test/apps/css/src/routes/_error.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<h1>{status}</h1>

<p>{error.message}</p>
11 changes: 11 additions & 0 deletions test/apps/css/src/routes/bar.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<svelte:component this={Title}/>

<script>
export default {
oncreate() {
import('./_components/Title.html').then(({ default: Title }) => {
this.set({ Title });
});
}
};
</script>
7 changes: 7 additions & 0 deletions test/apps/css/src/routes/foo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<h1>Foo</h1>

<style>
h1 {
color: blue;
}
</style>
10 changes: 10 additions & 0 deletions test/apps/css/src/routes/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<h1>Great success!</h1>

<a href="foo">foo</a>
<a href="bar">bar</a>

<style>
h1 {
color: red;
}
</style>
8 changes: 8 additions & 0 deletions test/apps/css/src/server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import polka from 'polka';
import * as sapper from '../__sapper__/server.js';

const { PORT } = process.env;

polka()
.use(sapper.middleware())
.listen(PORT);
82 changes: 82 additions & 0 deletions test/apps/css/src/service-worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';

const ASSETS = `cache${timestamp}`;

// `shell` is an array of all the files generated by webpack,
// `files` is an array of everything in the `static` directory
const to_cache = shell.concat(ASSETS);
const cached = new Set(to_cache);

self.addEventListener('install', event => {
event.waitUntil(
caches
.open(ASSETS)
.then(cache => cache.addAll(to_cache))
.then(() => {
self.skipWaiting();
})
);
});

self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(async keys => {
// delete old caches
for (const key of keys) {
if (key !== ASSETS) await caches.delete(key);
}

self.clients.claim();
})
);
});

self.addEventListener('fetch', event => {
if (event.request.method !== 'GET') return;

const url = new URL(event.request.url);

// don't try to handle e.g. data: URIs
if (!url.protocol.startsWith('http')) return;

// ignore dev server requests
if (url.hostname === self.location.hostname && url.port !== self.location.port) return;

// always serve assets and webpack-generated files from cache
if (url.host === self.location.host && cached.has(url.pathname)) {
event.respondWith(caches.match(event.request));
return;
}

// for pages, you might want to serve a shell `index.html` file,
// which Sapper has generated for you. It's not right for every
// app, but if it's right for yours then uncomment this section
/*
if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
event.respondWith(caches.match('/index.html'));
return;
}
*/

if (event.request.cache === 'only-if-cached') return;

// for everything else, try the network first, falling back to
// cache if the user is offline. (If the pages never change, you
// might prefer a cache-first approach to a network-first one.)
event.respondWith(
caches
.open(`offline${timestamp}`)
.then(async cache => {
try {
const response = await fetch(event.request);
cache.put(event.request, response.clone());
return response;
} catch(err) {
const response = await cache.match(event.request);
if (response) return response;

throw err;
}
})
);
});
14 changes: 14 additions & 0 deletions test/apps/css/src/template.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>

%sapper.base%
%sapper.styles%
%sapper.head%
</head>
<body>
<div id='sapper'>%sapper.html%</div>
%sapper.scripts%
</body>
</html>
78 changes: 78 additions & 0 deletions test/apps/css/test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import * as assert from 'assert';
import * as puppeteer from 'puppeteer';
import { build } from '../../../api';
import { AppRunner } from '../AppRunner';
import { wait } from '../../utils';

describe('css', function() {
this.timeout(10000);

let runner: AppRunner;
let page: puppeteer.Page;
let base: string;

// helpers
let start: () => Promise<void>;
let prefetchRoutes: () => Promise<void>;
let prefetch: (href: string) => Promise<void>;
let goto: (href: string) => Promise<void>;
let title: () => Promise<string>;

// hooks
before(async () => {
await build({ cwd: __dirname });

runner = new AppRunner(__dirname, '__sapper__/build/server/server.js');
({ base, page, start, prefetchRoutes, prefetch, goto, title } = await runner.start());
});

after(() => runner.end());

it('includes critical CSS with server render', async () => {
await page.goto(base);

assert.equal(
await page.evaluate(() => {
const h1 = document.querySelector('h1');
return getComputedStyle(h1).color;
}),
'rgb(255, 0, 0)'
);
});

it('loads CSS when navigating client-side', async () => {
await page.goto(base);

await start();
await prefetchRoutes();

await page.click(`[href="foo"]`);
await wait(50);

assert.equal(
await page.evaluate(() => {
const h1 = document.querySelector('h1');
return getComputedStyle(h1).color;
}),
'rgb(0, 0, 255)'
);
});

it('loads CSS for a lazily-rendered component', async () => {
await page.goto(base);

await start();
await prefetchRoutes();

await page.click(`[href="bar"]`);
await wait(50);

assert.equal(
await page.evaluate(() => {
const h1 = document.querySelector('h1');
return getComputedStyle(h1).color;
}),
'rgb(0, 128, 0)'
);
});
});