Usage with Next.js framework

[raavanan]

@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.

ERROR  Failed to compile with 4 errors

 error  in ./pages?entry

Module build failed: Error: /Users/ganeshu/Code/mysite/pages/index.js?entry: plugin is not a function
    at PluginPass.enter (/Users/ganeshu/Code/mysite/node_modules/styled-jsx-postcss/dist/babel.js:109:19)
    at newFn (/Users/ganeshu/Code/mysite/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/ganeshu/Code/mysite/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/ganeshu/Code/mysite/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/ganeshu/Code/mysite/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/ganeshu/Code/mysite/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/ganeshu/Code/mysite/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/Users/ganeshu/Code/mysite/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/Users/ganeshu/Code/mysite/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (/Users/ganeshu/Code/mysite/node_modules/babel-traverse/lib/path/context.js:115:19)

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.

module.exports = (ctx) => {
  return {
    plugins: {
      "postcss-cssnext": {}
    }
  }
}

[giuseppeg]

@raavanan did you try this https://www.npmjs.com/package/postcss-load-plugins#array ?

[raavanan]

@giuseppeg ,, tried that too,, still the same result.

[raavanan]

@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%)))
}

[giuseppeg]

@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?

[raavanan]

@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"

[giuseppeg]

@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).

[MoOx]

Reminds me this issue https://github.com/postcss/postcss-loader/issues/138 See https://github.com/postcss/postcss-loader/issues/138#issuecomment-271874062 ?

[giuseppeg]

@michael-ciniawsky got any idea why this is happening? Can it be an issue with postcss-load-plugins?

[michael-ciniawsky]

@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 😛

[giuseppeg]

@michael-ciniawsky awesome, that worked indeed. Thanks man!

[giuseppeg]

@michael-ciniawsky actually it doesn't work -.- See #2

[michael-ciniawsky]

@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 😛

[giuseppeg]

@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

[michael-ciniawsky]

@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))
}

[giuseppeg]

@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.

[aga5tya]

@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 👏

[giuseppeg]

@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

[michael-ciniawsky]

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

[michael-ciniawsky]

@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

[giuseppeg]

@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

[michael-ciniawsky]

Yep, I not sure where but its seems to be a problem when babel is traversing the JSX AST

[aga5tya]

@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

[giuseppeg]

@raavanan released 0.1.5 which should fix your issue with postcss-cssnext. I will add an example to the next.js repo later.

[giuseppeg]

Fixed via zeit/next.js/pull/781

[raavanan]

@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