search

NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.87k stars 3.94k forks source link

Implement CSS logical properties in style sheets #8282

Open ParsaArvanehPA opened 11 months ago

ParsaArvanehPA commented 11 months ago

What problem does this feature solve?

• A separate CSS file for RTL support is not required, which reduces the code size.

• The consistency between LTR and RTL views is ensured, regardless of the developer's attention to RTL view.

• A more modern syntax is adopted, as suitable for a library such as Ng zorro.

What does the proposed API look like?

The following is a comprehensive list of CSS logical properties.

To support the proposed syntax, the following steps are required: • Refactor all the usage of CSS physical properties to logical properties

• Remove most of the .rtl files, as they are redundant

• Add Stylelint to enforce the proposed syntax for all developers

• Adjust the current merger pipe in GitHub to accommodate Stylelint

For more information on logical properties, please refer to this article.

Browser support for logical properties is great. According to the documentation, ng-zorro supports the latest two versions of each browser, so there should be no compatibility issues.

ParsaArvanehPA commented 11 months ago

@HyperLife1119 @OriginRing @Nicoss54 @simplejason If you guys are okay with this issue, I can start working on it.

HyperLife1119 commented 11 months ago

We can't change the style at will, because zorro's styles are synchronized from ant design. For zorro's private/custom styles, we will write them to patch.less.

We can of course add stylelint, just make sure the lint configuration is the same as ant design v4, this can make it easier for us to synchronize/review ant design styles.

You can look at #8162 and you can see that zorro uses a script to keep in sync with the ant design styles.

ParsaArvanehPA commented 11 months ago

We can't change the style at will, because zorro's styles are synchronized from ant design. For zorro's private/custom styles, we will write them to patch.less.

We can of course add stylelint, just make sure the lint configuration is the same as ant design v4, this can make it easier for us to synchronize/review ant design styles.

You can look at #8162 and you can see that zorro uses a script to keep in sync with the ant design styles.

Oh that's very interesting :)

Alright then I will add stylelint with the same configs as ant design v4