babel-plugin-transform-react-styled-components-qa
This plugin adds data-qa
props to styled-component using .attrs
.
This plugin can be used with babel-plugin-transform-react-qa-classes to provide support for both styled-components and React components.
Standard HTML Tags
In
const Component = styled.p`
color: red;
`;
Out
const Component = styled.p.attrs(props => ({
"data-qa": props["data-qa"] || "Component"
}))`
color: red;
`;
Computed Property is also supported
In
const tagName = "h1";
const Component = styled[tagName]`
background: "pink";
`;
Out
const tagName = "h1";
const Component = styled[tagName].attrs(props => ({
"data-qa": props["data-qa"] || "Component"
}))`
background: "pink";
`;
data-qa
is append after other attributes defined by users
In
const PasswordInput = styled.input.attrs({
type: "password"
})`
font-size: 14px;
line-height: 2em;
`;
Out
const PasswordInput = styled.input.attrs(props => ({
type: "password",
"data-qa": props["data-qa"] || "PasswordInput"
}))`
font-size: 14px;
line-height: 2em;
`;
Usage
This plugin is intended to be use in pre-production environment.
Using this plugin with SSR could result in larger payload due to the extra attribute.
.babelrc
{
"env": {
"dev": {
plugins: [
["babel-transform-react-styled-components-qa", {
"attribute": "data-qa",
"format": "kebab"
}]
]
}
}
}
Options
attribute : (string)
The attribute name to be used instead of data-qa
.
format : (string)
Support values: kebab
, camel
, snake
Default value: kebab