open-index/open-npm huggingface dataset:
npm package: @phtml/css
Description: Transform inline CSS in HTML
Author: Jonathan Neal
Latest version: 3.1.0

# pHTML CSS [<img src="https://phtml.io/logo.svg" alt="pHTML" width="90" height="90" align="right">][phtml]

[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]

[pHTML CSS] lets you transform inline CSS in HTML.

```html
<style>p { margin-block: 0; }</style>

<p style="margin-block: 0;"></p>

<!-- becomes (when processed with postcss-preset-env) -->

<style>p { margin-left: 0; margin-right: 0; }</style>

<p style="margin-left: 0; margin-right: 0;"></p>
```

## Usage

Transform HTML files directly from the command line:

```bash
npx phtml source.html output.html -p @phtml/css
```

### Node

Add [pHTML CSS] to your project:

```bash
npm install @phtml/css --save-dev
```

Use [pHTML CSS] to process your HTML:

```js
const phtmlCss = require('@phtml/css');

phtmlCss.process(YOUR_HTML /*, processOptions, pluginOptions */);
```

Or use it as a [pHTML] plugin:

```js
const phtml = require('phtml');
const phtmlCss = require('@phtml/css');

phtml([
  phtmlCss(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);
```

[pHTML CSS] runs in all Node environments, with special instructions for:

| [Node](INSTALL.md#node) | [CLI](INSTALL.md#phtml-cli) | [Eleventy](INSTALL.md#eleventy) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
| --- | --- | --- | --- | --- |

## Options

### plugins

The `plugins` option defines the plugins applied to PostCSS.

```js
phtmlCss({
  plugins: require('postcss-preset-env')({
    stage: 0
  })
})
```

### processOptions

The `processOptions` option defines the process options provided to PostCSS. By
default, these options enable sourcemaps. You can disable them by passing in an
empty object.

```js
phtmlCss({
  processOptions: {}
})
```

[cli-img]: https://img.shields.io/travis/phtmlorg/phtml-css.svg
[cli-url]: https://travis-ci.org/phtmlorg/phtml-css
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/phtmlorg/phtml
[npm-img]: https://img.shields.io/npm/v/@phtml/css.svg
[npm-url]: https://www.npmjs.com/package/@phtml/css

[pHTML]: https://github.com/phtmlorg/phtml
[pHTML CSS]: https://github.com/phtmlorg/phtml-css
npm package: @phtml/image-alt
Description: Add alt attributes to images in HTML
Author: Jonathan Neal
Latest version: 4.1.0

# pHTML Image Alt [<img src="https://phtml.io/logo.svg" alt="pHTML" width="90" height="90" align="right">][phtml]

[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]

[pHTML Image Alt] lets you add alt attributes to images in HTML.

```html
<img src="/path/to/image-1.jpg" alt="Mother Nature's Son">
<img src="/path/to/image-2.jpg">
<img src="/path/to/image-3.jpg" alt="">
<img src="/path/to/image-4.jpg">

<!-- becomes -->

<img src="/path/to/image-1.jpg" alt="Mother Nature's Son">
<img src="/path/to/image-2.jpg" alt>
<img src="/path/to/image-3.jpg" alt="">
<img src="/path/to/image-4.jpg" alt>
```

## Usage

Add [pHTML Image Alt] to your project:

```bash
npm install @phtml/image-alt --save-dev
```

Use [pHTML Image Alt] to process your HTML:

```js
const phtmlImageAlt = require('@phtml/image-alt');

phtmlImageAlt.process(YOUR_HTML /*, processOptions, pluginOptions */);
```

Or use it as a [pHTML] plugin:

```js
const phtml = require('phtml');
const phtmlImageAlt = require('@phtml/image-alt');

phtml([
  phtmlImageAlt(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);
```

[pHTML Image Alt] runs in all Node environments, with special instructions for:

| [Node](INSTALL.md#node) | [CLI](INSTALL.md#phtml-cli) | [Eleventy](INSTALL.md#eleventy) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
| --- | --- | --- | --- | --- |

## Options

### alts

The `alts` option defines alt attributes by a matching `src` attribute value.

```js
phtmlImageAlt({ alts: {
  '/path/to/image-2.jpg': 'Martha My Dear'
} });
```

```html
<img src="/path/to/image-1.jpg" alt="Mother Nature's Son">
<img src="/path/to/image-2.jpg">
<img src="/path/to/image-3.jpg" alt="">
<img src="/path/to/image-4.jpg">

<!-- becomes -->

<img src="/path/to/image-1.jpg" alt="Mother Nature's Son">
<img src="/path/to/image-2.jpg" alt="Martha My Dear">
<img src="/path/to/image-3.jpg" alt="">
<img src="/path/to/image-4.jpg" alt>
```

[cli-img]: https://img.shields.io/travis/phtmlorg/phtml-image-alt.svg
[cli-url]: https://travis-ci.org/phtmlorg/phtml-image-alt
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/phtmlorg/phtml
[npm-img]: https://img.shields.io/npm/v/@phtml/image-alt.svg
[npm-url]: https://www.npmjs.com/package/@phtml/image-alt

[pHTML]: https://github.com/phtmlorg/phtml
[pHTML Image Alt]: https://github.com/phtmlorg/phtml-image-alt
npm package: @phtml/include
Description: Embed HTML partials into HTML
Author: Jonathan Neal
Latest version: 4.2.0

# pHTML Include [<img src="https://phtml.io/logo.svg" alt="pHTML" width="90" height="90" align="right">][phtml]

[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]

[pHTML Include] lets you embed HTML partials into HTML.

```html
<!doctype html>
<html>
  <head>
    <title>phtml-include</title>
  </head>
  <body>
    <!-- where _body.html is <h1>Body Partial</h1> -->
    <include src="_body.html" />
  </body>
</html>

<!-- becomes -->

<!doctype html>
<html>
  <head>
    <title>phtml-include</title>
  </head>
  <body>
    <h1>Body Partial</h1>
  </body>
</html>
```

## Usage

Transform HTML files directly from the command line:

```bash
npx phtml source.html output.html -p @phtml/include
```

### Node

Add [pHTML Include] to your project:

```bash
npm install @phtml/include --save-dev
```

Use [pHTML Include] to process your HTML:

```js
const phtmlInclude = require('@phtml/include');

phtmlInclude.process(YOUR_HTML /*, processOptions, pluginOptions */);
```

Or use it as a [pHTML] plugin:

```js
const phtml = require('phtml');
const phtmlInclude = require('@phtml/include');

phtml([
  phtmlInclude(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);
```

[pHTML Include] runs in all Node environments, with special instructions for:

| [Node](INSTALL.md#node) | [CLI](INSTALL.md#phtml-cli) | [Eleventy](INSTALL.md#eleventy) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
| --- | --- | --- | --- | --- |

## Options

### cwd

The `cwd` option defines and overrides the current working directory of includes.

```js
// resolve all relative includes to /some/absolute/path
phtmlInclude({ cwd: '/some/absolute/path' });
```

[cli-img]: https://img.shields.io/travis/phtmlorg/phtml-include.svg
[cli-url]: https://travis-ci.org/phtmlorg/phtml-include
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/phtmlorg/phtml
[npm-img]: https://img.shields.io/npm/v/@phtml/include.svg
[npm-url]: https://www.npmjs.com/package/@phtml/include

[pHTML]: https://github.com/phtmlorg/phtml
[pHTML Include]: https://github.com/phtmlorg/phtml-include
npm package: @phtml/js
Description: Transform inline JS in HTML
Author: Jonathan Neal
Latest version: 3.1.0

# pHTML JS [<img src="https://phtml.io/logo.svg" alt="pHTML" width="90" height="90" align="right">][phtml]

[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]

[pHTML JS] lets you transform inline JS in HTML.

```html
<script>document.addEventListener('DOMContentLoaded', () => {})</script>

<button onClick="console.log({ event })"></button>

<!-- becomes (when processed with @babel/preset-env) -->

<script>document.addEventListener('DOMContentLoaded', function () {})</script>

<button onClick="console.log({ event: event })"></button>
```

## Usage

Transform HTML files directly from the command line:

```bash
npx phtml source.html output.html -p @phtml/js
```

### Node

Add [pHTML JS] to your project:

```bash
npm install @phtml/js --save-dev
```

Use [pHTML JS] to process your HTML:

```js
const phtmlJs = require('@phtml/js');

phtmlJs.process(YOUR_HTML /*, processOptions, pluginOptions */);
```

Or use it as a [pHTML] plugin:

```js
const phtml = require('phtml');
const phtmlJs = require('@phtml/js');

phtml([
  phtmlJs(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);
```

[pHTML JS] runs in all Node environments, with special instructions for:

| [Node](INSTALL.md#node) | [CLI](INSTALL.md#phtml-cli) | [Eleventy](INSTALL.md#eleventy) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
| --- | --- | --- | --- | --- |

## Options

### presets

The `plugins` option defines the plugins applied to Babel.

```js
phtmlJs({
  plugins: ['@babel/syntax-dynamic-import']
})
```

### plugins

The `presets` option defines the presets applied to Babel.

```js
phtmlJs({
  presets: [
    ['@babel/env', {
      loose: true,
      modules: false,
      targets: 'last 2 versions, not dead',
      useBuiltIns: 'entry'
    }]
  ]
})
```

### transformOptions

The `transformOptions` option defines the transform options provided to Babel.
By default, these options enable sourcemaps. You can disable them by passing in
an empty object.

```js
phtmlCss({
  transformOptions: {}
})
```

### sourceMapAttributes

The `sourceMapAttributes` option determines whether source maps will be added
to `on` attributes. These actually work, but the feature is disabled by default.

[cli-img]: https://img.shields.io/travis/phtmlorg/phtml-js.svg
[cli-url]: https://travis-ci.org/phtmlorg/phtml-js
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/phtmlorg/phtml
[npm-img]: https://img.shields.io/npm/v/@phtml/js.svg
[npm-url]: https://www.npmjs.com/package/@phtml/js

[pHTML]: https://github.com/phtmlorg/phtml
[pHTML JS]: https://github.com/phtmlorg/phtml-js
npm package: @phtml/self-closing
Description: Use self-closing tags in HTML
Author: Jonathan Neal
Latest version: 4.2.0

# pHTML Self Closing [<img src="https://phtml.io/logo.svg" alt="pHTML" width="90" height="90" align="right">][phtml]

[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]

[pHTML Self Closing] lets you use self-closing tags in HTML.

```html
<div><div class="main"/></div>
<template><slot name="title"/></template>
<custom-element/>

<!-- becomes -->

<div><div class="main"></div></div>
<template><slot name="title"></slot></template>
<custom-element></custom-element>
```

**Note: The `<script>` and `<style>` tags are ignored.**

## Usage

Transform HTML files directly from the command line:

```bash
npx phtml source.html output.html -p @phtml/self-closing
```

### Node

Add [pHTML Self Closing] to your project:

```bash
npm install @phtml/self-closing --save-dev
```

Use [pHTML Self Closing] to process your HTML:

```js
const phtmlSelfClosing = require('@phtml/self-closing');

phtmlSelfClosing.process(YOUR_HTML /*, processOptions, pluginOptions */);
```

Or use it as a [pHTML] plugin:

```js
const phtml = require('phtml');
const phtmlSelfClosing = require('@phtml/self-closing');

phtml([
  phtmlSelfClosing(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);
```

[pHTML Self Closing] runs in all Node environments, with special instructions for:

| [Node](INSTALL.md#node) | [CLI](INSTALL.md#phtml-cli) | [Eleventy](INSTALL.md#eleventy) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
| --- | --- | --- | --- | --- |

## Options

### ignore

The `ignore` option defines self-closing elements that will not be expanded.

```js
phtmlSelfClosing({ ignore: 'a' });
```

```html
<a/>
<custom-element/>
<div/>

<!-- becomes -->

<a/>
<custom-element></custom-element>
<div></div>
```

The `ignore` option accepts a string or an array of strings.

```js
phtmlSelfClosing({ ignore: ['a', 'custom-element'] });
```

```html
<a/>
<custom-element/>
<div/>

<!-- becomes -->

<a/>
<custom-element/>
<div></div>
```

[cli-img]: https://img.shields.io/travis/phtmlorg/phtml-self-closing.svg
[cli-url]: https://travis-ci.org/phtmlorg/phtml-self-closing
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/phtmlorg/phtml
[npm-img]: https://img.shields.io/npm/v/@phtml/self-closing.svg
[npm-url]: https://www.npmjs.com/package/@phtml/self-closing

[pHTML]: https://github.com/phtmlorg/phtml
[pHTML Self Closing]: https://github.com/phtmlorg/phtml-self-closing