Fix Webpack, PostCSS and related configs

.eslintrc.yml

@@ -0,0 +1,96 @@
+---
+
+env:
+  es6: true
+
+extends:
+  # https://github.com/airbnb/javascript
+  - airbnb
+  - eslint:recommended
+  - prettier
+
+parser: babel-eslint
+
+rules:
+  # best practices
+  arrow-parens:
+    - 2
+    - as-needed
+  semi:
+    - 2
+    - never
+  class-methods-use-this: 0
+  comma-dangle:
+    - 2
+    - always-multiline
+  no-console:
+    - 2
+  no-unused-expressions: 0
+  no-param-reassign:
+    - 2
+    - props: false
+  no-useless-escape: 0
+  func-names: 0
+  quotes:
+    - 2
+    - single
+    - allowTemplateLiterals: true
+  no-underscore-dangle: 0
+  object-curly-newline: 0
+  function-paren-newline: 0
+  operator-linebreak:
+    - 2
+    - after
+  no-unused-vars:
+    - 2
+    - argsIgnorePattern: "^_"
+  # jsx a11y
+  jsx-a11y/no-static-element-interactions: 0
+  jsx-a11y/anchor-is-valid:
+    - 2
+    - specialLink:
+        - to
+  # react
+  react/prop-types: 0
+  react/jsx-filename-extension: 0
+  react/jsx-no-bind:
+    - 2
+    - ignoreRefs: true
+  react/jsx-first-prop-new-line:
+    - 2
+    - never
+  react/jsx-indent-props:
+    - 2
+    - 2
+  react/jsx-closing-bracket-location:
+    - 1
+    - selfClosing: after-props
+      nonEmpty: after-props
+  react/prefer-stateless-function:
+    - 1
+    - ignorePureComponents: true
+  react/jsx-boolean-value:
+    - 2
+    - always
+  react/no-unused-prop-types: 0
+  # import - wyłączone! jak pogodzić resolver webpack i react-native?
+  import/no-unresolved: 0
+  import/extensions: 0
+  import/no-extraneous-dependencies: 0
+  import/prefer-default-export: 0
+  flowtype/delimiter-dangle:
+    - 2
+    - always-multiline
+  flowtype/require-return-type:
+    - 2
+    - always
+    - excludeArrowFunctions: true
+      annotateUndefined: always
+
+globals:
+  document: true
+  requestAnimationFrame: true
+  window: true
+  self: true
+  fetch: true
+  Headers: true

.gitignore

@@ -0,0 +1 @@
+node_modules

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "parser": "babylon",
+  "printWidth": 100,
+  "trailingComma": "all"
+}

layouts/partials/inject.script.html

@@ -1,9 +1,5 @@
 
   <script src="/assets/main.js"></script>
 
-  <script src="/assets/menu.js"></script>
-
-  <script src="/assets/theme.js"></script>
-
   <script src="/assets/prism.js"></script>
 

package.json

@@ -14,22 +14,24 @@
     "@babel/plugin-transform-runtime": "^7.0.0-beta.54",
     "@babel/preset-env": "^7.0.0-beta.54",
     "@babel/preset-stage-2": "^7.0.0-beta.54",
+    "babel-eslint": "8.2.1",
     "babel-loader": "^8.0.0-beta.0",
     "browserslist": "^4.0.1",
     "clean-webpack-plugin": "^0.1.16",
     "css-loader": "^1.0.0",
+    "cssnano": "^4.0.3",
     "eslint-config-prettier": "^2.9.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
     "postcss": "^7.0.0",
     "postcss-browser-reporter": "^0.5.0",
+    "postcss-cli": "^6.0.0",
     "postcss-import": "^11.1.0",
     "postcss-loader": "^2.0.5",
     "postcss-nested": "^3.0.0",
     "postcss-preset-env": "^5.2.2",
     "postcss-reporter": "^5.0.0",
-    "postcss-strip-inline-comments": "^0.1.5",
     "postcss-url": "^7.3.2",
     "prettier-eslint-cli": "^4.7.1",
     "ramda": "^0.25.0",

postcss.config.js

@@ -1,19 +1,21 @@
-const url = require('postcss-url')
-const imports = require('postcss-import')
-const nested = require('postcss-nested')
-const stripComments = require('postcss-strip-inline-comments')
-const postCSSPresetEnv = require('postcss-preset-env')
-const browsers = require('browserslist')
+const url = require("postcss-url");
+const imports = require("postcss-import");
+const nested = require("postcss-nested");
+const postCSSPresetEnv = require("postcss-preset-env");
+const browsers = require("browserslist");
+const cssnano = require("cssnano");
 
 module.exports = () => ({
   plugins: [
-    stripComments,
     url,
     imports,
     nested,
     postCSSPresetEnv({
       stage: 1,
-      browsers: 'last 2 versions',
-    })
-  ]
-})
+      browsers: "last 2 versions",
+    }),
+    cssnano({
+      preset: "default",
+    }),
+  ],
+});

static/assets/main.js

@@ -1 +1 @@
-!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=4)}({4:function(e,t,r){"use strict"}});
+!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1),n(2),e.exports=n(3)},function(e,t,n){"use strict"},function(e,t,n){"use strict";var r=document.querySelector(".menu-trigger"),o=document.querySelector(".menu"),u=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),i=function(){return window.matchMedia(u).matches},c=function(){r&&r.classList.toggle("hidden",!i()),o&&o.classList.toggle("hidden",i())};c(),r.addEventListener("click",function(){return o&&o.classList.toggle("hidden")}),window.addEventListener("resize",c)},function(e,t,n){"use strict";var r=localStorage.getItem("theme"),o=document.querySelector(".theme-toggle"),u="dark"===r;document.body.classList.toggle("dark-theme",u),o.addEventListener("click",function(){document.body.classList.toggle("dark-theme"),localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark":"light")})}]);

static/assets/menu.js

@@ -1 +0,0 @@
-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}({3:function(e,t,n){"use strict";var r=document.querySelector(".menu-trigger"),o=document.querySelector(".menu"),u=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),i=function(){return window.matchMedia(u).matches},c=function(){r&&r.classList.toggle("hidden",!i()),o&&o.classList.toggle("hidden",i())};c(),r.addEventListener("click",function(){return o&&o.classList.toggle("hidden")}),window.addEventListener("resize",c)}});

static/assets/theme.js

@@ -1 +0,0 @@
-!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}({2:function(e,t,r){"use strict";var n=localStorage.getItem("theme"),o=document.querySelector(".theme-toggle"),u="dark"===n;document.body.classList.toggle("dark-theme",u),o.addEventListener("click",function(){document.body.classList.toggle("dark-theme"),localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark":"light")})}});

webpack.config.js

@@ -1,41 +1,37 @@
-const Webpack = require('webpack')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const CleanPlugin = require('clean-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const Webpack = require("webpack");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const CleanPlugin = require("clean-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 
-const path = require('path')
+const path = require("path");
 
-const isProduction = process.env.NODE_ENV === 'production'
+const isProduction = process.env.NODE_ENV === "production";
 
-const join = (...paths) => path.join(__dirname, ...paths)
+const join = (...paths) => path.join(__dirname, ...paths);
 
 module.exports = {
   resolve: {
-    extensions: [
-      '.js',
-      '.css'
-    ],
-    modules: [
-      'source',
-      'node_modules'
-    ]
+    extensions: [".js", ".css"],
+    modules: ["source", "node_modules"],
   },
   watch: !isProduction,
   entry: {
-    'main.js': join('source', 'js', 'index.js'),
-    'menu.js': join('source', 'js', 'menu.js'),
-    'theme.js': join('source', 'js', 'theme.js'),
-    'prism.js': join('source', 'js', 'prism.js'),
-    'style.css': join('source', 'css', 'style.css'),
+    "main.js": [
+      join("source", "js", "index.js"),
+      join("source", "js", "menu.js"),
+      join("source", "js", "theme.js"),
+    ],
+    "prism.js": join("source", "js", "prism.js"),
+    "style.css": join("source", "css", "style.css"),
   },
   output: {
-    filename: '[name]',
-    path: join('static/assets'),
-    publicPath: ''
+    filename: "[name]",
+    path: join("static/assets"),
+    publicPath: "",
   },
   performance: {
-    hints: false
+    hints: false,
   },
   module: {
     rules: [
@@ -43,80 +39,80 @@ module.exports = {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
-          loader: 'babel-loader',
+          loader: "babel-loader",
           options: {
-            presets: ['@babel/preset-env']
-          }
-        }
+            presets: ["@babel/preset-env"],
+          },
+        },
       },
       {
         test: /\.(png|jpg|woff|woff2|ttf|eot|svg)$/,
         use: [
           {
-            loader: 'url-loader',
+            loader: "url-loader",
             options: {
-              limit: 8192
-            }
-          }
-        ]
+              limit: 8192,
+            },
+          },
+        ],
       },
       {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
+          fallback: "style-loader",
           use: [
             {
-              loader: 'css-loader',
+              loader: "css-loader",
               options: {
                 minimize: true,
                 modules: true,
                 importLoaders: 1,
-                localIdentName: '[local]'
-              }
+                localIdentName: "[local]",
+              },
             },
             {
-              loader: 'postcss-loader',
+              loader: "postcss-loader",
               options: {
                 config: {
-                  path: 'postcss.config.js'
-                }
-              }
-            }
-          ]
-        })
-      }
-    ]
+                  path: "postcss.config.js",
+                },
+              },
+            },
+          ],
+        }),
+      },
+    ],
   },
   optimization: {
     splitChunks: {
-      name: 'vendor',
-      minChunks: 2
+      name: "vendor",
+      minChunks: 2,
     },
     minimizer: [
       new UglifyJsPlugin({
         sourceMap: false,
-      })
-    ]
+      }),
+    ],
   },
   plugins: [
-    new CleanPlugin(join('static/assets')),
+    new CleanPlugin(join("static/assets")),
     new HtmlWebpackPlugin({
-      template: join('source', 'html', 'inject.script.ejs'),
-      filename: join('layouts', 'partials', 'inject.script.html'),
-      inject: false
-    }),
-    new HtmlWebpackPlugin({
-      template: join('source', 'html', 'inject.stylesheet.ejs'),
-      filename: join('layouts', 'partials', 'inject.stylesheet.html'),
+      template: join("source", "html", "inject.script.ejs"),
+      filename: join("layouts", "partials", "inject.script.html"),
       inject: false,
     }),
-    new ExtractTextPlugin('[name]'),
+    new HtmlWebpackPlugin({
+      template: join("source", "html", "inject.stylesheet.ejs"),
+      filename: join("layouts", "partials", "inject.stylesheet.html"),
+      inject: false,
+    }),
+    new ExtractTextPlugin("[name]"),
     new Webpack.LoaderOptionsPlugin({
       minimize: true,
-      debug: true
+      debug: true,
     }),
     new Webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development')
-    })
-  ]
-}
+      "process.env.NODE_ENV": JSON.stringify("development"),
+    }),
+  ],
+};