Remove CSS from JS

Author: mercs600

example/App.vue

@@ -18,7 +18,6 @@ export default {
   }
 }
 </script>
-
 <style>
 .container {
   position: relative;

example/index.js

@@ -1,11 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
 import Vue2PerfectScrollbar from '../src'
+import '../src/style.css'
 
 Vue.use(Vue2PerfectScrollbar, {
   name: 'scroll'
 })
-
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

package.json

@@ -13,6 +13,7 @@
   "style": "dist/vue2-perfect-scrollbar.css",
   "scripts": {
     "build": "rollup -c --environment production",
+    "build:css": "postcss src/style.css -o dist/vue2-perfect-scrollbar.min.css --env production && postcss src/style.css -o dist/vue2-perfect-scrollbar.css",
     "dev": "webpack-dev-server --config webpack.config.js",
     "test": "karma start --single-run",
     "test:dev": "karma start --single-run=false"
@@ -36,6 +37,7 @@
     "babel-loader": "^8.0.2",
     "chai": "^4.1.2",
     "css-loader": "^1.0.0",
+    "cssnano": "^4.1.3",
     "eslint": "^5.5.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-loader": "^2.1.0",
@@ -53,14 +55,12 @@
     "karma-webpack": "^3.0.5",
     "mocha": "^5.2.0",
     "node-sass": "^4.9.3",
+    "postcss-import": "^12.0.0",
     "rollup": "^0.65.2",
     "rollup-plugin-buble": "^0.19.2",
     "rollup-plugin-commonjs": "^9.1.6",
-    "rollup-plugin-css-only": "^0.4.0",
     "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-postcss": "^1.6.2",
     "rollup-plugin-uglify": "^5.0.2",
-    "rollup-plugin-vue": "^4.3.2",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.0",
     "ts-loader": "^5.1.0",

postcss.config.js

@@ -0,0 +1,14 @@
+var path = require('path')
+var postcssImport = require('postcss-import')
+var cssnano = require('cssnano')
+module.exports = ctx => ({
+  plugins: {
+    'postcss-import': {
+      resolve (id, basedir) {
+        if (/^~/.test(id)) return path.resolve('./node_modules', id.replace('~', ''))
+        return path.resolve(basedir, id)
+      }
+    },
+    'cssnano': ctx.env === 'production'
+  }
+})

rollup.config.js

@@ -1,11 +1,8 @@
-import { writeFile } from 'fs'
 import buble from 'rollup-plugin-buble'
 import { uglify } from 'rollup-plugin-uglify'
 import resolve from 'rollup-plugin-node-resolve'
 import commonjs from 'rollup-plugin-commonjs'
 import pkg from './package.json'
-import css from 'rollup-plugin-css-only'
-import vue from 'rollup-plugin-vue'
 
 const browser = {
   input: 'src/index.js',
@@ -15,16 +12,11 @@ const browser = {
     file: pkg.browser
   },
   plugins: [
-    vue({
-      template: {
-        isProduction: true
-      }
-    }),
+    buble(),
     resolve({
-      browser: true
+      browser: true, jsnext: true, main: true
     }),
-    commonjs(),
-    buble()
+    commonjs()
   ]
 }
 
@@ -36,13 +28,8 @@ const browserMin = {
     file: 'dist/vue2-perfect-scrollbar.umd.min.js'
   },
   plugins: [
-    vue({
-      template: {
-        isProduction: true
-      }
-    }),
     resolve({
-      browser: true
+      browser: true, jsnext: true, main: true
     }),
     commonjs(),
     buble(),
@@ -63,24 +50,6 @@ const nodeModules = {
     }
   ],
   plugins: [
-    css({
-      output: (styles, styleNodes) => {
-        writeFile(pkg.style, styles, (err) => {
-          if (err) {
-            console.log(err)
-          } else {
-            resolve()
-          }
-        })
-      }
-    }),
-    vue({
-      template: {
-        isProduction: true
-      },
-      style: false,
-      css: false
-    })
   ],
   external: [ 'perfect-scrollbar' ]
 }

src/Scrollbar.vue renamed to src/Scrollbar.js

@@ -1,4 +1,3 @@
-<script>
 import PerfectScrollbar from 'perfect-scrollbar'
 export default {
   name: 'PerfectScrollbar',
@@ -43,10 +42,3 @@ export default {
       this.$slots.default)
   }
 }
-</script>
-<style src="perfect-scrollbar/css/perfect-scrollbar.css"/>
-<style>
-.ps {
-  position: relative;
-}
-</style>

src/index.js

@@ -1,6 +1,6 @@
-import PerfectScrollbar from './Scrollbar.vue'
+import PerfectScrollbar from './Scrollbar'
 
-function install (Vue, settings) {
+export function install (Vue, settings) {
   if (settings) {
     if (settings.name && typeof settings.name === 'string') {
       PerfectScrollbar.name = settings.name

src/style.css

@@ -0,0 +1,4 @@
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+.ps {
+    position: relative;
+}