Major update

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 dist/
 node_modules/
+tests/coverage/
 
 # local env files
 .env.local
@@ -10,12 +11,3 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw*

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+    printWidth: 120,
+    quoteProps: 'consistent',
+    semi: true,
+    singleQuote: true,
+    trailingComma: 'es5',
+    tabWidth: 4,
+    jsdocVerticalAlignment: true,
+};

.stylelintrc.js

@@ -1,21 +1,85 @@
 module.exports = {
-    extends: 'stylelint-config-standard',
+    plugins: ['@stylistic/stylelint-plugin'],
+    extends: [
+        'stylelint-config-standard',
+        'stylelint-config-recommended',
+        'stylelint-config-recommended-vue',
+        'stylelint-config-recommended-vue/scss',
+        'stylelint-config-standard-scss',
+        'stylelint-config-recommended-scss',
+    ],
     overrides: [
         {
-            files: ['*.vue', '**/*.vue'],
+            files: ['**/*.vue', '**/*.html'],
+            customSyntax: 'postcss-html',
+        },
+        {
+            files: [
+                '**/*.scss',
+            ],
+            customSyntax: 'postcss',
+            extends: [
+                'stylelint-config-recess-order',
+            ],
+        },
+        {
+            files: [],
             customSyntax: 'postcss-html',
+            extends: [
+                'stylelint-config-recess-order',
+            ],
         },
     ],
     rules: {
         'alpha-value-notation': null,
         'color-function-notation': null,
+        'declaration-block-no-redundant-longhand-properties': null,
         'declaration-no-important': true,
-        'indentation': 4,
+        'declaration-property-value-no-unknown': null, // breaks css round()"
+        'media-feature-range-notation': null,
         'no-descending-specificity': null,
-        'no-empty-first-line': null,
+        'number-max-precision': null,
         'property-no-vendor-prefix': null,
+        'value-keyword-case': [
+            'lower',
+            {
+                ignoreFunctions: ['v-bind'],
+            },
+        ],
+        'scss/at-rule-no-unknown': [
+            true,
+            {
+                ignoreAtRules: [
+                    'each',
+                    'else',
+                    'extends',
+                    'for',
+                    'function',
+                    'if',
+                    'ignores',
+                    'include',
+                    'media',
+                    'mixin',
+                    'return',
+                    'use',
+
+                    // Font Awesome 4
+                    'fa-font-path',
+                ],
+            },
+        ],
+        'scss/double-slash-comment-empty-line-before': null,
+        'scss/double-slash-comment-whitespace-inside': null,
+        'scss/no-global-function-names': null,
         'selector-class-pattern': null,
         'shorthand-property-no-redundant-values': null,
-        'string-quotes': 'single',
+
+        '@stylistic/color-hex-case': 'lower',
+        '@stylistic/indentation': 4,
+        // '@stylistic/no-empty-first-line': true,
+        '@stylistic/number-leading-zero': 'always',
+        '@stylistic/property-case': 'lower',
+        '@stylistic/string-quotes': 'single',
+        '@stylistic/unit-case': 'lower',
     },
 };

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+    "recommendations": [
+        "vue.volar",
+        "dbaeumer.vscode-eslint",
+        "stylelint.vscode-stylelint",
+        "rvest.vs-code-prettier-eslint"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+    "files.eol": "\n",
+    "files.insertFinalNewline": true,
+    "files.trimFinalNewlines": true,
+    "files.trimTrailingWhitespace": true,
+    "stylelint.validate": [
+        "vue",
+        "css",
+        "less",
+        "sass",
+        "scss",
+        "postcss"
+    ],
+    "[javascript]": {
+        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    },
+    "[vue]": {
+        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    },
+    "[css]": {
+        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    },
+}

build/commands/build.js

@@ -0,0 +1,149 @@
+const webpack = require('webpack');
+const minimist = require('minimist');
+const { rimraf } = require('rimraf');
+
+const utils = require('../utils');
+const webpackConfigFunc = require('../../webpack.config');
+
+const argv = minimist(process.argv.slice(2));
+
+(async () => {
+    const ora = await import('ora').then((m) => m.default);
+    const chalk = await import('chalk').then((m) => m.default);
+    const cliui = await import('cliui').then((m) => m.default);
+    const webpackConfig = await webpackConfigFunc({}, argv);
+
+    const spinner = ora();
+
+    console.log();
+    spinner.text = `Building for ${webpackConfig.mode}...`;
+    spinner.start();
+
+    rimraf(utils.pathResolve('dist') + '/*', { glob: true }).then(() => {
+        webpack(webpackConfig, (wpErr, stats) => {
+            spinner.stop();
+            console.log();
+
+            if (wpErr) {
+                console.error(wpErr);
+                console.log();
+                process.exit(1);
+            }
+
+            if (stats.hasErrors()) {
+                process.exit(1);
+            }
+
+            const statsOutput = stats.toString({
+                all: false,
+                colors: true,
+                logging: 'info',
+                loggingTrace: true,
+            });
+
+            if (statsOutput) {
+                process.stdout.write(`${statsOutput}\n\n`);
+            }
+
+            const getCompressedAsset = (asset, type) => {
+                if (!Array.isArray(asset.related)) {
+                    return undefined;
+                }
+                return asset.related.find((relAsset) => relAsset.type === type);
+            };
+
+            const isJS = (val) => /\.js$/.test(val);
+            const isCSS = (val) => /\.css$/.test(val);
+            const assetSorter = (a, b) => {
+                if (isJS(a.name) && isCSS(b.name)) {
+                    return -1;
+                }
+                if (isCSS(a.name) && isJS(b.name)) {
+                    return 1;
+                }
+                return b.size - a.size;
+            };
+
+            const data = stats.toJson();
+            const files = Object.values(data.assetsByChunkName).flat();
+
+            const out = [
+                // Column headers
+                ['File', 'Size', 'Gzip', 'Brotli'],
+            ];
+            const totals = {
+                size: 0,
+                gzip: 0,
+                brotli: 0,
+            };
+
+            data.assets.sort(assetSorter).forEach((asset) => {
+                if (!asset.emitted) {
+                    return;
+                }
+
+                const gzipAsset = getCompressedAsset(asset, 'gzipped');
+                const brotliAsset = getCompressedAsset(asset, 'brotliCompressed');
+
+                totals.size += asset.size;
+                totals.gzip += gzipAsset ? gzipAsset.size : asset.size;
+                totals.brotli += brotliAsset ? brotliAsset.size : asset.size;
+
+                if (files.includes(asset.name)) {
+                    out.push([
+                        asset.name,
+                        utils.formatSize(asset.size),
+                        gzipAsset ? utils.formatSize(gzipAsset.size) : '',
+                        brotliAsset ? utils.formatSize(brotliAsset.size) : '',
+                    ]);
+                }
+            });
+
+            out.push([
+                'Totals (including assets)',
+                utils.formatSize(totals.size),
+                utils.formatSize(totals.gzip),
+                utils.formatSize(totals.brotli),
+            ]);
+
+            const colWidths = out.reduce((acc, row) => {
+                row.forEach((col, idx) => {
+                    acc[idx] = Math.max(acc[idx] || 0, col.length + 4);
+                });
+                return acc;
+            }, []);
+
+            const table = cliui();
+            out.forEach((row, rowIdx) => {
+                table.div(
+                    ...row.map((col, colIdx) => ({
+                        text:
+                            rowIdx === 0 || (rowIdx === out.length - 1 && colIdx === 0)
+                                ? chalk.cyan.bold(col)
+                                : col,
+                        width: colWidths[colIdx],
+                        padding:
+                            rowIdx === 0 || rowIdx === out.length - 2
+                                ? [0, 0, 1, 3]
+                                : [0, 0, 0, 3],
+                    }))
+                );
+            });
+
+            console.log(table.toString());
+            console.log();
+            console.log();
+            console.log(
+                chalk.bgGreen.black(' DONE '),
+                `Build Complete. The ${chalk.cyan('dist')} directory is ready to be deployed`
+            );
+            console.log();
+        });
+    }).catch((rmErr) => {
+        spinner.stop();
+        console.log();
+        console.error(rmErr);
+        console.log();
+        process.exit(1);
+    });
+})();