From 683b71830396dd76bc505a3542234970bf511a63 Mon Sep 17 00:00:00 2001
From: Zach Rispoli <zach.rispoli@gmail.com>
Date: Tue, 18 Jul 2017 15:57:40 -0400
Subject: [PATCH] Fix CSS loader + Improve visual for code folding

---
 client/modules/IDE/components/Editor.jsx |  4 ++--
 client/styles/vendors/_codemirror.scss   | 28 ++++++++++++++++++++++++
 static/p5-interceptor                    |  2 +-
 webpack.config.dev.js                    |  4 ----
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index f7940d4b..e9d21d65 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -15,7 +15,6 @@ import 'codemirror/addon/fold/indent-fold';
 import 'codemirror/addon/comment/comment';
 import 'codemirror/keymap/sublime';
 import 'codemirror/addon/search/jump-to-line';
-import 'codemirror/addon/fold/foldgutter.css';
 import { JSHINT } from 'jshint';
 import { CSSLint } from 'csslint';
 import { HTMLHint } from 'htmlhint';
@@ -56,7 +55,8 @@ class Editor extends React.Component {
       lineWrapping: false,
       fixedGutter: false,
       foldGutter: true,
-      gutters: [/* 'CodeMirror-lint-markers', 'CodeMirror-linenumbers', */'CodeMirror-foldgutter'],
+      foldOptions: { widget: '\u2026' },
+      gutters: ['CodeMirror-foldgutter'],
       keyMap: 'sublime',
       lint: {
         onUpdateLinting: debounce((annotations) => {
diff --git a/client/styles/vendors/_codemirror.scss b/client/styles/vendors/_codemirror.scss
index 1cf66a9f..593db885 100644
--- a/client/styles/vendors/_codemirror.scss
+++ b/client/styles/vendors/_codemirror.scss
@@ -336,3 +336,31 @@ div.CodeMirror-dragcursors {
 
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
+
+/* CODE FOLDING (FOLDGUTTER.JS) */
+
+.CodeMirror-foldmarker {
+  color: #FFF;
+  background-color: rgba(237, 34, 93, 0.42);
+  border-radius: 3px;
+  font-weight: bold;
+  font-family: arial;
+  line-height: .3;
+  cursor: pointer;
+}
+.CodeMirror-foldgutter {
+  width: 2.7em;
+}
+.CodeMirror-foldgutter-open,
+.CodeMirror-foldgutter-folded {
+  cursor: pointer;
+  padding-bottom: 0.4em;
+  text-align: right;
+  line-height: 1.0;
+}
+.CodeMirror-foldgutter-open:after {
+  content: "\25BE";
+}
+.CodeMirror-foldgutter-folded:after {
+  content: "\25B8";
+}
diff --git a/static/p5-interceptor b/static/p5-interceptor
index 344fedf8..0958be54 160000
--- a/static/p5-interceptor
+++ b/static/p5-interceptor
@@ -1 +1 @@
-Subproject commit 344fedf8d868c62adc571bf4212c6bea3cd20247
+Subproject commit 0958be54482722821159cd3e07777988ee349f37
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index 5f5e2626..acb9f5e0 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -56,10 +56,6 @@ module.exports = {
         test: /\.scss$/,
         loaders: ['style', 'css', 'sass']
       },
-      { 
-        test: /\.css$/, 
-        loader: "style-loader!css-loader" 
-      },
       {
         test: /\.(svg|mp3)$/,
         loader: 'file'