# css-string-utils

> theme class utils, css utils

Latest version **0.0.0** (published 2024-01-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install css-string-utils
pnpm add css-string-utils
yarn add css-string-utils
bun add css-string-utils
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2024-01-16 |
| First published | 2024-01-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | xiaohuoni |

## Links

- npm: https://www.npmjs.com/package/css-string-utils
- npm.io page: https://npm.io/package/css-string-utils

## Dependencies (1)

- [stylis](https://npm.io/package/stylis.md) ^4.3.1

## Recent versions

- 0.0.0 (latest) — 2024-01-16

## README

# css-string-utils

theme class utils, css utils

```js
pnpm i css-string-utils

import {} from 'css-string-utils';
```

## stringifyCss

根据指定模版，将对象的值解析道模版中，生成最终的 css 字符串

```js
const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
const a = { backgroundColor: 'red', fontSize: '12px' };
const c = stringifyCss(tpl, a);
console.log(c); // .cc{ background-color:red; font-size:12px;}
```

## parseCss

根据指定模版，将值从 css 字符串中解析成对象

```js
const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
const a = '.cc{ background-color:red; font-size:12px;}';
const c = parseCss(tpl, a);
console.log(c); // { backgroundColor:'red',fontSize:'12px'}
```

## normalizeCSS

编译 css 且支持给 css 提供指定的选择器，如

```js
const a = '.a{ .b{ font-size:12px; } }';

const css = normalizeCSS(a);

console.log(css);

// output: '.a .b{font-size:12px;}'

const css1 = normalizeCSS(a, '.cc');
console.log(css1);
// output: '.cc .a .b{font-size:12px;}'
```

## insertRules

将 css 挂载到页面上 `insertRules(id: string, rules: string,selector = document.head,);` 指定 id，会覆盖生产的 style 标签

```js
insertRules('12312', css);
```

## insertLink

挂载指定的 css link `insertLink(id: string, href: string, insertBefore = false)`

可选择指定挂在在 body.firstElementChild 还是 head 中

```js
insertLink('12312', 'http://xxx.css', true);
```

---
_Source: https://npm.io/package/css-string-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._