optimizeForSpeed not set as default in Next.js

[lifeiscontent]

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

What is the current behavior?

Currently all styles are not being rendered.

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

1. Using next.js dump the code below into a page.
2. see that all styles are not being injected in the developer tools

function SlideInUp(props) {
  const [state, setState] = useState('UNMOUNTED');

  useEffect(() => {
    if (state === 'UNMOUNTED') {
      setState('ENTERING');
    }
  }, [state]);

  if (state === 'UNMOUNTED') return null;

  return (
    <div
      className={clsx('SlideInUp', {
        'SlideInUp--state-entering': state === 'ENTERING',
        'SlideInUp--state-entered': state === 'ENTERED',
        'SlideInUp--state-exiting': state === 'EXITING',
        'SlideInUp--state-exited': state === 'EXITED',
      })}
    >
      {props.children}
      <style jsx>{`
        .SlideInUp--state-entering,
        .SlideInUp--state-unmounted,
        .SlideInUp--state-exited {
          transform: translate3d(0, 100%, 0);
        }

        .SlideInUp--state-entered,
        .SlideInUp--state-exiting {
          transform: translateZ(0);
        }
      `}</style>
    </div>
  );
}

What is the expected behavior?

Styles are properly injected.

Environment (include versions)

• OS: Mac OS
• Browser: Chrome / Safari
• styled-jsx (version): whatever comes with next.js

Did this work in previous versions?

I believe so.

[lifeiscontent]

figured it out, optimizeForSpeed is not set in Next.js you need to manually override it.

[herodrigues]

@lifeiscontent since that was resolved, can you close this issue?

[lifeiscontent]

@herodrigues no, I believe there's still some uncovering here to do.

1. should optimizeForSpeed be default in styled-jsx?
2. If not, should it be in next.js?
3. if not, why? Because as it stands, things like ::placeholder selectors will break the output of the generated code by styled-jsx if its not turned on.

[herodrigues]

That's fine. I'm thinking about contributing to this library, so I'm trying to close some solved issues first.

I'm facing some similar issues and I think there's more of them. Glad you changed the title and now it's more clear. Yeah, I'd also pay to solve the CSS injection problems I'm facing too.

[olaj]

I'm trying to figure out how to enable this in Next.

I have a babelrc with

{
  "presets": [["next/babel", { "styled-jsx": { "optimizeForSpeed": true } }]],
  "env": {
    "test": {
      "presets": [
        [
          "next/babel",
          {
            "styled-jsx": {
              "babel-test": true
            }
          }
        ]
      ]
    }
  }
}

But as far as i understand it my css is added with regular