feat(styles): added flexible customization of indents in lists (#648)

diplodoc-platform · Mar 3, 2025 · dd4d488 · dd4d488
1 parent 9dc8836
commit dd4d488
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -88,6 +88,7 @@ MIT
 - `--yfm-color-border`
 - `--yfm-color-accent`
 - `--yfm-tab-size`
+- `--yfm-text-block-margin-block`
 
 **code**
 
@@ -138,3 +139,9 @@ MIT
 
 - `--yfm-file-icon`
 - `--yfm-file-icon-color`
+
+**list**
+
+- `--yfm-list-item-margin-block`
+- `--yfm-list-text-margin-block`
+- `--yfm-list-text-last-margin-block`
diff --git a/README.ru.md b/README.ru.md
@@ -88,6 +88,7 @@ MIT
 - `--yfm-color-border`
 - `--yfm-color-accent`
 - `--yfm-tab-size`
+- `--yfm-text-block-margin-block`
 
 **code**
 
@@ -138,3 +139,9 @@ MIT
 
 - `--yfm-file-icon`
 - `--yfm-file-icon-color`
+
+**list**
+
+- `--yfm-list-item-margin-block`
+- `--yfm-list-text-margin-block`
+- `--yfm-list-text-last-margin-block`
diff --git a/playground/scripts/configs.mjs b/playground/scripts/configs.mjs
@@ -24,7 +24,12 @@ const configuredSassPlugin = sassPlugin({
 
         const res = await postcss([
             autoprefixer({cascade: false}),
-            postcssPresetEnv({stage: 0}),
+            postcssPresetEnv({
+                stage: 0,
+                features: {
+                    'logical-properties-and-values': false,
+                },
+            }),
         ]).process(source, config);
 
         return res.css;

diff --git a/scripts/package-build-configs.mjs b/scripts/package-build-configs.mjs
@@ -31,7 +31,12 @@ const plugins = [
         async transform(source) {
             const {css} = await postcss([
                 autoprefixer({cascade: false}),
-                postcssPresetEnv({stage: 0}),
+                postcssPresetEnv({
+                    stage: 0,
+                    features: {
+                        'logical-properties-and-values': false,
+                    },
+                }),
             ]).process(source, {from: undefined});
 
             return css;

diff --git a/src/scss/_common.scss b/src/scss/_common.scss
@@ -135,7 +135,7 @@
     dl,
     table,
     pre {
-        margin: 0 0 15px;
+        margin-block: var(--yfm-text-block-margin-block, 0 15px);
     }
 
     ul,
@@ -333,12 +333,17 @@
     }
 
     li + li {
-        margin-top: 0.33em;
+        margin-block: var(--yfm-list-item-margin-block, 0.33em 0);
     }
 
     li p,
     li blockquote {
-        margin-top: 15px;
+        margin-block: var(--yfm-list-text-margin-block, 15px);
+    }
+
+    li > p:last-child,
+    li > blockquote:last-child {
+        margin-block: var(--yfm-list-text-last-margin-block, 15px);
     }
 
     code {