https://github.com/pierreburel/startijenn-rem
JavaScript function to convert CSS rem units
https://github.com/pierreburel/startijenn-rem
css css-in-js javascript
Last synced: 3 months ago
JSON representation
JavaScript function to convert CSS rem units
- Host: GitHub
- URL: https://github.com/pierreburel/startijenn-rem
- Owner: pierreburel
- License: mit
- Created: 2021-04-10T14:20:31.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-27T00:15:07.000Z (over 3 years ago)
- Last Synced: 2025-03-10T06:43:01.445Z (over 1 year ago)
- Topics: css, css-in-js, javascript
- Language: JavaScript
- Homepage:
- Size: 288 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# startijenn-rem [](https://github.com/pierreburel/startijenn-rem/actions/workflows/node.js.yml)
JavaScript function to convert CSS rem units. Used by [postcss-rem](https://github.com/pierreburel/postcss-rem).
## Usage
Install with `npm i startijenn-rem`.
```js
import rem, { em, px, convert } from "startijenn-rem";
const unitless = rem(24);
// '1.5rem'
const simple = rem("24px");
// '1.5rem'
const multipleValues = rem("5px -10px 1.5rem");
// '0.3125rem -0.625rem 1.5rem'
const multipleMixedValues = rem("1px solid black");
// '0.0625rem solid black'
const commaSeparatedValues = rem("0 0 2px #ccc, inset 0 0 5px #eee");
// '0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee'
const variable = "5px";
const withVariable = rem(`${variable} 10px`);
// '0.3125rem 0.625rem'
const array = rem([24, "24px", "5px -10px 1.5rem"]);
// ['1.5rem', '1.5rem', '0.3125rem -0.625rem 1.5rem']
const object = rem({
fontSize: 24,
margin: "24px",
padding: "5px -10px 1.5rem",
});
// {fontSize: '1.5rem', margin: '1.5rem', padding: '0.3125rem -0.625rem 1.5rem'}
const changingBaseline = rem("24px", { baseline: 10 });
// '2.4rem'
const changingPrecision = rem("16px", { baseline: 12, precision: 3 });
// '1.333rem'
const convertToPx = px("1.5rem 24px");
// '24px 24px'
const convertFunction = convert("24px", "em", { baseline: 12 });
// '2em' (can only convert to rem, em or px)
const StyledComponent = styled.h1`
font-size: ${(fontSize) => rem(fontSize)};
padding: ${(fontSize) => em(12, fontSize)};
margin: ${rem("8px 16px")};
`;
// .StyledComponent { font-size: 1.5rem; padding: 0.5em; margin: 0.5rem 1rem; }
const h1 = (text) => {text};
```
You can change the default options of the functions by doing your own aliases.
```js
import { convert } from "startijenn-rem";
export const rem = (value) => convert(value, "rem", { baseline: 10 });
export const em = (value, baseline = 10) => convert(value, "em", { baseline });
export default rem;
```
```js
import rem, { em } from "./utils/rem";
const unitless = rem(24);
// '2.4rem'
const convertToEm = em("12px", "24px");
// '0.5em'
const object = rem({
fontSize: 24,
margin: "24px",
padding: "5px -10px 1.5rem",
});
// {fontSize: 2.4, margin: '2.4rem', padding: '0.5rem -1rem 1.5rem'}
const StyledComponent = styled.h1`
font-size: ${(fontSize) => rem(fontSize)};
padding: ${(fontSize) => em("6px 12px", fontSize)};
`;
// .StyledComponent { font-size: 2.4rem; padding: 0.25em 0.5em; }
const h1 = (text) => {text};
```