styled-jsx-in-place/readme.md

Full CSS support for JSX without compromises

# styled-jsx-in-place

Fork of [styled-jsx](https://github.com/vercel/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:

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

or

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

Then, install `@codemod/cli`:

```bash
npm install --global @codemod/cli
```

or

```bash
yarn global add @codemod/cli
```

Now execute this codemod:
```bash
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?](https://www.npmjs.com/package/@codemod/cli)


If you were using one plugin to allow nesting, it will convert this code:
```jsx
export default () => (
  <div>
    <p>only this <strong>word</strong> will get the style :)</p>

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

to this:

```jsx
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](https://www.npmjs.com/package/stylis) generates prefixes by default.

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

1. 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 (<style jsx> and <style jsx global> in same file)
    - some external styled-jsx cases (tagged template expressions like css`p { color: #000; }` or css.resolve`p { color: #000; }`)