Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mistricky/postcss-relaxed-unit
🍮Postcss-relaxed-unit is a postcss plugin for unit tranformation and make write css easier with custom unit.
https://github.com/mistricky/postcss-relaxed-unit
css postcss postcss-plugin px rem typescript unit-tranformation
Last synced: 3 months ago
JSON representation
🍮Postcss-relaxed-unit is a postcss plugin for unit tranformation and make write css easier with custom unit.
- Host: GitHub
- URL: https://github.com/mistricky/postcss-relaxed-unit
- Owner: mistricky
- License: mit
- Created: 2019-09-28T10:24:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T07:22:13.000Z (almost 2 years ago)
- Last Synced: 2024-05-30T02:12:33.461Z (8 months ago)
- Topics: css, postcss, postcss-plugin, px, rem, typescript, unit-tranformation
- Language: TypeScript
- Homepage:
- Size: 1.96 MB
- Stars: 45
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Postcss-relaxed-unit 🍮
[postcss]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/youncccat/postcss-relaxed-unit.svg
[ci]: https://travis-ci.org/youncccat/postcss-relaxed-unit
English doc | [中文文档](https://github.com/youncccat/postcss-relaxed-unit/blob/master/doc/readme-zh.md)
Postcss-relaxed-unit is a postcss plugin for unit tranformation and make write css easier with custom unit.
You 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.
## Motivation
Sometimes, 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:
## Precision overflow 👌
You don't have to care about precision overflow, because `postcss-relaxed-unit` wraps `bignumber.js`.
## Install
`postcss-relaxed-unit` is publish to `npm`，so you can install it using `npm` or `yarn`
```
npm i postcss-relaxed-unit -D
```
or
```
yarn add postcss-relaxed-unit -D
```
because `postcss-relaxed-unit` is depends on [PostCSS], you need to install postcss.
## Usage
You only need to define rule to get start~
**postcss.config.js**
```javascript
const RelaxedUnit = require("postcss-relaxed-unit");
module.exports = {
plugins: [
RelaxedUnit({
rules: { rx: "add(1).sub(2).mul(3).div(9).unit(rem)" }
})
]
};
```
### Multiple rules
You can define more rules :)
```javascript
const RelaxedUnit = require("postcss-relaxed-unit");
module.exports = {
plugins: [
RelaxedUnit({
rules: {
rx: "add(1).sub(2).mul(3).div(9).unit(rem)",
ex: "div(100).unit(rem)"
}
})
]
};
```
### Nuxt
In `Nuxt.js`, you need to define the config in `nuxt.config.js`
**nuxt.config.js**
```js
module.exports = {
build: {
extractCSS: true,
postcss: {
plugins: {
'postcss-relaxed-unit': {
rules: { rx: 'div(100).unit(rem)' },
},
},
},
}
```
## Options
- `rules {[custom unit name]: 'operators'}` custom unit to target unit mapping container
- `add Operator` target value plus `+`
- `sub Operator` target value subtraction `-`
- `mul Operator` target value multiplication `*`
- `div Operator` target value divition `/`
- `unit Operator` unit of output
custom unit will output does not change missing `unit` Operator, `e.g.`
```json
{
"postcss-relaxed-unit": {
"rules": { "rx": "add(10).sub(2)" }
}
}
```
**origin style**
```css
.hello-relaxed-unit {
width: 10rx;
}
```
**output style**
```css
.hello-relaxed-unit {
width: 18rx;
}
```
The signature of operator function like
```typescript
type OperatorFunction = (arg: number | string) => string;
```
so, if you call the operator function like `add(aas)` , it will compile passing, the `aas` wiil be convert to `0`.
```javascript
{"rx": "add(aas).unit(px)"} => {"rx": "add(0).unit(px)"}
```
## Example
run `yarn example` or `npm run example` if you want to see the results of `postcss-relaxed-unit` working.⚙️
## LICENSE
MIT.