Nerds Pledge Magnanimously

    storybook-addon-stylerscloud
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.4 • Public • Published

    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.

    Install

    npm i storybook-addon-stylerscloud

    DownloadsWeekly Downloads

    8

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    20.8 kB

    Total Files

    19

    Last publish

    Collaborators

    • pom-stylers.cloud