Merge remote-tracking branch 'upstream/master'

.circleci/config.yml

@@ -19,4 +19,7 @@ jobs:
           command: npm test -- --coverage
       - run:
           name: coverage
-          command: cat ./coverage/lcov.info | node_modules/.bin/codacy-coverage -p .
+          command: |
+            if [ "${CIRCLE_BRANCH}" == "master" ]; then
+              cat ./coverage/lcov.info | node_modules/.bin/codacy-coverage -p .
+            fi

examples/with-nuxt/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

examples/with-nuxt/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {}
+}

examples/with-nuxt/.gitignore

@@ -0,0 +1,11 @@
+# dependencies
+node_modules
+
+# logs
+npm-debug.log
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist

examples/with-nuxt/README.md

@@ -0,0 +1,50 @@
+# with-nuxt
+
+> Nuxt.js project
+
+## Created with nuxtjs starter template
+
+This example shows how to set up Purgecss with nuxtjs starter template.
+Once you initialzed your project with
+```
+vue init nuxt-community/starter-template <project-name>
+```
+install the webpack plugin for purgecss:
+```
+npm i --save-dev glob-all purgecss-webpack-plugin
+```
+
+You need to modify the file `nuxt.config.js` by adding he following code:
+
+line 1
+
+```js
+const PurgecssPlugin = require('purgecss-webpack-plugin')
+const glob = require('glob-all')
+const path = require('path')
+```
+
+line 44
+
+```js
+if (!isDev) {
+  // Remove unused CSS using purgecss. See https://github.com/FullHuman/purgecss
+  // for more information about purgecss.
+  config.plugins.push(
+    new PurgecssPlugin({
+      paths: glob.sync([
+        path.join(__dirname, './pages/**/*.vue'),
+        path.join(__dirname, './layouts/**/*.vue'),
+        path.join(__dirname, './components/**/*.vue')
+      ]),
+      whitelist: ['html', 'body']
+    })
+  )
+}
+```
+
+## Results
+
+This example is importing the tachyons css framework.\
+Without purgecss, the css file size is **88.2 kB**.\
+Using purgecss, the css file is **1.56 kB**

examples/with-nuxt/assets/README.md

@@ -0,0 +1,8 @@
+# ASSETS
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/assets#webpacked
+
+**This directory is not required, you can delete it if you don't want to use it.**

examples/with-nuxt/components/AppLogo.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="VueToNuxtLogo">
+    <div class="Triangle Triangle--two"/>
+    <div class="Triangle Triangle--one"/>
+    <div class="Triangle Triangle--three"/>
+    <div class="Triangle Triangle--four"/>
+  </div>
+</template>
+
+<style>
+.VueToNuxtLogo {
+  display: inline-block;
+  animation: turn 2s linear forwards 1s;
+  transform: rotateX(180deg);
+  position: relative;
+  overflow: hidden;
+  height: 180px;
+  width: 245px;
+}
+
+.Triangle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+.Triangle--one {
+  border-left: 105px solid transparent;
+  border-right: 105px solid transparent;
+  border-bottom: 180px solid #41B883;
+}
+
+.Triangle--two {
+  top: 30px;
+  left: 35px;
+  animation: goright 0.5s linear forwards 3.5s;
+  border-left: 87.5px solid transparent;
+  border-right: 87.5px solid transparent;
+  border-bottom: 150px solid #3B8070;
+}
+
+.Triangle--three {
+  top: 60px;
+  left: 35px;
+  animation: goright 0.5s linear forwards 3.5s;
+  border-left: 70px solid transparent;
+  border-right: 70px solid transparent;
+  border-bottom: 120px solid #35495E;
+}
+
+.Triangle--four {
+  top: 120px;
+  left: 70px;
+  animation: godown 0.5s linear forwards 3s;
+  border-left: 35px solid transparent;
+  border-right: 35px solid transparent;
+  border-bottom: 60px solid #fff;
+}
+
+@keyframes turn {
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+
+@keyframes godown {
+  100% {
+    top: 180px;
+  }
+}
+
+@keyframes goright {
+  100% {
+    left: 70px;
+  }
+}
+</style>

examples/with-nuxt/components/README.md

@@ -0,0 +1,6 @@
+# COMPONENTS
+
+The components directory contains your Vue.js Components.
+Nuxt.js doesn't supercharge these components.
+
+**This directory is not required, you can delete it if you don't want to use it.**

examples/with-nuxt/layouts/README.md

@@ -0,0 +1,8 @@
+# LAYOUTS
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/views#layouts
+
+**This directory is not required, you can delete it if you don't want to use it.**

examples/with-nuxt/layouts/default.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <nuxt/>
+  </div>
+</template>
+
+<style>
+html {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.button--green {
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid #3b8070;
+  color: #3b8070;
+  text-decoration: none;
+  padding: 10px 30px;
+}
+
+.button--green:hover {
+  color: #fff;
+  background-color: #3b8070;
+}
+
+.button--grey {
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid #35495e;
+  color: #35495e;
+  text-decoration: none;
+  padding: 10px 30px;
+  margin-left: 15px;
+}
+
+.button--grey:hover {
+  color: #fff;
+  background-color: #35495e;
+}
+</style>

examples/with-nuxt/middleware/README.md

@@ -0,0 +1,9 @@
+# MIDDLEWARE
+
+This directory contains your Application Middleware.
+The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/routing#middleware
+
+**This directory is not required, you can delete it if you don't want to use it.**

examples/with-nuxt/module.js

@@ -0,0 +1,12 @@
+const Purgecss = require('purgecss')
+
+const defaultOptions = {
+  content: ['layouts/**/*.vue', 'pages/**/*.vue', 'components/**/*.vue'],
+  whitelist: []
+}
+
+module.exports = function(moduleOptions = {}) {
+  console.log(process.env)
+  const options = Object.assign(defaultOptions, moduleOptions)
+  console.log('this.options:::', this.options)
+}

examples/with-nuxt/nuxt.config.js

@@ -0,0 +1,60 @@
+const PurgecssPlugin = require('purgecss-webpack-plugin')
+const glob = require('glob-all')
+const path = require('path')
+
+module.exports = {
+  /*
+  ** Headers of the page
+  */
+  head: {
+    title: 'with-nuxt',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ]
+  },
+  css: [
+    'tachyons/css/tachyons.min.css'
+  ],
+  /*
+  ** Customize the progress bar color
+  */
+  loading: { color: '#3B8070' },
+  /*
+  ** Build configuration
+  */
+  build: {
+    extractCSS: true,
+    /*
+    ** Run ESLint on save
+    */
+    extend (config, { isDev, isClient }) {
+      if (isDev && isClient) {
+        config.module.rules.push({
+          enforce: 'pre',
+          test: /\.(js|vue)$/,
+          loader: 'eslint-loader',
+          exclude: /(node_modules)/
+        })
+      }
+      if (!isDev) {
+        // Remove unused CSS using purgecss. See https://github.com/FullHuman/purgecss
+        // for more information about purgecss.
+        config.plugins.push(
+          new PurgecssPlugin({
+            paths: glob.sync([
+              path.join(__dirname, './pages/**/*.vue'),
+              path.join(__dirname, './layouts/**/*.vue'),
+              path.join(__dirname, './components/**/*.vue')
+            ]),
+            whitelist: ['html', 'body']
+          })
+        )
+      }
+    }
+  }
+}

examples/with-nuxt/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "with-nuxt",
+  "version": "1.0.0",
+  "description": "Nuxt.js project",
+  "author": "Ffloriel <[email protected]>",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "precommit": "npm run lint"
+  },
+  "dependencies": {
+    "glob-all": "^3.1.0",
+    "nuxt": "^1.0.0",
+    "purgecss": "^0.20.0",
+    "purgecss-webpack-plugin": "^0.20.1",
+    "tachyons": "^4.9.1"
+  },
+  "devDependencies": {
+    "babel-eslint": "^8.2.1",
+    "eslint": "^4.15.0",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-vue": "^4.0.0"
+  }
+}

examples/with-nuxt/pages/README.md

@@ -0,0 +1,7 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the .vue files inside this directory and creates the router of your application.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/routing