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 inlineCSS key:

config.js

module.exports = {
  inlineCSS: {
    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>

You may enable it only for some attributes:

config.sjs

module.exports = {
  inlineCSS: {
    attributeToStyle: ['width', 'bgcolor', 'background']
  }
}

The following attributes can be duplicated as inline CSS.

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

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

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

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

Inlined as: background-color: ${value}

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

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

Inlined as vertical-align: ${value}

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

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

app.js

const {attributeToStyle} = require('@maizzle/framework')

const html = await attributeToStyle('html string', ['width'])