Empty second rule is generated for static rules if other rule has fn value

[vikramsunilpatil]

import * as React from 'react';
import injectSheet from 'react-jss';
import {Collapse, HamburgerIcon, Nav} from "../../../index";

const styles = {
  collapse: {
    display: "inline-flex",
    maxHeight: 999,
    '@media (max-width: 800px)': {
      display: "flex",
      flexDirection: "column",
      maxHeight: 0,
      overflow: "hidden",
      float: "none"
    }
  },
  show: {
    maxHeight: 999
  },
  navCollapse: {
    display: "inline-flex",
    float: "right",
    '@media (max-width: 800px)': {
      display: "flex",
      float: "none"
    }
  },
  icon: {
    display: "none",
    fontSize: 18,
    verticalAlign: "middle",
    color: props => props.navIconColor,
    '@media (max-width: 800px)': {
      display: "inline-block",
      position: "absolute",
      right: 0,
      top: "24px",
      paddingRight: "1rem"
    }
  }
};

class CollapsableNav extends React.PureComponent {
  static defaultProps = {
    navIconColor: "white"
  };

  render() {
    const {children,  classes} = this.props;
    return [
      <DiHamburgerIcon key="1" className={classes.icon}/>,
      <DiNav className={classes.navCollapse} key="2">
        <DiCollapse classes={classes}>
          {children}
        </DiCollapse>
      </DiNav>
    ]
  }
}

export default injectSheet(styles)(CollapsableNav);

Here props are being used in icon class to generate a dynamic stylesheet. The dynamic stylesheet has empty classes for the other classes. Can someone help with why those empty classes are being generated? How can i avoid those empty classes from being generated?

<style type="text/css" data-jss="" data-meta="CollapsableNav, Unthemed, Dynamic">
.CollapsableNav-icon-1-1-82 {
  color: black;
}
.CollapsableNav-collapse-1-1-83 {
}
.CollapsableNav-show-1-1-84 {
}
.CollapsableNav-navCollapse-1-1-85 {
}
</style>

[kof]

Can you please adda simplified example an publish it on codesandbox?

On Jan 22, 2018 08:17, "Vikram Patil" notifications@github.com wrote:

import * as React from 'react'; import injectSheet from 'react-jss'; import {Collapse, HamburgerIcon, Nav} from "../../../index";

const styles = { collapse: { display: "inline-flex", maxHeight: 999, '@media (max-width: 800px)': { display: "flex", flexDirection: "column", maxHeight: 0, overflow: "hidden", float: "none" } }, show: { maxHeight: 999 }, navCollapse: { display: "inline-flex", float: "right", '@media (max-width: 800px)': { display: "flex", float: "none" } }, icon: { display: "none", fontSize: 18, verticalAlign: "middle", color: props => props.navIconColor, '@media (max-width: 800px)': { display: "inline-block", position: "absolute", right: 0, top: "24px", paddingRight: "1rem" } } };

class CollapsableNav extends React.PureComponent { static defaultProps = { navIconColor: "white" };

render() { const {children, classes} = this.props; return [

, {children} ] } } export default injectSheet(styles)(CollapsableNav); Here props are being used in icon class to generate a dynamic stylesheet. The dynamic stylesheet has empty classes for the other classes. Can someone help with why those empty classes are being generated? How can i avoid those empty classes from being generated? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub , or mute the thread .

[vikramsunilpatil]

https://codesandbox.io/s/x3w304pw In this example, you can see that empty class is generated for the header class in the dynamic stylesheet and nav class is passed a prop @kof

[kof]

I confirm, the static rule without dynamic properties, should not generate a placeholder for a dynamic rule.

[abhishek199-dhn]

@kof having the same issue here, any workaround.?

[kof]

@abhishek199-dhn is it blocking you from anything?

[HenriBeck]

Fixed by cssinjs/react-jss#271