Added additional sandboxing function to account for styles applied to…

… html and body.
NoDivide · Jan 20, 2017 · 895540b · 895540b
1 parent 32e4788
commit 895540b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/_template/app/js/main.js b/_template/app/js/main.js
@@ -431,7 +431,17 @@ var Astrum = new Vue({
                     output;
 
                 output = postcss().use(prefixer({
-                    prefix: '.ndpl-component__sample'
+                    prefix: '.ndpl-component__sample',
+
+                    transform: function (prefix, selector, prefixedSelector) {
+                        if (selector === 'html') {
+                            return prefix + ' .html';
+                        } else if (selector === 'body') {
+                            return prefix + ' .body';
+                        } else {
+                            return prefixedSelector;
+                        }
+                    }
                 })).process(_this.styles).css;
 
                 // Inject inline styles for Astrum theme override.

diff --git a/_template/app/js/main.min.js b/_template/app/js/main.min.js
diff --git a/_template/index.html b/_template/index.html
@@ -215,8 +215,11 @@ <h3 class="ndpl-component__title">{{ component.title }}</h3>
                                                             'ndpl-component__sample--disabled-code': component.options.disable_code_sample
                                                          }"
                                                          :style="inline_styles"
-                                                         v-if="component.html"
-                                                         v-html="component.html">
+                                                         v-if="component.html">
+                                                        <div class="html">
+                                                            <div class="body" v-html="component.html">
+                                                            </div>
+                                                        </div>
                                                     </div>
 
                                                     <template v-if="component.html">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "astrum",
-  "version": "2.0.0-rc.4",
+  "version": "2.0.0-rc.5",
   "description": "A lightweight pattern library designed to be included with any web project.",
   "main": "./manager/astrum.js",
   "scripts": {