MohammadYounes / rtlcss

Framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)
https://rtlcss.com
MIT License
1.68k stars 129 forks source link

Add aliases option #223

Closed elchininet closed 3 years ago

elchininet commented 3 years ago

In this moment, if a variable contains a value that should be flipped in RTL, it is ignored, for example:

input

:root {
    --small-padding: 2px 5px 2px 10px;
}

.rule {
    padding: var(--small-padding);
}

output

:root {
    --small-padding: 2px 5px 2px 10px;
}

.rule {
    padding: var(--small-padding);
}

The purpose of this pull request is to create a configuration object to hold property-name aliases and in this way treat the values of those properties as the values of others:

input

/*rtl:options:
{
    "aliases": {
        "--small-padding": "padding"
    }
}*/
:root {
    --small-padding: 2px 5px 2px 10px;
}

.rule {
    padding: var(--small-padding);
}

output

:root {
    --small-padding: 2px 10px 2px 5px;
}

.rule {
    padding: var(--small-padding);
}
MohammadYounes commented 3 years ago

@elchininet Apologies for the late response. Great idea! which would help greatly in producing correct variables in RTL mode.

Hopefully I can release within the coming days. Thanks!

elchininet commented 3 years ago

Hi @MohammadYounes, Do not worry, thanks for everything. Regards!