Feature: mapping <style> tags like other React/HTML tags

[guicostaarantes]

Do you want to request a feature or report a bug?

Feature.

What is the current behavior?

Trying to map <style> tags throws TypeError "Cannot read property 'start' of undefined".

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

I'm creating a styleguide, and the Container component is responsible for rendering a div with a max-width based on @media min-width breakpoints.

This works:

const Container = ({ children, fluid, ...rest }) => {
  return (
    <>
      <div {...rest}>{children}</div>
      <style jsx>{`
        div {
          margin: 0 auto;
          padding: 0 1rem;
        }
      `}</style>
      <style jsx>{`
        @media screen and (min-width: 360px) {
          div {
            ${!fluid ? "max-width: 360px;" : ""}
          }
        }
      `}</style>
      <style jsx>{`
        @media screen and (min-width: 576px) {
          div {
            ${!fluid ? "max-width: 576px;" : ""}
          }
        }
      `}</style>
      <style jsx>{`
        @media screen and (min-width: 768px) {
          div {
            ${!fluid ? "max-width: 768px;" : ""}
          }
        }
      `}</style>
      <style jsx>{`
        @media screen and (min-width: 992px) {
          div {
            ${!fluid ? "max-width: 992px;" : ""}
          }
        }
      `}</style>
      <style jsx>{`
        @media screen and (min-width: 1200px) {
          div {
            ${!fluid ? "max-width: 1200px;" : ""}
          }
        }
      `}</style>
    </>
  );
};

However, this throws the TypeError "Cannot read property 'start' of undefined":

const Container = ({ children, fluid, ...rest }) => {
  return (
    <>
      <div {...rest}>{children}</div>
      <style jsx>{`
        div {
          margin: 0 auto;
          padding: 0 1rem;
        }
      `}</style>
      {[360, 576, 768, 992, 1200].map((bp) => (
        <style jsx>{`
          @media screen and (min-width: ${bp}px) {
            div {
              ${!fluid ? `max-width: ${bp}px;` : ""}
            }
          }
        `}</style>
      ))}
    </>
  );
};

Being able to declare styles from an array will be important to the styleguide as I'd like the consumer to be able to set the breakpoints as they seem fit.

If this is not possible but anyone thinks of a workaround for the scenario, please let me know 😄

What is the expected behavior?

<style> tags should be mappable. #### Environment (include versions) * OS: Windows 10 * Browser: Chrome * styled-jsx (version): 3.3.2 #### Did this work in previous versions? No.