build notification bar

.editorconfig

@@ -8,9 +8,8 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-# Matches multiple files with brace expansion notation
 # Set default charset
-[*.{js,ts,less}]
+[*.{js,ts,scss,html}]
 charset = utf-8
 indent_style = space
 indent_size = 4

src/notification/bar.js

@@ -1,4 +1,4 @@
-require('./bar.less');
+require('./bar.scss');
 
 document.addEventListener('DOMContentLoaded', function () {
     var i18n = {};

webpack.common.js

@@ -1,129 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-
-const isVendorModule = (module) => {
-    if (!module.context) {
-        return false;
-    }
-
-    const nodeModule = module.context.indexOf('node_modules') !== -1;
-    const bitwardenModule = module.context.indexOf('@bitwarden') !== -1;
-    return nodeModule && !bitwardenModule;
-};
-
-module.exports = {
-    entry: {
-        'popup/app': './src/popup/app/app.js',
-        'background': './src/background.ts',
-        'content/autofill': './src/content/autofill.js',
-        'content/autofiller': './src/content/autofiller.js',
-        'content/notificationBar': './src/content/notificationBar.js',
-        'content/shortcuts': './src/content/shortcuts.js',
-        'notification/bar': './src/notification/bar.js',
-        'downloader/downloader': './src/downloader/downloader.ts',
-        '2fa/2fa': './src/2fa/2fa.ts',
-    },
-    module: {
-        rules: [
-            {
-                test: /\.ts$/,
-                enforce: 'pre',
-                loader: 'tslint-loader'
-            },
-            {
-                test: /\.tsx?$/,
-                use: 'ts-loader',
-                exclude: /node_modules\/(?!(@bitwarden)\/).*/
-            },
-            {
-                test: /\.(html)$/,
-                loader: 'html-loader'
-            },
-            {
-                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-                exclude: /loading.svg/,
-                use: [{
-                    loader: 'file-loader',
-                    options: {
-                        name: '[name].[ext]',
-                        outputPath: 'popup/fonts/',
-                        publicPath: './fonts/'
-                    }
-                }]
-            },
-            {
-                test: /\.(jpe?g|png|gif|svg)$/i,
-                exclude: /.*(fontawesome-webfont|glyphicons-halflings-regular)\.svg/,
-                use: [{
-                    loader: 'file-loader',
-                    options: {
-                        name: '[name].[ext]',
-                        outputPath: 'popup/images/',
-                        publicPath: './images/'
-                    }
-                }]
-            }
-        ]
-    },
-    plugins: [
-        new CleanWebpackPlugin([
-            path.resolve(__dirname, 'build/*')
-        ]),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'popup/vendor',
-            chunks: ['popup/app'],
-            minChunks: isVendorModule
-        }),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'vendor',
-            chunks: ['background'],
-            minChunks: isVendorModule
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/popup/index.html',
-            filename: 'popup/index.html',
-            chunks: ['popup/vendor', 'popup/app', 'fonts']
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/background.html',
-            filename: 'background.html',
-            chunks: ['vendor', 'background']
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/notification/bar.html',
-            filename: 'notification/bar.html',
-            chunks: ['notification/bar']
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/downloader/index.html',
-            filename: 'downloader/index.html',
-            chunks: ['downloader/downloader']
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/2fa/index.html',
-            filename: '2fa/index.html',
-            chunks: ['2fa/2fa']
-        }),
-        new CopyWebpackPlugin([
-            './src/manifest.json',
-            { from: './src/_locales', to: '_locales' },
-            { from: './src/edge', to: 'edge' },
-            { from: './src/safari', to: 'safari' },
-            { from: './src/images', to: 'images' },
-            { from: './src/content/autofill.css', to: 'content' }
-        ])
-    ],
-    resolve: {
-        extensions: ['.tsx', '.ts', '.js'],
-        alias: {
-            jslib: path.join(__dirname, 'jslib/src')
-        }
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, 'build')
-    }
-};

webpack.config.js

@@ -27,6 +27,7 @@ const config = {
         'content/autofiller': './src/content/autofiller.js',
         'content/notificationBar': './src/content/notificationBar.js',
         'content/shortcuts': './src/content/shortcuts.js',
+        'notification/bar': './src/notification/bar.js',
         'downloader/downloader': './src/downloader/downloader.ts',
         '2fa/2fa': './src/2fa/2fa.ts',
     },
@@ -131,6 +132,11 @@ const config = {
             filename: 'background.html',
             chunks: ['vendor', 'background'],
         }),
+        new HtmlWebpackPlugin({
+            template: './src/notification/bar.html',
+            filename: 'notification/bar.html',
+            chunks: ['notification/bar']
+        }),
         new HtmlWebpackPlugin({
             template: './src/downloader/index.html',
             filename: 'downloader/index.html',

webpack.dev.js

@@ -1,24 +0,0 @@
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
-    devtool: 'inline-source-map',
-    module: {
-        rules: [
-            {
-                test: /\.less$/,
-                use: [
-                    {
-                        loader: 'style-loader'
-                    },
-                    {
-                        loader: 'css-loader',
-                    },
-                    {
-                        loader: 'less-loader',
-                    }
-                ]
-            }
-        ]
-    }
-});

webpack.prod.js

@@ -1,41 +0,0 @@
-const merge = require('webpack-merge');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
-const common = require('./webpack.common.js');
-const webpack = require('webpack');
-
-const extractLess = new ExtractTextPlugin({
-    filename: '[name].css',
-    disable: false,
-    allChunks: true
-});
-
-module.exports = merge(common, {
-    module: {
-        rules: [
-            {
-                test: /\.less$/,
-                use: extractLess.extract({
-                    use: [
-                        {
-                            loader: 'css-loader',
-                        },
-                        {
-                            loader: 'less-loader',
-                        }
-                    ]
-                })
-            }
-        ]
-    },
-    plugins: [
-        new UglifyJSPlugin({
-            include: ['vendor.js', 'popup/vendor.js']
-        }),
-        new webpack.SourceMapDevToolPlugin({
-            filename: '[name].js.map',
-            include: ['background.js', 'popup/app.js']
-        }),
-        extractLess
-    ]
-});