Skip to main content

​
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'])

Build docs developers (and LLMs) love

Get started for freeTalk to us