New
Storybook for full-stack developersAutomate with Chromatic
Star75,299
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
stylers.cloud
use stylers.cloud in your storybook
npm install storybook-addon-stylerscloud
Last updated 4 months ago
4
Downloads per week
Readme View on GitHub

Storybook stylers.cloud Addon

A Storybook addon to use stylers.cloud in your storybook

Getting started

1. Install

Install using npm/yarn

yarn add -D storybook-addon-stylerscloud

2. Register the addon in main.js

To configure storybook to include addon, insert storybook-addon-stylerscloud to addons field in .storybook/main.js

// .storybook/main.js
module.exports = {
  addons: ["storybook-addon-stylerscloud"],
};

3. Configure with project id

Configure addon with your stylers.cloud project id in .storybook/preview.js (edit or create it)

// .storybook/preview.js
export const parameters = {
  stylersCloudProjectId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  stylersCloudNonProdDomains: [-1204607085, 1505998205],
});

You can find project id (stylersCloudProjectId) in client settings or in snippet we sent you.

If you want to use only css.support this way add stylersCloudSupportMode: true to config and remove stylersCloudNonProdDomains (it is not needed).

Domain hashes

To get domain hashes required in stylersCloudNonProdDomains you can use this code:

  1. open domain where stylers.cloud should run (eg. dev.example.com)
  2. run code below in devtools console
  3. output of script is hash of domain you are currently on (insert it to stylersCloudNonProdDomains)
var domain = location.hostname.split(".").slice(-3).join(".");
function hash(s) {
  var h = 0,
    l = s.length,
    i;
  if (l == 0) return h;
  for (i = 0; i < l; i++) {
    h = (h << 5) - h + s.charCodeAt(i);
    h = h & h;
  }
  return h;
}
hash(domain);

exising defaults are

localhost = -1204607085
127.0.0.1 = 1505998205

Using stylers.cloud in storybook

You can open stylers.cloud window from top-right corner inside Canvas/Docs frame.

localhost_6006__path=_story_example-button--primary

More about stylers.cloud

stylers.cloud is start-up automating CSS. If you are not our client yet, feel free to contact us.

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI