0.1.1 • Published 6 years ago
babel-plugin-styled-component-dataset v0.1.1
babel-plugin-styled-components-dataset
This plugin automatically adds dataset(data-*
) to every component rendered with styled-components
using .attrs
method for better debugging and (E2E) Testing. For documentations of styled-components
please visit the styled-components official website.
Installation
Install the plugin as development dependencies:
npm install --save-dev babel-plugin-styled-components-dataset
Usage
Add the following line to your babel configuration:
{
"plugins": ["babel-plugin-styled-components-dataset"]
}
Options
key
string
, defaults to data-id
.
The attrubute name to add.
Example:
in .babelrc
{
"plugins": [["babel-plugin-styled-components-dataset", { "key": "data-test-key" }]]
}
in path/to/TestComponent/index.js
const Container = styled.div`
width: 100%;
`;
output:
const Container = styled.div.attrs({ 'data-test-key': 'TestComponent_Container' }).div`width: 100%`;
eventually render to html as:
<div data-test-key="TestComponent_Container"></div>