How to use jss-plugin-nested - 4 common examples

function jssPreset() {
  return {
    plugins: [
      functions(),
      global(),
      nested(),
      camelCase(),
      defaultUnit(),
      // Disable the vendor prefixer server-side, it does nothing.
      // This way, we can get a performance boost.
      // In the documentation, we are using `autoprefixer` to solve this problem.
      typeof window === 'undefined' ? null : vendorPrefixer(),
      propsSort(),
    ],
  };
}

const jss = create()
jss.use(
  functions(),
  isolate({
    reset: [
      'inherit',
      {
        fontFamily:
          '"Proxima Nova", "Helvetica Neue", Arial, Helvetica, sans-serif',
      },
    ],
  }),
  global(),
  extend(),
  nested(),
  camel(),
  unit(),
  expand(),
)

jss.createStyleSheet(styles).attach()
const { page, type, url } = qs.parse(window.location.search.substr(1))
const Page = pageComponentMap[page]

render(
  
    
      
    
  ,
  document.getElementById('grape'),

import "@babel/polyfill";
import React from "react";
import ReactDOM from "react-dom";
import { ComponentStyles, JSSManager } from "@microsoft/fast-jss-manager-react";
import { Canvas } from "../src/canvas";
import { Container } from "../src/container";
import { Row, RowResizeDirection } from "../src/row";
import { Pane, PaneResizeDirection } from "../src/pane";
import { Page } from "../src/page";
import { Grid } from "../src/grid";
import { Column, ColumnClassNamesContract } from "../src/column";
import { create } from "jss";
import jssNested from "jss-plugin-nested";

const jssInstance: ReturnType = create();
jssInstance.use(jssNested());

JSSManager.jss = jssInstance;

const columnTestStyles: ComponentStyles = {
    column: {
        "background-color": "rgba(0, 120, 212, 0.2)",
        border: "2px solid rgba(0, 120, 212, 0.2)",
        "min-height": "30px",
        margin: "4px 0",
    },
};

/**
 * Create the root node
 */
const root: HTMLElement = document.createElement("div");

import { DesignSystem } from "@microsoft/fast-components-styles-msft";
import { DesignSystemProvider, JSSManager } from "@microsoft/fast-jss-manager-react";
import addons, { makeDecorator, StoryContext, StoryGetter } from "@storybook/addons";
import { addDecorator } from "@storybook/react";
import React from "react";
import { REQUEST_DESIGN_SYSTEM_EVENT, UPDATE_DESIGN_SYSTEM_EVENT } from "./constants";
import Channel from "@storybook/channels";
import { create } from "jss";
import jssNested from "jss-plugin-nested";

const jssInstance: ReturnType = create();
jssInstance.use(jssNested());
JSSManager.jss = jssInstance;

interface DesignSystemDecoratorProps {
    channel: ReturnType;
}

class DesignSystemDecorator extends React.Component<
    DesignSystemDecoratorProps,
    { designSystem: DesignSystem | null }
> {
    constructor(props: DesignSystemDecoratorProps) {
        super(props);

        this.state = {
            designSystem: null,
        };