Describe the bug
When using CSS logical properties like margin-inline-start, the PostCSS pipeline transforms them into [dir=ltr] / [dir=rtl] attribute selectors. However, WordPress only outputs dir="rtl" for RTL sites - it never outputs dir="ltr" for LTR sites. This causes logical property styles to silently fail on standard WordPress installations.
postcss-preset-env includes postcss-dir-pseudo-class which transforms :dir() pseudo-classes into [dir] attribute selectorspostcss-logical uses this for bidirectional output- The postcss-dir-pseudo-class README explicitly states it requires a [dir] attribute in HTML
- WordPress's
language_attributes() function only outputs dir="rtl" for RTL sites, never dir="ltr" for LTR
Steps to Reproduce
- Create a WordPress project using 10up-toolkit
- Write CSS using logical properties:
.sidebar > * {
margin-inline-start: auto;
}
- Build the project
- View compiled CSS - it outputs:
dir=[ltr] .sidebar > * {
margin-left: auto;
}
[dir=rtl] .sidebar > * {
margin-right: auto;
}
- View WordPress page source - HTML element has no dir attribute:
<html lang="en-US">
- The
[dir=ltr] selector never matches, style doesn't apply
Screenshots, screen recording, code snippet
Environment information
- Node.js: 20.11.0
- Device: MacBook
WordPress information
- 10up-toolkit: 6.5.1
- WordPress: 6.9.4
- postcss-preset-env: 9.6.0
- postcss-dir-pseudo-class: 8.0.1
Code of Conduct
Describe the bug
When using CSS logical properties like
margin-inline-start, the PostCSS pipeline transforms them into[dir=ltr]/[dir=rtl]attribute selectors. However, WordPress only outputsdir="rtl"for RTL sites - it never outputsdir="ltr"for LTR sites. This causes logical property styles to silently fail on standard WordPress installations.postcss-preset-envincludespostcss-dir-pseudo-classwhich transforms:dir()pseudo-classes into[dir]attribute selectorspostcss-logicaluses this for bidirectional outputlanguage_attributes()function only outputsdir="rtl"for RTL sites, neverdir="ltr"for LTRSteps to Reproduce
<html lang="en-US">[dir=ltr]selector never matches, style doesn't applyScreenshots, screen recording, code snippet
Environment information
WordPress information
Code of Conduct