{"id":28518946,"url":"https://github.com/oe/postcss-logical-polyfill","last_synced_at":"2026-03-10T11:32:57.510Z","repository":{"id":295355413,"uuid":"989631392","full_name":"oe/postcss-logical-polyfill","owner":"oe","description":"A PostCSS plugin that provides physical property polyfills for CSS logical properties, enabling backward compatibility for older browsers and environments that don't support logical properties natively","archived":false,"fork":false,"pushed_at":"2025-11-25T09:44:42.000Z","size":1315,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-01T08:39:31.478Z","etag":null,"topics":["css","css-logical","css-logical-properties","logical-properties","polyfill","postcss","rtl"],"latest_commit_sha":null,"homepage":"http://app.evecalm.com/postcss-logical-polyfill/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-24T13:55:44.000Z","updated_at":"2025-11-25T09:43:54.000Z","dependencies_parsed_at":"2025-05-26T12:49:30.646Z","dependency_job_id":null,"html_url":"https://github.com/oe/postcss-logical-polyfill","commit_stats":null,"previous_names":["oe/postcss-logical-polyfill"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/oe/postcss-logical-polyfill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oe%2Fpostcss-logical-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oe%2Fpostcss-logical-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oe%2Fpostcss-logical-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oe%2Fpostcss-logical-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oe","download_url":"https://codeload.github.com/oe/postcss-logical-polyfill/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oe%2Fpostcss-logical-polyfill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30332322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T05:25:20.737Z","status":"ssl_error","status_checked_at":"2026-03-10T05:25:17.430Z","response_time":106,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-logical","css-logical-properties","logical-properties","polyfill","postcss","rtl"],"created_at":"2025-06-09T06:00:26.174Z","updated_at":"2026-03-10T11:32:57.439Z","avatar_url":"https://github.com/oe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-logical-polyfill\n\n[![NPM Version][npm-img]][npm-url]\n[![Build Status][build-img]][build-url]\n[![Coverage Status][coverage-img]][coverage-url]\n[![NPM Downloads][downloads-img]][downloads-url]\n[![Types][types-img]][types-url]\n[![Package Size][size-img]][size-url]\n\nA PostCSS plugin that transforms CSS logical properties into physical properties with appropriate direction selectors, enabling backward compatibility for older browsers.\n\n## Quick Start\n\n### Installation\n\n```bash\n# Using npm\nnpm install postcss-logical-polyfill --save-dev\n# Using pnpm\npnpm add -D postcss-logical-polyfill\n# Using yarn\nyarn add -D postcss-logical-polyfill\n```\n\n### Basic Usage\n\n[Playground](http://app.evecalm.com/postcss-logical-polyfill/playground/)\n\n[Full document](https://app.evecalm.com/postcss-logical-polyfill/)\n\n```js\n// postcss.config.js\nmodule.exports = {\n  plugins: [\n    require('postcss-logical-polyfill')()\n  ]\n}\n```\n\n### Example Transformation\n\n**Input CSS:**\n```css\n.container {\n  margin-inline: 1rem;\n  padding-block: 2rem;\n  border-inline-start: 2px solid blue;\n}\n```\n\n**Output CSS:**\n```css\n.container {\n  margin-left: 1rem;\n  margin-right: 1rem;\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n[dir=\"ltr\"] .container {\n  border-left: 2px solid blue;\n}\n[dir=\"rtl\"] .container {\n  border-right: 2px solid blue;\n}\n```\n\n## Key Features\n\n- **🔄 Polyfill Direction**: Transforms logical properties → physical properties (reverse of most tools)\n- **🎯 Smart Generation**: Creates both LTR and RTL versions automatically\n- **⚡ Optimized Output**: Block-direction properties generate single rules (no duplication)\n- **🔗 Extended Support**: Includes scroll properties and logical values via integrated shim\n- **🧪 Experimental Features**: Linear gradient logical directions and draft CSS specs\n- **🎛️ Configurable**: Custom selectors and output order control\n- **🏗️ Framework Ready**: Works with any build tool or CSS framework\n\n## Why Use This Plugin?\n\nWhile modern browsers support CSS logical properties, older browsers don't. This plugin acts as a polyfill, converting your modern logical properties to physical properties that work everywhere, while preserving the directional behavior for international layouts.\n\n**Perfect for:**\n- ✅ Supporting older browsers while using modern CSS\n- ✅ Gradual migration from physical to logical properties  \n- ✅ RTL/LTR internationalization\n- ✅ Framework integration with directional layouts\n\n## Installation\n\n```bash\n# Using npm\nnpm install postcss-logical-polyfill --save-dev\n\n# Using pnpm\npnpm add -D postcss-logical-polyfill\n\n# Using yarn\nyarn add -D postcss-logical-polyfill\n```\n\n## What It Does\n\nThis plugin transforms **CSS Logical Properties** into physical properties with appropriate direction selectors for browser compatibility. It intelligently processes:\n\n- **All standard logical properties** (margin, padding, border, inset, sizing, etc.)\n- **Logical values** (float: inline-start, clear: inline-end, resize: block)\n- **Scroll properties** (scroll-margin, scroll-padding)\n- **Experimental features** (linear-gradient logical directions)\n- **Both scoped and unscoped** logical properties\n\n**➡️ [Complete supported properties list](./docs/SUPPORTED-PROPERTIES.md)**\n\n## Configuration\n\n### Basic Options\n\n```js\nconst logicalPolyfill = require('postcss-logical-polyfill');\n\npostcss([\n  logicalPolyfill({\n    // Direction selectors (default shown)\n    rtl: { selector: '[dir=\"rtl\"]' },\n    ltr: { selector: '[dir=\"ltr\"]' },\n    \n    // Output order for unscoped properties\n    outputOrder: 'ltr-first'  // or 'rtl-first'\n  })\n])\n```\n\n**➡️ [Complete configuration guide](./docs/ADVANCED-USAGE.md)**\n\n## Example Transformation\n\n**Input CSS:**\n```css\n/* Unscoped logical properties - will generate both LTR and RTL versions */\n.container {\n  margin-inline: 1rem;\n  padding-inline-start: 1rem;\n}\n\n/* Block-direction properties - Generate single optimized rule */\n.content {\n  margin-block: 2rem;\n  padding-block-start: 1rem;\n}\n\n/* Extended logical properties via shim system */\n.scroll-area {\n  scroll-margin-inline: 10px;\n  float: inline-start;\n}\n\n/* Experimental: Linear gradient logical directions */\n.gradient-element {\n  background: linear-gradient(to inline-end, red, blue);\n}\n```\n\n**Output CSS:**\n```css\n.container {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n[dir=\"ltr\"] .container {\n  padding-left: 1rem;\n}\n[dir=\"rtl\"] .container {\n  padding-right: 1rem;\n}\n\n/* Block-direction properties - Single optimized rule */\n.content {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n  padding-top: 1rem;\n}\n\n/* Extended logical properties transformed */\n.scroll-area {\n  scroll-margin-left: 10px;\n  scroll-margin-right: 10px;\n}\n[dir=\"ltr\"] .scroll-area {\n  float: left;\n}\n[dir=\"rtl\"] .scroll-area {\n  float: right;\n}\n\n/* Experimental features automatically enabled */\n[dir=\"ltr\"] .gradient-element {\n  background: linear-gradient(to right, red, blue);\n}\n[dir=\"rtl\"] .gradient-element {\n  background: linear-gradient(to left, red, blue);\n}\n```\n\n## How It Works\n\nThis plugin intelligently processes CSS through a 7-phase optimization pipeline:\n\n1. **🔍 Detection**: Identifies logical properties and existing direction selectors\n2. **🎯 Classification**: Separates block-direction, inline-direction, and mixed properties\n3. **🔄 Transformation**: Converts logical to physical properties based on direction context\n4. **🎯 Selector Application**: Adds appropriate direction selectors when needed\n5. **🔧 Optimization**: Merges rules and eliminates redundant declarations\n6. **🎯 Smart Priority**: Implements rightmost selector precedence for predictable behavior\n7. **✨ Output**: Generates clean, optimized CSS for maximum compatibility\n\n**➡️ [Detailed technical explanation](./docs/HOW-IT-WORKS.md)**\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm install postcss-logical-polyfill --save-dev\n```\n\n### Basic Setup\n\n```js\n// postcss.config.js\nmodule.exports = {\n  plugins: [\n    require('postcss-logical-polyfill')()\n  ]\n}\n```\n\n### Build Tool Integration\n\n**➡️ [Integration guides for Webpack, Vite, Next.js, and more](./docs/INTEGRATION-GUIDE.md)**\n\n## Important Notes\n\n### HTML Direction Attribute Required\n\nYou **must** set the `dir` attribute on your HTML for the generated CSS to work:\n\n```html\n\u003chtml dir=\"ltr\"\u003e  \u003c!-- For left-to-right layouts --\u003e\n\u003chtml dir=\"rtl\"\u003e  \u003c!-- For right-to-left layouts --\u003e\n```\n\nWithout the `dir` attribute, the generated `[dir=\"ltr\"]` and `[dir=\"rtl\"]` selectors won't match.\n\n### Custom Selectors\n\nYou can configure custom direction selectors for your framework:\n\n```js\nlogicalPolyfill({\n  ltr: { selector: '.ltr' },\n  rtl: { selector: '.rtl' }\n})\n```\n\n**➡️ [Complete usage guide and best practices](./docs/ADVANCED-USAGE.md)**\n\n## Examples\n\nThis package includes ready-to-run examples for different build systems and use cases.\n\n```bash\n# View all available examples\nls examples/\n\n# Run specific examples\ncd examples/basic \u0026\u0026 npx tsx process.ts\ncd examples/webpack \u0026\u0026 npx tsx process.ts\ncd examples/sass \u0026\u0026 npx tsx process.ts\n\n# Run all examples at once\npnpm run examples\n```\n\n**Available examples:**\n- **Basic**: Plain CSS with PostCSS\n- **Build Tools**: Webpack integration  \n- **Preprocessors**: SASS and LESS integration\n- **Configuration**: Output order and selector priority\n- **CLI**: PostCSS command-line usage\n\n**➡️ [View all examples](./examples/README.md)**\n\n## Troubleshooting\n\nHaving issues? Check our troubleshooting guide for common problems and solutions.\n\n**➡️ [Complete troubleshooting guide](./docs/TROUBLESHOOTING.md)**\n\n## Documentation\n\n- **[📖 Full Documentation](./docs/)** - Complete documentation site built with Astro Starlight\n- **[🚀 Getting Started Guide](./docs/src/content/docs/getting-started/introduction.mdx)** - Quick start and installation\n- **[⚙️ Configuration](./docs/src/content/docs/guides/configuration.mdx)** - Configuration options and framework integration\n- **[📋 Supported Properties](./docs/src/content/docs/references/supported-properties.mdx)** - Complete reference of all supported logical properties  \n- **[🔧 How It Works](./docs/src/content/docs/guides/how-it-works.mdx)** - Technical details about the processing pipeline\n- **[🎮 Interactive Playground](./docs/src/content/docs/playground.mdx)** - Try the plugin online with live preview\n\n## Learn More\n\n- **[CSS Logical Properties and Values (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)** - Official documentation and browser support information\n\n## Requirements\n\n- Node.js 16.0.0 or later\n- PostCSS 8.0.0 or later\n\n## Contributing\n\nContributions are welcome! Please see our [contributing guidelines](./CONTRIBUTING.md) for details.\n\n## Credits\n\nThis plugin wraps and extends [postcss-logical](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical) to provide polyfill functionality.\n\n## License\n\n[MIT](./LICENSE)\n\n[npm-url]: https://www.npmjs.com/package/postcss-logical-polyfill\n[npm-img]: https://img.shields.io/npm/v/postcss-logical-polyfill\n[build-url]: https://github.com/oe/postcss-logical-polyfill/actions/workflows/ci.yml\n[build-img]: https://github.com/oe/postcss-logical-polyfill/actions/workflows/ci.yml/badge.svg\n[coverage-url]: https://codecov.io/gh/oe/postcss-logical-polyfill\n[coverage-img]: https://codecov.io/gh/oe/postcss-logical-polyfill/branch/main/graph/badge.svg\n[downloads-url]: https://www.npmjs.com/package/postcss-logical-polyfill\n[downloads-img]: https://img.shields.io/npm/dm/postcss-logical-polyfill\n[size-url]: https://packagephobia.com/result?p=postcss-logical-polyfill\n[size-img]: https://packagephobia.com/badge?p=postcss-logical-polyfill\n[types-url]: https://www.npmjs.com/package/postcss-logical-polyfill\n[types-img]: https://img.shields.io/npm/types/postcss-logical-polyfill\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foe%2Fpostcss-logical-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foe%2Fpostcss-logical-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foe%2Fpostcss-logical-polyfill/lists"}