{"id":13851654,"url":"https://github.com/sandrina-p/postcss-start-to-end","last_synced_at":"2025-04-13T15:23:48.088Z","repository":{"id":57328542,"uuid":"89778899","full_name":"sandrina-p/postcss-start-to-end","owner":"sandrina-p","description":"PostCSS plugin that lets you control your layout (LTR or RTL) through logical rather than physical rules","archived":false,"fork":false,"pushed_at":"2017-09-14T16:45:34.000Z","size":109,"stargazers_count":18,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T06:21:47.674Z","etag":null,"topics":["postcss","postcss-plugins","rtl","support-rtl"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/postcss-start-to-end","language":"JavaScript","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/sandrina-p.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-29T10:36:20.000Z","updated_at":"2020-06-10T06:37:32.000Z","dependencies_parsed_at":"2022-09-21T01:52:21.227Z","dependency_job_id":null,"html_url":"https://github.com/sandrina-p/postcss-start-to-end","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandrina-p%2Fpostcss-start-to-end","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandrina-p%2Fpostcss-start-to-end/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandrina-p%2Fpostcss-start-to-end/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandrina-p%2Fpostcss-start-to-end/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sandrina-p","download_url":"https://codeload.github.com/sandrina-p/postcss-start-to-end/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248733440,"owners_count":21153019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["postcss","postcss-plugins","rtl","support-rtl"],"created_at":"2024-08-04T22:00:37.390Z","updated_at":"2025-04-13T15:23:48.064Z","avatar_url":"https://github.com/sandrina-p.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS Start To End\n\n[![npm version](https://badge.fury.io/js/postcss-start-to-end.svg)](https://badge.fury.io/js/postcss-start-to-end)\n[![Build Status](https://travis-ci.org/sandrina-p/postcss-start-to-end.svg?branch=master)](https://travis-ci.org/sandrina-p/postcss-start-to-end)\n\u003c!-- [![Coverage Status](https://coveralls.io/repos/github/sandrina-p/postcss-start-to-end/badge.svg)](https://coveralls.io/github/sandrina-p/postcss-start-to-end) --\u003e\n\n[PostCSS](https://github.com/postcss/postcss) plugin that lets you control your layout (`ltr` or `rtl`) through logical rather than direction / physical rules.\n\nInspired by Flexbox and CSS Grid syntax, use `start` or `end` to output `left` or `right` depending on document direction (`rtl` or `ltr`).\n\n**Input**\n```css\n.foo {\n    padding-start: 1rem;\n    border-end: 1rem solid teal;\n}\n```\n\n**Output**\n```css\n.foo {\n   padding-left: 1rem;\n   border-right: 1rem solid teal;\n}\n```\n\n## Usage\n\n```js\npostcss([\n    require('postcss-start-to-end'),\n    require('postcss-reporter') // show warnings - check options to know more\n])\n```\n\n### With some options\n\n```js\npostcss([\n    require('postcss-start-to-end')({\n        direction: 'RTL',\n        warnings: false,\n    }),\n    require('postcss-reporter')\n]);\n```\n\n## Options\n\n#### `direction`\nDefault writing mode of CSS.\n**Type:** `string`\n**Default:** `'LTR'`\n**Values:** `'LTR'`, `'RTL'`\n\n**Input**\n```css\n.item {\n    border-start: 1px solid teal;\n    padding: 0 3rem 0 0;\n}\n```\n\n**output with `direction: 'LTR'`**\n```css\n.item {\n    border-left: 1px solid teal;\n    padding: 0 3rem 0 0;\n}\n```\n\n**output with `direction: 'RTL'`**\n```css\n.item {\n    border-right: 1px solid teal;\n    padding: 0 0 0 3rem;\n}\n```\n\n#### `warnings`\nOutput on CLI warnings about properties / rules found that don't follow start-to-end syntax.\n**Type:** `boolean`\n**Default:** `true`\n**Values:** `true`, `false`\n\n**Example**\n\n```css\n.item {\n    margin-left: 10%;\n}\n```\n\n**Console warning if `direction: ltr:`**\n\u003e  margin-left: 10%; found on line 2. Replace it by `margin-start` to support LTR and RTL directions.\n\n**Console warning if `direction: rtl:`**\n\u003e  margin-left: 10%; found on line 2. Replace it by `margin-end` to support LTR and RTL directions.\n\n\n#### `ignoreNodeModules`\nIgnore any CSS file inside `/node_modules` folder.\n**Type:** `boolean`\n**Default:** `true`\n**Values:** `true`, `false`\n\n\n## Rules supported\n\n|          Input          |       Output LTR        |       output RTL        |\n| ----------------------- | ----------------------- | ----------------------- |\n| **Alignment**           |                         |                         |\n| text-align: start;      | text-align: left;       | text-align: right;      |\n| text-align: end;        | text-align: right;      | text-align: left;       |\n| **Clear**               |                         |                         |\n| clear: start;           | clear: left;            | clear: right;           |\n| clear: end;             | clear: right;           | clear: left;            |\n| **Float**               |                         |                         |\n| float: start;           | float: left;            | float: right;           |\n| float: end;             | float: right;           | float: left;            |\n| **Border**              |                         |                         |\n| border-start            | border-left             | border-right            |\n| border-end              | border-right            | border-left             |\n| border-top-start        | border-top-left         | border-top-right        |\n| border-top-end          | border-top-right        | border-top-left         |\n| border-bottom-end       | border-bottom-right     | border-bottom-left      |\n| border-bottom-start     | border-bottom-left      | border-bottom-right     |\n| **Margin**              |                         |                         |\n| margin-start            | margin-left             | margin-right            |\n| margin-end              | margin-right            | margin-left             |\n| margin: 0 2rem 0 3rem;  | margin: 0 2rem 0 3rem;  | margin: 0 3rem 0 2rem;  |\n| **Padding**             |                         |                         |\n| padding-start           | padding-left            | padding-right           |\n| padding-end             | padding-right           | padding-left            |\n| padding: 0 1rem 0 4rem; | padding: 0 1rem 0 4rem; | padding: 0 4rem 0 1rem; |\n| **Position**            |                         |                         |\n| start: 1rem;            | left: 1rem;             | right: 1rem;            |\n| end: 1rem;              | right: 1rem;            | left: 1rem;             |\n\n\n## BONUS: Convert your existing code to this syntax\n\nDon't you feel like find/replace rules in each one of your `*.css` files?\n\nNo worries, I built a simple tool that does that for you.\nYou just need to tell where you want to run the converter (folder or file.css). By default it runs in `src` folder\n\n**Input**\n```css\n.item {\n    padding-left: 5rem;\n    margin-right : 1rem;\n    float:left;\n}\n```\n\n### Convert from LTR layout\n_Convert_ by default runs on `src` folder\n`node node_modules/postcss-start-to-end/convert`\n\nSet a specific folder to run:\n`node node_modules/postcss-start-to-end/convert src/components`\n\nSet a specific file to run:\n`node node_modules/postcss-start-to-end/convert styles/index.css`\n\n**Output**\n```css\n.item {\n    padding-start: 5rem;\n    margin-end : 1rem;\n    float:start;\n}\n```\n\n### Convert RTL layout\n\n_Convert_ by default runs on `src` folder\n`node node_modules/postcss-start-to-end/convert --rtl`\n\nSet a specific folder to run:\n`node node_modules/postcss-start-to-end/convert src/components --rtl`\n\nSet a specific file to run:\n`node node_modules/postcss-start-to-end/convert styles/index.css --rtl`\n\n**Output**\n```css\n.item {\n    padding-end: 5rem;\n    margin-start : 1rem;\n    float:end;\n}\n```\n\n\n## F.A.Q.\n\n**Why should I use this instead of plugins that convert `*-left` to `*-right` and vice-versa?**\n\nThis is not a replacement of those kind of plugins.\n\nThis is a plugin to let you write code with a logical thought in mind rather than a physical/direction one.\n\nThen if you need to convert the outputted CSS to the opposite direction you might want to try [postcss-rtl](https://www.npmjs.com/package/postcss-rtl).\n\n**Is this tested?**\n\n- The PostCSS Plugin has _100% coverage_ test with all [possible scenarios](index.test.js) that crossed my mind.\n- The Converter tests will be added soon!\n- Don't fear: [Travis-ci](https://travis-ci.org/sandrina-p/postcss-start-to-end) is doing it's job!\n\n\n## Motivation | References\n\nThere is a CSS Draft Spec about [CSS Logical Properties](https://drafts.csswg.org/css-logical-props/) in Level 1.\nBecause this technology's specification [has not stabilized](https://drafts.csswg.org/css-logical-props/#issues-index), I decided to keep this plugin syntax simple and straight following what is already defined without adding _more sugar_.\n\n\n## Contribute\nAny doubts or suggestions you may have, feel free to create an issue on [github repository](https://github.com/sandrina-p/postcss-start-to-end/issues).\n\n\n## License\n[MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandrina-p%2Fpostcss-start-to-end","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsandrina-p%2Fpostcss-start-to-end","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandrina-p%2Fpostcss-start-to-end/lists"}