[scripts/markdown2htmldoc] don't use CSS Logical Properties

This commit is contained in:
Dmytro Meleshko 2021-05-30 15:42:08 +03:00
parent ef606d6cd9
commit 74a20d6db2
2 changed files with 27 additions and 47 deletions

File diff suppressed because one or more lines are too long

View file

@ -13,20 +13,6 @@
// User-Agent stylesheets (<https://stackoverflow.com/a/6867287/12005228>): // User-Agent stylesheets (<https://stackoverflow.com/a/6867287/12005228>):
// Firefox: <https://searchfox.org/mozilla-central/source/layout/style/res/html.css> // Firefox: <https://searchfox.org/mozilla-central/source/layout/style/res/html.css>
// Chromium: <https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/html.css> // Chromium: <https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/html.css>
//
// NOTE: This stylesheet makes heavy use of the
// {margin,padding,border}-{inline,block}-{start,end} rules (apparently they
// are called CSS Logical Properties[5]), for two reasons:
//
// 1. Judging by MDN this might give us not only easy RTL support, but possibly
// even support for vertical text directions.
//
// 2. UA stylesheets also rely on those, so overrides of those end up being
// more explicit and are shown in the devtools correctly.
//
// 3. However, they have pretty bad cross-browser support at the moment, so TODO: remove.
//
// [5]: <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties>
@use 'sass:math'; @use 'sass:math';
@use 'sass:color'; @use 'sass:color';
@ -76,22 +62,13 @@ $paragraph-spacing: 1em;
@mixin cancel-out-child-margins { @mixin cancel-out-child-margins {
& > :first-child { & > :first-child {
margin-block-start: 0 !important; margin-top: 0 !important;
} }
& > :last-child { & > :last-child {
margin-block-end: 0 !important; margin-bottom: 0 !important;
} }
} }
// prettier-ignore
@mixin margin-block($margin) { margin-block-start: $margin; margin-block-end: $margin; }
// prettier-ignore
@mixin margin-inline($margin) { margin-inline-start: $margin; margin-inline-end: $margin; }
// prettier-ignore
@mixin padding-block($padding) { padding-block-start: $padding; padding-block-end: $padding; }
// prettier-ignore
@mixin padding-inline($padding) { padding-inline-start: $padding; padding-inline-end: $padding; }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// BASE STYLES // BASE STYLES
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss> // <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss>
@ -171,7 +148,8 @@ a {
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L37-L50> // <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L37-L50>
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L75-L82> // <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L75-L82>
hr { hr {
@include margin-block($paragraph-spacing * 1.5); margin-top: $paragraph-spacing * 1.5;
margin-bottom: $paragraph-spacing * 1.5;
border: border($width: 0.2em); border: border($width: 0.2em);
@include clearfix(); @include clearfix();
} }
@ -187,14 +165,16 @@ ul,
ol, ol,
pre, pre,
p { p {
@include margin-block($paragraph-spacing); margin-top: $paragraph-spacing;
margin-bottom: $paragraph-spacing;
} }
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L84-L98> // <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L84-L98>
blockquote { blockquote {
@include margin-inline(0); margin-left: 0;
padding-inline-start: 1em; margin-right: 0;
border-inline-start: border($width: 0.25em); padding-left: 1em;
border-left: border($width: 0.25em);
@include cancel-out-child-margins(); @include cancel-out-child-margins();
} }
@ -254,10 +234,10 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-block-start: $paragraph-spacing * 1.5; margin-top: $paragraph-spacing * 1.5;
margin-block-end: $paragraph-spacing * 1; margin-bottom: $paragraph-spacing * 1;
padding-block-end: 0.3em; padding-bottom: 0.3em;
border-block-end: border(); border-bottom: border();
// Make the headers less bold, the default font-weight is 700. // Make the headers less bold, the default font-weight is 700.
font-weight: 600; font-weight: 600;
line-height: $line-height-headings; line-height: $line-height-headings;
@ -331,8 +311,7 @@ pre {
// Inline code snippets. // Inline code snippets.
code { code {
@include padding-block(0.2em); padding: 0.2em 0.3em;
@include padding-inline(0.3em);
background-color: rgba(colorscheme.$base-03, 0.2); background-color: rgba(colorscheme.$base-03, 0.2);
border-radius: $border-radius; border-radius: $border-radius;
} }
@ -363,8 +342,7 @@ pre {
kbd { kbd {
display: inline-block; display: inline-block;
@include padding-block(0.2em); padding: 0.2em 0.3em;
@include padding-inline(0.3em);
vertical-align: bottom; vertical-align: bottom;
// The original stylesheet specifies both font-size and line-height in // The original stylesheet specifies both font-size and line-height in
@ -413,8 +391,7 @@ th {
td, td,
th { th {
@include padding-block(0.4em); padding: 0.4em 0.75em;
@include padding-inline(0.75em);
border: border(); border: border();
} }
@ -430,31 +407,34 @@ tr:nth-child(2n) {
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L5-L9> // <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L5-L9>
ol, ol,
ul { ul {
padding-inline-start: 2em; padding-left: 2em;
// Disable the "paragraph" margins for nested lists. // Disable the "paragraph" margins for nested lists.
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L17-L46> // <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L17-L46>
& & { & & {
@include margin-block(0); margin-top: 0;
margin-bottom: 0;
} }
} }
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L52-L54> // <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L52-L54>
li { li {
@include margin-block($paragraph-spacing * 0.25); margin-top: $paragraph-spacing * 0.25;
margin-bottom: $paragraph-spacing * 0.25;
} }
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L59-L65> // <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L59-L65>
dt { dt {
margin-block-start: $paragraph-spacing; margin-top: $paragraph-spacing;
font-weight: 600; font-weight: 600;
font-style: italic; font-style: italic;
} }
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L67-L70> // <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L67-L70>
dd { dd {
margin-block-end: $paragraph-spacing; margin-bottom: $paragraph-spacing;
margin-inline-start: 1em; margin-left: 0;
padding-left: 1em;
} }
// Apparently not available in Primer? Had to copy from the extracted // Apparently not available in Primer? Had to copy from the extracted