Closed timsuchanek closed 7 years ago
Have you tried to add .babelrc
to the root of the project?
@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
@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"
]
}
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
So, I got it working! These steps are needed to get it working:
"jsx": "preserve"
in the .tsconfig. Without this, the babel plugin won't be activated for the jsx tags.babel-loader!ts-loader
(in Webpack 2), thats it.
Hi, first of all, awesome idea to combine
styled-jsx
andpostcss
! I'm trying to get this running withpostcss-nested
with thecreate-react-app
. The normalstyled-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-testThanks!