Clean up asset pipeline (#498)

* More with less

* Rename prettier to lint

* Initial purgecss cleanup

* Add caniuse dep

* Rename lint to format

* Add composer fix-cs to format command

* Use new purgecss lib

* Update deps

.editorconfig

@@ -11,8 +11,5 @@ end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{package.json}]
-indent_size = 2
-
 [*.md]
 trim_trailing_whitespace = false

.prettierignore

@@ -0,0 +1,3 @@
+public/
+vendor/
+resources/assets/js/back/redactor/

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "printWidth": 100,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "es5"
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "Blender",
+  "name": "blender",
   "private": true,
   "license": "MIT",
   "authors": [
@@ -15,38 +15,28 @@
     "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "lint": "eslint resources/assets/js --ext .js,.vue --fix && exit 0",
-    "lint-css": "stylelint \"resources/assets/css/**/*.css\" --fix"
+    "format": "prettier --write \"**/*.{css,js,vue}\" && composer fix-cs"
   },
   "dependencies": {
     "@spatie/blender-content-blocks": "^2.0.1",
     "@spatie/blender-css": "^5.0.3",
     "@spatie/blender-js": "^1.4.0",
     "@spatie/blender-media": "^3.3.1",
-    "babel-plugin-transform-object-rest-spread": "^6.20.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-polyfill": "^6.16.0",
-    "babel-preset-env": "^1.1.8",
+    "caniuse-lite": "^1.0.30000697",
     "chart.js": "^1.0.2",
-    "eslint": "^3.7.1",
-    "eslint-config-spatie": "^1.2.7",
-    "glob-all": "^3.1.0",
     "jquery": "^3.0.0",
-    "laravel-mix": "^1.4",
+    "laravel-mix": "^2.0.0",
+    "laravel-mix-purgecss": "^1.0.0",
     "lodash": "^4.16.6",
+    "object-fit-images": "^3.2.3",
     "postcss-cssnext": "^3.0.2",
-    "postcss-easy-import": "^2.1.0",
-    "purgecss-webpack-plugin": "^0.14.0",
+    "postcss-easy-import": "^3.0.0",
+    "prettier": "^1.10.2",
     "spatie-dom": "^1.0.0",
-    "stylelint": "^8.0.0",
-    "stylelint-config-standard": "^17.0.0",
-    "tailwindcss": "^0.3.0",
+    "tailwindcss": "^0.4.0",
     "viewport-utility": "^1.2.2",
-    "vue": "^2.1.0",
-    "vue-table-component": "^1.4.3",
-    "vue-tabs-component": "^1.1.0"
-  },
-  "devDependencies": {
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "jest": "^20.0.1"
+    "vue": "^2.5.0"
   }
 }

webpack.mix.js

@@ -1,7 +1,6 @@
-const path = require('path');
-const glob = require('glob-all');
 const { mix } = require('laravel-mix');
-const PurgecssPlugin = require('purgecss-webpack-plugin');
+
+require('laravel-mix-purgecss');
 
 mix
     .js('resources/assets/js/front/app.js', 'public/js/front.app.js')
@@ -13,70 +12,42 @@ mix
     .version()
 
     .options({
+        // Our own set of PostCSS plugins.
+        postCss: [
+            require('postcss-easy-import')(),
+            require('tailwindcss')('./tailwind.js'),
+            require('postcss-cssnext')(),
+        ],
+
         // CSSNext already processes our css with Autoprefixer, so we don't
         // need mix to do it twice.
         autoprefixer: false,
 
-        // Our PostCSS plugins are defined in a standard `postcss.config.js`
-        // file, which we'll read for plugins.
-        postCss: require('./postcss.config').plugins,
-
         // Since we don't do any image preprocessing and write url's that are
         // relative to the site root, we don't want the css loader to try to
         // follow paths in `url()` functions.
         processCssUrls: false,
     })
 
-    .webpackConfig(() => {
-        const config = {};
+    .babelConfig({
+        plugins: [
+            'syntax-dynamic-import',
+        ],
+    })
 
-        config.output = {
+    .webpackConfig({
+        output: {
             // The public path needs to be set to the root of the site so
             // Webpack can locate chunks at runtime.
             publicPath: '/',
 
             // We'll place all chunks in the `js` folder by default so we don't
             // need to worry about ignoring them in our version control system.
             chunkFilename: 'js/[name].js',
-        };
-
-        if (mix.inProduction()) {
-            config.plugins = [
-                new PurgecssPlugin({
-                    paths: glob.sync([
-                        path.join(__dirname, 'app/**/*.php'),
-                        path.join(__dirname, 'resources/views/**/*.blade.php'),
-                        path.join(__dirname, 'resources/assets/js/**/*.vue'),
-                        path.join(__dirname, 'resources/assets/js/**/*.js'),
-                        path.join(__dirname, 'vendor/spatie/menu/**/*.php'),
-
-                        // Blender css paths. In the future it would be preferable
-                        // to simply ignore all of blender-css by extracting all
-                        // selectors from the dist .css file provided by the
-                        // package, but it's currently not possible to add
-                        // css paths to Purgecss via the webpack plugin.
-                        path.join(__dirname, 'node_modules/@spatie/blender-css/**/*.scss'),
-                        path.join(__dirname, 'node_modules/datatables/**/*.js'),
-                        path.join(__dirname, 'node_modules/jquery-confirm/**/*.js'),
-                        path.join(__dirname, 'node_modules/select2/**/*.js'),
-                    ]),
-                    whitelistPatterns: [
-                        /fa-/, // FontAwesome icon font selectors
-                        /re-/, // Redactor icon font selectors
-                    ],
-                    extractors: [
-                        {
-                            extractor: class {
-                                static extract(content) {
-                                    return content.match(/[A-z0-9-:\/]+/g) || [];
-                                }
-                            },
-                            extensions: ['html', 'js', 'php', 'scss', 'vue'],
-                        },
-                    ],
-                }),
-            ];
-        }
+        },
+    })
 
-        return config;
+    .purgeCss({
+        only: ['css/front.css'],
+        whitelistPatterns: [/active/],
     });