Skip to content
This repository was archived by the owner on May 8, 2021. It is now read-only.

Commit 31333ce

Browse files
casprinecasprine
committedJun 5, 2019
added svelte setup
1 parent 301a787 commit 31333ce

14 files changed

+38242
-0
lines changed
 

‎examples/svelte/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.DS_Store
2+
node_modules
3+
public/bundle.*

‎examples/svelte/README.md

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# Svelte
2+
3+
Setting up Tailwind with svelte is really simple, just install Tailwind and pocstcss-cli:
4+
5+
```sh
6+
npm install tailwindcss postcss-cli --save-dev
7+
```
8+
9+
If you want to remove unused styles, add PurgeCSS as well
10+
11+
```
12+
npm install @fullhuman/postcss-purgecss
13+
```
14+
15+
Create your Tailwind config file
16+
17+
```sh
18+
./node_modules/.bin/tailwind init tailwind.js
19+
```
20+
21+
Create a `postcss.config.js` file and add this to it
22+
23+
```js
24+
const tailwindcss = require("tailwindcss");
25+
26+
// only needed if you want to purge
27+
const purgecss = require("@fullhuman/postcss-purgecss")({
28+
content: ["./src/**/*.svelte", "./public/**/*.html"],
29+
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
30+
});
31+
32+
module.exports = {
33+
plugins: [
34+
tailwindcss("./tailwind.js"),
35+
36+
// only needed if you want to purge
37+
...(process.env.NODE_ENV === "production" ? [purgecss] : [])
38+
]
39+
};
40+
```
41+
42+
Next, create a CSS file for your Tailwind styles. You have to store in it public folder `public/tailwind.css` and add this to it :
43+
44+
```css
45+
@tailwind base;
46+
@tailwind components;
47+
@tailwind utilities;
48+
```
49+
50+
Update your `package.json` with the custom scripts.
51+
52+
`build:tailwind is only needed if you want to purge`
53+
54+
```js
55+
"scripts": {
56+
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
57+
"build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
58+
"dev": "run-p start:dev autobuild watch:build",
59+
"build": "npm run build:tailwind && rollup -c",
60+
61+
}
62+
```
63+
64+
Finally, add a stylesheet link to your `public/index.html` file
65+
66+
```html
67+
<link rel="stylesheet" href="index.css" />
68+
```
69+
70+
## Project setup
71+
72+
```
73+
npm install
74+
```
75+
76+
### Compiles and hot-reloads for development
77+
78+
```
79+
npm run dev
80+
```
81+
82+
### Compiles and minifies for production
83+
84+
```
85+
npm run build
86+
```

‎examples/svelte/package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "svelte-app",
3+
"version": "1.0.0",
4+
"devDependencies": {
5+
"npm-run-all": "^4.1.5",
6+
"postcss-cli": "^6.1.2",
7+
"rollup": "^1.10.1",
8+
"rollup-plugin-commonjs": "^9.3.4",
9+
"rollup-plugin-livereload": "^1.0.0",
10+
"rollup-plugin-node-resolve": "^4.2.3",
11+
"rollup-plugin-svelte": "^5.0.3",
12+
"rollup-plugin-terser": "^4.0.4",
13+
"sirv-cli": "^0.4.0",
14+
"svelte": "^3.0.0",
15+
"tailwindcss": "^1.0.3"
16+
},
17+
"scripts": {
18+
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
19+
"build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
20+
"dev": "run-p start:dev autobuild watch:tailwind",
21+
"build": "npm run build:tailwind && rollup -c",
22+
"autobuild": "rollup -c -w",
23+
"start": "sirv public",
24+
"start:dev": "sirv public --dev"
25+
},
26+
"dependencies": {
27+
"@fullhuman/postcss-purgecss": "^1.2.0"
28+
}
29+
}

‎examples/svelte/postcss.config.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const tailwindcss = require("tailwindcss");
2+
3+
// only needed if you want to purge
4+
const purgecss = require("@fullhuman/postcss-purgecss")({
5+
content: ["./src/**/*.svelte", "./public/**/*.html"],
6+
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
7+
});
8+
9+
module.exports = {
10+
plugins: [
11+
tailwindcss("./tailwind.js"),
12+
13+
// only needed if you want to purge
14+
...(process.env.NODE_ENV === "production" ? [purgecss] : [])
15+
]
16+
};

‎examples/svelte/public/favicon.png

3.05 KB
Loading

‎examples/svelte/public/global.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
html, body {
2+
position: relative;
3+
width: 100%;
4+
height: 100%;
5+
}
6+
7+
body {
8+
color: #333;
9+
margin: 0;
10+
padding: 8px;
11+
box-sizing: border-box;
12+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13+
}
14+
15+
a {
16+
color: rgb(0,100,200);
17+
text-decoration: none;
18+
}
19+
20+
a:hover {
21+
text-decoration: underline;
22+
}
23+
24+
a:visited {
25+
color: rgb(0,80,160);
26+
}
27+
28+
label {
29+
display: block;
30+
}
31+
32+
input, button, select, textarea {
33+
font-family: inherit;
34+
font-size: inherit;
35+
padding: 0.4em;
36+
margin: 0 0 0.5em 0;
37+
box-sizing: border-box;
38+
border: 1px solid #ccc;
39+
border-radius: 2px;
40+
}
41+
42+
input:disabled {
43+
color: #ccc;
44+
}
45+
46+
input[type="range"] {
47+
height: 0;
48+
}
49+
50+
button {
51+
background-color: #f4f4f4;
52+
outline: none;
53+
}
54+
55+
button:active {
56+
background-color: #ddd;
57+
}
58+
59+
button:focus {
60+
border-color: #666;
61+
}

‎examples/svelte/public/index.css

+35,086
Large diffs are not rendered by default.

‎examples/svelte/public/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<meta charset='utf8'>
6+
<meta name='viewport' content='width=device-width'>
7+
8+
<title>Svelte app</title>
9+
10+
<link rel='icon' type='image/png' href='favicon.png'>
11+
<link rel='stylesheet' href='global.css'>
12+
<link rel='stylesheet' href='bundle.css'>
13+
<link rel="stylesheet" href="index.css">
14+
</head>
15+
16+
<body>
17+
<script src='bundle.js'></script>
18+
</body>
19+
20+
</html>

‎examples/svelte/public/tailwind.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎examples/svelte/rollup.config.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import svelte from 'rollup-plugin-svelte';
2+
import resolve from 'rollup-plugin-node-resolve';
3+
import commonjs from 'rollup-plugin-commonjs';
4+
import livereload from 'rollup-plugin-livereload';
5+
import { terser } from 'rollup-plugin-terser';
6+
7+
const production = !process.env.ROLLUP_WATCH;
8+
9+
export default {
10+
input: 'src/main.js',
11+
output: {
12+
sourcemap: true,
13+
format: 'iife',
14+
name: 'app',
15+
file: 'public/bundle.js'
16+
},
17+
plugins: [
18+
svelte({
19+
// enable run-time checks when not in production
20+
dev: !production,
21+
// we'll extract any component CSS out into
22+
// a separate file — better for performance
23+
css: css => {
24+
css.write('public/bundle.css');
25+
}
26+
}),
27+
28+
// If you have external dependencies installed from
29+
// npm, you'll most likely need these plugins. In
30+
// some cases you'll need additional configuration —
31+
// consult the documentation for details:
32+
// https://github.com/rollup/rollup-plugin-commonjs
33+
resolve(),
34+
commonjs(),
35+
36+
// Watch the `public` directory and refresh the
37+
// browser on changes when not in production
38+
!production && livereload('public'),
39+
40+
// If we're building for production (npm run build
41+
// instead of npm run dev), minify
42+
production && terser()
43+
],
44+
watch: {
45+
clearScreen: false
46+
}
47+
};

‎examples/svelte/src/App.svelte

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script>
2+
export let name;
3+
</script>
4+
5+
<style>
6+
h1 {
7+
color: purple;
8+
}
9+
</style>
10+
11+
<h1>Hello {name}!</h1>

‎examples/svelte/src/main.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import App from './App.svelte';
2+
3+
const app = new App({
4+
target: document.body,
5+
props: {
6+
name: 'world'
7+
}
8+
});
9+
10+
export default app;

‎examples/svelte/tailwind.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
theme: {
3+
extend: {}
4+
},
5+
variants: {},
6+
plugins: []
7+
}

‎examples/svelte/yarn.lock

+2,863
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
This repository has been archived.