nightshade variant and darkmode.js library (#6)

* remove vendor prefix, gets generated anyway

* remove @ extends, as this does not work in nested media queries (extends to base class)

* added nightshade scss

* compiled css

* compiled nightshade css

* added nightfall scss

* compiled nightfall css

* Update index.html

* adding eslint to the project

* getting the hang of this js module thing

* moved css from dist to dist/css

* fixed a few paths from the dist css move

* wip 2021-02-02

* Update README.md

* wip 2021-02-02

* nightshade variant and darkmode.js library ready

* compiled nightshade variant and darkmode.js library

.editorconfig

@@ -12,3 +12,7 @@ insert_final_newline = true
 [*.json]
 indent_size = 4
 tab_width = 4
+
+[.eslintrc]
+indent_size = 4
+tab_width = 4

.eslintignore

@@ -0,0 +1,8 @@
+node_modules
+.vscode
+dist
+build
+examples
+.cache
+**/*.min.js
+*.html

.eslintrc

@@ -0,0 +1,64 @@
+{
+    "root": true,
+    "env": {
+      "browser": true,
+      "node": true,
+      "jquery": false,
+      "es6": true
+    },
+    "parserOptions": {
+      "sourceType": "module",
+      "allowImportExportEverywhere": true
+    },
+    "extends": [
+      "eslint:recommended"
+    ],
+    "parser": "babel-eslint",
+    "rules": {
+        "capitalized-comments": "off",
+        "indent": [
+            "error",
+            2,
+            {
+                "MemberExpression": "off",
+                "SwitchCase": 1
+            }
+        ],
+        "max-params": [
+            "warn",
+            5
+        ],
+        "multiline-ternary": [
+            "error",
+            "always-multiline"
+        ],
+        "new-cap": [
+            "error",
+            {
+                "properties": false
+            }
+        ],
+        "no-console": "warn",
+        "object-curly-spacing": [
+            "error",
+            "always"
+        ],
+        "semi": [
+            "error",
+            "never"
+        ],
+        "unicorn/consistent-function-scoping": "off",
+        "unicorn/explicit-length-check": "off",
+        "unicorn/no-array-callback-reference": "off",
+        "unicorn/no-array-for-each": "off",
+        "unicorn/no-for-loop": "off",
+        "unicorn/no-null": "off",
+        "unicorn/no-useless-undefined": "off",
+        "unicorn/prefer-dom-node-append": "off",
+        "unicorn/prefer-dom-node-dataset": "off",
+        "unicorn/prefer-dom-node-remove": "off",
+        "unicorn/prefer-query-selector": "off",
+        "unicorn/prefer-spread": "off",
+        "unicorn/prevent-abbreviations": "off"
+    }
+}

.gitignore

@@ -1,8 +1,7 @@
-node_modules*
-.cache/**
+node_modules
+.cache
 ~*
 _/*
 !scss/**/_*
-*.sublime-*
 package-lock.json
 .DS_store

.npmignore

@@ -0,0 +1,18 @@
+node_modules
+.cache
+~*
+_/*
+!scss/**/_*
+package-lock.json
+.DS_store
+
+.github
+.git
+.gitignore
+.npmignore
+.editorconfig
+.eslint*
+.stylelint*
+
+examples
+index.html

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
     "recommendations": [
         "editorconfig.editorconfig",
-        "stylelint.vscode-stylelint"
+        "stylelint.vscode-stylelint",
+        "dbaeumer.vscode-eslint"
     ]
 }

README.md

@@ -19,11 +19,12 @@ This code will make little sense if you don't read
 
 ## What do you get?
 
-The code only compiles the [Method 1](https://github.com/vinorodrigues/bootstrap-dark/blob/master/README.md#method-1) and [Method 4](https://github.com/vinorodrigues/bootstrap-dark/blob/master/README.md#method-4) variants (for BS5) of the topics discussed in the original body of work.
+The code only compiles the [Method 1](https://github.com/vinorodrigues/bootstrap-dark/blob/master/README.md#method-1), [Method 3](https://github.com/vinorodrigues/bootstrap-dark/blob/master/README.md#method-3) and [Method 4](https://github.com/vinorodrigues/bootstrap-dark/blob/master/README.md#method-4) variants (for BS5) of the topics discussed in the original body of work.
 
 i.e.:
 
-* `bootstrap-night`, _and;_
+* `bootstrap-night`,
+* `bootsrtap-nightshade`, _and;_
 * `bootstrap-dark`.
 
 
@@ -49,15 +50,15 @@ If you're a theme builder or want to use its principles in your own project you'
 > <u style="text-decoration:none;color:red">***NOTE:***</u> The build system is based on [NPM Scripts](https://docs.npmjs.com/cli/v6/using-npm/scripts). Most of the build tools _(NPM modules)_ will need to be installed as *"global"* to ensure the scripts are executable from the command line.
 
 ```bash
-npm install -g autoprefixer browser-sync clean-css-cli cross-env find-unused-sass-variables nodemon npm-run-all postcss postcss-cli rtlcss sass stylelint stylelint-config-twbs-bootstrap
+npm i -g autoprefixer browser-sync clean-css-cli cross-env find-unused-sass-variables nodemon npm-run-all postcss postcss-cli rtlcss sass stylelint stylelint-config-twbs-bootstrap rollup rollup-plugin-terser
 ```
 
 
 ### NPM
 
 [![](https://img.shields.io/npm/v/bootstrap-dark-5)](http://npmjs.com/package/bootstrap-dark-5)
 
-Developers can include the `scss` and `dist` folders into your own project with:
+Developers can include the `scss`, `js` and `dist` folders into your own project with:
 
 `npm install bootstrap-dark-5`
 
@@ -70,18 +71,39 @@ You can also hotlink the theme via CDN with [jsdelivr.com](https://www.jsdelivr.
 
 You can access the theme CSS file from the GitHub release:
 
-* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-dark.min.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-dark.min.css)
-* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-dark.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-dark.css)
-* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-night.min.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-night.min.css)
-* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-night.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-night.css)
+* **`bootstrap-dark`** - the @media `perfers-color-scheme` variant
+  * [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.min.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.min.css)
+  * [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.css)
+
+* **`bootstrap-nightshade`** - the `html.body` css class + JS library variant
+  * [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.min.css`](https://cdn.jsdelivr.net/npm/[email protected]/css/dist/bootstrap-night.min.css)
+  * [`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.min.js`](https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.min.js)
+  * [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css)
+  * [`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.js`](https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.js)
+
+* **`bootstrap-night`** - that dark theme only variant
+  * [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.min.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/css.bootstrap-night.min.css)
+  * [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css)
+
 * Source etc. are [here](https://cdn.jsdelivr.net/gh/vinorodrigues/bootstrap-dark-5/), but I recommend using [GitHub](https://github.com/vinorodrigues/bootstrap-dark-5).
 
 
-### Feedback
+## Further reading
+
+**Must reads** for all developers wanting to write for dark mode:
+
+* web.dev, Thomas Steiner ([@tomayac](https://github.com/tomayac)), Jun 27, 2019 *(updated Jun 9, 2020)*, [prefers-color-scheme: Hello darkness, my old friend](https://web.dev/prefers-color-scheme/)
+
+* web.dev, Thomas Steiner ([@tomayac](https://github.com/tomayac)), Apr 8, 2020 *(updated Jun 16, 2020)*, [Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag](https://web.dev/color-scheme/)
+
+* CSS-TRICKS, Adhuham, Sep 9, 2020 [A Complete Guide to Dark Mode on the Web](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/)
+
+* My bit about [images and other considerations](https://vinorodrigues.github.io/bootstrap-dark/readme.html#but-thats-not-enough) in my [.. Definitive Guide ..](http://vinorodrigues.github.io/bootstrap-dark) piece.
+
 
-If you have useful feedback drop me an "Issue" on the [GitHub Issues](https://github.com/vinorodrigues/bootstrap-dark-5/issues) page.
+## Feedback
 
-> During the WIP period I'll be open to feedback on my Slack channel:  [tecsmith -> bootstrap-dark](https://tecsmith.slack.com/messages/boostrap-dark/)
+If you have [useful feedback](https://alearningaday.blog/2020/08/04/useful-feedback/) drop me an "Issue" on the [GitHub Issues](https://github.com/vinorodrigues/bootstrap-dark-5/issues) page.
 
 
 ---

build/banner.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const pkg = require('../package.json');
+const year = new Date().getFullYear();
+
+function getBanner() {
+  return `/*!
+ * Bootstrap-Dark-5 v${pkg.version} (${pkg.homepage})
+ * Copyright ${year != 2021 ? '2021-' : ''}${year} ${pkg.author}
+ * Licensed under MIT (https://github.com/vinorodrigues/bootstrap-dark-5/blob/main/LICENSE.md)
+ */` + "\n";
+}
+
+module.exports = getBanner;

build/rollup.config.js

@@ -0,0 +1,88 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import babel from "@rollup/plugin-babel";
+import { terser } from "rollup-plugin-terser";
+
+const banner = require('./banner.js');
+
+const commonConfig = {
+  input: 'js/src/darkmode.js',
+  output: {
+    banner,
+    name: 'darkmode'
+  },
+  plugins: [
+    resolve({
+      customResolveOptions: {
+        moduleDirectories: [
+          'node_modules'
+        ]
+      }
+    }),
+    babel({
+      exclude: 'node_modules/**',
+      babelHelpers: 'inline'
+    }),
+    commonjs()
+  ]
+};
+
+const MIN = process.env.MIN === 'true';
+
+// ---------- ESM ----------
+
+// ESM config
+const esmConfig = Object.assign({}, commonConfig);
+esmConfig.output = Object.assign({}, commonConfig.output, {
+  file: 'dist/js/darkmode.esm.js',
+  format: 'esm'
+});
+
+// ESM prod config
+const esmProdConfig = Object.assign({}, esmConfig);
+esmProdConfig.output = Object.assign({}, esmConfig.output, {
+  file: 'dist/js/darkmode.esm.min.js'
+});
+esmProdConfig.plugins = [
+  ...esmConfig.plugins,
+  terser()
+];
+
+// ---------- CJS ----------
+
+// CJS config
+const cjsConfig = Object.assign({}, commonConfig);
+cjsConfig.output = Object.assign({}, commonConfig.output, {
+  file: 'dist/js/darkmode.js',
+  format: 'cjs'
+});
+cjsConfig.plugins = [
+  ...commonConfig.plugins
+];
+
+// Production config
+const cjsProdConfig = Object.assign({}, cjsConfig);
+cjsProdConfig.output = Object.assign({}, cjsConfig.output, {
+  file: 'dist/js/darkmode.min.js'
+});
+cjsProdConfig.plugins = [
+    ...cjsConfig.plugins,
+    terser()
+];
+
+// ---------- Build ----------
+
+let configurations = [];
+if (!MIN) {
+  configurations.push(
+    esmConfig,
+    cjsConfig
+  );
+} else {
+  configurations.push(
+    esmProdConfig,
+    cjsProdConfig
+  );
+}
+
+export default configurations;