Skip to content

Commit 988c919

Browse files
committed
feat: remove FOUC on Sapper installation instructions
1 parent 1245326 commit 988c919

File tree

5 files changed

+62
-136
lines changed

5 files changed

+62
-136
lines changed

README.md

+40-27
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@ Here are some features you should know about:
8989

9090
## Integration for Sapper
9191

92+
<small>\* As of 2021-Apr-06, these instructions will now work without a FOUC!</small>
93+
9294
1. Install the following packages as dev dependencies
9395
- With yarn
9496
```sh
@@ -113,36 +115,47 @@ Here are some features you should know about:
113115

114116
// ...
115117

116-
// At the client svelte options change emitCss to true and css to false
117-
svelte({
118-
compilerOptions: {
119-
dev,
120-
hydratable: true,
121-
css: false
122-
},
123-
emitCss: true
124-
}),
125-
126-
// Right after that plugin, paste the following.
127-
// Once in the "client:" section, and again in the "server:" section.
128-
postcss({
129-
extensions: ['.scss', '.sass'],
130-
extract: false,
131-
minimize: true,
132-
use: [
133-
['sass', {
134-
includePaths: [
135-
'./src/theme',
136-
'./node_modules'
137-
]
138-
}]
139-
]
140-
}),
141-
// NOT in the "serviceworker:" section.
118+
// Insert the following right before the "export default {" line:
119+
const postcssOptions = (extract) => ({
120+
extensions: ['.scss'],
121+
extract: extract ? 'smui.css' : false,
122+
minimize: true,
123+
use: [
124+
[
125+
'sass',
126+
{
127+
includePaths: ['./src/theme', './node_modules'],
128+
},
129+
],
130+
],
131+
});
132+
133+
// Right after the "svelte" plugin in the "client:" section, paste the following plugin.
134+
postcss(postcssOptions(true)),
135+
136+
// Right after the "svelte" plugin in the "server:" section, paste the following plugin.
137+
postcss(postcssOptions(false)),
138+
139+
// Don't touch the "serviceworker:" section.
142140
// ...
143141
```
144142
145-
4. Install a SMUI package.
143+
4. In the `template.html` file, in the `<head>` section right after `%sapper.base%`, paste the following:
144+
145+
```
146+
<!-- SMUI Styles -->
147+
<link rel="stylesheet" href="client/smui.css">
148+
```
149+
150+
5. Install a SMUI package, and include it from your Svelte files like this:
151+
152+
```html
153+
<Button on:click={() => alert('Clicked!')}>Click Me!</Button>
154+
155+
<script>
156+
import Button from '@smui/button';
157+
</script>
158+
```
146159

147160
# Components
148161

site/package-lock.json

+11-73
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)