Closed raavanan closed 7 years ago
@raavanan did you try this https://www.npmjs.com/package/postcss-load-plugins#array ?
@giuseppeg ,, tried that too,, still the same result.
@giuseppeg, i went ahead and added the plugin within the package itself. Compilation runs through fine, but postcss transforms aren't getting applied in the output styles. I tried with the default postcss-color-function plugin too, no transformations are occurring.
Before:
<style jsx>{`
#title {
background: linear-gradient(
color(rebeccapurple a(50%)),
hwb(0, 20%, 40%),
color(hwb(0, 20%, 40%, .5) a(+10%)),
color(#9d9c a(90%))
)
}
`}</style>
After:
#title[data-jsx="3245986012"] {
background: linear-gradient( color(rebeccapurple a(50%)),hwb(0, 20%, 40%),color(hwb(0, 20%, 40%, .5) a(+10%)), color(#9d9c a(90%)))
}
@raavanan I haven't gotten the chance to try to add postcss-cssnext
– I will try later in the evening after work. I did try to add postcss-color-function
yesterday and it worked just fine.
Can you paste your .babelrc
and postcss.config.js
?
@giuseppeg, thanks for your humble response,, would be really helpful if you could share up an implementation sample with next.js, i am planning to migrate current site on this stack to cssnext based style approach.
postcss.config.js
module.exports = () => {
return {
plugins: [
require('postcss-cssnext')({})
]
}
}
.babelrc
{
"presets": [
"next/babel"
],
"plugins": [
"styled-jsx-postcss/babel"
]
}
package.json - deps
"postcss": "^5.2.9",
"postcss-cssnext": "^2.9.0",
"postcss-load-plugins": "^2.1.0",
"styled-jsx-postcss": "^0.1.3"
@raavanan I tried to add the individual plugins (eg. postcss-custom-properties, postcss-color-function) and it works just fine. I will investigate this particular issue when I have time (soon hopefully).
@michael-ciniawsky got any idea why this is happening? Can it be an issue with postcss-load-plugins?
@giuseppeg There was an issue with plugin packages like e.g postcss-cssnext were postcss-load-plugins
throws an error albeit the plugin was loaded correctly, this should be fixed in postcss-load-plugins >= v2.2.0
. So bugfix is chore(package): postcss-load-plugins v2.1.0...2.2.0
:). Note that any error is now catch()
ed and must be handled by the respective package author itself.
postcssrc(ctx, ctx.dir)
.then((plugins) => ...)
.catch((err) => console.error(err)) // No Config, Loading Plugin failed, Invalid Plugin found
If this doesn't fix it, please file an issue @postcss-load-plugins asap 😛
@michael-ciniawsky awesome, that worked indeed. Thanks man!
@michael-ciniawsky actually it doesn't work -.- See #2
@giuseppeg The issue seems not to be related to postcss. Error would be Invalid PostcSS Plugin found: [index]
. Or do I miss something, not familiar with the inner logic here. From the error stack trace travis shows that's babel somehow/somewhere 😛
@michael-ciniawsky that is me throwing an error when the postcss processor fails https://github.com/giuseppeg/styled-jsx-postcss/blob/master/src/processor.js
@giuseppeg Is there a way to get the original error message please ? ;)
processor.js
if (!plugins) {
plugins = await loader(options.env || process.env)
}
Why setting [only] the ENV here ? :)
postcss-load-plugins
has it already on the context ctx
(ctx.env === process.env.NODE_ENV)
Node API
// ctx -> {Obejct} -> ctx || {}
// path -> {String} -> path || process.cwd()
postcssrc(ctx, path)
.then(({ plugins , file }) => console.log(plugins, file) )
.catch((err) => console.error(err))
processor.js
import { dirname } from 'path'
import postcss from 'postcss'
import postcssrc from 'postcss-load-plugins'
...
if (!plugins) {
/**
* 1. options === ctx => (ctx) => { plugins: { 'postcss-plugin': ctx.plugin }}
* 2. path === dirname(src)
* => start searching (upwards) for postcss.config.js in current file directory
* => multiple configs possible (global/local)
*/
plugins = await loader(options, dirname(src))
}
@michael-ciniawsky here is the full stack trace https://gist.github.com/giuseppeg/24df3782e69856dd066fd504d71962fe
Why setting [only] the ENV here ? :)
That's in case someone wants to override it but probably it is not necessary.
path
is not documented but it doesn't seem to be a problem, I checked and process.cwd()
is the root of the repo.
@giuseppeg, does individual plugins have to be within the module itself or will it get picked if i have the plugin configuration at root of next.js app. For some reason, the transformations don't happen with postcss-nested plugin installed at the next app root. Would be helpful if u could share an implementation example. Thanks for your wonderful contribution 👏
@aga5tya the app root should work, I am trying to solve @raavanan's issue and I will add an example to the Next.js repo
That's in case someone wants to override it but probably it is not necessary.
@giuseppeg Everytime process.env.NODE_ENV is changed e.g npm run
"build": "NODE_ENV=production webpack"
ctx.env
gets updated
@giuseppeg Thats the error stack trace from travis, but that doesn't help, it's babel erroring there, even in all the module paths there is no processor.js
or postcss-load-plugins/index.js
reference. I need error message thrown from postcsstrc().catch((err) => err)
for debugging
@michael-ciniawsky that stack trace has more info.
It seems that postcss-load-plugins
is working just fine as it is not the one who throws the error:
{ plugins:
[ Processor {
version: '5.2.10',
plugins: [Object],
postcssPlugin: 'postcss-cssnext',
postcssVersion: '5.2.10' } ],
file: '/Users/giuseppe/code/styled-jsx-postcss/package.json' }
I'll ping you on gitter
Yep, I not sure where but its seems to be a problem when babel is traversing the JSX AST
@aga5tya the app root should work, I am trying to solve @raavanan's issue and I will add an example to the Next.js repo
@giuseppeg: My bad,, works fine with the latest release. Thank You!
P.S. The following plugins work out very well. postcss-simple-vars postcss-custom-media postcss-nested
@raavanan released 0.1.5
which should fix your issue with postcss-cssnext. I will add an example to the next.js repo later.
Fixed via zeit/next.js/pull/781
@raavanan released 0.1.5 which should fix your issue with postcss-cssnext. I will add an example to the next.js repo later.
Works very well ! Thanks @giuseppeg
@giuseppeg , in continuation to the conversation at zeit/styled-jsx#5, I upgraded to the latest release 0.14, it fixed the previous issue. Now i seem to get a new error related to postcss plugins i suppose. Below is the error occurred.
I have installed "postcss-cssnext": "^2.9.0" plugin and have configured postcss.config.js as below referring to the docs at postcss-load-plugins. Please let me know if there is an issue with the way i am configuring the postcss plugins.