v3.8.0

Bug fixes

• payload too large errors will be less common from now on. Instead of inlining assets in the payload sent to happo.io we package them up as a zip file and send it along with the payload.
• the tmpdir folder is now created if it doesn't already exists

New feature: happo debug

To make debugging a little easier, you can run happo debug after a regular happo run/happo dev. It will start a local server that allows you to render all examples in a regular browser.

New feature: isolating styles

This release adds support for isolating styles for a component variant. Given a .happo.js config like this:

// .happo.js
module.exports = {
  stylesheets: [
    '/path/to/global-styles.css', // regular string paths are still supported
    { source: '/path/to/foo-styles.css' id: 'foo', conditional: true }, // new object structure
    { source: '/path/to/bar-styles.css' id: 'bar', conditional: true },
  ],
};

When you specify components and its variants, you can now add a local stylesheets option to isolate styles for a variant. E.g.

// Foo-happo.js
export default [
  { 
    component: 'Button',
    variants: {
      withFooStyles: { 
        render: () => <Button />,
        stylesheets: ['foo'],
      },
      withBarStyles: { 
        render: () => <Button />,
        stylesheets: ['bar'],
      },
      withOtherStyles: () => <Button />,
    },
  },
];

Here, the withFooStyles will have styling from /path/to/foo-styles.css applied, plus /path/to/global-styles.css (since it isn't conditional). The withBarStyles variant will have /path/to/bar-styles.css + /path/to/global-styles.css applied. And withOtherStyles will only have /path/to/global-styles.css applied.

This change is backwards-compatible, meaning you can still use an array of strings for stylesheets and have the old behavior (styles always applied).