Nutritious Pumpkin Meal

    storybook-stylesheet-disable
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    Storybook Stylesheet Disable

    A Storybook add-on that makes it easy to disable stylesheets.

    Getting Started

    1. yarn add --dev storybook-stylesheet-disable
    2. Add to your main.js config file:
    module.exports = {
      ...,
      addons: [
        ...,
        "storybook-stylesheet-disable"
      ],
      ...,
    };
    
    1. Configure stylesheetId in preview.js within your .storybook directory:
    export const globals = {
      ...,
      stylesheetId: 'your-unique-id-here',
      ...,
    };
    
    1. Create a preview-head.html file within your .storybook directory if you don't already have one.
    2. Add the stylesheets you wish to be disabled/enabled via <link> tags, giving each one the same unique identifier as a title attribute:
    <link rel="stylesheet" href="./path-to-css-file-1.css" type="text/css" title="my-unique-id">
    <link rel="stylesheet" href="./path-to-css-file-2.css" type="text/css" title="my-unique-id">
    <link rel="stylesheet" href="./path-to-css-file-3.css" type="text/css" title="my-unique-id">
    

    (This tool can operate in reverse, too, if you wish. Simply add the disabled attribute to the <link> tags.)

    1. Spin up Storybook and you should see a new toolbar button with the < > icon, which will disable/enable the specified stylesheets.

    Install

    npm i storybook-stylesheet-disable

    DownloadsWeekly Downloads

    9

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    16.2 kB

    Total Files

    22

    Last publish

    Collaborators

    • huntermacd