# gulp-typed-markup

> Generate Typescript markup moduled from CSS

Latest version **1.0.0** (published 2017-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-typed-markup
pnpm add gulp-typed-markup
yarn add gulp-typed-markup
bun add gulp-typed-markup
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-11-16 |
| First published | 2017-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | nocheinarbeiter |
| Keywords | typed markup, gulp, react, css, bem |

## Links

- npm: https://www.npmjs.com/package/gulp-typed-markup
- Repository: https://github.com/nocheinarbeiter/gulp-typed-markup
- Homepage: https://github.com/nocheinarbeiter/gulp-typed-markup#readme
- Issues: https://github.com/nocheinarbeiter/gulp-typed-markup/issues
- npm.io page: https://npm.io/package/gulp-typed-markup

## Dependencies (8)

- [vinyl](https://npm.io/package/vinyl.md) ^2.1.0
- [through2](https://npm.io/package/through2.md) ^2.0.3
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.8
- [get-stream](https://npm.io/package/get-stream.md) ^3.0.0
- [css-tokenize](https://npm.io/package/css-tokenize.md) ^1.0.1
- [from2-buffer](https://npm.io/package/from2-buffer.md) ^1.0.0
- [bem-classname-parser](https://npm.io/package/bem-classname-parser.md) ^1.0.2
- [css-selector-tokenizer](https://npm.io/package/css-selector-tokenizer.md) ^0.7.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-11-16

## README

# gulp-typed-markup
This `Gulp` plugin takes `CSS` sources and generates `Typescript` files
containing corresponding `React` element factories.

If you have the following element definition in `CSS`
```css
/* Article.css */
.Article__caption {
    font-size: 28px;
}
```
the plugin will generate appropriate factory with binded CSS classes:
```ts
/* ArticleMarkup.ts */
import * as Markup from 'react-typed-markup';
declare var require: any; require('./Article.css');

export var caption: Markup.TagDIV<null> = Markup.bind(
    'div', 'Article', 'caption'
);
```
So, exported element factory can be used in React component's `render` code:
```ts
/* Article.ts */
import * as React from 'react';
import * as ArticleMarkup from './path-to-generated/ArticleMarkup';

export class Article extends React.Component<{}, {}> {
    render() {
        return ArticleMarkup.caption('Hello');
    }
}
```
No need to mess with string fragments to format CSS classes anymore. 
Just use autogenerated strictly typed factory functions.

## Installation
```sh
$ npm install --save-dev gulp-typed-markup
```
Note that genearted markup modules 
also require [`react-typed-markup`](https://github.com/nocheinarbeiter/react-typed-markup) helper module. 
It exposes generic Typescirpt interfaces for element factories and contains wrapper function that invokes
`React.createElement` under the hood. So install it too:
```sh
$ npm install --save react-typed-markup
```

## BEM naming
We assume that you use `BEM` naming convention for CSS class names. But there is one exception:
`block` is just a namespace for related `elements`, it must not contain any style props directly.

Instead of this:
```css
/* wrong */
.Article {
    border: solid 2px;
}
```
always wrap block-level styles in a separated element:
```css
/* ok */
.Article__article {
    border: solid 2px;
}
```
Second constraint: don't use dashes `-` in names, prefer `camelCase` style for Javascript compartibility.

Other things are the same, including, of course, modifiers.

## Modifiers

Let's extend previously declared `caption` element with modifiers

```css
.Article__caption {
    font-size: 28px;
}
.Article__caption_smallCaps {
    font-variant-caps: small-caps;
}
.Article__caption_type_info {
    color: blue;
}
.Article__caption_type_warning {
    color: red;
}
```
Generated Typescript fragment now looks like this

```ts
export var caption: Markup.TagDIV<CaptionMods> = Markup.bind(
    'div', 'Article', 'caption'
);
export type CaptionMods = {
    smallCaps?: boolean;
    type?: 'info' | 'warning';
}

```
Now modifiers can be used in your code
```ts
ArticleMarkup.caption({mods: {smallCaps: true, type: 'info'}}, 'Hello')
```

## Passing React props to elements
It is also possible to pass regular React props within the first argrument:

```ts
ArticleMarkup.caption(
    {
        key: 42,
        onClick: () => (),
        mods: {smallCaps: true, type: 'info'}
    },
    'Hello'
)
```

## Specifying tag name
Default generated tag is `div`. Just write specific tag name in css selector

```css
h2.Article__caption {
    font-size: 28px;
}
```
Use empty rule, if you don't want to affect selector priority

```css
h2.Article__caption {
}
.Article__caption {
    font-size: 28px;
}
```

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