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

const Component = styled.p`
    color: red;
`

Out

const Component = styled.p.attrs({
    "data-qa": "Component"
})`
    color: red;
`

Computed Property is also supported

const tagName = 'h1'
const Component = styled[tagName]`
    background: 'pink';
`

Out

const tagName = 'h1'
const Component = styled[tagName].attrs({
    "data-qa": "Component"
})`
    background: 'pink';
`

`data-qa` is append after other attributes defined by users

const PasswordInput = styled.input.attrs({
    type: 'password'
})`
    font-size: 14px;
    line-height: 2em;
`

Out

const PasswordInput = styled.input.attrs({
    type: 'password',
    "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: [
                ["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, pascal
Default value: kebab

Not able to add "data-qa" attribute for react components after upgrading react and next js versions

HI Team after upgrading my packages in the project I am not getting "data-qa" into the compiled code. I shared my project .babelrc and package.json files below can any one help me how to deal with this

below is .babelrc file

{
"presets": ["next/babel", "@zeit/next-typescript/babel"],
"plugins": [
["@babel/transform-runtime", {
"corejs": 2
}],
["styled-components", { "ssr": true }],
["@babel/plugin-proposal-optional-chaining"],
[
"transform-react-styled-components-qa",
{
"attribute": "data-qa",
"format": "kebab"
}
]
],
"env": {
"development" : {
"compact": false
},
"production" : {
"compact": true
}
}
}

below is Package.json

{
"engines": {
"node": ">=12"
},
"name": "prokect-ui",
"version": "2.2.17",
"private": true,
"project.template": "nextjs-k8s",
"description": "",
"bin": "src/server.js",
"pkg": {
"assets": [
"build//",
".env"
],
"scripts": [
"build//.js"
]
},
"scripts": {
"build:local": "cross-env NODE_ENV=production next build ./src",
"start": "node ./src/server.js",
"eslint-check": "eslint --print-config ./src/server.js | eslint-config-prettier-check",
"lint": "eslint "./src/**/.js"",
"build:dev": "cross-env DEPLOY_ENV=dev next build ./src",
"build:test": "cross-env DEPLOY_ENV=test next build ./src",
"build:uat": "cross-env DEPLOY_ENV=uat next build ./src",
"build:prod": "cross-env DEPLOY_ENV=prod next build ./src",
"storybook": "start-storybook -s ./stories/public -p 9001",
"build-storybook": "build-storybook ",
"pkg": "pkg . --targets node12-win-x64 --out-path pkg",
"nuke": "rimraf node_modules yarn.lock",
"prepare": "husky install",
"pre-commit": "yarn lint --fix"
},
"dependencies": {
"@babel/plugin-transform-runtime": "7.14.5",
"@babel/runtime-corejs2": "7.14.6",
"@material-ui/core": "4.11.3",
"@microsoft/applicationinsights-react-js": "2.3.1",
"@microsoft/applicationinsights-web": "2.3.1",
"@n8tb1t/use-scroll-position": "2.0.3",
"@types/geojson": "7946.0.7",
"@types/topojson-specification": "1.0.1",
"@vx/geo": "0.0.199",
"@vx/scale": "0.0.199",
"@vx/zoom": "0.0.199",
"@zeit/next-bundle-analyzer": "0.1.2",
"axios": "0.21.1",
"canvas": "2.8.0",
"classnames": "2.2.6",
"core-js": "2.6.5",
"create-react-class": "15.7.0",
"cypress": "9.5.0",
"d3-geo": "2.0.0",
"dotenv-webpack": "7.1.0",
"express": "4.17.1",
"formik": "2.0.4",
"fuse.js": "6.4.6",
"griddle-react": "1.13.1",
"history": "4.10.1",
"js-cookie": "2.2.1",
"lodash": "4.17.21",
"lodash.debounce": "4.0.8",
"lodash.get": "4.4.2",
"lodash.groupby": "4.6.0",
"lodash.isequal": "4.5.0",
"lodash.orderby": "4.6.0",
"lodash.shuffle": "4.2.0",
"lodash.sortby": "4.7.0",
"lodash.uniqby": "4.7.0",
"moment": "2.29.3",
"nanoid": "3.3.4",
"next": "12.1.6",
"next-images": "1.8.4",
"next-manifest": "3.0.1",
"next-transpile-modules": "9.0.0",
"polished": "4.1.3",
"prop-types": "15.8.1",
"pure-react-carousel": "1.27.6",
"react": "17.0.2",
"react-aria-menubutton": "7.0.3",
"react-currency-format": "1.1.0",
"react-dom": "17.0.2",
"react-grid-system": "8.1.4",
"react-gtm": "github:Vadorequest/react-gtm#2.0.0",
"react-html5video": "2.5.1",
"react-query": "3.39.0",
"react-query-devtools": "2.6.3",
"react-redux": "7.2.4",
"react-responsive": "8.2.0",
"react-text-mask": "5.4.3",
"react-transition-group": "4.4.2",
"recompose": "0.30.0",
"redux": "4.1.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"smoothscroll-polyfill": "0.4.3",
"splunk-logging": "0.11.1",
"styled-components": "5.3.5",
"styled-jsx": "5.0.2",
"topojson": "3.0.2",
"topojson-client": "3.1.0",
"typesafe-actions": "5.1.0",
"ua-parser-js": "0.7.23",
"yup": "0.29.3"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/plugin-proposal-optional-chaining": "7.11.0",
"@storybook/addon-actions": "^5.2.1",
"@storybook/addon-info": "5.2.1",
"@storybook/addon-links": "^5.2.1",
"@storybook/addons": "^5.2.1",
"@storybook/react": "^5.2.1",
"@types/lodash.groupby": "4.6.6",
"@types/lodash.orderby": "4.6.6",
"@types/lodash.shuffle": "4.2.6",
"@types/lodash.sortby": "4.7.6",
"@types/lodash.uniqby": "4.7.6",
"@types/styled-components": "5.1.25",
"@typescript-eslint/eslint-plugin": "5.26.0",
"@typescript-eslint/parser": "5.26.0",
"@zeit/next-typescript": "1.1.1",
"babel-eslint": "10.0.3",
"babel-loader": "^8.0.6",
"babel-plugin-styled-components": "1.10.6",
"babel-plugin-transform-react-styled-components-qa": "1.0.3",
"cross-env": "5.2.1",
"dotenv": "8.1.0",
"dotenv-webpack": "7.1.0",
"eslint": "6.4.0",
"eslint-config-airbnb": "18.0.1",
"eslint-config-prettier": "6.3.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-prettier": "3.1.1",
"eslint-plugin-react": "7.14.3",
"husky": "^7.0.0",
"lint-staged": "11.2.3",
"patch-package": "6.4.7",
"pkg": "4.4.0",
"prettier": "2.6.2",
"tsconfig-paths-webpack-plugin": "3.2.0",
"typescript": "4.7.3"
},
"lint-staged": {
".{js,jsx,tsx,ts}": [
"eslint --fix",
"git add"
],
".js": "eslint --cache --fix"
}
}

hibikiledo / babel-plugin-transform-react-styled-components-qa Goto Github PK