postcss plugins don't get applied

[timsuchanek]

Hi, first of all, awesome idea to combine styled-jsx and postcss! I'm trying to get this running with postcss-nested with the create-react-app. The normal styled-jsx functionality is working properly. However, the plugins don't get applied. I created an example so you can reproduce it: https://github.com/timsuchanek/styled-jsx-postcss-test

Thanks!

[giuseppeg]

Have you tried to add .babelrc to the root of the project?

[aga5tya]

@timsuchanek , check the example at next.js repo for your reference just in case you missed.

https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-postcss

[timsuchanek]

@giuseppeg Indeed have I tried that, still doesn't work. So I just realized, that the <style> tag is interpreted by the browser as a normal style tag, that's the reason it still gets applied. @aga5tya Thanks for pointing to that example. That example works fine!

My situation is this: I want to run with together with Typescript. Do you have experiences on that? My question would also be: Can styled-jsx-postcss understand the code, that the Typescript compiler already has compiled?

Because I'm using webpack with TypeScript, having this config:

webpack.config.js

      {
        test: /\.(ts|tsx)$/,
        include: paths.appSrc,
        loader: 'babel?presets[]=es2016&presets[]=es2015&presets[]=react!ts',
      },

and this .babelrc

{
  "plugins": [
    "styled-jsx-postcss/babel"
  ]
}

[giuseppeg]

I have no idea about TypeScript to be honest, I am afraid that's something that you will have to figure out yourself because I am not familiar with TS unfortunately. Would be awesome if you can confirm whether it works or not with TS compiled code ;)

Have you tried to add the plugin to the webpack configuration? https://github.com/babel/babel-loader

[timsuchanek]

So, I got it working! These steps are needed to get it working:

1. Use "jsx": "preserve" in the .tsconfig. Without this, the babel plugin won't be activated for the jsx tags.
2. Then, just a .postcss.config.js is needed.
3. In the webpack config I then just use babel-loader!ts-loader (in Webpack 2), thats it.