Clean things up before things get serious

.eslintrc.js

@@ -1,14 +1,14 @@
 module.exports = {
-	root: true,
-	env: {
-		node: true
-	},
-	extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
-	rules: {
-		"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-		"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
-	},
-	parserOptions: {
-		parser: "@typescript-eslint/parser"
-	}
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+  },
+  parserOptions: {
+    parser: "@typescript-eslint/parser"
+  }
 };

README.md

@@ -1,29 +1,21 @@
 # diretto
 
-## Project setup
-```
-yarn install
+## Getting started
+
+### Get dependencies
+
+```sh
+yarn
 ```
 
-### Compiles and hot-reloads for development
-```
-yarn run serve
+### Compile and run dev server
+
+```sh
+yarn serve
 ```
 
-### Compiles and minifies for production
-```
-yarn run build
-```
+### Compile and build for production
 
-### Run your tests
+```sh
+yarn build
 ```
-yarn run test
-```
-
-### Lints and fixes files
-```
-yarn run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-	presets: ["@vue/app"]
+  presets: ["@vue/app"]
 };

package.json

@@ -1,37 +1,38 @@
 {
-	"name": "diretto",
-	"version": "0.1.0",
-	"private": true,
-	"scripts": {
-		"serve": "vue-cli-service serve",
-		"build": "vue-cli-service build",
-		"lint": "vue-cli-service lint"
-	},
-	"dependencies": {
-		"core-js": "^2.6.5",
-		"register-service-worker": "^1.6.2",
-		"tailwindcss": "^1.0.4",
-		"vue": "^2.6.10",
-		"vue-class-component": "^7.0.2",
-		"vue-property-decorator": "^8.1.0",
-		"vue-router": "^3.0.3",
-		"vuex": "^3.0.1"
-	},
-	"devDependencies": {
-		"@vue/cli-plugin-babel": "^3.8.0",
-		"@vue/cli-plugin-eslint": "^3.8.0",
-		"@vue/cli-plugin-pwa": "^3.8.0",
-		"@vue/cli-plugin-typescript": "^3.8.0",
-		"@vue/cli-service": "^3.8.0",
-		"@vue/eslint-config-prettier": "^4.0.1",
-		"@vue/eslint-config-typescript": "^4.0.0",
-		"babel-eslint": "^10.0.1",
-		"eslint": "^5.16.0",
-		"eslint-plugin-vue": "^5.0.0",
-		"node-sass": "^4.9.0",
-		"sass-loader": "^7.1.0",
-		"typescript": "^3.4.3",
-		"vue-cli-plugin-tailwindcss": "^0.1.1",
-		"vue-template-compiler": "^2.6.10"
-	}
+  "name": "diretto",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^2.6.5",
+    "postcss-custom-properties": "^9.0.2",
+    "postcss-nested": "^4.1.2",
+    "postcss-smart-import": "^0.7.6",
+    "register-service-worker": "^1.6.2",
+    "tailwindcss": "^1.0.4",
+    "vue": "^2.6.10",
+    "vue-class-component": "^7.0.2",
+    "vue-property-decorator": "^8.1.0",
+    "vue-router": "^3.0.3",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-plugin-pwa": "^3.8.0",
+    "@vue/cli-plugin-typescript": "^3.8.0",
+    "@vue/cli-service": "^3.8.0",
+    "@vue/eslint-config-prettier": "^4.0.1",
+    "@vue/eslint-config-typescript": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "typescript": "^3.4.3",
+    "vue-cli-plugin-tailwindcss": "^0.1.1",
+    "vue-template-compiler": "^2.6.10"
+  }
 }

postcss.config.js

@@ -1,6 +1,9 @@
 module.exports = {
-	plugins: {
-		autoprefixer: {},
-		tailwindcss: "./tailwind.config.js"
-	}
+  plugins: {
+    autoprefixer: {},
+    tailwindcss: "./tailwind.config.js",
+    "postcss-smart-import": {},
+    "postcss-custom-properties": {},
+    "postcss-nested": {}
+  }
 };

prettier.config.js

@@ -1,5 +0,0 @@
-// prettier.config.js or .prettierrc.js
-module.exports = {
-	tabWidth: 4,
-	useTabs: true
-};

public/index.html

@@ -1,17 +1,21 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>diretto</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but diretto doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+<html lang="en" class="antialiased">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>diretto</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but diretto doesn't work properly without JavaScript enabled. Please enable it to
+      continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

src/App.vue

@@ -1,29 +1,30 @@
 <template>
-	<div id="app">
-		<nav id="topnav">
-			<h1>
-				DIRETTO
-			</h1>
-		</nav>
-		<router-view />
-	</div>
+  <div id="app">
+    <nav id="topnav">
+      <h1>
+        DIRETTO
+      </h1>
+    </nav>
+    <router-view />
+  </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 @import "assets/styles/theme";
 
 #app {
-	display: flex;
+  display: flex;
 }
+
 #topnav {
-	flex: 1;
-	display: flex;
-	flex-direction: row;
-	background: $ink;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  background: $ink;
 }
 
 h1 {
-	font-size: 18pt;
-	font-weight: bolder;
+  font-size: 18pt;
+  font-weight: bolder;
 }
 </style>

src/assets/styles/main.css

@@ -2,4 +2,4 @@
 
 @tailwind components;
 
-@tailwind utilities;
+@tailwind utilities;

src/assets/styles/theme.css

@@ -0,0 +1,11 @@
+:root {
+	--black: #000;
+	--ink: #062f4f;
+	--posy: #813772;
+	--embers: #b82601;
+}
+
+body {
+	background: var(--black);
+	color: white;
+}

src/assets/styles/theme.scss

@@ -1,9 +0,0 @@
-$black: #000;
-$ink: #062f4f;
-$posy: #813772;
-$embers: #b82601;
-
-body {
-	background: $black;
-	color: white;
-}

src/main.ts

@@ -4,12 +4,11 @@ import router from "./router";
 import store from "./store";
 import "./registerServiceWorker";
 import "@/assets/styles/main.css";
-import "@/assets/styles/theme.scss";
 
 Vue.config.productionTip = false;
 
 new Vue({
-	router,
-	store,
-	render: h => h(App)
+  router,
+  store,
+  render: h => h(App)
 }).$mount("#app");

src/registerServiceWorker.ts

@@ -3,32 +3,32 @@
 import { register } from "register-service-worker";
 
 if (process.env.NODE_ENV === "production") {
-	register(`${process.env.BASE_URL}service-worker.js`, {
-		ready() {
-			console.log(
-				"App is being served from cache by a service worker.\n" +
-					"For more details, visit https://goo.gl/AFskqB"
-			);
-		},
-		registered() {
-			console.log("Service worker has been registered.");
-		},
-		cached() {
-			console.log("Content has been cached for offline use.");
-		},
-		updatefound() {
-			console.log("New content is downloading.");
-		},
-		updated() {
-			console.log("New content is available; please refresh.");
-		},
-		offline() {
-			console.log(
-				"No internet connection found. App is running in offline mode."
-			);
-		},
-		error(error) {
-			console.error("Error during service worker registration:", error);
-		}
-	});
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        "App is being served from cache by a service worker.\n" +
+          "For more details, visit https://goo.gl/AFskqB"
+      );
+    },
+    registered() {
+      console.log("Service worker has been registered.");
+    },
+    cached() {
+      console.log("Content has been cached for offline use.");
+    },
+    updatefound() {
+      console.log("New content is downloading.");
+    },
+    updated() {
+      console.log("New content is available; please refresh.");
+    },
+    offline() {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    },
+    error(error) {
+      console.error("Error during service worker registration:", error);
+    }
+  });
 }

src/router.ts

@@ -5,13 +5,13 @@ import Home from "./views/Home.vue";
 Vue.use(Router);
 
 export default new Router({
-	mode: "history",
-	base: process.env.BASE_URL,
-	routes: [
-		{
-			path: "/",
-			name: "home",
-			component: Home
-		}
-	]
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: "/",
+      name: "home",
+      component: Home
+    }
+  ]
 });

src/shims-tsx.d.ts

@@ -1,13 +1,13 @@
 import Vue, { VNode } from "vue";
 
 declare global {
-	namespace JSX {
-		// tslint:disable no-empty-interface
-		interface Element extends VNode {}
-		// tslint:disable no-empty-interface
-		interface ElementClass extends Vue {}
-		interface IntrinsicElements {
-			[elem: string]: any;
-		}
-	}
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
 }

src/shims-vue.d.ts

@@ -1,4 +1,4 @@
 declare module "*.vue" {
-	import Vue from "vue";
-	export default Vue;
+  import Vue from "vue";
+  export default Vue;
 }

src/store.ts

@@ -4,7 +4,7 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-	state: {},
-	mutations: {},
-	actions: {}
+  state: {},
+  mutations: {},
+  actions: {}
 });

src/views/Home.vue

@@ -1,12 +1,12 @@
 <template>
-	<div class="home"></div>
+  <div class="home"></div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 
 @Component({
-	components: {}
+  components: {}
 })
 export default class Home extends Vue {}
 </script>

tailwind.config.js

@@ -1,7 +1,8 @@
 module.exports = {
-  theme: {
-    extend: {}
-  },
+  prefix: "",
+  important: false,
+  separator: ":",
+  theme: {},
   variants: {},
   plugins: []
-}
+};

tsconfig.json

@@ -11,20 +11,11 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": [
-      "webpack-env"
-    ],
+    "types": ["webpack-env"],
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
     },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
   "include": [
     "src/**/*.ts",
@@ -33,7 +24,5 @@
     "tests/**/*.ts",
     "tests/**/*.tsx"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }