prefix styles with vjs-wavesurfer (#61)

* change css classname: videojs-wavesurfer to vjs-wavesurfer * compile SCSS into CSS using webpack * test against safari and edge if available * use webpack banner plugin for css
collab-project · May 15, 2018 · 3ef48aa · 3ef48aa
1 parent 142aa8f
commit 3ef48aa
Show file tree

Hide file tree

Showing 15 changed files with 1,444 additions and 327 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -2,14 +2,16 @@ sudo: false
 dist: trusty
 addons:
   chrome: stable
+  firefox: latest
+env:
+  - MOZ_HEADLESS=1
 language: node_js
 node_js:
   - '9'
 install:
   - npm prune
   - npm install
 script:
-  - npm run lint
   - npm run build
   - npm run test
 cache:

diff --git a/CHANGES.md b/CHANGES.md
@@ -1,6 +1,15 @@
 videojs-wavesurfer changelog
 ============================
 
+2.4.0 - unreleased
+------------------
+
+- Add plugin style `vjs-wavesurfer` and prefix all custom plugin styles with
+  this selector. This should prevent clashes with regular video.js players
+  loaded on the same page
+- Compile SCSS into CSS using webpack
+
+
 2.3.2 - 2018/05/07
 ------------------
 

diff --git a/appveyor.yml b/appveyor.yml
@@ -18,7 +18,6 @@ shallow_clone: true
 test_script:
   - node --version
   - npm --version
-  - npm run lint
   - npm run build
   - npm run test
 cache:

diff --git a/build-config/fragments/common.js b/build-config/fragments/common.js
@@ -6,23 +6,38 @@
 const path = require('path');
 const webpack = require('webpack');
 const moment = require('moment');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const time = moment().format('YYYY');
 const pckg = require(path.join(__dirname, '..', '..', 'package.json'));
 
-// add banner with copyright and version info
-var bannerPlugin = new webpack.BannerPlugin(
-`${pckg.name}
+// add JS banner with copyright and version info
+var jsBanner = `${pckg.name}
 @version ${pckg.version}
 @see ${pckg.homepage}
 @copyright 2014-${time} ${pckg.author}
-@license ${pckg.license}`
-);
-// inject version number
-var replaceVersionPlugin = new webpack.DefinePlugin({
+@license ${pckg.license}`;
+var jsBannerPlugin = new webpack.BannerPlugin({
+    banner: jsBanner,
+    test: /\.js$/
+});
+
+// add CSS banner with version info
+var cssBanner = `/*!
+Default styles for ${pckg.name} ${pckg.version}
+*/`;
+var cssBannerPlugin = new webpack.BannerPlugin({
+    banner: cssBanner,
+    raw: true,
+    test: /\.css$/
+});
+
+// inject JS version number
+var jsVersionPlugin = new webpack.DefinePlugin({
   '__VERSION__': JSON.stringify(pckg.version)
 });
-let rootDir = path.resolve(__dirname, '..', '..');
+
+var rootDir = path.resolve(__dirname, '..', '..');
 
 module.exports = {
     context: rootDir,
@@ -49,11 +64,21 @@ module.exports = {
                 use: {
                     loader: 'babel-loader'
                 }
+            },
+            {
+                test: /\.scss$/,
+                include: path.resolve(rootDir, 'src', 'css'),
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    'sass-loader'
+                ]
             }
         ]
     },
     plugins: [
-        bannerPlugin,
-        replaceVersionPlugin
+        jsBannerPlugin,
+        jsVersionPlugin,
+        cssBannerPlugin
     ]
 };
diff --git a/build-config/fragments/dev.js b/build-config/fragments/dev.js
@@ -4,6 +4,7 @@
  */
 
 const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
     mode: 'development',
@@ -12,5 +13,10 @@ module.exports = {
         contentBase: [path.resolve(__dirname, '..', '..')],
         publicPath: 'localhost:8080/dist/',
         watchContentBase: true
-    }
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: 'css/[name].css'
+        })
+    ]
 };
diff --git a/build-config/fragments/main.js b/build-config/fragments/main.js
@@ -4,13 +4,16 @@
  */
 
 const path = require('path');
+const sourceDir = path.resolve(__dirname, '..', '..', 'src');
 
 module.exports = {
     entry: {
-        'videojs.wavesurfer': path.resolve(
-            __dirname,
-            '..', '..', 'src', 'js', 'videojs.wavesurfer.js'
-        )
+        'videojs.wavesurfer': [
+            // JS
+            path.resolve(sourceDir, 'js', 'videojs.wavesurfer.js'),
+            // SCSS
+            path.resolve(sourceDir, 'css', 'videojs.wavesurfer.scss')
+        ]
     },
     output: {
         path: path.resolve(__dirname, '..', '..', 'dist'),

diff --git a/build-config/fragments/prod.js b/build-config/fragments/prod.js
@@ -4,6 +4,8 @@
  */
 
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 module.exports = {
     mode: 'production',
@@ -17,7 +19,13 @@ module.exports = {
                         inline: false
                     }
                 }
-            })
+            }),
+            new OptimizeCSSAssetsPlugin({})
         ]
-    }
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: "css/[name].min.css"
+        })
+    ]
 };
diff --git a/karma.conf.js b/karma.conf.js
@@ -34,11 +34,12 @@ var firefoxFlags = {
     'media.navigator.permission.disabled': true,
     'media.navigator.streams.fake': true
 };
+var ci = process.env.TRAVIS || process.env.APPVEYOR;
 
 module.exports = function(config) {
     var configuration = {
         basePath: '',
-        frameworks: ['jasmine', 'jasmine-matchers'],
+        frameworks: ['jasmine', 'jasmine-matchers', 'detectBrowsers'],
         hostname: 'localhost',
         port: 9876,
         logLevel: config.LOG_INFO,
@@ -81,38 +82,70 @@ module.exports = function(config) {
             'karma-jasmine-matchers',
             'karma-chrome-launcher',
             'karma-firefox-launcher',
+            'karma-safari-launcher',
+            'karma-edge-launcher',
             'karma-coverage',
             'karma-coveralls',
-            'karma-verbose-reporter'
+            'karma-verbose-reporter',
+            'karma-detect-browsers'
         ],
-        browsers: ['Firefox_dev', 'Chrome_dev'],
-        captureConsole: true,
-        browserNoActivityTimeout: 50000,
-        colors: true,
-        reporters: ['verbose', 'progress', 'coverage'],
-        coverageReporter: {
-            type: 'html',
-            dir: 'coverage/'
+        detectBrowsers: {
+            enabled: true,
+            usePhantomJS: false,
+            preferHeadless: true,
+
+            postDetection: function(availableBrowsers) {
+                if (availableBrowsers.length > 1) {
+                    // use custom browser launchers
+                    var result = availableBrowsers;
+                    let cd = availableBrowsers.indexOf('ChromeHeadless');
+                    if (cd > -1) {
+                        availableBrowsers[cd] = 'Chrome_dev';
+                    }
+                    let fd = availableBrowsers.indexOf('FirefoxHeadless');
+                    if (fd > -1) {
+                        availableBrowsers[fd] = 'Firefox_dev';
+                    }
+                    let fh = availableBrowsers.indexOf('Firefox');
+                    if (fh > -1) {
+                        availableBrowsers[fh] = 'Firefox_dev';
+                    }
+                    let ch = availableBrowsers.indexOf('ChromiumHeadless');
+                    if (ch > -1) {
+                        availableBrowsers[ch] = 'Chromium_dev';
+                    }
+                    return result;
+                }
+            }
         },
-        webpack: webpackConfig,
         customLaunchers: {
             Chrome_dev: {
-                base: 'Chrome',
+                base: 'ChromeHeadless',
                 flags: chromeFlags
             },
-            Chrome_ci: {
-                base: 'ChromeHeadless',
+            Chromium_dev: {
+                base: 'ChromiumHeadless',
                 flags: chromeFlags
             },
             Firefox_dev: {
-                base: 'Firefox',
+                base: 'FirefoxHeadless',
                 prefs: firefoxFlags
             }
-        }
+        },
+        captureConsole: true,
+        browserNoActivityTimeout: 50000,
+        colors: true,
+        reporters: ['verbose', 'progress', 'coverage'],
+        coverageReporter: {
+            type: 'html',
+            dir: 'coverage'
+        },
+        webpack: webpackConfig
     };
 
-    if (process.env.TRAVIS || process.env.APPVEYOR) {
-        configuration.browsers = ['Chrome_ci'];
+    if (ci) {
+        configuration.browsers = ['Chrome_dev'];
+        configuration.detectBrowsers.enabled = false;
         configuration.singleRun = true;
 
         if (process.env.TRAVIS) {