change dependencies and other improvements

- add eslint support for es 2020 and service worker globals - add stylelint ignore - add macOS dark theme support - change stylelint rules - change sourcemaps to be only for dev - change urls to https - change logs - change color names
arturparkhisenko · Oct 11, 2019 · 1df8e5a · 1df8e5a
1 parent efbc12b
commit 1df8e5a
Show file tree

Hide file tree

Showing 10 changed files with 953 additions and 772 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -6,12 +6,11 @@
   "env": {
     "browser": true,
     "node": true,
-    "es6": true
+    "es2020": true,
+    "serviceworker": true
   },
   "parser": "babel-eslint",
   "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module",
     "allowImportExportEverywhere": true,
     "ecmaFeatures": {
 			"impliedStrict": true,

diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,16 @@
+# NodeJS modules #
+##################
+node_modules
+
+# Scripts #
+###########
+src/scripts
+*.js
+
+# Other #
+#########
+*.md
+*.json
+*.webmanifest
+*.xml
+*.txt
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,9 +1,6 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
-    "at-rule-empty-line-before": "never",
-    "comment-empty-line-before": "never",
-    "comment-whitespace-inside": "never",
     "indentation": 2
   }
 }
diff --git a/gulpfile.js b/gulpfile.js
@@ -18,9 +18,9 @@ const pkg = require('./package.json');
 
 const $ = gulpLoadPlugins();
 const server = browserSync.create();
-const isDev = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
+const production = process.env.NODE_ENV !== 'production';
 
-console.log(`v${pkg.version}, process.env.NODE_ENV = ${process.env.NODE_ENV}`); // eslint-disable-line
+console.log(`v${pkg.version}, production = ${production}`); // eslint-disable-line
 
 const clean = () => del(['.tmp', 'dist']);
 
@@ -89,7 +89,7 @@ const styles = () =>
       // since: gulp.lastRun(styles),
     })
     .pipe($.plumber())
-    .pipe($.sourcemaps.init())
+    .pipe($.if(production === false, $.sourcemaps.init()))
     .pipe(
       $.postcss([
         postcssImport({
@@ -114,7 +114,7 @@ const styles = () =>
         suffix: '.min'
       })
     )
-    .pipe($.sourcemaps.write('./'))
+    .pipe($.if(production === false, $.sourcemaps.write('./')))
     .pipe(gulp.dest('src/styles/'))
     .pipe(gulp.dest('dist/styles/'))
     .pipe(
@@ -194,7 +194,7 @@ const watch = () => {
   server.init({
     notify: false,
     logPrefix: 'gg',
-    server: isDev ? 'src' : 'dist',
+    server: production === true ? 'dist' : 'src',
     https: true
     // port: 443,
     // scrollElementMapping: ['main', '.mdl-layout'],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,27 +40,25 @@
     "np": "np --no-yarn"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.5",
+    "@babel/core": "^7.6.4",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "browser-sync": "^2.26.7",
-    "cross-env": "^5.2.0",
+    "cross-env": "^6.0.3",
     "cssnano": "^4.1.10",
     "del": "^5.1.0",
-    "eslint": "^6.2.2",
+    "eslint": "^6.5.1",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.1.0",
-    "eslint-plugin-html": "^6.0.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-config-prettier": "^6.4.0",
     "fancy-log": "^1.3.3",
     "gulp": "^4.0.2",
     "gulp-eslint": "^6.0.0",
     "gulp-htmlmin": "^5.0.1",
     "gulp-if": "^3.0.0",
-    "gulp-imagemin": "^6.1.0",
+    "gulp-imagemin": "^6.1.1",
     "gulp-load-plugins": "^2.0.1",
     "gulp-plumber": "^1.2.1",
     "gulp-postcss": "^8.0.0",
@@ -75,10 +73,10 @@
     "postcss-reporter": "^6.0.1",
     "postcss-url": "^8.0.0",
     "prettier-eslint-cli": "^5.0.0",
-    "stylelint": "^10.1.0",
-    "stylelint-config-standard": "^18.3.0",
-    "webpack": "^4.39.3",
-    "webpack-bundle-analyzer": "^3.4.1",
-    "webpack-cli": "^3.3.7"
+    "stylelint": "^11.1.1",
+    "stylelint-config-standard": "^19.0.0",
+    "webpack": "^4.41.0",
+    "webpack-bundle-analyzer": "^3.5.2",
+    "webpack-cli": "^3.3.9"
   }
 }
diff --git a/src/index.html b/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/WebPage">
+<html lang="en" dir="ltr" itemscope itemtype="https://schema.org/WebPage">
 
 <head>
   <title>gulp-gold</title>
@@ -10,16 +10,16 @@
   <meta name="copyright" content="">
   <!--<link rel="canonical" href="">-->
   <!--<link rel="preload" href="">-->
-  <!--[if lt IE 9]><script src="http://cdn.jsdelivr.net/g/html5shiv,css3-mediaqueries"></script><![endif]-->
+  <!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/g/html5shiv,css3-mediaqueries"></script><![endif]-->
   <!--[if lt IE 11]><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><meta http-equiv="imagetoolbar" content="no"><![endif]-->
   <link rel="icon" href="favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="styles/main.min.css">
 </head>
 
 <body>
-  <!--[if lt IE 11]><p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
-  <header data-role="header" itemscope itemtype="http://schema.org/WPHeader">
-    <nav data-role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"></nav>
+  <!--[if lt IE 11]><p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
+  <header data-role="header" itemscope itemtype="https://schema.org/WPHeader">
+    <nav data-role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement"></nav>
   </header>
   <main>
     <section>

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -6,7 +6,7 @@
 
 body {
   font-family: var(--brandFont);
-  color: color-mod(var(--moduleColor) alpha(80%));
+  color: color-mod(var(--colorDark) alpha(80%));
   font-size: var(--module-size, 2em);
 }
 
@@ -15,7 +15,7 @@ main {
   flex-direction: column;
   align-items: center;
   text-align: center;
-  background-color: var(--moduleBGColor);
+  background-color: var(--colorLight);
   padding: 1em;
 }
 
@@ -26,3 +26,15 @@ img {
 footer {
   text-align: center;
 }
+
+/* Apple dark theme support */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: var(--colorDark);
+    color: var(--colorLight);
+  }
+
+  main {
+    background-color: var(--colorDark);
+  }
+}
diff --git a/src/styles/module-example.css b/src/styles/module-example.css
@@ -1,6 +1,6 @@
 :root {
   --brandFont: -apple-system, BlinkMacSystemFont, ".SFNSDisplay-Regular", ".SFNSText-Regular", "SF UI Text", "San Francisco", "Noto Sans", "Helvetica Neue", "Roboto", "Droid Sans", "Oxygen", "Lucida Grande", "Segoe UI", "Fira Sans", Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
-  --moduleColor: #222;
-  --moduleBGColor: #f7e017;
+  --colorDark: #222;
+  --colorLight: #f7e017;
   --module-size: 1.5em;
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -12,7 +12,7 @@ module.exports = {
   performance: {
     hints: 'warning' // false, 'error'
   },
-  mode: production ? 'production' : 'development',
+  mode: production === true ? 'production' : 'development',
   devtool: 'source-map', // 'cheap-module-eval-source-map'
   watch: false,
   output: {