Attribute to style

Duplicate HTML attributes to inline CSS.

Usage

This Transformer is part of the CSS inlining process, you may enable it in your config.js under the css.inline key:

config.js
export default {
css: {
inline: {
attributeToStyle: true,
}
}
}

Given this HTML:

<table width="100%">
<tr>
<td>
<p>The quick brown fox jumped over the lazy dog.</p>
</td>
</tr>
</table>

It will transform it to:

<table width="100%" style="width: 100%">
<tr>
<td>
<p>The quick brown fox jumped over the lazy dog.</p>
</td>
</tr>
</table>

Customization

You may enable it only for some attributes:

config.js
export default {
css: {
inline: {
attributeToStyle: ['width', 'bgcolor', 'background'],
}
}
}

... or for all supported attributes:

config.js
export default {
css: {
inline: {
attributeToStyle: ['width', 'height', 'bgcolor', 'background', 'align', 'valign'],
}
}
}

Supported attributes

The following attributes can be duplicated as inline CSS.

width

Inlined as: width: ${value}${unit}

Notes: supports only px and % values (defaults to px)

height

Inlined as: height: ${value}${unit}

Notes: supports only px and % values (defaults to px)

bgcolor

Inlined as: background-color: ${value}

background

Inlined as: background-image: url('${value}')

align

  1. On <table> elements
    • left or right values inlined as float: ${value}
    • center value inlined as margin-left: auto; margin-right: auto
  2. On any other elements, it is inlined as text-align: ${value}

valign

Inlined as vertical-align: ${value}

Overriding

This Transformer runs right before CSS inlining, so you can still override it through Tailwind CSS utility classes.

API

The second argument must be an array of attribute names to handle:

app.js
import { attributeToStyle } from '@maizzle/framework'
const html = await attributeToStyle('html string', ['width'])
Copyright © 2024 Maizzle SRLBrand policy
Edit this page on GitHub