feat(css): add tsdx config for PostCSS, organize CSS and SASS imports

Author: MatthewDorner

.eslintignore

@@ -0,0 +1 @@
+tsdx.config.js

package.json

@@ -81,13 +81,15 @@
     "@types/tinymce": "~4.5.23",
     "@typescript-eslint/eslint-plugin": "~2.15.0",
     "@typescript-eslint/parser": "~2.15.0",
+    "autoprefixer": "~9.7.3",
     "awesome-typescript-loader": "~5.2.1",
     "babel-loader": "~8.0.6",
     "bootstrap": "~4.4.0",
     "commitizen": "~4.0.3",
     "commitlint-config-cz": "0.12.1",
     "coveralls": "~3.0.6",
     "cross-env": "~6.0.3",
+    "cssnano": "~4.1.10",
     "cz-conventional-changelog": "~3.0.2",
     "enzyme": "~3.11.0",
     "enzyme-adapter-react-16": "~1.15.2",
@@ -110,6 +112,7 @@
     "react-docgen": "~5.1.0",
     "react-docgen-typescript-loader": "~3.6.0",
     "react-dom": "~16.12.0",
+    "rollup-plugin-postcss": "~2.0.3",
     "sass-loader": "~8.0.0",
     "semantic-release": "~15.14.0",
     "sinon": "~8.0.1",

scss/main.scss

@@ -4,4 +4,8 @@
 
 /* Import bootstrap */
 
-@import "node_modules/bootstrap/scss/bootstrap";
+@import "node_modules/bootstrap/scss/bootstrap";
+
+/* Other CSS Imports */
+
+@import '../node_modules/react-toastify/dist/ReactToastify.min.css';

stories/textfield.stories.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 
 import { TextField } from '../src'
-import 'bootstrap/dist/css/bootstrap.min.css'
 
 storiesOf('TextField', module)
   .addParameters({

stories/toaster.stories.tsx

@@ -4,8 +4,6 @@ import { storiesOf } from '@storybook/react'
 
 import Button from 'react-bootstrap/Button'
 import { Toast, Toaster } from '../src'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import 'react-toastify/dist/ReactToastify.min.css'
 
 storiesOf('Toaster', module)
   .addParameters({

tsdx.config.js

@@ -0,0 +1,23 @@
+const postcss = require('rollup-plugin-postcss')
+const autoprefixer = require('autoprefixer')
+const cssnano = require('cssnano')
+
+module.exports = {
+  rollup(config, options) {
+    config.plugins.push(
+      postcss({
+        plugins: [
+          autoprefixer(),
+          cssnano({
+            preset: 'default',
+          }),
+        ],
+        inject: false,
+        // only write out CSS for the first bundle (avoids pointless extra files):
+        extract: !!options.writeMeta,
+        modules: true,
+      }),
+    )
+    return config
+  },
+}