Inline styles automatically, no longer require loading external stylesheet

Author: tim-soft

README.md

@@ -64,7 +64,6 @@ First you'll need a wrapper component which will handle the updates from your da
 ```jsx
 import React, { Component } from 'react';
 import DatGui, { DatBoolean, DatColor, DatNumber, DatString } from 'react-dat-gui';
-import 'react-dat-gui/dist/index.css';
 
 class App extends Component {
   state = {

example/components/ReactDatGui.js

@@ -9,7 +9,6 @@ import DatGui, {
   DatSelect,
   DatString
 } from 'react-dat-gui';
-import 'react-dat-gui/dist/index.css';
 import Stats from './Stats';
 
 /**

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-dat-gui",
-  "version": "3.0.0",
+  "name": "@tim-soft/react-dat-gui",
+  "version": "4.0.9",
   "description": "dat.GUI reimagined for React",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -78,6 +78,7 @@
     "@babel/preset-react": "^7.0.0",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.1.3",
+    "autoprefixer": "^9.6.1",
     "babel-eslint": "10.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-polyfill": "^6.26.0",
@@ -101,6 +102,7 @@
     "rollup-plugin-commonjs": "^10.0.2",
     "rollup-plugin-filesize": "^6.2.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-scss": "^1.0.2"
   },
   "peerDependencies": {

rollup.config.js

@@ -3,7 +3,8 @@ import babel from 'rollup-plugin-babel';
 import commonjs from 'rollup-plugin-commonjs';
 import filesize from 'rollup-plugin-filesize';
 import resolve from 'rollup-plugin-node-resolve';
-import scss from 'rollup-plugin-scss';
+import postcss from 'rollup-plugin-postcss';
+import autoprefixer from 'autoprefixer';
 import pkg from './package.json';
 
 const root = process.platform === 'win32' ? path.resolve('/') : '/';
@@ -27,8 +28,10 @@ export default {
       sourcemap: true
     }
   ],
-  external: id => !id.startsWith('.') && !id.startsWith(root),
+  external: id =>
+    !id.startsWith('.') && !id.startsWith(root) && !id.includes('style-inject'),
   plugins: [
+    postcss({ plugins: [autoprefixer] }),
     babel({
       exclude: 'node_modules/**',
       runtimeHelpers: true
@@ -37,9 +40,6 @@ export default {
     commonjs({
       include: 'node_modules/**'
     }),
-    scss({
-      output: 'dist/index.css'
-    }),
     filesize()
   ]
 };