chore: Merge branch 'brendanmoore-feature/remove-style-loader'

BREAKING CHANGE: from v2.0.0 on, you must import the css for the
component yourself, using `import 'react-sortable-tree/styles.css';`.
You only need to do this once in your application.

Author: fritz-c

.babelrc

@@ -1,14 +1,4 @@
 {
-  "presets": [
-    ["env", {
-      "targets": {
-        "browsers": ["last 2 versions", "ie >= 9"]
-      }
-    }],
-    "react"
-  ],
-  "plugins": [
-    "transform-object-rest-spread",
-    "react-hot-loader/babel"
-  ]
+  "presets": ["env", "react"],
+  "plugins": ["transform-object-rest-spread", "react-hot-loader/babel"]
 }

.gitignore

@@ -17,3 +17,5 @@ cc-test-reporter
 # Build directories (Will be preserved by npm)
 dist
 build
+style.css
+style.css.map

.storybook/addons.js

@@ -1,4 +1,2 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import '@storybook/addon-options/register';
-import '@storybook/addon-notes/register';
-import '@storybook/addon-actions/register';

.storybook/config.js

@@ -5,6 +5,7 @@ import { setOptions } from '@storybook/addon-options';
 setOptions({
   name: 'React Sortable Tree',
   url: 'https://github.com/fritz-c/react-sortable-tree',
+  showAddonPanel: false,
 });
 
 function loadStories() {

.storybook/webpack.config.js

@@ -3,7 +3,9 @@ import {
   SortableTreeWithoutDndContext as SortableTree,
   toggleExpandedForAll,
 } from '../../src/index';
-import styles from './stylesheets/app.scss';
+import './stylesheets/vendor/stylesheet.css';
+import './stylesheets/vendor/github-light.css';
+import './stylesheets/app.css';
 import '../shared/favicon/apple-touch-icon.png';
 import '../shared/favicon/favicon-16x16.png';
 import '../shared/favicon/favicon-32x32.png';
@@ -218,15 +220,15 @@ class App extends Component {
 
     return (
       <div>
-        <section className={styles['page-header']}>
-          <h1 className={styles['project-name']}>{projectName}</h1>
+        <section className="page-header">
+          <h1 className="project-name">{projectName}</h1>
 
-          <h2 className={styles['project-tagline']}>
+          <h2 className="project-tagline">
             Drag-and-drop sortable representation of hierarchical data
           </h2>
         </section>
 
-        <section className={styles['main-content']}>
+        <section className="main-content">
           <h3>Demo</h3>
           <button onClick={this.expandAll}>Expand All</button>
           <button onClick={this.collapseAll}>Collapse All</button>
@@ -318,13 +320,13 @@ class App extends Component {
           <a href={githubUrl}>Documentation on Github</a>
           <br />
           <a href="storybook/index.html">More examples on Storybook</a>
-          <footer className={styles['site-footer']}>
-            <span className={styles['site-footer-owner']}>
+          <footer className="site-footer">
+            <span className="site-footer-owner">
               <a href={githubUrl}>{projectName}</a> is maintained by{' '}
               <a href={authorUrl}>{authorName}</a>.
             </span>
 
-            <span className={styles['site-footer-credits']}>
+            <span className="site-footer-credits">
               This page was generated by{' '}
               <a href="https://pages.github.com">GitHub Pages</a> using the{' '}
               <a href="https://github.com/jasonlong/cayman-theme">

README.md

@@ -1,6 +1,3 @@
-@import './vendor/stylesheet';
-@import './vendor/github-light';
-
 .page-header {
   padding: 1rem 6rem;
 }
@@ -17,10 +14,12 @@ body {
 /**
  * Uncomment to simulate bootstrap environment
  */
-// html {
-//     box-sizing: border-box;
-// }
+/*
+html {
+    box-sizing: border-box;
+}
 
-// *, *::before, *::after {
-//     box-sizing: inherit;
-// }
+*, *::before, *::after {
+    box-sizing: inherit;
+}
+*/

examples/basic-example/app.js

@@ -15,30 +15,30 @@
 
 */
 
-.pl-c /* comment */ {
+.pl-c {
   color: #969896;
 }
 
 .pl-c1      /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */,
-.pl-s .pl-v /* string variable */ {
+.pl-s .pl-v {
   color: #0086b3;
 }
 
 .pl-e  /* entity */,
-.pl-en /* entity.name */ {
+.pl-en {
   color: #795da3;
 }
 
 .pl-s .pl-s1 /* string source */,
-.pl-smi      /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ {
+.pl-smi {
   color: #333;
 }
 
-.pl-ent /* entity.name.tag */ {
+.pl-ent {
   color: #63a35c;
 }
 
-.pl-k /* keyword, storage, storage.type */ {
+.pl-k {
   color: #a71d5d;
 }
 
@@ -48,69 +48,68 @@
 .pl-sr               /* string.regexp */,
 .pl-sr .pl-cce       /* string.regexp constant.character.escape */,
 .pl-sr .pl-sra       /* string.regexp string.regexp.arbitrary-repitition */,
-.pl-sr .pl-sre       /* string.regexp source.ruby.embedded */ {
+.pl-sr .pl-sre {
   color: #183691;
 }
 
-.pl-v /* variable */ {
+.pl-v {
   color: #ed6a43;
 }
 
-.pl-id /* invalid.deprecated */ {
+.pl-id {
   color: #b52a1d;
 }
 
-.pl-ii /* invalid.illegal */ {
+.pl-ii {
   background-color: #b52a1d;
   color: #f8f8f8;
 }
 
-.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
+.pl-sr .pl-cce {
   color: #63a35c;
   font-weight: bold;
 }
 
-.pl-ml /* markup.list */ {
+.pl-ml {
   color: #693a17;
 }
 
 .pl-mh        /* markup.heading */,
 .pl-mh .pl-en /* markup.heading entity.name */,
-.pl-ms        /* meta.separator */ {
+.pl-ms {
   color: #1d3e81;
   font-weight: bold;
 }
 
-.pl-mq /* markup.quote */ {
+.pl-mq {
   color: #008080;
 }
 
-.pl-mi /* markup.italic */ {
+.pl-mi {
   color: #333;
   font-style: italic;
 }
 
-.pl-mb /* markup.bold */ {
+.pl-mb {
   color: #333;
   font-weight: bold;
 }
 
-.pl-md /* markup.deleted, meta.diff.header.from-file */ {
+.pl-md {
   background-color: #ffecec;
   color: #bd2c00;
 }
 
-.pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
+.pl-mi1 {
   background-color: #eaffea;
   color: #55a532;
 }
 
-.pl-mdr /* meta.diff.range */ {
+.pl-mdr {
   color: #795da3;
   font-weight: bold;
 }
 
-.pl-mo /* meta.output */ {
+.pl-mo {
   color: #1d3e81;
 }
-