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>

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'],
    }
  }
}

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

import { attributeToStyle } from '@maizzle/framework'

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