{"id":16484456,"url":"https://github.com/winston0410/postcss-rfs-autopilot","last_synced_at":"2025-06-22T03:39:31.731Z","repository":{"id":42725303,"uuid":"284620173","full_name":"winston0410/postcss-rfs-autopilot","owner":"winston0410","description":"A PostCSS plugin that will auto markup your CSS with rfs() for RFS","archived":false,"fork":false,"pushed_at":"2023-01-07T20:44:15.000Z","size":901,"stargazers_count":9,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-12T13:17:04.024Z","etag":null,"topics":["postcss","postcss-plugin","rfs"],"latest_commit_sha":null,"homepage":null,"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/winston0410.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":"2020-08-03T06:21:12.000Z","updated_at":"2023-09-25T10:21:14.000Z","dependencies_parsed_at":"2023-02-08T01:31:03.400Z","dependency_job_id":null,"html_url":"https://github.com/winston0410/postcss-rfs-autopilot","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/winston0410%2Fpostcss-rfs-autopilot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winston0410%2Fpostcss-rfs-autopilot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winston0410%2Fpostcss-rfs-autopilot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winston0410%2Fpostcss-rfs-autopilot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/winston0410","download_url":"https://codeload.github.com/winston0410/postcss-rfs-autopilot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221812749,"owners_count":16884700,"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-plugin","rfs"],"created_at":"2024-10-11T13:17:10.169Z","updated_at":"2024-10-28T09:35:04.437Z","avatar_url":"https://github.com/winston0410.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![PostCSS RFS Autopilot terminal screenshot](https://github.com/winston0410/postcss-rfs-autopilot/blob/master/postcss-rsf-autopilot-example.png?raw=true)\n\n# PostCSS RFS Autopilot\n\n[![Maintainability](https://api.codeclimate.com/v1/badges/ff984c8d9c6e4277723f/maintainability)](https://codeclimate.com/github/winston0410/postcss-rfs-autopilot/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/ff984c8d9c6e4277723f/test_coverage)](https://codeclimate.com/github/winston0410/postcss-rfs-autopilot/test_coverage) [![Known Vulnerabilities](https://snyk.io/test/github/winston0410/postcss-rfs-autopilot/badge.svg?targetFile=package.json)](https://snyk.io/test/github/winston0410/postcss-rfs-autopilot?targetFile=package.json) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/5ce28bbbcc174bfdad1dabd6ab3c64f6)](https://www.codacy.com/manual/winston0410/postcss-rfs-autopilot?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=winston0410/postcss-rfs-autopilot\u0026utm_campaign=Badge_Grade)\n\nA PostCSS plugin that automagically mark your CSS up with `rfs()` for [RFS](https://github.com/twbs/rfs), helping you achieve a responsive layout **efficiently** and **consistently**.\n\n```css\n/* Original Input */\n.foo {\n    font-size: 4em;\n}\n```\n\n```css\n/* After the transformation of RFS Autopilot but before RFS*/\n.foo {\n  font-size: rfs(4em);\n}\n```\n\n```css\n/* After the transformation of RFS*/\n.foo {\n  font-size: calc(1.525rem + 3.3vw);\n}\n\n@media (min-width: 1200px) {\n  .foo {\n    font-size: 4rem;\n  }\n}\n```\n\n## Problem\n\n[RFS](https://github.com/twbs/rfs) is a great unit resizing engine that helps you build responsive CSS layout, but writing `rfs()` everywhere manually is a pain in the ass.\n\nWith this plugin, you just need to declare rules you want to apply `rfs()` to, and it will do the heavy-lifting for you.\n\n## Made in Hong Kong :free: :free:\n\nThis plugin is made with love by a Hong Konger.\n\n## Installation\n\nAs this plugin is a PostCSS plugin, you need to install and set up PostCSS first before use it. If you haven't used PostCSS before, set it up according to [official docs](https://github.com/postcss/postcss#usage).\n\nInput this command in terminal and download this PostCSS plugin.\n\n```\nnpm i postcss-rfs-autopilot\n```\n\n[RFS](https://github.com/twbs/rfs) is treated as an external dependency for this plugin, thus you would need to download and include it manually in your PostCSS config as usual.\n\n```\nnpm i rfs\n```\n\nAfter you have installed this plugin, require it **before `RFS`** in your [PostCSS configuration files, or the place where you config PostCSS in your environment](https://github.com/postcss/postcss#usage)\n\n```javascript\n//postcss.config.js or other files you use to config PostCSS\n\nmodule.exports = {\n  plugins: [\n    //Other plugins...\n    //You have to include this plugin before rfs\n    require('postcss-rfs-autopilot')(),\n    require('rfs')()\n  ]\n}\n```\n\nNow we will mark up all the values for you with `rfs()`:rocket::rocket::rocket:!\n\nIf you want to include or exclude some values or selectors, you can pass a configuration object to this plugin like this:\n\nCheck out our [API Reference](#api-reference) for configuration options.\n\n```javascript\n//postcss.config.js or other files you use to config PostCSS\n\nmodule.exports = {\n  plugins: [\n    //Other plugins...\n    //You have to include this plugin before rfs\n    require('postcss-rfs-autopilot')({\n      includedRules: [\n        '*'\n      ], //Rules you want to include, e.g. font-size\n      includedSelectors: [\n        'p #hello'\n      ], //Selectors you want to include,\n      includedUnits: [\n        'px', 'rem'\n      ], //Units you want to include, e.g. px.  Noted that RFS currently only works with px and rem\n      excludedRules: [], //Rules you want to exclude\n      excludedSelectors: [], //Selectors you want to exclude\n      excludedUnits: [] //Units you want to exclude\n      }),\n    require('rfs')\n  ]\n}\n```\n\n### Examples\n\nApply `rfs()` to all values, selector, and rules except `width` and `height`:\n\n```javascript\nmodule.exports = {\n  plugins: [\n    //Other plugins...\n    require('postcss-rfs-autopilot')({\n      excludedRules: ['width', 'height']\n    }),\n    require('rfs')\n  ]\n}\n```\n\nApply `rfs()` to class `foo` and `bar` only:\n\n```javascript\nmodule.exports = {\n  plugins: [\n    //Other plugins...\n    require('postcss-rfs-autopilot')({\n      includedSelectors: ['.foo', '.bar']\n    }),\n    require('rfs')\n  ]\n}\n```\n\n### Advanced\n\nExclusion rules will have precedence over inclusion rules, which means that if a same rules is found in both `includedRules` and `excludedRules`, it will be excluded.\n\nIf you want to include all for an option, pass in `\"*\"` as its value.\n\n## API Reference\n\n### `options.includedRules`\n\nData type: `[Array]`\n\nDefault value: `[ '*' ]`\n\nDescription: Control which CSS rules you want this plugin wrap it up with `rfs()`, for example `font-size`\n\n### `options.includedSelectors`\n\nData type: `[Array]`\n\nDefault value: `[ '*' ]`\n\nDescription: Control which CSS selectors you want this plugin wrap it up with `rfs()`, for example `p .free`\n\n### `options.includedUnits`\n\nData type: `[Array]`\n\nDefault value: `[ 'px', 'rem' ]`\n\nDescription: Control which CSS units you want this plugin wrap it up with `rfs()`, for example `px`\n\n### `options.excludedRules`\n\nData type: `[Array]`\n\nDefault value: `[]`\n\nDescription: Control which CSS rules you **do not** want this plugin wrap it up with `rfs()`, for example `font-size`\n\n### `options.includedSelectors`\n\nData type: `[Array]`\n\nDefault value: `[]`\n\nDescription: Control which CSS selectors you **do not** want this plugin wrap it up with `rfs()`, for example `p .free`\n\n### `options.includedUnits`\n\nData type: `[Array]`\n\nDefault value: `[]`\n\nDescription: Control which CSS units you **do not** want this plugin wrap it up with `rfs()`, for example `px`\n\n### `options.silentConsole`\n\nData type: `[Boolean]`\n\nDefault value: `false`\n\nDescription: Set it true to suppress all logs in console.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinston0410%2Fpostcss-rfs-autopilot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwinston0410%2Fpostcss-rfs-autopilot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinston0410%2Fpostcss-rfs-autopilot/lists"}