postcss-browser-reporter icon indicating copy to clipboard operation
postcss-browser-reporter copied to clipboard

Issue w/ SSR

Open jrodl3r opened this issue 9 years ago • 4 comments

Having a tough time adding this to a project - react-webpack-node

Able to log "opts", "css", and "styles" output, so it's getting good data.

Wondering if the Server Side Rendering (injects all HTML onLoad) is what might be blocking this package from showing any visible browser activity?

postCSS setup:

[
  require('postcss-import')({
    path: path.join(__dirname, '..', 'app', 'css'),
    addDependencyTo: webpack
  }),
  require('postcss-cssnext')({
    browsers: ['> 1%', 'last 2 versions']
  }),
  require('postcss-browser-reporter'),
  require('postcss-reporter')({ clearMessages: true })
]

Thx

jrodl3r avatar Jul 01 '16 20:07 jrodl3r

Should work. There is no html injection. Content is added via html::before { content:".... Do you have any message reported by postcss-reporter? Because this won't add a thing if not.

MoOx avatar Jul 02 '16 03:07 MoOx

Oh your forgot the parenthesis, that might be the reason

  require('postcss-browser-reporter'),

Try instead

  require('postcss-browser-reporter')(),

MoOx avatar Jul 02 '16 03:07 MoOx

@MoOx (had it loaded..) would that pseudo style declaration (html::before { content:"...) be visible in Chrome DevTools?

also tried invoking parens ..er')(); and also tried passing in a config-obj { selector: 'body::before' } (and 'body:before').

no luck =\ ..but I'll keep digging, Thx for helping 👍

jrodl3r avatar Jul 02 '16 21:07 jrodl3r

It's written in the doc https://github.com/postcss/postcss-browser-reporter#selector-string-default-htmlbefore. Inspect that another stronger selector is not using this already.

MoOx avatar Jul 03 '16 04:07 MoOx