Use logical instead of physical block margins

.changeset/nice-flowers-burn.md

@@ -0,0 +1,41 @@
+---
+'@capsizecss/core': major
+---
+
+Use logical instead of physical block margins
+
+Support different [writing-modes], e.g.`writing-mode: vertical-lr;` by adopting logical block margins in favour of the explicit physical margins.
+
+### BREAKING CHANGE:
+
+#### Browser support
+
+The switch to logical block margins means that browsers from before 2019 will likely not understand the property resulting in no trim. We think it's a valid trade off at this time, get in touch if you disagree.
+
+See [caniuse] for more details on when the different browsers added support.
+
+#### API Change
+
+TL;DR If you are using the object returned from `createStyleObject` as a passthrough without interrogating it's properties, there is no API break!
+
+Given the change to the CSS properties of the pseudo elements (i.e. `marginTop` to `marginBlockStart` and `marginBottom` to `marginBlockEnd`), any consumer of `createStyleObject` that is interrogating the style object may need to update their usage:
+
+```diff
+import { createStyleObject } from '@capsizecss/core';
+
+const capsizeStyles = createStyleObject(...);
+
+// Any access to the CSS properties on the return pseudo elements should be updated
+- capsizeStyles.['::before'].marginBottom
++ capsizeStyles.['::before'].marginBlockEnd
+
+- capsizeStyles.['::after'].marginTop
++ capsizeStyles.['::after'].marginBlockStart
+```
+
+See [margin-block-start] and [margin-block-end] documentation on MDN for more details.
+
+[caniuse]: https://caniuse.com/mdn-css_properties_margin-block-end
+[margin-block-start]: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start
+[margin-block-end]: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end
+[writing-modes]: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

packages/core/src/createStyleObject.test.ts

@@ -20,12 +20,12 @@ describe('createStyleObject', () => {
         "::after": {
           "content": "''",
           "display": "table",
-          "marginTop": "-0.2626em",
+          "marginBlockStart": "-0.2626em",
         },
         "::before": {
           "content": "''",
           "display": "table",
-          "marginBottom": "-0.2753em",
+          "marginBlockEnd": "-0.2753em",
         },
         "fontSize": "150px",
         "lineHeight": "180px",
@@ -43,12 +43,12 @@ describe('createStyleObject', () => {
         "::after": {
           "content": "''",
           "display": "table",
-          "marginTop": "-0.2375em",
+          "marginBlockStart": "-0.2375em",
         },
         "::before": {
           "content": "''",
           "display": "table",
-          "marginBottom": "-0.2502em",
+          "marginBlockEnd": "-0.2502em",
         },
         "fontSize": "150px",
         "lineHeight": "normal",
@@ -68,12 +68,12 @@ describe('createStyleObject', () => {
         "::after": {
           "content": "''",
           "display": "table",
-          "marginTop": "-0.2626em",
+          "marginBlockStart": "-0.2626em",
         },
         "::before": {
           "content": "''",
           "display": "table",
-          "marginBottom": "-0.2753em",
+          "marginBlockEnd": "-0.2753em",
         },
         "fontSize": "150px",
         "lineHeight": "180px",

packages/core/src/createStyleObject.ts

@@ -12,12 +12,12 @@ const _createStyleObject = ({
     lineHeight,
     '::before': {
       content: "''",
-      marginBottom: capHeightTrim,
+      marginBlockEnd: capHeightTrim,
       display: 'table',
     },
     '::after': {
       content: "''",
-      marginTop: baselineTrim,
+      marginBlockStart: baselineTrim,
       display: 'table',
     },
   };

packages/core/src/createStyleString.test.ts

@@ -22,13 +22,13 @@ describe('createStyleString', () => {
 
       .testClassName::before {
         content: "";
-        margin-bottom: -0.2753em;
+        margin-block-end: -0.2753em;
         display: table;
       }
 
       .testClassName::after {
         content: "";
-        margin-top: -0.2626em;
+        margin-block-start: -0.2626em;
         display: table;
       }"
     `);
@@ -50,13 +50,13 @@ describe('createStyleString', () => {
 
       .testClassName::before {
         content: "";
-        margin-bottom: -0.2753em;
+        margin-block-end: -0.2753em;
         display: table;
       }
 
       .testClassName::after {
         content: "";
-        margin-top: -0.2626em;
+        margin-block-start: -0.2626em;
         display: table;
       }"
     `);

site/src/components/Preview.tsx

@@ -91,7 +91,7 @@ const Preview = () => {
             backgroundSize: `100% ${resolvedCapHeightFromFontSize + lineGap}px`,
             backgroundPosition: `0 calc((${
               (resolvedCapHeightFromFontSize + lineGap - lineHeightNormal) / 2
-            }px) + ${capsizeStyles?.['::before'].marginBottom})`,
+            }px) + ${capsizeStyles?.['::before'].marginBlockEnd})`,
           }
         : {
             ...highlightGradient(
@@ -100,7 +100,7 @@ const Preview = () => {
             ),
             backgroundPosition: `0 calc((${
               (leading - lineHeightNormal) / 2
-            }px) + ${capsizeStyles?.['::before'].marginBottom})`,
+            }px) + ${capsizeStyles?.['::before'].marginBlockEnd})`,
           },
     leading: {
       backgroundImage: `linear-gradient(180deg, transparent ${leading}px, ${highlight} ${leading}px, ${highlight} ${