Styled-jsx: StyleSheet: `insertRule` accepts only strings.

[slaskis]

I'm trying out the later next.js betas and now our tests will fail with this error:

StyleSheet: `insertRule` accepts only strings.

      at invariant (node_modules/styled-jsx/dist/lib/stylesheet.js:271:11)
      at StyleSheet.insertRule (node_modules/styled-jsx/dist/lib/stylesheet.js:122:7)
      at node_modules/styled-jsx/dist/stylesheet-registry.js:88:29
          at Array.map (<anonymous>)
      at StyleSheetRegistry.add (node_modules/styled-jsx/dist/stylesheet-registry.js:87:27)
      at JSXStyle.componentWillMount (node_modules/styled-jsx/dist/style.js:58:26)
      at callComponentWillMount (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3733:14)
      at mountClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3790:7)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4172:9)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4561:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6529:16)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6638:28)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2210:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
      at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2249:16)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2106:29)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6756:7)
      at scheduleUpdateImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7141:19)
      at scheduleUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7080:12)
      at scheduleTopLevelUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7351:5)
      at Object.updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7381:7)
      at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8186:18)
      at Object.test (node_modules/@storybook/addon-storyshots/dist/test-bodies.js:26:44)
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/index.js:145:21)
          at Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

After some debugging I realize it's because on this line typeof rule == "string" does not actually apply to new String() (which is "object"), if I add if (rule instanceof String) {rule = rule.toString()} on the line before the check it all seems to work perfectly.

But I'm not sure if that's the proper solution or just a hacky work around which will fail somewhere else...

[giuseppeg]

Good catch, I suppose that you get this error because you are using external styles right?

[slaskis]

Yep, it was when we're using external styles.

Wow what a quick fix, thank you!

[giuseppeg]

I will update Next.js asap

[giuseppeg]

@slaskis you can get this patch with [email protected]

[jabacchetta]

@giuseppeg It looks like these insertRule errors are still popping up as of 4.0.1. I'll post more details this weekend.

Edit: Never mind, just noticed the doc update! Added the css tag to my template literals and everything works perfectly now. Thanks for all your hard work.

[oleole90]

@jabacchetta, it would be a whole lot cooler if you can give an snippet of your code, before and after solving this issue. Thanks!

[jabacchetta]

@oleole90 I was just leaving out the css tag (which wasn't required in previous versions). Check out this example from the docs.

• css needs to be imported:

import css from 'styled-jsx/css'

• css needs to prepend the template literal that contains your CSS. In other words:

export default css`div { color: green; }`

[RusinovAnton]

My use case is to have dynamic styles with properties from theme that is being injected via HOC.
I feel like there is an error in styled-jsx babel plugin. Im testing my components with @storybook/[email protected] that uses create-react-app internally:

1. If I write my styles helper like this:

// styles.js
import css from 'styled-jsx/css';

const styles = (theme) => {

  return {
    container: css`...containerStyles`,
    header: css`...containerStyles`,
    footer: css`...containerStyles`,
  }
}

I get error during build:

TypeError: src/components/Panel/styles.js: Cannot read property 'value' of undefined
    at getName (/Users/rusinov/projects/MyProject/node_modules/babel-plugin-transform-es2015-duplicate-keys/lib/index.js:85:13)
    at PluginPass.ObjectExpression (/Users/rusinov/projects/MyProject/node_modules/babel-plugin-transform-es2015-duplicate-keys/lib/index.js:41:22)
    at newFn (/Users/rusinov/projects/MyProject/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/rusinov/projects/MyProject/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/rusinov/projects/MyProject/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/rusinov/projects/MyProject/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/rusinov/projects/MyProject/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/rusinov/projects/MyProject/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/Users/rusinov/projects/MyProject/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/Users/rusinov/projects/MyProject/node_modules/babel-traverse/lib/index.js:114:17)

---

1. If I slightly change the code:

// styles.js
import css from 'styled-jsx/css';

const styles = (theme) => {
  const container = css`...containerStyles`;
  const header = css`...containerStyles`;
  const footer = css`...containerStyles`;

  return {
    container: container,
    header: header,
    footer: footer,
  }
}

I get a runtime error:

StyleSheet: `insertRule` accepts only strings.
Error: StyleSheet: `insertRule` accepts only strings.
    at invariant (http://localhost:9001/static/preview.bundle.js:91600:11)
    at StyleSheet.insertRule (http://localhost:9001/static/preview.bundle.js:91451:7)
    at http://localhost:9001/static/preview.bundle.js:91125:29
    at Array.map (<anonymous>)
    at StyleSheetRegistry.add (http://localhost:9001/static/preview.bundle.js:91124:27)
    at JSXStyle.componentWillMount (http://localhost:9001/static/preview.bundle.js:90975:26)
    at callComponentWillMount (http://localhost:9001/static/preview.bundle.js:32856:14)
    at mountClassInstance (http://localhost:9001/static/preview.bundle.js:32921:7)
    at updateClassComponent (http://localhost:9001/static/preview.bundle.js:34326:9)
    at beginWork (http://localhost:9001/static/preview.bundle.js:34711:16)

[giuseppeg]

css doesn't support dynamic styles

[RusinovAnton]

@giuseppeg

css doesn't support dynamic styles

I forgot to mention that following snippet does work as expected:

const styles = (theme) => {

  return css`
    p {
      color: ${theme.textColor}
    }
  `
}