babel-plugin-transform-react-jsx-source-to-style

Add style['--source-code-location'] to all JSX Elements.

English | 简体中文

Example

In

<sometag />

Out

<sometag style={{'--source-code-location': `${__jsxFileName}:${lineNumber}:${columnNumber}`}} />

Install

Using npm:

npm install --save-dev babel-plugin-transform-react-jsx-source-to-style

or using yarn:

yarn add babel-plugin-transform-react-jsx-source-to-style --dev

Usage

With a configuration file (Recommended)

{
  "plugins": ["babel-plugin-transform-react-jsx-source-to-style"]
}

Via CLI

babel --plugins babel-plugin-transform-react-jsx-source-to-style script.js

Via Node API

require("@babel/core").transformSync("code", {
  plugins: ["babel-plugin-transform-react-jsx-source-to-style"],
});