Use debug package in favor of console.log

[jonjaques]

I use style-jsx-plugin-sass in my project, as you can see - and recently updated to 3.1.0 to find that I get a lot of this in my build.

[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass

This PR simply utilizes the debug package to quiet the output and allow users to opt-in to this behavior instead of enforcing it.

DEBUG=styled-jsx npm run test

Produces the following:

2018-10-08T04:13:08.804Z styled-jsx Loading plugin from path: ~/styled-jsx/test/fixtures/plugins/another-plugin.js
2018-10-08T04:13:08.839Z styled-jsx Loading plugin from path: ~/styled-jsx/test/fixtures/plugins/options.js
2018-10-08T04:13:08.839Z styled-jsx Loading plugin from path: ~/styled-jsx/test/fixtures/plugins/multiple-options.js
2018-10-08T04:13:08.873Z styled-jsx Loading plugin from path: ~/styled-jsx/test/fixtures/plugins/multiple-options.js

Note, the timestamp in front is because the tests run in a non TTY environment; for most people it will output a colored string "styled-jsx".

[giuseppeg]

@jonjaques thank you for the contribution! I would like to figure out why the message is printed so many times (it should be printed only once) and fix that instead. Here is the relevant piece of code https://github.com/zeit/styled-jsx/blob/a9167122eb72a824a866cd9f1bcf45fd50305610/src/_utils.js#L460-L489

[jonjaques]

Thanks @giuseppeg. I'm not sure, as I just have a pretty standard webpack setup:

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    },
    {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader'
    }
  ]
}

.babelrc

plugins: [
  [
    'styled-jsx/babel',
    { 'plugins': [
      ['styled-jsx-plugin-sass', {
        'sassOptions': {
          'includePaths': [
            './node_modules',
            './assets/scss'
          ],
          'precision': 2
        }
      }] ]
    }
  ],
  .... babel/js stuff ....
]

Though where I am getting the messages (and also subsequently an error about nesting) is this UI.js file I have. Basically I'm importing reactstrap components, wrapping a <style jsx/> around it with the relevant stylesheet imported, and then reexporting. I could maybe be criticized for being a little too fancy. 😅

The usecase here is I want to output bootstrap styles only if I use that component on a page.

/**
 * Progress
 */

import {
  Progress as BSProgress,
} from 'reactstrap'

const progressStyles = css`
  @import "base";
  @import "bootstrap/scss/progress";
`

export const Progress = wrap(BSProgress, progressStyles)

/**
 * Tables
 */

import {
  Table as BSTable,
} from 'reactstrap'

const tableStyles = css`
  @import "base";
  @import "bootstrap/scss/tables";
`

export const Table = wrap(BSTable, tableStyles)

/**
 * Tooltips
 */

import {
  Tooltip as BSTooltip,
  UncontrolledTooltip as BSUncontrolledTooltip,
} from 'reactstrap'

const tooltipStyles = css`
  @import "base";
  @import "bootstrap/scss/tooltip";
`

export const Tooltip = wrap(BSTooltip, modalStyles)
export const UncontrolledTooltip = wrap(BSUncontrolledTooltip, tooltipStyles)

function wrap (Component, css) {
  return function (props) {
    return <Fragment>
      <Component {...props} />
      <style jsx global>{css}</style>
    </Fragment>
  }
}

[giuseppeg]

I mean we should dig into the babel plugin code and figure out why it calls it so many times

[mike-weshop]

Just wondering if there's any more update on this? Or anything figured out why babel calls it so many times? My logs are flooded with these messages, so be good to sort out why babel is doing that, or merge this PR in too?

[giuseppeg]

@mike-weshop hi unfortunately I don't have time right now, would you like to debug and figure out why?

[codinronan]

In the meantime, this is a bloody hack but it works for us...

const fs = require('fs-extra');
const path = require('path');

const styledJsxUtilsPath = path.join(process.cwd(), 'node_modules/styled-jsx/dist/_utils.js');
const contents = fs.readFileSync(styledJsxUtilsPath, { encoding: 'utf8' });

const cleanedContents = contents.replace('  log(', '  // log(');
fs.writeFileSync(styledJsxUtilsPath, cleanedContents);

console.log('styled-jsx has been silenced');

Save that to a JS file, add it to package.json:

    "postinstall": "node ./bin/jsx-silent.js",
    "postuninstall": "node ./bin/jsx-silent.js"

and silence is golden...

Actually makes a huge difference in build/rebuild times. When the thousands of log lines are included, the build takes 3-4x longer.

[giuseppeg]

fixing this in #518 thanks for the help!