breakin-ish: rename noCssTransform to noCSSTransform and add noCssTra…

…nsform alias - fixes #3273
ractivejs · Oct 15, 2018 · 898013f · 898013f
1 parent 34db700
commit 898013f
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/src/Ractive/config/custom/css/css.js b/src/Ractive/config/custom/css/css.js
@@ -92,7 +92,9 @@ export function initCSS(options, target, proto) {
     css = evalCSS(target, css);
   }
 
-  const def = { transform: !options.noCssTransform };
+  const def = {
+    transform: 'noCSSTransform' in options ? !options.noCSSTransform : !options.noCssTransform
+  };
 
   defineProperty(target, '_cssDef', { configurable: true, value: def });
 

diff --git a/src/Ractive/config/defaults.js b/src/Ractive/config/defaults.js
@@ -44,5 +44,5 @@ export default {
 
   // css:
   css: null,
-  noCssTransform: false
+  noCSSTransform: false
 };
diff --git a/tests/browser/init/config.js b/tests/browser/init/config.js
@@ -36,7 +36,7 @@ export default function() {
       'complete',
       'nestedTransitions',
       'css',
-      'noCssTransform'
+      'noCSSTransform'
     ];
 
     const actualDefaults = expectedDefaults.filter(key => Ractive.defaults.hasOwnProperty(key));
@@ -62,7 +62,7 @@ export default function() {
       'isolated',
       'lazy',
       'nestedTransitions',
-      'noCssTransform',
+      'noCSSTransform',
       'noIntro',
       'noOutro',
       'preserveWhitespace',

diff --git a/tests/browser/render/css.js b/tests/browser/render/css.js
@@ -71,7 +71,7 @@ export default function() {
     const Widget = Ractive.extend({
       template: '<p class="unencapsulated">red</p>',
       css: '.unencapsulated { color: red; }',
-      noCssTransform: true
+      noCSSTransform: true
     });
 
     const ractive = new Ractive({
@@ -89,6 +89,30 @@ export default function() {
     ractive.teardown().then(done);
   });
 
+  test('CSS encapsulation transformation is optional with old noCssTransform', t => {
+    const done = t.async();
+
+    const Widget = Ractive.extend({
+      template: '<p class="unencapsulated2">green</p>',
+      css: '.unencapsulated2 { color: green; }',
+      noCssTransform: true
+    });
+
+    const ractive = new Ractive({
+      el: fixture,
+      template: '<p class="unencapsulated2">green</p><Widget/>',
+      components: { Widget }
+    });
+
+    const paragraphs = ractive.findAll('p');
+
+    t.equal(getHexColor(paragraphs[0]), hexCodes.green);
+    t.equal(getHexColor(paragraphs[1]), hexCodes.green);
+
+    // we need to clean up after ourselves otherwise the global styles remain in the DOM!
+    ractive.teardown().then(done);
+  });
+
   test('Comments do not break transformed CSS', t => {
     const Widget = Ractive.extend({
       template: '<p>foo</p>',