styled-jsx-in-place

Fork of styled-jsx with some changes to apply styled-jsx plugins transforms in place.

This was created because current next 12 version doesn't support styled-jsx plugins.

With this tool you can get rid of styled-jsx plugins and update to next 12.

Getting started

First, install the package:

npm install --save-dev styled-jsx-in-place

or

yarn add --dev styled-jsx-in-place

Then, install @codemod/cli:

npm install --global @codemod/cli

or

yarn global add @codemod/cli

Now execute this codemod:

codemod "{src,other-folder}/**/*.{js,jsx,ts,tsx}" --plugin node_modules/styled-jsx-in-place/babel.js --plugin-options '{ "plugins": [ [ "styled-jsx-plugin-postcss", { "path": "./postcss.config.js" } ] ] }'

What it's codemod?

If you were using one plugin to allow nesting, it will convert this code:

export default () => (
  <div>
    <p>only this <strong>word</strong> will get the style :)</p>

    <style jsx>{`
      p {
        strong {
          color: red;
        }
      }
    `}</style>
  </div>
)

to this:

export default () => (
  <div>
    <p>only this <strong>word</strong> will get the style :)</p>

    <style jsx>{`
      p strong {
        color: red;
      }
    `}</style>
  </div>
)

Tips

1. Prefixes generated by styled-jsx plugins (like autoprefixer postcss plugin) can be ignored. styled-jsx css parser stylis generates prefixes by default.

2. Run prettier after executing the codemod to clean code style of the generated code.

3. Lib it's not finished, please always manually review it's output. Current failing tests:

   • mixed local and global styled-jsx tags in same file ( and in same file)
   • some external styled-jsx cases (tagged template expressions like cssp { color: #000; } or css.resolvep { color: #000; })