refactor: eliminate sass from the build

Author: fritz-c

examples/basic-example/app.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">

examples/basic-example/stylesheets/app.scss renamed to examples/basic-example/stylesheets/app.css

@@ -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/stylesheets/vendor/github-light.css

@@ -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;
 }
-

examples/basic-example/stylesheets/vendor/stylesheet.css

@@ -12,123 +12,169 @@ body {
   border-style: solid;
   border-width: 1px;
   border-radius: 0.3rem;
-  transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
-  .btn + .btn {
-    margin-left: 1rem; }
+  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
+}
+.btn + .btn {
+  margin-left: 1rem;
+}
 
 .btn:hover {
   color: rgba(255, 255, 255, 0.8);
   text-decoration: none;
   background-color: rgba(255, 255, 255, 0.2);
-  border-color: rgba(255, 255, 255, 0.3); }
+  border-color: rgba(255, 255, 255, 0.3);
+}
 
 @media screen and (min-width: 64em) {
   .btn {
-    padding: 0.75rem 1rem; } }
+    padding: 0.75rem 1rem;
+  }
+}
 
 @media screen and (min-width: 42em) and (max-width: 64em) {
   .btn {
     padding: 0.6rem 0.9rem;
-    font-size: 0.9rem; } }
+    font-size: 0.9rem;
+  }
+}
 
 @media screen and (max-width: 42em) {
   .btn {
     display: block;
     width: 100%;
     padding: 0.75rem;
-    font-size: 0.9rem; }
-    .btn + .btn {
-      margin-top: 1rem;
-      margin-left: 0; } }
+    font-size: 0.9rem;
+  }
+  .btn + .btn {
+    margin-top: 1rem;
+    margin-left: 0;
+  }
+}
 
 .page-header {
   color: #fff;
   text-align: center;
   background-color: #159957;
-  background-image: linear-gradient(120deg, #155799, #159957); }
+  background-image: linear-gradient(120deg, #155799, #159957);
+}
 
 @media screen and (min-width: 64em) {
   .page-header {
-    padding: 5rem 6rem; } }
+    padding: 5rem 6rem;
+  }
+}
 
 @media screen and (min-width: 42em) and (max-width: 64em) {
   .page-header {
-    padding: 3rem 4rem; } }
+    padding: 3rem 4rem;
+  }
+}
 
 @media screen and (max-width: 42em) {
   .page-header {
-    padding: 2rem 1rem; } }
+    padding: 2rem 1rem;
+  }
+}
 
 .project-name {
   margin-top: 0;
-  margin-bottom: 0.1rem; }
+  margin-bottom: 0.1rem;
+}
 
 @media screen and (min-width: 64em) {
   .project-name {
-    font-size: 3.25rem; } }
+    font-size: 3.25rem;
+  }
+}
 
 @media screen and (min-width: 42em) and (max-width: 64em) {
   .project-name {
-    font-size: 2.25rem; } }
+    font-size: 2.25rem;
+  }
+}
 
 @media screen and (max-width: 42em) {
   .project-name {
-    font-size: 1.75rem; } }
+    font-size: 1.75rem;
+  }
+}
 
 .project-tagline {
   margin-bottom: 2rem;
   font-weight: normal;
-  opacity: 0.7; }
+  opacity: 0.7;
+}
 
 @media screen and (min-width: 64em) {
   .project-tagline {
-    font-size: 1.25rem; } }
+    font-size: 1.25rem;
+  }
+}
 
 @media screen and (min-width: 42em) and (max-width: 64em) {
   .project-tagline {
-    font-size: 1.15rem; } }
+    font-size: 1.15rem;
+  }
+}
 
 @media screen and (max-width: 42em) {
   .project-tagline {
-    font-size: 1rem; } }
+    font-size: 1rem;
+  }
+}
 
 @media screen and (min-width: 64em) {
   .main-content {
     max-width: 64rem;
     padding: 2rem 6rem;
     margin: 0 auto;
-    font-size: 1.1rem; } }
+    font-size: 1.1rem;
+  }
+}
 
 @media screen and (min-width: 42em) and (max-width: 64em) {
   .main-content {
     padding: 2rem 4rem;
-    font-size: 1.1rem; } }
+    font-size: 1.1rem;
+  }
+}
 
 @media screen and (max-width: 42em) {
   .main-content {
     padding: 2rem 1rem;
-    font-size: 1rem; } }
+    font-size: 1rem;
+  }
+}
 
 .site-footer {
   padding-top: 2rem;
   margin-top: 2rem;
-  border-top: solid 1px #eff0f1; }
+  border-top: solid 1px #eff0f1;
+}
 
 .site-footer-owner {
   display: block;
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .site-footer-credits {
-  color: #819198; }
+  color: #819198;
+}
 
 @media screen and (min-width: 64em) {
   .site-footer {
-    font-size: 1rem; } }
+    font-size: 1rem;
+  }
+}
 
 @media screen and (min-width: 42em) and (max-width: 64em) {
   .site-footer {
-    font-size: 1rem; } }
+    font-size: 1rem;
+  }
+}
 
 @media screen and (max-width: 42em) {
   .site-footer {
-    font-size: 0.9rem; } }
+    font-size: 0.9rem;
+  }
+}