Setup styles build

package.json

@@ -30,12 +30,15 @@
     "@rollup/plugin-strip": "^1.3.2",
     "@rollup/plugin-typescript": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
+    "cssnano": "^4.1.10",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-typescript": "^7.2.0",
     "eslint-plugin-import": "^2.20.1",
+    "node-sass": "^4.13.1",
     "np": "^6.2.0",
     "npm-run-all": "^4.1.5",
-    "rollup": "^2.2.0",
+    "rollup": "^1.32.1",
+    "rollup-plugin-postcss": "^2.5.0",
     "rollup-plugin-terser": "^5.3.0",
     "typescript": "^3.8.3"
   }

rollup/plugins.js

@@ -1,7 +1,18 @@
+import postcssPluginCssnano from 'cssnano';
+import rollupPluginPostcss from 'rollup-plugin-postcss';
 import rollupPluginStrip from '@rollup/plugin-strip';
 import { terser as rollupPluginTerser } from 'rollup-plugin-terser';
 import rollupPluginTypescript from '@rollup/plugin-typescript';
 
+export const postcss = (file, minify) => rollupPluginPostcss({
+  extract: file || true,
+  plugins: [
+    minify && postcssPluginCssnano({
+      preset: 'default',
+    })
+  ],
+})
+
 export const strip = () => rollupPluginStrip({
   debugger: true,
   functions: ['console.log', 'console.debug'],

rollup/rollup.config.dev.js

@@ -1,4 +1,4 @@
-import { typescript } from './plugins';
+import { postcss, typescript } from './plugins';
 
 const input = './src/index.ts';
 const name = 'shareon';
@@ -14,5 +14,6 @@ export default {
   },
   plugins: [
     typescript(),
+    postcss(`${outputDir}${name}.css`, false),
   ],
 };

rollup/rollup.config.prod.js

@@ -1,4 +1,4 @@
-import { strip, terser, typescript } from './plugins';
+import { postcss, strip, terser, typescript } from './plugins';
 
 const input = './src/index.ts';
 const name = 'shareon';
@@ -27,6 +27,7 @@ export default {
   ],
   plugins: [
     typescript(),
+    postcss(`${outputDir}${name}.css`, true),
     strip(),
   ],
 };

src/index.ts

@@ -0,0 +1 @@
+import './style.scss';