# ce-css

> Build css in json format, convert css to javascript Inspired by how to write react native css.

Latest version **0.0.5** (published 2020-10-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install ce-css
pnpm add ce-css
yarn add ce-css
bun add ce-css
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2020-10-18 |
| First published | 2020-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sofia gros |
| Maintainers | darpakyokutyou |
| Keywords | css, parse, ce-css |

## Links

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

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2020-10-18
- 0.0.4 — 2020-10-18
- 0.0.3 — 2020-10-17
- 0.0.2 — 2020-10-17
- 0.0.1 — 2020-10-17

## README

```js
const { CSS, Theme, less } = require("ce-css");

/* theme */
const theme = Theme.generate({
  "material pink": {
    primary: "#d81b60",
    primaryLight: "#ff5c8d",
    // {name} : color
  }
});
theme.set("material pink");

/* css */
const card = new CSS({
  bg: {
    color: "#000000",
    background: theme.primary // #d81b60
  },
  title: {
    "font-size": "10px"
  }
});

/* inherit */
const UserPost = new CSS({
  ...card.source,
  time: {
    color: "#EEEEEE"
  }
});

console.log(UserPost.bg); // color: #000000; background: #d81b60
console.log(UserPost.time); //     color: "#EEEEEE";

/* parse */
const style = CSS.parse(`
.text {
  color: #FFFFFF;
  font-size: 2px;
}
#card {
  background-color: red; }.a {
    margin: auto;}
`);
console.log(style.text); // color: #FFFFFF; font-size: 2px;
console.log(style.card); // background-color: red;

/* parse data -> class CSS */
const style2 = new CSS(CSS.parse(`
  .box {
    color: red;
  }
`));
console.log(style2); // [class CSS]

/* less */
const { px, zpx, pe } = less; // view module/less.js
console.log( px(10.2) ); // "10.2px"
console.log( zpx(10.2) ); // "10px"
console.log( pe(10.2) ); // "10.2%"
```

##Installation
`$ npm install ce-css`

##Features
・Define css with js
・Inherit css
・Parse string css
・Theme settings
・Switching themes

##Use
・template engine.
・MEAN stack site

##contents
```js
[class CSS] {
  static parse(String: css text) {}
  get source() {}
}
[class Theme] {
  static get get() {}
  static set(String: Theme name) {}
}
<less>
module.exports.px = px => `${px}px`;
module.exports.em = em => `${em}em`;
.....more
```

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