cssresources-addon: Do not use SyntaxHighlighter with the very long code-content.

[tomilaurell]

Issue:

What I did

Adds support to use very long css content with cssresources-addon. The current implementation tries to render (forever) all the content with SyntaxHighlighter. This PR will restrict the use of SyntaxHighligher with content length up to 100k. In case the SyntaxHighligher is not used, the first 100k of the content will be rendered within plain pre-tag and warning of partly missing content is added to the end of it.

How to test

This is example with less-files.

webpack.config.js

...
// do not include style-loader to inject css content manually
config.module.rules.push({
    test: /\.less?$/,
    loaders: [require.resolve('css-loader'), require.resolve('less-loader')], 
  })
...

config.js

...
import globalStyles from '../styles/index.less'

cssresources: [
    {
      id: `Global toggleable styles`,
      code: `<style>${globalStyles}</style>`,
      picked: true,
    },
  ],
...

Screenshot

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/79aefgspu
✅ Preview: https://monorepo-git-fork-tomilaurell-next.storybook.now.sh

[ndelangen]

We use yarn in our repo, so if you could also please remove the package-lock.json?

[ndelangen]

beautiful