Use SCSS and PostCSS with Rollup

.eslintrc.js

@@ -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 } ]
+    }
+}

babel.config.js

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

package.json

@@ -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",
+    "build": "sapper build dist --legacy",
-    "export": "sapper export --legacy",
+    "export": "sapper export export",
-    "start": "node __sapper__/build"
+    "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"
+  ]
 }

postcss.config.js

@@ -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

rollup.config.js

@@ -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: [
+				runtimeHelpers: true
-					['@babel/preset-env', {
-						targets: '> 0.25%, not dead'
-					}]
-				],
-				plugins: [
-					'@babel/plugin-syntax-dynamic-import',
-					['@babel/plugin-transform-runtime', {
-						useESModules: 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: {
+	// serviceworker: {
-		input: config.serviceworker.input(),
+	// 	input: config.serviceworker.input(),
-		output: config.serviceworker.output(),
+	// 	output: config.serviceworker.output(),
-		plugins: [
+	// 	plugins: [
-			resolve(),
+	// 		resolve(),
-			replace({
+	// 		replace({
-				'process.browser': true,
+	// 			'process.browser': true,
-				'process.env.NODE_ENV': JSON.stringify(mode)
+	// 			'process.env.NODE_ENV': JSON.stringify(mode)
-			}),
+	// 		}),
-			commonjs(),
+	// 		commonjs(),
-			!dev && terser()
+	// 		!dev && terser()
-		],
+	// 	],
 
-		onwarn,
+	// 	onwarn,
-	}
+	// }
 }

src/components/Locations.svelte

@@ -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,47 +16,42 @@
         }
     })
 
-    // Define locations to show
+    let filterLocations
-    let filteredLocations = Array.from($locations)
+    onMount(() => {
-    filteredLocations.forEach(loc => loc.show = true)
+        filterLocations = new Shuffle(document.getElementById('locations_list'), {
-    $: visibleLocations = filteredLocations
+            itemSelector: '.column',
+            sizer: '#continents',
+            speed: 400,
+            staggerAmount: 50
+        })
+    })
 
     // On click on continents
-    function toggleCountries (continent, i) {
+    const toggleContinents = (event, continent = '') => {
-        // Toggle the continent
+        // Change the filter
-        continentsShow[i].show = !continentsShow[i].show
+        filterLocations.filter(continent.id)
 
-        // Filter locations
+        // Change active classes
-        filteredLocations.map(l => l.country.continent.id === continent.id ? l.show = !l.show : null)
+        const continentsList = [...event.target.parentNode.children]
-        visibleLocations = filteredLocations
+        continentsList.forEach(c => c.classList.remove('is-danger'))
+        event.target.classList.add('is-danger')
     }
-
-    // Transitions
-    const transition = (node, { duration }) => {
-		return {
-			duration,
-			css: t => {
-				const eased = cubicInOut(t)
-				return `transform: scale(${eased});`
-			}
-		}
-	}
 </script>
 
-<div class="buttons has-addons is-centered">
+<div class="buttons is-centered" id="continents">
-{#each $continents as continent, i}
+    <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}
-{/each}
+    {/each}
 </div>
 
 <div class="columns" id="locations_list">
-    {#each visibleLocations as location}
+    {#each $locations as location}
-    {#if location.show}
+    <div class="column is-one-third animate" data-groups='["{location.country.continent.id}"]'>
-    <div class="column is-one-third" in:transition="{{duration: 400}}" out:transition="{{duration: 400}}">
         <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>

src/routes/_layout.svelte

@@ -62,9 +62,9 @@
 </script>
 
 <script>
-	// Dependencies
+	// Styles
-	import '../../node_modules/bulma/css/bulma.min.css'
+	// import '../../node_modules/bulma/css/bulma.min.css'
-	import '../../node_modules/@fortawesome/fontawesome-free/css/all.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 />