Logical CSS

A production-quality Visual Studio Code extension that helps developers write RTL-friendly and CSS Logical Property–aware styles by analyzing CSS/SCSS and providing diagnostics, quick fixes, and optional auto-fixes.

• Real-time Diagnostics: Detects physical CSS properties that should be replaced with logical properties
• Quick Fixes: One-click conversion from physical to logical properties (Ctrl+. / Cmd+.)
• Hover Information: Shows logical property suggestions when hovering over physical properties
• Status Bar: Displays current issue count at a glance
• Ignore Comments: Support for /* rtl-ignore */ and /* rtl-ignore-next-line */
• Configurable: Extensive settings to customize behavior
• Multi-language Support: Works with CSS, SCSS, Less, Vue, Svelte, HTML, and JavaScript/TypeScript files

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Logical CSS"
4. Click Install

# Download the .vsix file from the releases page
code --install-extension logical-css-1.0.1.vsix

The extension automatically analyzes your CSS files and highlights physical properties:

/* Before */
.button {
  margin-left: 10px;
  padding-right: 20px;
  text-align: left;
}

/* After (with quick fix) */
.button {
  margin-inline-start: 10px;
  padding-inline-end: 20px;
  text-align: start;
}

When you see a diagnostic, press Ctrl+. (Windows/Linux) or Cmd+. (macOS) to see available quick fixes:

• Replace margin-left with margin-inline-start
• Replace margin-right with margin-inline-end
• Replace padding-left with padding-inline-start
• Replace padding-right with padding-inline-end
• Replace left with inset-inline-start
• Replace right with inset-inline-end
• And many more...

Hover over any physical property to see the suggested logical alternative:

Physical property

Consider using: margin-inline-start

Reason: Use margin-inline-start for RTL support

---

Logical properties automatically adapt to RTL and writing modes.

Use ignore comments to suppress diagnostics for specific lines:

/* rtl-ignore */
.button {
  margin-left: 10px;
}

/* rtl-ignore-next-line */
.sidebar {
  padding-right: 20px;
}

• Type: boolean
• Default: true
• Description: Enable Logical CSS diagnostics

• Type: boolean
• Default: true
• Description: Enable quick fix code actions

• Type: string
• Enum: error, warning, info, hint
• Default: warning
• Description: Severity level for diagnostics

• Type: array
• Default: []
• Description: List of CSS properties to ignore

Example:

{
  "logicalCss.ignoreProperties": ["margin-left", "padding-right"]
}

• Type: array
• Default: []
• Description: List of CSS values to ignore

Example:

{
  "logicalCss.ignoreValues": ["left", "right"]
}

• Type: boolean
• Default: true
• Description: Enable hover information for physical properties

• Type: boolean
• Default: true
• Description: Enable status bar item

• Type: boolean
• Default: false
• Description: Auto-fix issues on save

• Type: boolean
• Default: false
• Description: Check physical block-axis properties (top, bottom, margin-top, padding-bottom, border-top, etc.) and suggest logical equivalents (inset-block-start, margin-block, etc.)

• Type: boolean
• Default: false
• Description: Check sizing properties (width, height, min-width, etc.) and suggest logical sizing (inline-size, block-size, etc.)

• Type: boolean
• Default: true
• Description: Detect physical shorthand declarations (e.g. 4-value padding: 10px 20px 10px 30px) that have asymmetric horizontal values and require logical properties for RTL support

Scans all CSS files in the current workspace and reports the total number of issues.

Scans the currently active file and reports issues.

Scans all stylesheets (.css, .scss, .less) within a selected folder and reports issues in the Problems panel. Can be executed by right-clicking any directory in the VS Code File Explorer and selecting Logical CSS: Scan Folder, or from the Command Palette (Cmd+Shift+P / Ctrl+Shift+P).

Logical properties are a modern CSS feature that automatically adapt to the document's writing direction and mode. This makes it much easier to build internationalized (i18n) applications that support both left-to-right (LTR) and right-to-left (RTL) languages.

• RTL Support: Automatically works in RTL languages (Arabic, Hebrew, etc.)
• Writing Mode Support: Works with vertical writing modes
• Less Code: No need for separate RTL stylesheets
• Maintainability: Easier to reason about layout direction
• Future-Proof: Follows modern CSS best practices

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Lint code
npm run lint

# Fix linting issues
npm run lint:fix

# Format code
npm run format

# Package extension
npm run package

MIT License - see LICENSE file for details.

See CHANGELOG.md for a list of changes in each version.

• Issues: GitHub Issues
• Documentation: GitHub Wiki

• Built with PostCSS
• Inspired by the CSS Logical Properties specification
• Thanks to all contributors

Made with ❤️ for the international web