Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

I've been using styled-jsx in some components and it worked well. Now I tried using it directly in a page like this:

product.js

import React from 'react';
import Page from './page';
import HeadInclude from './headinc';

class ProductPage extends Page {
render() {
return (
<div>
<HeadInclude />
<h2>bleh</h2>
<style jsx>{`
h2 {
color: blue;
}
`}
</style>
</div>
);
}
}

export default ProductPage;

page.js

import { Component } from 'react';
import Local from '../src/local';

class Page extends Component {
static getInitialProps() {
return {
local: Local.de_DE,
};
}
}

export default Page;

If I open localhost:3000/product I suddenly get this error:

Error in /pages/product.js?entry
Module build failed: TypeError: /pages/product.js?entry: Cannot read property 'start' of undefined
at processCss (/node_modules/next/node_modules/styled-jsx/dist/_utils.js:447:49)
at PluginPass.exit (/node_modules/next/node_modules/styled-jsx/dist/babel.js:232:51)
at newFn (/node_modules/babel-traverse/lib/visitors.js:276:21)
at NodePath._call (/node_modules/babel-traverse/lib/path/context.js:76:18)
at NodePath.call (/node_modules/babel-traverse/lib/path/context.js:48:17)
at NodePath.visit (/node_modules/babel-traverse/lib/path/context.js:117:8)
at TraversalContext.visitQueue (/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitMultiple (/node_modules/babel-traverse/lib/context.js:103:17)
at TraversalContext.visit (/node_modules/babel-traverse/lib/context.js:190:19)
at Function.traverse.node (/node_modules/babel-traverse/lib/index.js:114:17)

What's wrong? Everything else was working perfectly fine until I added <style jsx>. Also, I noticed that if I remove "jsx" so it only reads <style> it works as well but styles aren't scoped then. From what I understand there is an issue with babel but I don't quite understand what?

I'm using:

npm 5.3.0

node 8.2.1

next 4.1.4

react 16.1

Issue 2:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I'd expect a way to configure babel-preset-env to support a narrower range of browsers, and thus use more native ES6 features. I'd like to rely on native browser implementations of classes, generators, and other commonly-supported-in-edge features. The babel-preset-env project allows for this configurability, but its encapsulation within next/babel prevents users from configuring.

Current Behavior

There is no route to adjusting the amount of transpilation, so ES6 code is compiled down to the lowest-common-denominator always.

Context

My product uses generators - as part of the product - so that's one guarantee that I can rely on, and accordingly use generators in the code. Right now the over-aggressive transpilation means, among other things, that performance is decreased on features like for of, and sourcemap debugging is less effective.

I see that there was already a PR suggesting this behavior, but it was closed by its author. There was also a feature request, also closed. I'm more than happy to reimplement / update that PR and push this to completion, because it's important for my usecase.

Your Environment

Tech
Version

next
3.2.2

node
8.4.0

OS
macOS

browser
Google Chrome