fix: Use dir attribute from documentElement (#304)

packages/css-in-js/src/transpile/border-radius.spec.ts

@@ -11,7 +11,7 @@ describe('border-start-start-radius', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-start-start-radius: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-top-left-radius:inherit;}[dir=rtl] div{border-top-right-radius:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-top-left-radius:inherit;}[dir=rtl] div{border-top-right-radius:inherit;}');
   });
 });
 
@@ -26,7 +26,7 @@ describe('border-start-end-radius', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-start-end-radius: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-top-right-radius:inherit;}[dir=rtl] div{border-top-left-radius:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-top-right-radius:inherit;}[dir=rtl] div{border-top-left-radius:inherit;}');
   });
 });
 
@@ -41,7 +41,7 @@ describe('border-end-start-radius', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-end-start-radius: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-bottom-left-radius:inherit;}[dir=rtl] div{border-bottom-right-radius:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-bottom-left-radius:inherit;}[dir=rtl] div{border-bottom-right-radius:inherit;}');
   });
 });
 
@@ -56,6 +56,6 @@ describe('border-end-end-radius', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-end-end-radius: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-bottom-right-radius:inherit;}[dir=rtl] div{border-bottom-left-radius:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-bottom-right-radius:inherit;}[dir=rtl] div{border-bottom-left-radius:inherit;}');
   });
 });

packages/css-in-js/src/transpile/border.spec.ts

@@ -19,7 +19,7 @@ describe('border-inline', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-left:inherit;border-right:inherit;}[dir=rtl] div{border-right:inherit;border-left:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-left:inherit;border-right:inherit;}[dir=rtl] div{border-right:inherit;border-left:inherit;}');
   });
 });
 
@@ -34,7 +34,7 @@ describe('border-inline-start', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline-start: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-left:inherit;}[dir=rtl] div{border-right:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-left:inherit;}[dir=rtl] div{border-right:inherit;}');
   });
 });
 
@@ -49,7 +49,7 @@ describe('border-inline-end', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline-end: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-right:inherit;}[dir=rtl] div{border-left:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-right:inherit;}[dir=rtl] div{border-left:inherit;}');
   });
 });
 
@@ -125,7 +125,7 @@ describe('border-inline-width', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline-width: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-left-width:inherit;border-right-width:inherit;}[dir=rtl] div{border-right-width:inherit;border-left-width:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-left-width:inherit;border-right-width:inherit;}[dir=rtl] div{border-right-width:inherit;border-left-width:inherit;}');
   });
 });
 
@@ -140,7 +140,7 @@ describe('border-inline-start-width', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline-start-width: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-left-width:inherit;}[dir=rtl] div{border-right-width:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-left-width:inherit;}[dir=rtl] div{border-right-width:inherit;}');
   });
 });
 
@@ -155,7 +155,7 @@ describe('border-inline-end-width', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline-end-width: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-right-width:inherit;}[dir=rtl] div{border-left-width:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-right-width:inherit;}[dir=rtl] div{border-left-width:inherit;}');
   });
 });
 
@@ -231,7 +231,7 @@ describe('border-inline-style', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline-style: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-left-style:inherit;border-right-style:inherit;}[dir=rtl] div{border-right-style:inherit;border-left-style:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-left-style:inherit;border-right-style:inherit;}[dir=rtl] div{border-right-style:inherit;border-left-style:inherit;}');
   });
 });
 
@@ -246,7 +246,7 @@ describe('border-inline-start-style', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline-start-style: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-left-style:inherit;}[dir=rtl] div{border-right-style:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-left-style:inherit;}[dir=rtl] div{border-right-style:inherit;}');
   });
 });
 
@@ -261,7 +261,7 @@ describe('border-inline-end-style', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline-end-style: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-right-style:inherit;}[dir=rtl] div{border-left-style:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-right-style:inherit;}[dir=rtl] div{border-left-style:inherit;}');
   });
 });
 
@@ -337,7 +337,7 @@ describe('border-inline-color', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline-color: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-left-color:inherit;border-right-color:inherit;}[dir=rtl] div{border-right-color:inherit;border-left-color:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-left-color:inherit;border-right-color:inherit;}[dir=rtl] div{border-right-color:inherit;border-left-color:inherit;}');
   });
 });
 
@@ -352,7 +352,7 @@ describe('border-inline-start-color', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline-start-color: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-left-color:inherit;}[dir=rtl] div{border-right-color:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-left-color:inherit;}[dir=rtl] div{border-right-color:inherit;}');
   });
 });
 
@@ -367,7 +367,7 @@ describe('border-inline-end-color', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'border-inline-end-color: inherit;'))
-      .toBe('*:not([dir=rtl]) div{border-right-color:inherit;}[dir=rtl] div{border-left-color:inherit;}');
+      .toBe('html:not([dir=rtl]) div{border-right-color:inherit;}[dir=rtl] div{border-left-color:inherit;}');
   });
 });
 

packages/css-in-js/src/transpile/inset.spec.ts

@@ -25,7 +25,7 @@ describe('inset', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'inset: inherit;'))
-      .toBe('*:not([dir=rtl]) div{left:inherit;top:inherit;right:inherit;bottom:inherit;}[dir=rtl] div{right:inherit;top:inherit;left:inherit;bottom:inherit;}');
+      .toBe('html:not([dir=rtl]) div{left:inherit;top:inherit;right:inherit;bottom:inherit;}[dir=rtl] div{right:inherit;top:inherit;left:inherit;bottom:inherit;}');
   });
 });
 
@@ -48,7 +48,7 @@ describe('inset-inline', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'inset-inline: inherit;'))
-      .toBe('*:not([dir=rtl]) div{left:inherit;right:inherit;}[dir=rtl] div{right:inherit;left:inherit;}');
+      .toBe('html:not([dir=rtl]) div{left:inherit;right:inherit;}[dir=rtl] div{right:inherit;left:inherit;}');
   });
 });
 
@@ -63,7 +63,7 @@ describe('inset-inline-start', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'inset-inline-start: inherit;'))
-      .toBe('*:not([dir=rtl]) div{left:inherit;}[dir=rtl] div{right:inherit;}');
+      .toBe('html:not([dir=rtl]) div{left:inherit;}[dir=rtl] div{right:inherit;}');
   });
 });
 
@@ -78,7 +78,7 @@ describe('inset-inline-end', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'inset-inline-end: inherit;'))
-      .toBe('*:not([dir=rtl]) div{right:inherit;}[dir=rtl] div{left:inherit;}');
+      .toBe('html:not([dir=rtl]) div{right:inherit;}[dir=rtl] div{left:inherit;}');
   });
 });
 

packages/css-in-js/src/transpile/logicalProperties.ts

@@ -27,7 +27,7 @@ export const createLogicalPropertiesPlugin = (options: LogicalPropertiesOptions)
       const ltrFn = (value: string): string => ltr.map((property) => `${ property }:${ value }`).join(';');
       const rtlFn = (value: string): string => rtl.map((property) => `${ property }:${ value }`).join(';');
 
-      buffer += `*:not([dir=rtl]) ${ selectors.join(',') }{${ ltrFn(value) };}`
+      buffer += `html:not([dir=rtl]) ${ selectors.join(',') }{${ ltrFn(value) };}`
         + `[dir=rtl] ${ selectors.join(',') }{${ rtlFn(value) };}`;
 
       return '';

packages/css-in-js/src/transpile/margin.spec.ts

@@ -17,7 +17,7 @@ describe('margin-inline', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'margin-inline: inherit;'))
-      .toBe('*:not([dir=rtl]) div{margin-left:inherit;margin-right:inherit;}[dir=rtl] div{margin-right:inherit;margin-left:inherit;}');
+      .toBe('html:not([dir=rtl]) div{margin-left:inherit;margin-right:inherit;}[dir=rtl] div{margin-right:inherit;margin-left:inherit;}');
   });
 });
 
@@ -31,7 +31,7 @@ describe('margin-inline-start', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'margin-inline-start: inherit;'))
-      .toBe('*:not([dir=rtl]) div{margin-left:inherit;}[dir=rtl] div{margin-right:inherit;}');
+      .toBe('html:not([dir=rtl]) div{margin-left:inherit;}[dir=rtl] div{margin-right:inherit;}');
   });
 });
 
@@ -45,7 +45,7 @@ describe('margin-inline-end', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'margin-inline-end: inherit;'))
-      .toBe('*:not([dir=rtl]) div{margin-right:inherit;}[dir=rtl] div{margin-left:inherit;}');
+      .toBe('html:not([dir=rtl]) div{margin-right:inherit;}[dir=rtl] div{margin-left:inherit;}');
   });
 });
 

packages/css-in-js/src/transpile/padding.spec.ts

@@ -17,7 +17,7 @@ describe('padding-inline', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'padding-inline: inherit;'))
-      .toBe('*:not([dir=rtl]) div{padding-left:inherit;padding-right:inherit;}[dir=rtl] div{padding-right:inherit;padding-left:inherit;}');
+      .toBe('html:not([dir=rtl]) div{padding-left:inherit;padding-right:inherit;}[dir=rtl] div{padding-right:inherit;padding-left:inherit;}');
   });
 });
 
@@ -31,7 +31,7 @@ describe('padding-inline-start', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'padding-inline-start: inherit;'))
-      .toBe('*:not([dir=rtl]) div{padding-left:inherit;}[dir=rtl] div{padding-right:inherit;}');
+      .toBe('html:not([dir=rtl]) div{padding-left:inherit;}[dir=rtl] div{padding-right:inherit;}');
   });
 });
 
@@ -45,7 +45,7 @@ describe('padding-inline-end', () => {
 
   it('fallbacks', () => {
     expect(transpile('div', 'padding-inline-end: inherit;'))
-      .toBe('*:not([dir=rtl]) div{padding-right:inherit;}[dir=rtl] div{padding-left:inherit;}');
+      .toBe('html:not([dir=rtl]) div{padding-right:inherit;}[dir=rtl] div{padding-left:inherit;}');
   });
 });
 

packages/fuselage/src/components/Margins/spec.js

@@ -16,8 +16,5 @@ it('patches non-`Box` children', () => {
   </Margins>, root);
 
   const div = root.firstChild;
-  expect(getComputedStyle(div).marginLeft).toBe('10px');
-  expect(getComputedStyle(div).marginTop).toBe('10px');
-  expect(getComputedStyle(div).marginRight).toBe('10px');
-  expect(getComputedStyle(div).marginBottom).toBe('10px');
+  expect(div.className).not.toBeFalsy();
 });