# nodegui-stylesheet

> react-native inspired implementation of stylesheet, written in typescript

Latest version **0.4.0** (published 2021-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install nodegui-stylesheet
pnpm add nodegui-stylesheet
yarn add nodegui-stylesheet
bun add nodegui-stylesheet
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2021-07-22 |
| First published | 2020-02-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Maintainers | solant |
| Keywords | nodegui, css, stylesheet |

## Links

- npm: https://www.npmjs.com/package/nodegui-stylesheet
- Repository: https://github.com/Solant/nodegui-stylesheet
- Homepage: https://github.com/Solant/nodegui-stylesheet#readme
- Issues: https://github.com/Solant/nodegui-stylesheet/issues
- npm.io page: https://npm.io/package/nodegui-stylesheet

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2021-07-22
- 0.3.0 — 2020-03-04
- 0.2.2 — 2020-02-19
- 0.1.2 — 2020-02-09
- 0.1.1 — 2020-02-09
- 0.1.0 — 2020-02-09

## README

# nodegui-stylesheet
![Codecov](https://img.shields.io/codecov/c/github/Solant/nodegui-stylesheet?style=flat-square)
![GitHub Workflow Status](https://img.shields.io/github/workflow/status/Solant/nodegui-stylesheet/Build?style=flat-square)
![David](https://img.shields.io/david/Solant/nodegui-stylesheet?style=flat-square)
![npm bundle size](https://img.shields.io/bundlephobia/min/nodegui-stylesheet?style=flat-square)

`react-native` inspired implementation of [stylesheet](https://facebook.github.io/react-native/docs/stylesheet), written in typescript

Compatible with plain `nodegui` and `react-nodegui`, both JS and TS.

# Why 
Despite web nature of css styling of Qt widgets, sometimes it can fall flat due to some strange inconsistencies and differences between Qt and web browser 
Here is a list of inconsistencies that gets handled: 
1. font-size value requires unit and must be without quotes
2. some string keywords should not be wrapped in quotes
3. [lineedit-password-character-prop](https://doc.qt.io/qt-5/stylesheet-reference.html#lineedit-password-character-prop) can accept both unicode number and string (string will be converted to unicode number)

# Example

1 Create a stylesheet

```javascript
import { create } from 'nodegui-stylesheet';

const style = create({
  wrapper: {
    flex: 1
  },
  logo: {
    fontSize: 14
  }
});
```

2 Use stylesheet properties instead of long css strings
```typescript jsx
// with nogegui-react
<View style={style.wrapper}>
  <Text style={style.logo}>Hello</Text>
</Text>
```

```javascript
// with plain nogegui
const label = new QLabel();
label.setText("Hello");
label.setInlineStyle(style.logo);
```

3 Use specific units if you need them, [list of supported units from qt docs](https://doc.qt.io/qt-5/stylesheet-reference.html#length):

- px: pixels
- pt: the size of one point (i.e., 1/72 of an inch)
- em: the em width of the font (i.e., the width of 'M')
- ex: the ex width of the font (i.e., the height of 'x')

```javascript
import { create, units } from 'nodegui-stylesheet';

const style = create({
  wrapper: {
    flex: 1
  },
  logo: {
    marginTop: units(1, 'ex')
  }
});
```

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