New: Cleanup UI tooling, Update to Webpack 4, Gulp 4 (#655)

* New: Webpack 4

* New: Gulp 4

* New: Transpile UI for old browsers

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

.npmrc

@@ -1 +0,0 @@
-save-prefix=""

frontend/babel.config.js

@@ -0,0 +1,35 @@
+const loose = true;
+
+module.exports = {
+  plugins: [
+    // Stage 1
+    '@babel/plugin-proposal-export-default-from',
+    ['@babel/plugin-proposal-optional-chaining', { loose }],
+    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose }],
+
+    // Stage 2
+    '@babel/plugin-proposal-export-namespace-from',
+
+    // Stage 3
+    ['@babel/plugin-proposal-class-properties', { loose }],
+    '@babel/plugin-syntax-dynamic-import'
+  ],
+  env: {
+    development: {
+      presets: [
+        ['@babel/preset-react', { development: true }]
+      ],
+      plugins: [
+        'babel-plugin-inline-classnames'
+      ]
+    },
+    production: {
+      presets: [
+        '@babel/preset-react'
+      ],
+      plugins: [
+        'babel-plugin-transform-react-remove-prop-types'
+      ]
+    }
+  }
+};

frontend/browsers.js

@@ -0,0 +1,6 @@
+module.exports = [
+  '>0.25%',
+  'not ie 11',
+  'not op_mini all',
+  'not chrome < 60'
+];

frontend/gulp/build.js

@@ -1,15 +1,17 @@
 const gulp = require('gulp');
-const runSequence = require('run-sequence');
 
 require('./clean');
 require('./copy');
+require('./webpack');
 
-gulp.task('build', () => {
+gulp.task('build',
-  return runSequence('clean', [
+  gulp.series('clean',
-    'webpack',
+    gulp.parallel(
-    'copyHtml',
+      'webpack',
-    'copyFonts',
+      'copyHtml',
-    'copyImages',
+      'copyFonts',
-    'copyJs'
+      'copyImages',
-  ]);
+      'copyJs'
-});
+    )
+  )
+);

frontend/gulp/copy.js

@@ -1,9 +1,10 @@
-var path = require('path');
+const path = require('path');
-var gulp = require('gulp');
+const gulp = require('gulp');
-var print = require('gulp-print').default;
+const print = require('gulp-print').default;
-var cache = require('gulp-cached');
+const cache = require('gulp-cached');
-var livereload = require('gulp-livereload');
+const flatten = require('gulp-flatten');
-var paths = require('./helpers/paths.js');
+const livereload = require('gulp-livereload');
+const paths = require('./helpers/paths.js');
 
 gulp.task('copyJs', () => {
   return gulp.src(
@@ -12,6 +13,7 @@ gulp.task('copyJs', () => {
     ])
     .pipe(cache('copyJs'))
     .pipe(print())
+    .pipe(flatten())
     .pipe(gulp.dest(paths.dest.root))
     .pipe(livereload());
 });
@@ -30,7 +32,8 @@ gulp.task('copyFonts', () => {
   )
     .pipe(cache('copyFonts'))
     .pipe(print())
-    .pipe(gulp.dest(paths.dest.fonts))
+    .pipe(flatten({ subPath: 2 }))
+    .pipe(gulp.dest(paths.dest.root))
     .pipe(livereload());
 });
 
@@ -40,6 +43,7 @@ gulp.task('copyImages', () => {
   )
     .pipe(cache('copyImages'))
     .pipe(print())
-    .pipe(gulp.dest(paths.dest.images))
+    .pipe(flatten({ subPath: 2 }))
+    .pipe(gulp.dest(paths.dest.root))
     .pipe(livereload());
 });

frontend/gulp/gulpFile.js

@@ -1,8 +1,5 @@
 require('./build.js');
 require('./clean.js');
 require('./copy.js');
-require('./imageMin.js');
-require('./start.js');
-require('./stripBom.js');
 require('./watch.js');
 require('./webpack.js');

frontend/gulp/helpers/errorHandler.js

@@ -1,6 +1,6 @@
-const gulpUtil = require('gulp-util');
+const colors = require('ansi-colors');
 
 module.exports = function errorHandler(error) {
-  gulpUtil.log(gulpUtil.colors.red(`Error (${error.plugin}): ${error.message}`));
+  console.log(colors.red(`Error (${error.plugin}): ${error.message}`));
   this.emit('end');
 };

frontend/gulp/helpers/html-annotate-loader.js

@@ -1,15 +0,0 @@
-const path = require('path');
-const rootPath = path.resolve(__dirname + '/../../src/');
-module.exports = function(source) {
-  if (this.cacheable) {
-    this.cacheable();
-  }
-
-  const resourcePath = this.resourcePath.replace(rootPath, '');
-  const wrappedSource =`
-  <!-- begin ${resourcePath} -->
-    ${source}
-  <!-- end ${resourcePath} -->`;
-
-  return wrappedSource;
-};

frontend/gulp/helpers/paths.js

@@ -3,11 +3,11 @@ const root = './frontend/src/';
 const paths = {
   src: {
     root,
-    html: root + '*.html',
+    html: `${root}*.html`,
-    scripts: root + '**/*.js',
+    scripts: `${root}**/*.js`,
-    content: root + 'Content/',
+    content: `${root}Content/`,
-    fonts: root + 'Content/Fonts/',
+    fonts: `${root}Content/Fonts/`,
-    images: root + 'Content/Images/',
+    images: `${root}Content/Images/`,
     exclude: {
       libs: `!${root}JsLibraries/**`
     }

frontend/gulp/imageMin.js

@@ -1,15 +0,0 @@
-var gulp = require('gulp');
-var print = require('gulp-print').default;
-var paths = require('./helpers/paths.js');
-
-gulp.task('imageMin', () => {
-  var imagemin = require('gulp-imagemin');
-  return gulp.src(paths.src.images)
-    .pipe(imagemin({
-      progressive: false,
-      optimizationLevel: 4,
-      svgoPlugins: [{ removeViewBox: false }]
-    }))
-    .pipe(print())
-    .pipe(gulp.dest(paths.src.content + 'Images/'));
-});

frontend/gulp/start.js

@@ -1,104 +0,0 @@
-// will download and run lidarr (server) in a non-windows enviroment
-// you can use this if you don't care about the server code and just want to work
-// with the web code.
-
-var http = require('http');
-var gulp = require('gulp');
-var fs = require('fs');
-var targz = require('tar.gz');
-var del = require('del');
-var spawn = require('child_process').spawn;
-
-function download(url, dest, cb) {
-  console.log('Downloading ' + url + ' to ' + dest);
-  var file = fs.createWriteStream(dest);
-  http.get(url, function(response) {
-    response.pipe(file);
-    file.on('finish', function() {
-      console.log('Download completed');
-      file.close(cb);
-    });
-  });
-}
-
-function getLatest(cb) {
-  var branch = 'develop';
-  process.argv.forEach(function(val) {
-    var branchMatch = /branch=([\S]*)/.exec(val);
-    if (branchMatch && branchMatch.length > 1) {
-      branch = branchMatch[1];
-    }
-  });
-
-  var url = 'http://services.lidarr.audio/v1/update/' + branch + '?os=osx';
-
-  console.log('Checking for latest version:', url);
-
-  http.get(url, function(res) {
-    var data = '';
-
-    res.on('data', function(chunk) {
-      data += chunk;
-    });
-
-    res.on('end', function() {
-      var updatePackage = JSON.parse(data).updatePackage;
-      console.log('Latest version available: ' + updatePackage.version + ' Release Date: ' + updatePackage.releaseDate);
-      cb(updatePackage);
-    });
-  }).on('error', function(e) {
-    console.log('problem with request: ' + e.message);
-  });
-}
-
-function extract(source, dest, cb) {
-  console.log('extracting download page to ' + dest);
-  new targz().extract(source, dest, function(err) {
-    if (err) {
-      console.log(err);
-    }
-    console.log('Update package extracted.');
-    cb();
-  });
-}
-
-gulp.task('getSonarr', function() {
-  try {
-    fs.mkdirSync('./_start/');
-  } catch (e) {
-    if (e.code !== 'EEXIST') {
-      throw e;
-    }
-  }
-
-  getLatest(function(updatePackage) {
-    var packagePath = './_start/' + updatePackage.filename;
-    var dirName = './_start/' + updatePackage.version;
-    download(updatePackage.url, packagePath, function() {
-      extract(packagePath, dirName, function() {
-        // clean old binaries
-        console.log('Cleaning old binaries');
-        del.sync(['./_output/*', '!./_output/UI/']);
-        console.log('copying binaries to target');
-        gulp.src(dirName + '/Lidarr/*.*')
-          .pipe(gulp.dest('./_output/'));
-      });
-    });
-  });
-});
-
-gulp.task('startSonarr', function() {
-  var ls = spawn('mono', ['--debug', './_output/Lidarr.exe']);
-
-  ls.stdout.on('data', function(data) {
-    process.stdout.write(data);
-  });
-
-  ls.stderr.on('data', function(data) {
-    process.stdout.write(data);
-  });
-
-  ls.on('close', function(code) {
-    console.log('child process exited with code ' + code);
-  });
-});

frontend/gulp/stripBom.js

@@ -1,13 +0,0 @@
-const gulp = require('gulp');
-const paths = require('./helpers/paths.js');
-const stripbom = require('gulp-stripbom');
-
-function stripBom(dest) {
-  gulp.src([paths.src.scripts, paths.src.exclude.libs])
-    .pipe(stripbom({ showLog: false }))
-    .pipe(gulp.dest(dest));
-}
-
-gulp.task('stripBom', () => {
-  stripBom(paths.src.root);
-});

frontend/gulp/watch.js

@@ -1,27 +1,18 @@
 const gulp = require('gulp');
 const livereload = require('gulp-livereload');
-const watch = require('gulp-watch');
+const gulpWatch = require('gulp-watch');
 const paths = require('./helpers/paths.js');
 
 require('./copy.js');
 require('./webpack.js');
 
-function watchTask(glob, task) {
+function watch() {
-  const options = {
-    name: `watch: ${task}`,
-    verbose: true
-  };
-  return watch(glob, options, () => {
-    gulp.start(task);
-  });
-}
-
-gulp.task('watch', ['copyHtml', 'copyFonts', 'copyImages', 'copyJs'], () => {
   livereload.listen({ start: true });
 
-  gulp.start('webpackWatch');
+  gulp.task('webpackWatch')();
+  gulpWatch(paths.src.html, gulp.series('copyHtml'));
+  gulpWatch(`${paths.src.fonts}**/*.*`, gulp.series('copyFonts'));
+  gulpWatch(`${paths.src.images}**/*.*`, gulp.series('copyImages'));
+}
 
-  watchTask(paths.src.html, 'copyHtml');
+gulp.task('watch', gulp.series('build', watch));
-  watchTask(`${paths.src.fonts}**/*.*`, 'copyFonts');
-  watchTask(`${paths.src.images}**/*.*`, 'copyImages');
-});

frontend/gulp/webpack.js

@@ -4,15 +4,16 @@ const livereload = require('gulp-livereload');
 const path = require('path');
 const webpack = require('webpack');
 const errorHandler = require('./helpers/errorHandler');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const browsers = require('../browsers');
 
 const uiFolder = 'UI';
-const root = path.join(__dirname, '..', 'src');
+const frontendFolder = path.join(__dirname, '..');
+const srcFolder = path.join(frontendFolder, 'src');
 const isProduction = process.argv.indexOf('--production') > -1;
 
-console.log('ROOT:', root);
+console.log('Source Folder:', srcFolder);
 console.log('isProduction:', isProduction);
 
 const cssVarsFiles = [
@@ -22,74 +23,21 @@ const cssVarsFiles = [
   '../src/Styles/Variables/animations'
 ].map(require.resolve);
 
-const extractCSSPlugin = new ExtractTextPlugin({
-  filename: path.join('_output', uiFolder, 'Content', 'styles.css'),
-  allChunks: true,
-  disable: false,
-  ignoreOrder: true
-});
-
 const plugins = [
-  extractCSSPlugin,
-
   new OptimizeCssAssetsPlugin({}),
 
-  new webpack.optimize.CommonsChunkPlugin({
-    name: 'vendor'
-  }),
-
   new webpack.DefinePlugin({
     __DEV__: !isProduction,
     'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development')
+  }),
+
+  new MiniCssExtractPlugin({
+    filename: path.join('_output', uiFolder, 'Content', 'styles.css')
   })
 ];
 
-function babelPlugins() {
-
-  const bplugins = [];
-
-  bplugins.push(
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-syntax-dynamic-import',
-    '@babel/plugin-syntax-import-meta',
-    '@babel/plugin-proposal-json-strings',
-    [
-      '@babel/plugin-proposal-decorators',
-      {
-        legacy: true
-      }
-    ],
-    '@babel/plugin-proposal-function-sent',
-    '@babel/plugin-proposal-export-namespace-from',
-    '@babel/plugin-proposal-numeric-separator',
-    '@babel/plugin-proposal-throw-expressions'
-  );
-
-  if (process.env.NODE_ENV !== 'production') {
-    bplugins.push('@babel/transform-react-jsx-source');
-  }
-
-  if (process.env.NODE_ENV === 'production') {
-    bplugins.push('transform-react-remove-prop-types');
-  }
-
-  return bplugins;
-}
-
-if (isProduction) {
-  plugins.push(new UglifyJSPlugin({
-    sourceMap: true,
-    uglifyOptions: {
-      mangle: false,
-      output: {
-        comments: false,
-        beautify: true
-      }
-    }
-  }));
-}
-
 const config = {
+  mode: isProduction ? 'production' : 'development',
   devtool: '#source-map',
 
   stats: {
@@ -108,8 +56,8 @@ const config = {
 
   resolve: {
     modules: [
-      root,
+      srcFolder,
-      path.join(root, 'Shims'),
+      path.join(srcFolder, 'Shims'),
       'node_modules'
     ],
     alias: {
@@ -122,6 +70,10 @@ const config = {
     sourceMapFilename: '[file].map'
   },
 
+  optimization: {
+    chunkIds: 'named'
+  },
+
   plugins,
 
   resolveLoader: {
@@ -136,48 +88,56 @@ const config = {
       {
         test: /\.js?$/,
         exclude: /(node_modules|JsLibraries)/,
-        loader: 'babel-loader',
+        use: [
-        options: {
+          {
-          plugins: babelPlugins(),
+            loader: 'babel-loader',
-          presets: ['@babel/env', '@babel/react']
+            options: {
-        }
+              configFile: `${frontendFolder}/babel.config.js`,
+              envName: isProduction ? 'production' : 'development',
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    modules: false,
+                    loose: true,
+                    debug: false,
+                    useBuiltIns: 'entry',
+                    targets: browsers
+                  }
+                ]
+              ]
+            }
+          }
+        ]
       },
 
       // CSS Modules
       {
         test: /\.css$/,
         exclude: /(node_modules|globals.css)/,
-        use: extractCSSPlugin.extract({
+        use: [
-          fallback: 'style-loader',
+          { loader: MiniCssExtractPlugin.loader },
-          use: [
+          {
-            {
+            loader: 'css-loader',
-              loader: 'css-variables-loader',
+            options: {
-              options: {
+              importLoaders: 1,
-                cssVarsFiles
+              localIdentName: '[name]/[local]/[hash:base64:5]',
-              }
+              modules: true
-            },
+            }
-            {
+          },
-              loader: 'css-loader',
+          {
-              options: {
+            loader: 'postcss-loader',
-                modules: true,
+            options: {
-                importLoaders: 1,
+              ident: 'postcss',
-                localIdentName: '[name]-[local]-[hash:base64:5]',
+              config: {
-                sourceMap: true
+                ctx: {
-              }
+                  cssVarsFiles
-            },
+                },
-            {
+                path: 'frontend/postcss.config.js'
-              loader: 'postcss-loader',
-              options: {
-                config: {
-                  ctx: {
-                    cssVarsFiles
-                  },
-                  path: 'frontend/postcss.config.js'
-                }
               }
             }
-          ]
+          }
-        })
+        ]
       },
 
       // Global styles
@@ -225,17 +185,16 @@ const config = {
 };
 
 gulp.task('webpack', () => {
-  return gulp.src('index.js')
+  return webpackStream(config, webpack)
-    .pipe(webpackStream(config, webpack))
+    .pipe(gulp.dest('./'));
-    .pipe(gulp.dest(''));
 });
 
 gulp.task('webpackWatch', () => {
   config.watch = true;
-  return gulp.src('')
+
-    .pipe(webpackStream(config, webpack))
+  return webpackStream(config, webpack)
     .on('error', errorHandler)
-    .pipe(gulp.dest(''))
+    .pipe(gulp.dest('./'))
     .on('error', errorHandler)
     .pipe(livereload())
     .on('error', errorHandler);

frontend/postcss.config.js

@@ -1,4 +1,5 @@
 const reload = require('require-nocache')(module);
+const browsers = require('./browsers');
 
 module.exports = (ctx, configPath, options) => {
   const config = {
@@ -17,15 +18,7 @@ module.exports = (ctx, configPath, options) => {
       'postcss-color-function': {},
       'postcss-nested': {},
       autoprefixer: {
-        browsers: [
+        browsers
-          'Chrome >= 30',
-          'Firefox >= 30',
-          'Safari >= 6',
-          'Edge >= 12',
-          'Explorer >= 11',
-          'iOS >= 7',
-          'Android >= 4.4'
-        ]
       }
     }
   };

frontend/src/Activity/Blacklist/BlacklistRow.css

@@ -1,18 +1,18 @@
 .language,
 .quality {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 100px;
 }
 
 .indexer {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 80px;
 }
 
 .actions {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 70px;
 }

frontend/src/Activity/History/Details/HistoryDetails.css

@@ -1,5 +1,5 @@
 .description {
-  composes: title from 'Components/DescriptionList/DescriptionListItemDescription.css';
+  composes: title from '~Components/DescriptionList/DescriptionListItemDescription.css';
 
   overflow-wrap: break-word;
 }

frontend/src/Activity/History/Details/HistoryDetailsModal.css

@@ -1,5 +1,5 @@
 .markAsFailedButton {
-  composes: button from 'Components/Link/Button.css';
+  composes: button from '~Components/Link/Button.css';
 
   margin-right: auto;
 }

frontend/src/Activity/History/HistoryEventTypeCell.css

@@ -1,5 +1,5 @@
 .cell {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 35px;
   text-align: center;

frontend/src/Activity/History/HistoryRow.css

@@ -1,23 +1,23 @@
 .downloadClient {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 120px;
 }
 
 .indexer {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 80px;
 }
 
 .releaseGroup {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 110px;
 }
 
 .details {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 30px;
 }

frontend/src/Activity/Queue/ProtocolLabel.css

@@ -1,12 +1,12 @@
 .torrent {
-  composes: label from 'Components/Label.css';
+  composes: label from '~Components/Label.css';
 
   border-color: $torrentColor;
   background-color: $torrentColor;
 }
 
 .usenet {
-  composes: label from 'Components/Label.css';
+  composes: label from '~Components/Label.css';
 
   border-color: $usenetColor;
   background-color: $usenetColor;

frontend/src/Activity/Queue/QueueRow.css

@@ -1,23 +1,23 @@
 .quality {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 150px;
 }
 
 .protocol {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 100px;
 }
 
 .progress {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 150px;
 }
 
 .actions {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 90px;
 }

frontend/src/Activity/Queue/QueueStatusCell.css

@@ -1,5 +1,5 @@
 .status {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 30px;
 }

frontend/src/Activity/Queue/TimeleftCell.css

@@ -1,5 +1,5 @@
 .timeleft {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 100px;
 }

frontend/src/AddArtist/AddNewArtist/AddNewArtist.css

@@ -17,7 +17,7 @@
 }
 
 .searchInput {
-  composes: input from 'Components/Form/TextInput.css';
+  composes: input from '~Components/Form/TextInput.css';
 
   height: 46px;
   border-radius: 0;

frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css

@@ -38,29 +38,29 @@
 }
 
 .searchForMissingAlbumsContainer {
-  composes: container from 'Components/Form/CheckInput.css';
+  composes: container from '~Components/Form/CheckInput.css';
 
   flex: 0 1 0;
 }
 
 .searchForMissingAlbumsInput {
-  composes: input from 'Components/Form/CheckInput.css';
+  composes: input from '~Components/Form/CheckInput.css';
 
   margin-top: 0;
 }
 
 .modalFooter {
-  composes: modalFooter from 'Components/Modal/ModalFooter.css';
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
 }
 
 .addButton {
   @add-mixin truncate;
-  composes: button from 'Components/Link/SpinnerButton.css';
+  composes: button from '~Components/Link/SpinnerButton.css';
 }
 
 .hideLanguageProfile,
 .hideMetadataProfile {
-  composes: group from 'Components/Form/FormGroup.css';
+  composes: group from '~Components/Form/FormGroup.css';
 
   display: none;
 }

frontend/src/AddArtist/ImportArtist/Import/ImportArtistFooter.css

@@ -14,7 +14,7 @@
 }
 
 .importButton {
-  composes: button from 'Components/Link/SpinnerButton.css';
+  composes: button from '~Components/Link/SpinnerButton.css';
 
   height: 35px;
 }
@@ -26,7 +26,7 @@
 }
 
 .loading {
-  composes: loading from 'Components/Loading/LoadingIndicator.css';
+  composes: loading from '~Components/Loading/LoadingIndicator.css';
 
   margin: 0 10px 0 12px;
   text-align: left;

frontend/src/AddArtist/ImportArtist/Import/ImportArtistHeader.css

@@ -1,11 +1,11 @@
 .folder {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 1 0 200px;
 }
 
 .monitor {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 1 200px;
   min-width: 185px;
@@ -14,21 +14,21 @@
 .qualityProfile,
 .languageProfile,
 .metadataProfile {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 1 250px;
   min-width: 170px;
 }
 
 .albumFolder {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 1 150px;
   min-width: 120px;
 }
 
 .artist {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 1 400px;
   min-width: 300px;

frontend/src/AddArtist/ImportArtist/Import/ImportArtistRow.css

@@ -1,16 +1,16 @@
 .selectInput {
-  composes: input from 'Components/Form/CheckInput.css';
+  composes: input from '~Components/Form/CheckInput.css';
 }
 
 .folder {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 1 0 200px;
   line-height: 36px;
 }
 
 .monitor {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 0 1 200px;
   min-width: 185px;
@@ -19,21 +19,21 @@
 .qualityProfile,
 .languageProfile,
 .metadataProfile {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 0 1 250px;
   min-width: 170px;
 }
 
 .albumFolder {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 0 1 150px;
   min-width: 120px;
 }
 
 .artist {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 0 1 400px;
   min-width: 300px;
@@ -41,7 +41,7 @@
 
 .hideLanguageProfile,
 .hideMetadataProfile {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   display: none;
 }

frontend/src/AddArtist/ImportArtist/Import/ImportArtistSelected.css

@@ -1,3 +1,3 @@
 .input {
-  composes: input from 'Components/Form/CheckInput.css';
+  composes: input from '~Components/Form/CheckInput.css';
 }

frontend/src/AddArtist/ImportArtist/Import/SelectArtist/ImportArtistSelectArtist.css

@@ -3,7 +3,7 @@
 }
 
 .button {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   position: relative;
   display: flex;
@@ -65,7 +65,7 @@
 }
 
 .searchInput {
-  composes: input from 'Components/Form/TextInput.css';
+  composes: input from '~Components/Form/TextInput.css';
 
   border-radius: 0;
 }

frontend/src/Album/AlbumSearchCell.css

@@ -1,5 +1,5 @@
 .AlbumSearchCell {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 70px;
   white-space: nowrap;

frontend/src/Album/AlbumTitleLink.css

@@ -1,5 +1,5 @@
 .link {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   &:hover {
     color: $linkHoverColor;

frontend/src/Album/Details/AlbumDetails.css

@@ -69,7 +69,7 @@
 }
 
 .monitorToggleButton {
-  composes: toggleButton from 'Components/MonitorToggleButton.css';
+  composes: toggleButton from '~Components/MonitorToggleButton.css';
 
   width: 40px;
 
@@ -88,7 +88,7 @@
 }
 
 .albumNavigationButton {
-  composes: button from 'Components/Link/IconButton.css';
+  composes: button from '~Components/Link/IconButton.css';
 
   margin-left: 5px;
   width: 30px;
@@ -111,7 +111,7 @@
 }
 
 .detailsLabel {
-  composes: label from 'Components/Label.css';
+  composes: label from '~Components/Label.css';
 
   margin: 5px 10px 5px 0;
 }

frontend/src/Album/Details/AlbumDetailsLinks.css

@@ -7,7 +7,7 @@
 }
 
 .linkLabel {
-  composes: label from 'Components/Label.css';
+  composes: label from '~Components/Label.css';
 
   cursor: pointer;
 }

frontend/src/Album/Details/AlbumDetailsMedium.css

@@ -29,7 +29,7 @@
 }
 
 .expandButton {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   flex-grow: 1;
   margin: 0 20px;
@@ -48,13 +48,13 @@
 }
 
 .actionsMenu {
-  composes: menu from 'Components/Menu/Menu.css';
+  composes: menu from '~Components/Menu/Menu.css';
 
   flex: 0 0 45px;
 }
 
 .actionsMenuContent {
-  composes: menuContent from 'Components/Menu/MenuContent.css';
+  composes: menuContent from '~Components/Menu/MenuContent.css';
 
   white-space: nowrap;
   font-size: 14px;
@@ -65,7 +65,7 @@
 }
 
 .actionButton {
-  composes: button from 'Components/Link/IconButton.css';
+  composes: button from '~Components/Link/IconButton.css';
 
   width: 30px;
 }

frontend/src/Album/Details/TrackRow.css

@@ -1,23 +1,23 @@
 .title {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   white-space: nowrap;
 }
 
 .monitored {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 42px;
 }
 
 .trackNumber {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 50px;
 }
 
 .audio {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 200px;
 }
@@ -25,7 +25,7 @@
 .language,
 .duration,
 .status {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 100px;
 }

frontend/src/Album/SceneInfo.css

@@ -1,17 +1,17 @@
 .descriptionList {
-  composes: descriptionList from 'Components/DescriptionList/DescriptionList.css';
+  composes: descriptionList from '~Components/DescriptionList/DescriptionList.css';
 
   margin-right: 10px;
 }
 
 .title {
-  composes: title from 'Components/DescriptionList/DescriptionListItemTitle.css';
+  composes: title from '~Components/DescriptionList/DescriptionListItemTitle.css';
 
   width: 80px;
 }
 
 .description {
-  composes: title from 'Components/DescriptionList/DescriptionListItemDescription.css';
+  composes: title from '~Components/DescriptionList/DescriptionListItemDescription.css';
 
   margin-left: 100px;
 }

frontend/src/AlbumStudio/AlbumStudioFooter.css

@@ -8,7 +8,7 @@
 }
 
 .updateSelectedButton {
-  composes: button from 'Components/Link/SpinnerButton.css';
+  composes: button from '~Components/Link/SpinnerButton.css';
 
   height: 35px;
 }

frontend/src/AlbumStudio/AlbumStudioRow.css

@@ -1,19 +1,19 @@
 .status,
 .monitored {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 50px;
 }
 
 .title {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 1px;
   white-space: nowrap;
 }
 
 .albums {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   display: flex;
   flex-wrap: wrap;

frontend/src/Artist/Details/AlbumRow.css

@@ -1,17 +1,17 @@
 .title {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   white-space: nowrap;
 }
 
 .monitored {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 42px;
 }
 
 .status {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 100px;
 }

frontend/src/Artist/Details/ArtistDetails.css

@@ -76,7 +76,7 @@
 }
 
 .monitorToggleButton {
-  composes: toggleButton from 'Components/MonitorToggleButton.css';
+  composes: toggleButton from '~Components/MonitorToggleButton.css';
 
   width: 40px;
 
@@ -95,7 +95,7 @@
 }
 
 .artistNavigationButton {
-  composes: button from 'Components/Link/IconButton.css';
+  composes: button from '~Components/Link/IconButton.css';
 
   margin-left: 5px;
   width: 30px;
@@ -118,7 +118,7 @@
 }
 
 .detailsLabel {
-  composes: label from 'Components/Label.css';
+  composes: label from '~Components/Label.css';
 
   margin: 5px 10px 5px 0;
 }

frontend/src/Artist/Details/ArtistDetailsLinks.css

@@ -7,7 +7,7 @@
 }
 
 .linkLabel {
-  composes: label from 'Components/Label.css';
+  composes: label from '~Components/Label.css';
 
   cursor: pointer;
 }

frontend/src/Artist/Details/ArtistDetailsSeason.css

@@ -34,7 +34,7 @@
 }
 
 .expandButton {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   flex-grow: 1;
   width: 100%;
@@ -53,13 +53,13 @@
 }
 
 .actionsMenu {
-  composes: menu from 'Components/Menu/Menu.css';
+  composes: menu from '~Components/Menu/Menu.css';
 
   flex: 0 0 45px;
 }
 
 .actionsMenuContent {
-  composes: menuContent from 'Components/Menu/MenuContent.css';
+  composes: menuContent from '~Components/Menu/MenuContent.css';
 
   white-space: nowrap;
   font-size: $defaultFontSize;
@@ -70,7 +70,7 @@
 }
 
 .actionButton {
-  composes: button from 'Components/Link/IconButton.css';
+  composes: button from '~Components/Link/IconButton.css';
 
   width: 30px;
 }

frontend/src/Artist/Edit/EditArtistModalContent.css

@@ -1,5 +1,5 @@
 .deleteButton {
-  composes: button from 'Components/Link/Button.css';
+  composes: button from '~Components/Link/Button.css';
 
   margin-right: auto;
 }

frontend/src/Artist/Editor/ArtistEditorFooter.css

@@ -21,14 +21,14 @@
 
 .organizeSelectedButton,
 .tagsButton {
-  composes: button from 'Components/Link/SpinnerButton.css';
+  composes: button from '~Components/Link/SpinnerButton.css';
 
   margin-right: 10px;
   height: 35px;
 }
 
 .deleteSelectedButton {
-  composes: button from 'Components/Link/SpinnerButton.css';
+  composes: button from '~Components/Link/SpinnerButton.css';
 
   margin-left: 50px;
   height: 35px;

frontend/src/Artist/Editor/ArtistEditorRow.css

@@ -1,5 +1,5 @@
 .albumFolder {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 150px;
 }

frontend/src/Artist/History/ArtistHistoryRow.css

@@ -1,6 +1,6 @@
 .details,
 .actions {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 65px;
 }

frontend/src/Artist/Index/ArtistIndex.css

@@ -5,14 +5,14 @@
 }
 
 .contentBody {
-  composes: contentBody from 'Components/Page/PageContentBody.css';
+  composes: contentBody from '~Components/Page/PageContentBody.css';
 
   display: flex;
   flex-direction: column;
 }
 
 .postersInnerContentBody {
-  composes: innerContentBody from 'Components/Page/PageContentBody.css';
+  composes: innerContentBody from '~Components/Page/PageContentBody.css';
 
   display: flex;
   flex-direction: column;
@@ -23,7 +23,7 @@
 }
 
 .bannersInnerContentBody {
-  composes: innerContentBody from 'Components/Page/PageContentBody.css';
+  composes: innerContentBody from '~Components/Page/PageContentBody.css';
 
   display: flex;
   flex-direction: column;
@@ -34,7 +34,7 @@
 }
 
 .tableInnerContentBody {
-  composes: innerContentBody from 'Components/Page/PageContentBody.css';
+  composes: innerContentBody from '~Components/Page/PageContentBody.css';
 
   display: flex;
   flex-direction: column;

frontend/src/Artist/Index/Banners/ArtistIndexBanner.css

@@ -24,7 +24,7 @@ $hoverScale: 1.05;
 }
 
 .link {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   display: block;
   background-color: $defaultColor;
@@ -71,7 +71,7 @@ $hoverScale: 1.05;
 }
 
 .action {
-  composes: button from 'Components/Link/IconButton.css';
+  composes: button from '~Components/Link/IconButton.css';
 
   &:hover {
     color: #ccc;

frontend/src/Artist/Index/Overview/ArtistIndexOverview.css

@@ -22,7 +22,7 @@ $hoverScale: 1.05;
 }
 
 .link {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   display: block;
   color: $defaultColor;

frontend/src/Artist/Index/Posters/ArtistIndexPoster.css

@@ -24,7 +24,7 @@ $hoverScale: 1.05;
 }
 
 .link {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   position: relative;
   display: block;
@@ -89,7 +89,7 @@ $hoverScale: 1.05;
 }
 
 .action {
-  composes: button from 'Components/Link/IconButton.css';
+  composes: button from '~Components/Link/IconButton.css';
 
   &:hover {
     color: #ccc;

frontend/src/Artist/Index/ProgressBar/ArtistIndexProgressBar.css

@@ -1,5 +1,5 @@
 .progress {
-  composes: container from 'Components/ProgressBar.css';
+  composes: container from '~Components/ProgressBar.css';
 
   border-radius: 0;
   background-color: #5b5b5b;
@@ -8,7 +8,7 @@
 }
 
 .progressBar {
-  composes: progressBar from 'Components/ProgressBar.css';
+  composes: progressBar from '~Components/ProgressBar.css';
 
   transition: width 200ms ease;
 }

frontend/src/Artist/Index/Table/ArtistIndexHeader.css

@@ -1,11 +1,11 @@
 .status {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 60px;
 }
 
 .sortName {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 4 0 110px;
 }
@@ -19,7 +19,7 @@
 }
 
 .artistType {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 100px;
 }
@@ -27,7 +27,7 @@
 .qualityProfileId,
 .languageProfileId,
 .metadataProfileId {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 1 0 125px;
 }
@@ -36,62 +36,62 @@
 .lastAlbum,
 .added,
 .genres {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 180px;
 }
 
 .albumCount {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 100px;
 }
 
 .trackProgress,
 .latestAlbum {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 150px;
 }
 
 .trackCount {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 130px;
 }
 
 .path {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 1 0 150px;
 }
 
 .sizeOnDisk {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 120px;
 }
 
 .ratings {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 80px;
 }
 
 .tags {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 1 0 60px;
 }
 
 .useSceneNumbering {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 145px;
 }
 
 .actions {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 1 90px;
 }

frontend/src/Artist/Index/Table/ArtistIndexRow.css

@@ -1,5 +1,5 @@
 .cell {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   display: flex;
   align-items: center;
@@ -32,7 +32,7 @@
 }
 
 .link {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   position: relative;
   display: block;
@@ -111,7 +111,7 @@
 }
 
 .ratings {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 80px;
 }
@@ -135,7 +135,7 @@
 }
 
 .checkInput {
-  composes: input from 'Components/Form/CheckInput.css';
+  composes: input from '~Components/Form/CheckInput.css';
 
   margin-top: 0;
 }

frontend/src/Artist/Index/Table/ArtistIndexTable.css

@@ -1,5 +1,5 @@
 .tableContainer {
-  composes: tableContainer from 'Components/Table/VirtualTable.css';
+  composes: tableContainer from '~Components/Table/VirtualTable.css';
 
   flex: 1 0 auto;
 }

frontend/src/Artist/Index/Table/ArtistStatusCell.css

@@ -1,5 +1,5 @@
 .status {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 60px;
 }

frontend/src/Artist/MoveArtist/MoveArtistModal.css

@@ -1,5 +1,5 @@
 .doNotMoveButton {
-  composes: button from 'Components/Link/Button.css';
+  composes: button from '~Components/Link/Button.css';
 
   margin-right: auto;
 }

frontend/src/Calendar/Agenda/AgendaEvent.css

@@ -59,27 +59,27 @@
  */
 
 .downloaded {
-  composes: downloaded from 'Calendar/Events/CalendarEvent.css';
+  composes: downloaded from '~Calendar/Events/CalendarEvent.css';
 }
 
 .partial {
-  composes: partial from 'Calendar/Events/CalendarEvent.css';
+  composes: partial from '~Calendar/Events/CalendarEvent.css';
 }
 
 .downloading {
-  composes: downloading from 'Calendar/Events/CalendarEvent.css';
+  composes: downloading from '~Calendar/Events/CalendarEvent.css';
 }
 
 .unmonitored {
-  composes: unmonitored from 'Calendar/Events/CalendarEvent.css';
+  composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
 }
 
 .missing {
-  composes: missing from 'Calendar/Events/CalendarEvent.css';
+  composes: missing from '~Calendar/Events/CalendarEvent.css';
 }
 
 .unreleased {
-  composes: unreleased from 'Calendar/Events/CalendarEvent.css';
+  composes: unreleased from '~Calendar/Events/CalendarEvent.css';
 }
 
 @media only screen and (max-width: $breakpointSmall) {

frontend/src/Calendar/CalendarPage.css

@@ -1,11 +1,11 @@
 .calendarPageBody {
-  composes: contentBody from 'Components/Page/PageContentBody.css';
+  composes: contentBody from '~Components/Page/PageContentBody.css';
 
   display: flex;
 }
 
 .calendarInnerPageBody {
-  composes: innerContentBody from 'Components/Page/PageContentBody.css';
+  composes: innerContentBody from '~Components/Page/PageContentBody.css';
 
   display: flex;
   flex-direction: column;

frontend/src/Calendar/Header/CalendarHeader.css

@@ -8,7 +8,7 @@
 }
 
 .todayButton {
-  composes: button from 'Components/Link/Button.css';
+  composes: button from '~Components/Link/Button.css';
 
   margin-left: 5px;
 }
@@ -30,13 +30,13 @@
 }
 
 .viewMenu {
-  composes: menu from 'Components/Menu/Menu.css';
+  composes: menu from '~Components/Menu/Menu.css';
 
   line-height: 31px;
 }
 
 .loading {
-  composes: loading from 'Components/Loading/LoadingIndicator.css';
+  composes: loading from '~Components/Loading/LoadingIndicator.css';
 
   margin-top: 5px;
   margin-right: 10px;

frontend/src/Calendar/Legend/LegendItem.css

@@ -13,29 +13,29 @@
  */
 
 .downloaded {
-  composes: downloaded from 'Calendar/Events/CalendarEvent.css';
+  composes: downloaded from '~Calendar/Events/CalendarEvent.css';
 }
 
 .partial {
-  composes: partial from 'Calendar/Events/CalendarEvent.css';
+  composes: partial from '~Calendar/Events/CalendarEvent.css';
 }
 
 .downloading {
-  composes: downloading from 'Calendar/Events/CalendarEvent.css';
+  composes: downloading from '~Calendar/Events/CalendarEvent.css';
 }
 
 .unmonitored {
-  composes: unmonitored from 'Calendar/Events/CalendarEvent.css';
+  composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
 }
 
 .onAir {
-  composes: onAir from 'Calendar/Events/CalendarEvent.css';
+  composes: onAir from '~Calendar/Events/CalendarEvent.css';
 }
 
 .missing {
-  composes: missing from 'Calendar/Events/CalendarEvent.css';
+  composes: missing from '~Calendar/Events/CalendarEvent.css';
 }
 
 .unreleased {
-  composes: unreleased from 'Calendar/Events/CalendarEvent.css';
+  composes: unreleased from '~Calendar/Events/CalendarEvent.css';
 }

frontend/src/Components/FileBrowser/FileBrowserModal.css

@@ -1,5 +1,5 @@
 .modal {
-  composes: modal from 'Components/Modal/Modal.css';
+  composes: modal from '~Components/Modal/Modal.css';
 
   height: 600px;
 }

frontend/src/Components/FileBrowser/FileBrowserModalContent.css

@@ -1,12 +1,12 @@
 .modalBody {
-  composes: modalBody from 'Components/Modal/ModalBody.css';
+  composes: modalBody from '~Components/Modal/ModalBody.css';
 
   display: flex;
   flex-direction: column;
 }
 
 .mappedDrivesWarning {
-  composes: alert from 'Components/Alert.css';
+  composes: alert from '~Components/Alert.css';
 
   margin: 0;
   margin-bottom: 20px;
@@ -18,7 +18,7 @@
 }
 
 .pathInput {
-  composes: pathInputWrapper from 'Components/Form/PathInput.css';
+  composes: pathInputWrapper from '~Components/Form/PathInput.css';
 
   flex: 0 0 auto;
 }

frontend/src/Components/FileBrowser/FileBrowserRow.css

@@ -1,5 +1,5 @@
 .type {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 32px;
 }

frontend/src/Components/Filter/Builder/DateFilterBuilderRowValue.css

@@ -3,13 +3,13 @@
 }
 
 .numberInput {
-  composes: input from 'Components/Form/TextInput.css';
+  composes: input from '~Components/Form/TextInput.css';
 
   margin-right: 3px;
 }
 
 .selectInput {
-  composes: select from 'Components/Form/SelectInput.css';
+  composes: select from '~Components/Form/SelectInput.css';
 
   margin-left: 3px;
 }

frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js

@@ -3,7 +3,8 @@ import React, { Component } from 'react';
 import convertToBytes from 'Utilities/Number/convertToBytes';
 import formatBytes from 'Utilities/Number/formatBytes';
 import { kinds, filterBuilderTypes, filterBuilderValueTypes } from 'Helpers/Props';
-import TagInput, { tagShape } from 'Components/Form/TagInput';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
+import TagInput from 'Components/Form/TagInput';
 import FilterBuilderRowValueTag from './FilterBuilderRowValueTag';
 
 export const NAME = 'value';

frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css

@@ -7,7 +7,7 @@
 }
 
 .label {
-  composes: label from 'Components/Label.css';
+  composes: label from '~Components/Label.css';
 
   border-style: none;
   font-size: 13px;

frontend/src/Components/Filter/Builder/IndexerFilterBuilderRowValueConnector.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import { fetchIndexers } from 'Store/Actions/settingsActions';
-import { tagShape } from 'Components/Form/TagInput';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createMapStateToProps() {

frontend/src/Components/Filter/Builder/QualityFilterBuilderRowValueConnector.js

@@ -3,8 +3,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import getQualities from 'Utilities/Quality/getQualities';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import { fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
-import { tagShape } from 'Components/Form/TagInput';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createMapStateToProps() {

frontend/src/Components/Form/AutoCompleteInput.css

@@ -1,13 +1,13 @@
 .input {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .inputWrapper {

frontend/src/Components/Form/CaptchaInput.css

@@ -3,19 +3,19 @@
 }
 
 .input {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .hasButton {
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }
 
 .recaptchaWrapper {

frontend/src/Components/Form/CheckInput.css

@@ -94,7 +94,7 @@
 }
 
 .helpText {
-  composes: helpText from 'Components/Form/FormInputHelpText.css';
+  composes: helpText from '~Components/Form/FormInputHelpText.css';
 
   margin-top: 8px;
   margin-left: 5px;

frontend/src/Components/Form/DeviceInput.css

@@ -3,6 +3,6 @@
 }
 
 .inputContainer {
-  composes: inputContainer from './TagInput.css';
+  composes: inputContainer from '~./TagInput.css';
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }

frontend/src/Components/Form/DeviceInput.js

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { icons } from 'Helpers/Props';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import Icon from 'Components/Icon';
 import FormInputButton from './FormInputButton';
-import TagInput, { tagShape } from './TagInput';
+import TagInput from './TagInput';
 import styles from './DeviceInput.css';
 
 class DeviceInput extends Component {

frontend/src/Components/Form/EnhancedSelectInput.css

@@ -3,8 +3,8 @@
 }
 
 .enhancedSelect {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   position: relative;
   display: flex;
@@ -21,11 +21,11 @@
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .isDisabled {
@@ -62,7 +62,7 @@
 }
 
 .optionsModalBody {
-  composes: modalBody from 'Components/Modal/ModalBody.css';
+  composes: modalBody from '~Components/Modal/ModalBody.css';
 
   display: flex;
   justify-content: center;
@@ -71,7 +71,7 @@
 }
 
 .optionsModalScroller {
-  composes: scroller from 'Components/Scroller/Scroller.css';
+  composes: scroller from '~Components/Scroller/Scroller.css';
 
   border: 1px solid $inputBorderColor;
   border-radius: 4px;

frontend/src/Components/Form/FormInputButton.css

@@ -1,5 +1,5 @@
 .button {
-  composes: button from 'Components/Link/Button.css';
+  composes: button from '~Components/Link/Button.css';
 
   border-left: none;
   border-top-left-radius: 0;

frontend/src/Components/Form/FormInputHelpText.css

@@ -33,7 +33,7 @@
 }
 
 .link {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   margin-left: 5px;
 }

frontend/src/Components/Form/KeyValueListInput.css

@@ -1,5 +1,5 @@
 .inputContainer {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 
   position: relative;
   min-height: 35px;
@@ -13,9 +13,9 @@
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }

frontend/src/Components/Form/PasswordInput.css

@@ -1,5 +1,5 @@
 .input {
-  composes: input from 'Components/Form/TextInput.css';
+  composes: input from '~Components/Form/TextInput.css';
 
   font-family: $passwordFamily;
 }

frontend/src/Components/Form/PathInput.css

@@ -1,17 +1,17 @@
 .path {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .hasFileBrowser {
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }
 
 .pathInputWrapper {
@@ -62,7 +62,7 @@
 }
 
 .fileBrowserButton {
-  composes: button from './FormInputButton.css';
+  composes: button from '~./FormInputButton.css';
 
   height: 35px;
 }

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css

@@ -1,5 +1,5 @@
 .selectedValue {
-  composes: selectedValue from './EnhancedSelectInputSelectedValue.css';
+  composes: selectedValue from '~./EnhancedSelectInputSelectedValue.css';
 
   display: flex;
   align-items: center;

frontend/src/Components/Form/SelectInput.css

@@ -1,15 +1,15 @@
 .select {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 
   padding: 0 11px;
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .isDisabled {

frontend/src/Components/Form/TagInput.css

@@ -1,5 +1,5 @@
 .inputContainer {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 
   position: relative;
   padding: 0;
@@ -14,11 +14,11 @@
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .tags {

frontend/src/Components/Form/TagInput.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import Autosuggest from 'react-autosuggest';
 import classNames from 'classnames';
 import { kinds } from 'Helpers/Props';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import TagInputInput from './TagInputInput';
 import TagInputTag from './TagInputTag';
 import styles from './TagInput.css';
@@ -266,11 +267,6 @@ class TagInput extends Component {
   }
 }
 
-export const tagShape = {
-  id: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]).isRequired,
-  name: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
-};
-
 TagInput.propTypes = {
   className: PropTypes.string.isRequired,
   inputClassName: PropTypes.string.isRequired,

frontend/src/Components/Form/TagInputInput.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
-import { tagShape } from './TagInput';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import styles from './TagInputInput.css';
 
 class TagInputInput extends Component {

frontend/src/Components/Form/TagInputTag.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
-import { tagShape } from './TagInput';
 
 class TagInputTag extends Component {
 

frontend/src/Components/Form/TextInput.css

@@ -1,5 +1,5 @@
 .input {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .readOnly {
@@ -7,13 +7,13 @@
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .hasButton {
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }

frontend/src/Components/Link/Button.css

@@ -1,5 +1,5 @@
 .button {
-  composes: link from './Link.css';
+  composes: link from '~./Link.css';
 
   overflow: hidden;
   border: 1px solid;

frontend/src/Components/Link/ClipboardButton.css

@@ -1,5 +1,5 @@
 .button {
-  composes: button from 'Components/Form/FormInputButton.css';
+  composes: button from '~Components/Form/FormInputButton.css';
 
   position: relative;
 }

frontend/src/Components/Link/IconButton.css

@@ -1,5 +1,5 @@
 .button {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   display: inline-block;
   margin: 0 2px;

frontend/src/Components/Link/SpinnerButton.css

@@ -1,5 +1,5 @@
 .button {
-  composes: button from 'Components/Link/Button.css';
+  composes: button from '~Components/Link/Button.css';
 
   position: relative;
 }

frontend/src/Components/Link/SpinnerErrorButton.css

@@ -1,5 +1,5 @@
 .iconContainer {
-  composes: spinnerContainer from 'Components/Link/SpinnerButton.css';
+  composes: spinnerContainer from '~Components/Link/SpinnerButton.css';
 }
 
 .icon {
@@ -7,7 +7,7 @@
 }
 
 .label {
-  composes: label from 'Components/Link/SpinnerButton.css';
+  composes: label from '~Components/Link/SpinnerButton.css';
 }
 
 .showIcon {

frontend/src/Components/Menu/FilterMenu.css

@@ -1,5 +1,5 @@
 .filterMenu {
-  composes: menu from './Menu.css';
+  composes: menu from '~./Menu.css';
 }
 
 @media only screen and (max-width: $breakpointSmall) {

frontend/src/Components/Menu/PageMenuButton.css

@@ -1,5 +1,5 @@
 .menuButton {
-  composes: menuButton from './MenuButton.css';
+  composes: menuButton from '~./MenuButton.css';
 
   &:hover {
     color: #666;

frontend/src/Components/Menu/ToolbarMenuButton.css

@@ -1,5 +1,5 @@
 .menuButton {
-  composes: menuButton from './MenuButton.css';
+  composes: menuButton from '~./MenuButton.css';
 
   width: $toolbarButtonWidth;
   height: $toolbarHeight;
@@ -7,5 +7,5 @@
 }
 
 .label {
-  composes: label from 'Components/Page/Toolbar/PageToolbarButton.css';
+  composes: label from '~Components/Page/Toolbar/PageToolbarButton.css';
 }

frontend/src/Components/Modal/ModalError.css

@@ -1,5 +1,5 @@
 .message {
-  composes: message from 'Components/Error/ErrorBoundaryError.css';
+  composes: message from '~Components/Error/ErrorBoundaryError.css';
 
   margin: 0;
   margin-bottom: 30px;
@@ -8,7 +8,7 @@
 }
 
 .details {
-  composes: details from 'Components/Error/ErrorBoundaryError.css';
+  composes: details from '~Components/Error/ErrorBoundaryError.css';
 
   margin: 0;
   margin-top: 20px;

frontend/src/Components/MonitorToggleButton.css

@@ -1,5 +1,5 @@
 .toggleButton {
-  composes: button from 'Components/Link/IconButton.css';
+  composes: button from '~Components/Link/IconButton.css';
 
   padding: 0;
   font-size: inherit;

frontend/src/Components/Page/ErrorPage.css

@@ -1,5 +1,5 @@
 .page {
-  composes: page from './Page.css';
+  composes: page from '~./Page.css';
 
   margin-top: 20px;
   text-align: center;

frontend/src/Components/Page/Header/PageHeader.css

@@ -38,7 +38,7 @@
 }
 
 .donate {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   width: 30px;
   color: $themeRed;