Extract default style to css

Author: tohosaku

.gitignore

@@ -6,6 +6,7 @@
 /tests/codeceptjs/output
 .vscode
 .env
+/src/*.css.js
 /src/themes/*.css.js
 /src/editors/*.css.js
 /.vs

src/core.js

@@ -9,6 +9,7 @@ import { extend, getShadowParent, hasOwnProperty } from './utilities.js'
 import { AbstractEditor } from './editor'
 import { AbstractTheme } from './theme'
 import { AbstractIconLib } from './iconlib'
+import styleRules from './style.css.js'
 
 export class JSONEditor {
   constructor (element, options = {}) {
@@ -32,12 +33,17 @@ export class JSONEditor {
     // eslint-disable-next-line new-cap
     this.theme = new themeClass(this)
     const rules = extend(themeClass.rules, this.getEditorsRules())
+
+    /* Call addNewStyleRulesToShadowRoot if shadowRoot is found, otherwise call addNewStyleRules */
+    const addRules = (themeName, rules, shadowRoot) => shadowRoot
+      ? this.addNewStyleRulesToShadowRoot(themeName, rules, shadowRoot)
+      : this.addNewStyleRules(themeName, rules)
+
     if (!this.theme.options.disable_theme_rules) {
       /* Attempt to locate a shadowRoot parent (i.e. in Web Components) */
       const shadowRoot = getShadowParent(this.element)
-
-      /* Call addNewStyleRulesToShadowRoot if shadowRoot is found, otherwise call addNewStyleRules */
-      this[shadowRoot ? 'addNewStyleRulesToShadowRoot' : 'addNewStyleRules'](themeName, rules, shadowRoot)
+      addRules('default', styleRules, shadowRoot)
+      addRules(themeName, rules, shadowRoot)
     }
 
     /* Init icon class */
@@ -365,9 +371,11 @@ export class JSONEditor {
 
     const sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet
     const qualifier = this.element.nodeName.toLowerCase()
-
+    while (sheet.cssRules.length > 0) {
+      sheet.deleteRule(0)
+    }
     Object.keys(rules).forEach(selector => {
-      const sel = `${qualifier}[data-theme="${themeName}"] ${selector}`
+      const sel = themeName === 'default' ? selector : `${qualifier}[data-theme="${themeName}"] ${selector}`
 
       // all browsers, except IE before version 9
       if (sheet.insertRule) sheet.insertRule(sel + ' {' + decodeURIComponent(rules[selector]) + '}', 0)
@@ -381,7 +389,7 @@ export class JSONEditor {
     let cssText = ''
 
     Object.keys(rules).forEach(selector => {
-      const sel = `${qualifier}[data-theme="${themeName}"] ${selector}`
+      const sel = themeName === 'default' ? selector : `${qualifier}[data-theme="${themeName}"] ${selector}`
       cssText += sel + ' {' + decodeURIComponent(rules[selector]) + '}' + '\n'
     })
     const styleSheet = new CSSStyleSheet()

src/style.css

@@ -0,0 +1,150 @@
+.je-float-right-linkholder {
+  float: right;
+  margin-left: 10px;
+}
+
+.je-modal {
+  background-color: white;
+  border: 1px solid black;
+  box-shadow: 3px 3px black;
+  position: absolute;
+  z-index: 10;
+}
+
+.je-infobutton-icon {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 0.25rem;
+  position: relative;
+  display: inline-block;
+}
+
+.je-infobutton-tooltip {
+  font-size: 12px;
+  font-weight: normal;
+  font-family: sans-serif;
+  visibility: hidden;
+  background-color: rgba(50, 50, 50, 0.75);
+  margin: 0 0.25rem;
+  color: #fafafa;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  width: 20rem;
+  position: absolute;
+}
+
+.je-header {
+  display: inline-block
+}
+
+.je-upload-preview img {
+  float: left;
+  margin: 0 0.5rem 0.5rem 0;
+  max-width: 100%;
+  max-height: 5rem;
+}
+
+.je-checkbox {
+  display: inline-block;
+  width: auto
+}
+
+.je-checkbox-control--compact {
+  display: inline-block;
+  margin-right: 1rem
+}
+
+.je-radio {
+  display: inline-block;
+  width: auto
+}
+
+.je-radio-control--compact {
+  display: inline-block;
+  margin-right: 1rem
+}
+
+.je-switcher {
+  background-color: transparent;
+  display: inline-block;
+  font-style: italic;
+  font-weight: normal;
+  height: auto;
+  width: auto;
+  margin-bottom: 0;
+  margin-left: 5px;
+  padding: 0 0 0 3px;
+}
+
+.je-textarea {
+  width: 100%;
+  height: 300px;
+  box-sizing: border-box
+}
+
+.je-range-control {
+  text-align: center
+}
+
+.je-indented-panel {
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: 1px solid #ccc
+}
+
+.je-indented-panel--top {
+  padding-left: 10px;
+  margin-left: 10px;
+}
+
+.je-tabholder {
+  float: left;
+  width: 130px;
+}
+
+.je-tabholder .content {
+  margin-left: 120px;
+}
+
+.je-tabholder--top {
+  margin-left: 10px;
+}
+
+.je-tabholder--clear {
+  clear:both;
+}
+
+.je-tab {
+  border: 1px solid #ccc;
+  border-width: 1px 0 1px 1px;
+  text-align: center;
+  line-height: 30px;
+  border-radius: 5px;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  font-weight: bold;
+  cursor: pointer
+}
+
+.je-tab--top {
+  float: left;
+  border: 1px solid #ccc;
+  border-width: 1px 1px 0px 1px;
+  text-align: center;
+  line-height: 30px;
+  border-radius: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  font-weight: bold;
+  cursor: pointer
+}
+
+.je-block-link {
+  display: block
+}
+
+.je-media {
+  width: 100%
+}