{"id":20554932,"url":"https://github.com/mistricky/postcss-relaxed-unit","last_synced_at":"2025-04-14T12:43:04.880Z","repository":{"id":38028513,"uuid":"211483011","full_name":"mistricky/postcss-relaxed-unit","owner":"mistricky","description":"🍮Postcss-relaxed-unit is a postcss plugin for unit tranformation and make write css easier with custom unit.","archived":false,"fork":false,"pushed_at":"2023-03-03T07:22:13.000Z","size":2059,"stargazers_count":46,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T20:13:34.165Z","etag":null,"topics":["css","postcss","postcss-plugin","px","rem","typescript","unit-tranformation"],"latest_commit_sha":null,"homepage":"","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/mistricky.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-28T10:24:46.000Z","updated_at":"2024-11-14T03:49:57.000Z","dependencies_parsed_at":"2024-10-04T07:42:48.461Z","dependency_job_id":"50fb454a-3168-401a-a98c-576f424cea44","html_url":"https://github.com/mistricky/postcss-relaxed-unit","commit_stats":null,"previous_names":["youncccat/postcss-relaxed-unit"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mistricky%2Fpostcss-relaxed-unit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mistricky%2Fpostcss-relaxed-unit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mistricky%2Fpostcss-relaxed-unit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mistricky%2Fpostcss-relaxed-unit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mistricky","download_url":"https://codeload.github.com/mistricky/postcss-relaxed-unit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248768102,"owners_count":21158585,"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":["css","postcss","postcss-plugin","px","rem","typescript","unit-tranformation"],"created_at":"2024-11-16T03:14:35.709Z","updated_at":"2025-04-14T12:43:04.845Z","avatar_url":"https://github.com/mistricky.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Postcss-relaxed-unit 🍮\n\n[postcss]: https://github.com/postcss/postcss\n[ci-img]: https://travis-ci.org/youncccat/postcss-relaxed-unit.svg\n[ci]: https://travis-ci.org/youncccat/postcss-relaxed-unit\n\nEnglish doc | [中文文档](https://github.com/youncccat/postcss-relaxed-unit/blob/master/doc/readme-zh.md)\n\nPostcss-relaxed-unit is a postcss plugin for unit tranformation and make write css easier with custom unit.\n\nYou can define a rule to determine the mapping relationship between custom unit and target unit, and you can use some operators to calculate the target value (like `add`, `sub`, `mul`, `div`, `unit`), so you can write style relaxed without care about calculate unit.\n\n## Motivation\n\nSometimes, we need to care about calculating the style values, for example, `px` to `rem`， `rem` to `vw` , `px` to whatever that mobile side need and we don't need many plugins. so, `postcss-relaxed-unit` can help you forget that, you just need define a rule that describes the custom unit to target unit mapping! that's all! :tada:\n\n## Precision overflow 👌\n\nYou don't have to care about precision overflow, because `postcss-relaxed-unit` wraps `bignumber.js`.\n\n## Install\n\n`postcss-relaxed-unit` is publish to `npm`，so you can install it using `npm` or `yarn`\n\n```\nnpm i postcss-relaxed-unit -D\n```\n\nor\n\n```\nyarn add postcss-relaxed-unit -D\n```\n\nbecause `postcss-relaxed-unit` is depends on [PostCSS], you need to install postcss.\n\n## Usage\n\nYou only need to define rule to get start~\n\n**postcss.config.js**\n\n```javascript\nconst RelaxedUnit = require(\"postcss-relaxed-unit\");\n\nmodule.exports = {\n  plugins: [\n    RelaxedUnit({\n      rules: { rx: \"add(1).sub(2).mul(3).div(9).unit(rem)\" }\n    })\n  ]\n};\n```\n\n### Multiple rules\n\nYou can define more rules :)\n\n```javascript\nconst RelaxedUnit = require(\"postcss-relaxed-unit\");\n\nmodule.exports = {\n  plugins: [\n    RelaxedUnit({\n      rules: {\n        rx: \"add(1).sub(2).mul(3).div(9).unit(rem)\",\n        ex: \"div(100).unit(rem)\"\n      }\n    })\n  ]\n};\n```\n\n### Nuxt\n\nIn `Nuxt.js`, you need to define the config in `nuxt.config.js`\n\n**nuxt.config.js**\n\n```js\nmodule.exports = {\n \tbuild: {\n    extractCSS: true,\n    postcss: {\n      plugins: {\n        'postcss-relaxed-unit': {\n          rules: { rx: 'div(100).unit(rem)' },\n        },\n    },\n  },\n}\n```\n\n## Options\n\n- `rules {[custom unit name]: 'operators'}` custom unit to target unit mapping container\n\n- `add Operator` target value plus `+`\n\n- `sub Operator` target value subtraction `-`\n\n- `mul Operator` target value multiplication `*`\n\n- `div Operator` target value divition `/`\n\n- `unit Operator` unit of output\n\ncustom unit will output does not change missing `unit` Operator, `e.g.`\n\n```json\n{\n  \"postcss-relaxed-unit\": {\n    \"rules\": { \"rx\": \"add(10).sub(2)\" }\n  }\n}\n```\n\n**origin style**\n\n```css\n.hello-relaxed-unit {\n  width: 10rx;\n}\n```\n\n**output style**\n\n```css\n.hello-relaxed-unit {\n  width: 18rx;\n}\n```\n\nThe signature of operator function like\n\n```typescript\ntype OperatorFunction = (arg: number | string) =\u003e string;\n```\n\nso, if you call the operator function like `add(aas)` , it will compile passing, the `aas` wiil be convert to `0`.\n\n```javascript\n{\"rx\": \"add(aas).unit(px)\"} =\u003e {\"rx\": \"add(0).unit(px)\"}\n```\n\n## Example\n\nrun `yarn example` or `npm run example` if you want to see the results of `postcss-relaxed-unit` working.⚙️\n\n## LICENSE\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmistricky%2Fpostcss-relaxed-unit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmistricky%2Fpostcss-relaxed-unit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmistricky%2Fpostcss-relaxed-unit/lists"}