Contrib.social

Use CSS Logical Properties in files without [dir=]

Open on Drupal.org →
Created on 2 September 2024, 4 months ago
Updated 4 September 2024, 4 months ago

Problem/Motivation

A child of 📌 Enforce the use of CSS Logical Properties in core Needs work to do the simple conversions to using CSS Logical Properties. This will do so in CSS files that do not have a "[dir=]" or a ":dir()" rule.

Steps to reproduce

Proposed resolution

Enable logical properties and autofix.

$ cd core
$ grep --include=*.css -rL -e 'dir="rtl' -e ":dir(rtl" . | xargs yarn stylelint --fix
$ yarn build:css

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

📌 Task
Status

Needs review

Version

11.0 🔥

Component
CSS  →

Last updated 2 days ago

Created by

🇳🇿New Zealand quietone

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @quietone
  • Merge request !9393Use CSS Logical Properties in files without [dir=] → (Open) created by quietone
  • Status changed to Needs work 4 months ago
  • Comment 4 months ago →
    🇫🇷France nod_ Lille

    I think we need to exclude files that have :dir(rtl) as well, that gets translated by postcss into [dir=rtl], Seems way easier to review than the other MR, thanks!

  • Status changed to Needs review 4 months ago
  • Comment 4 months ago →
    🇫🇷France nod_ Lille
  • Comment 4 months ago →
    🇳🇿New Zealand quietone

    Came here to at least change the performance numbers but am pleased to see it has already happened.

  • Comment 4 months ago →
    🇫🇷France nod_ Lille
  • Status changed to Needs work 4 months ago
  • Comment 4 months ago →
    🇪🇸Spain ckrina Barcelona

    I'm all in with using logical properties everywhere. It makes things way easier to do style with modern CSS.

    I haven't looked thought all the code, but I've spotted a a small thing that desn't make a lot of sense:

    Example I'm referring to:

    Being removed: padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);

    Being added:

      padding-block: 0 var(--off-canvas-padding);
  padding-inline: var(--off-canvas-padding);

    I'd still prioritize the shorten version of a property on top of the logical one separated because the shorten includes the logical properties too. So I wonder if it's a matter of improving the script?

  • Status changed to Needs review 4 months ago
  • Comment 4 months ago →
    🇫🇷France nod_ Lille

    In this case it makes sense to split because block is top/bottom and that can change when you make things vertical (top/bottom can become : left/right or right/left depending)

  • Comment 3 months ago →
    🇺🇸United States smustgrave

    Seems like a large change would it be safer to breakup some?

  • Comment 3 months ago →
    🇫🇷France nod_ Lille

    It's already the broken up patch, all the replacements are automated and without the [dir] issue, the replacements are safe should be good to go. I'd check gin maybe to see what's going on but I'm sure this patch is already solving a couple of RTL spacing issues we have.

  • Comment 3 months ago →
    needs-review-queue-bot

    The Needs Review Queue Bot → tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

    This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

    Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024