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:
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:
export default {
css: {
inline: {
attributeToStyle: ['width', 'bgcolor', 'background'],
}
}
}
... or for all supported attributes:
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
- On
<table>
elementsleft
orright
values inlined asfloat: ${value}
center
value inlined asmargin-left: auto; margin-right: auto
- 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:
import { attributeToStyle } from '@maizzle/framework'
const html = await attributeToStyle('html string', ['width'])