Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Mar 3, 2025

Conversation

makhnatkin
Copy link
Contributor

@makhnatkin makhnatkin commented Feb 24, 2025

This PR modifies src/scss/_common.scss to add CSS variables, enabling customizable margins for consistent Markdown list styling.

PostCSS settings

The build was updated in postcssPresetEnv to use this configuration:

postcssPresetEnv({
    stage: 0,
    features: {
        'logical-properties-and-values': false,
    },
}),

This disables logical properties processing (see postcss-logical) to preserve the original variable values.

New CSS Variables

The table below lists the four new CSS variables, their purposes, and default values:

Variable Name Purpose Default Value
--yfm-text-block-margin-block Sets vertical margins for text blocks (e.g., p, blockquote, ul, ol, dl, table, pre) 0 15px
--yfm-list-item-margin-block Defines vertical margins between list items (li + li) 0.33em 0
--yfm-list-text-margin-block Controls vertical margins for text elements (p, blockquote) within list items 15px
--yfm-list-text-last-margin-block Adjusts vertical margins for the last text element (p, blockquote) in a list item 15px

Customization Example

These variables can be overridden in CSS for flexibility. It ensures uniform rendering and removes the bottom margin of the last paragraph in list items. Fixes #649

:root {
    --yfm-text-block-margin-block: 15px 0;
    --yfm-list-text-last-margin-block: 0;
}

Before

default-lists

After

consistent-lists

@makhnatkin makhnatkin requested review from d3m1d0v, shevnv and 3y3 February 24, 2025 09:50
@makhnatkin makhnatkin changed the title fix(styles): added flexible customization of indents in lists feat(styles): added flexible customization of indents in lists Feb 26, 2025
@makhnatkin makhnatkin merged commit dd4d488 into master Mar 3, 2025
1 check passed
@makhnatkin makhnatkin deleted the fix/list-styles branch March 3, 2025 09:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Customizing List Styles for Consistent Rendering
3 participants