flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use SCSS and PostCSS with Rollup

Browse Source
This commit is contained in:
Félix Péault
2020-01-02 14:15:37 +01:00
parent 3ed48ebcfb
commit 6b221c2172
8 changed files with 2077 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
.eslintrc.js Normal file
View File

@@ -0,0 +1,25 @@
module.exports = {
extends: [
'standard'
],
env: {
'browser': true,
'node': true,
'es6': true
},
parserOptions: {
'ecmaVersion': 2019,
'sourceType': 'module'
},
plugins: [
'svelte3'
],
overrides: [{
files: ['**/*.svelte'],
processor: 'svelte3/svelte3'
}],
rules: {
indent: [ 'error', 4 ],
'no-multiple-empty-lines': [ 1, { 'max': 5 } ]
}
}

11
babel.config.js Normal file
View File

@@ -0,0 +1,11 @@
module.exports = {
presets: [
'@babel/preset-env'
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-transform-runtime', {
'useESModules': true
}]
]
}

40
package.json
View File

@@ -1,18 +1,29 @@
{
"name": "housesof",
"description": "Houses Of website",
"version": "1.0.0",
"description": "Houses Of website",
"author": {
"name": "Flayks",
"email": "hello@flayks.com",
"url": "http://flayks.com"
},
"private": true,
"scripts": {
"dev": "sapper dev",
"build": "sapper build --legacy",
"export": "sapper export --legacy",
"start": "node __sapper__/build"
"build": "sapper build dist --legacy",
"export": "sapper export export",
"start": "node __sapper__/build",
"serve": "node server/server.js"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.12.0",
"animejs": "^3.1.0",
"bulma": "^0.8.0",
"compression": "^1.7.4",
"dayjs": "^1.8.18",
"normalize.css": "^8.0.1",
"polka": "^1.0.0-next.9",
"shufflejs": "^5.2.3",
"sirv": "^0.4.2"
},
"devDependencies": {
@@ -21,15 +32,30 @@
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.7.7",
"@babel/runtime": "^7.7.7",
"@fortawesome/fontawesome-free": "^5.12.0",
"@rollup/plugin-node-resolve": "^6.0.0",
"@rollup/plugin-replace": "^2.3.0",
"autoprefixer": "^9.7.3",
"eslint-plugin-svelte3": "^2.7.3",
"node-sass": "^4.13.0",
"postcss": "^7.0.26",
"postcss-load-config": "^2.1.0",
"postcss-preset-env": "^6.7.0",
"rollup": "^1.27.14",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-svelte": "^5.1.1",
"rollup-plugin-terser": "^5.1.3",
"sapper": "^0.27.9",
"svelte": "^3.16.7"
}
"sass": "^1.24.0",
"svelte": "^3.16.7",
"svelte-preprocess": "^3.3.0"
},
"browserslist": [
"ie >= 11",
"last 7 ff versions",
"last 7 chrome versions",
"safari >= 10",
"ios >= 11",
"android >= 7"
]
}

1911
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

35
postcss.config.js Normal file
View File

@@ -0,0 +1,35 @@
const dev = process.env.NODE_ENV === 'development'
let config = {
plugins: {
// Preset Env
'postcss-preset-env': {
},
// Autoprefixer
autoprefixer: {
},
// Extract media queries
// 'postcss-combine-media-query': {
// }
}
}
// Production only
// CSS Nano for production
if (!dev) {
config.plugins.cssnano = {
preset: 'default',
autoprefixer: true,
discardComments: { removeAll: true },
calc: { precision: 2 },
safe: true
}
}
// Export
module.exports = config

64
rollup.config.js
View File

@@ -3,10 +3,12 @@ import replace from '@rollup/plugin-replace'
import commonjs from 'rollup-plugin-commonjs'
import svelte from 'rollup-plugin-svelte'
import babel from 'rollup-plugin-babel'
import sveltePreprocess from 'svelte-preprocess'
import { terser } from 'rollup-plugin-terser'
import config from 'sapper/config/rollup.js'
import pkg from './package.json'
// Define environment
const mode = process.env.NODE_ENV
const dev = mode === 'development'
const legacy = !!process.env.SAPPER_LEGACY_BUILD
@@ -14,19 +16,35 @@ const legacy = !!process.env.SAPPER_LEGACY_BUILD
const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning)
const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/')
// Preprocessors
const preprocess = sveltePreprocess({
scss: {
includePaths: ['node_modules', 'src']
},
postcss: {
configFilePath: './'
}
})
// Sapper Rollup config
export default {
client: {
input: config.client.input(),
output: config.client.output(),
experimentalCodeSplitting: true,
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
css: css => {
css.write('public/bundle.css')
},
preprocess,
dev,
hydratable: true,
emitCss: true
emitCss: true,
}),
resolve({
browser: true,
@@ -36,19 +54,8 @@ export default {
legacy && babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/@babel/**'],
presets: [
['@babel/preset-env', {
targets: '> 0.25%, not dead'
}]
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-transform-runtime', {
useESModules: true
}]
]
runtimeHelpers: true
}),
!dev && terser({
@@ -68,6 +75,7 @@ export default {
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
preprocess,
generate: 'ssr',
dev
}),
@@ -75,7 +83,7 @@ export default {
browser: true,
dedupe
}),
commonjs()
commonjs(),
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules || Object.keys(process.binding('natives'))
@@ -84,19 +92,19 @@ export default {
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
commonjs(),
!dev && terser()
],
// serviceworker: {
// input: config.serviceworker.input(),
// output: config.serviceworker.output(),
// plugins: [
// resolve(),
// replace({
// 'process.browser': true,
// 'process.env.NODE_ENV': JSON.stringify(mode)
// }),
// commonjs(),
// !dev && terser()
// ],
onwarn,
}
// onwarn,
// }
}

55
src/components/Locations.svelte
View File

@@ -1,6 +1,11 @@
<script context="module">
import Shuffle from 'shufflejs'
</script>
<script>
import { onMount } from 'svelte'
import { continents, locations } from '../store'
import { cubicInOut } from 'svelte/easing'
import { zoomFadeIn, zoomFadeOut } from '../animations'
// Define continents to be show
let continentsShow = []
@@ -11,37 +16,33 @@
}
})
// Define locations to show
let filteredLocations = Array.from($locations)
filteredLocations.forEach(loc => loc.show = true)
$: visibleLocations = filteredLocations
let filterLocations
onMount(() => {
filterLocations = new Shuffle(document.getElementById('locations_list'), {
itemSelector: '.column',
sizer: '#continents',
speed: 400,
staggerAmount: 50
})
})
// On click on continents
function toggleCountries (continent, i) {
// Toggle the continent
continentsShow[i].show = !continentsShow[i].show
const toggleContinents = (event, continent = '') => {
// Change the filter
filterLocations.filter(continent.id)
// Filter locations
filteredLocations.map(l => l.country.continent.id === continent.id ? l.show = !l.show : null)
visibleLocations = filteredLocations
}
// Transitions
const transition = (node, { duration }) => {
return {
duration,
css: t => {
const eased = cubicInOut(t)
return `transform: scale(${eased});`
}
}
// Change active classes
const continentsList = [...event.target.parentNode.children]
continentsList.forEach(c => c.classList.remove('is-danger'))
event.target.classList.add('is-danger')
}
</script>
<div class="buttons has-addons is-centered">
<div class="buttons is-centered" id="continents">
<button class="button is-rounded is-danger" on:click="{(e) => toggleContinents(e)}">All</button>
{#each $continents as continent, i}
{#if continent.countries}
<button class="button is-rounded is-danger" class:is-outlined={!continentsShow[i].show} on:click="{toggleCountries(continent, i)}">
<button class="button is-rounded is-danger is-outlined" on:click="{(e) => toggleContinents(e, continent)}">
{continent.name}
</button>
{/if}
@@ -49,9 +50,8 @@
</div>
<div class="columns" id="locations_list">
{#each visibleLocations as location}
{#if location.show}
<div class="column is-one-third" in:transition="{{duration: 400}}" out:transition="{{duration: 400}}">
{#each $locations as location}
<div class="column is-one-third animate" data-groups='["{location.country.continent.id}"]'>
<div class="card">
<div class="card-content">
<a class="media" href="/location/{location.country.slug}/{location.slug}">
@@ -72,6 +72,5 @@
</div>
</div>
</div>
{/if}
{/each}
</div>

10
src/routes/_layout.svelte
View File

@@ -62,9 +62,9 @@
</script>
<script>
// Dependencies
import '../../node_modules/bulma/css/bulma.min.css'
import '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
// Styles
// import '../../node_modules/bulma/css/bulma.min.css'
// import '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
// Components
import Footer from '../parts/Footer.svelte'
@@ -83,6 +83,10 @@
<title>Houses Of - Beautiful houses of planet Earth</title>
</svelte:head>
<style lang="scss" global>
@import '../style/style.scss';
</style>
<slot></slot>
<Footer />