Current behavior:
I have accurate source mapping for most of my styles, but not for "global" styles. By "source mapping" I mean the source file isn't shown in the browser dev tools. For example in Chrome the "Elements" tab shows "" or "<style>" as the source for any global styles, with no column, and if you click on this name you jump to the <style> tag associated with those styles. Interestingly, there is a column associated with the <style> tag. I guess either Chrome doesn't have support for columns for HTML styles or they thought it wasn't important.

I haven't tried template string syntax, as I always use object syntax.

To reproduce:

I'm using the babel plugin, with no options. NODE_ENV is empty, which means "development". An example of both "regular" and global styles, with a second, inline global style:

import {Fragment} from 'react';
/** @jsx jsx */
import {jsx, Global} from '@emotion/core';

const globalStyles = {
    body: {
        margin: 0,
        display: 'flex',
    },
};

const styles = {display: 'flex'};

export default function MyComponent() {
    return <Fragment>
        <div css={styles} />
        <Global styles={globalStyles} />
        <Global styles={{html: {display: 'flex}}} />
    <Fragment>;
}

I like to move as many style "classes" as possible up above the component function rather than inside the function or even inline them. This is because of a (probably misguided) belief that these will make the styling "slower" somehow. I don't want inline styles anyway, even in nice object format.

If styles need to change between renderings, I add another "class" above the function when I can. When the styles need to be calculated, like "left" position for example, I create the "class" inside the function. I try to have immutable classes wherever possible, though very occasionally I add properties in if statements for example.

I edited the CodeSandbox, and the results changed the URL to https://codesandbox.io/s/54i02. I added the two syntaxes I outlined in this issue for global styles. As you can see if you open the dev tools in Chrome, the inner elements, which were already present in the template before I edited, show the source file/column if you select them in the "Elements" column. If you click on the filename you "jump" to the source location in the "Sources" tab.

However, this is not true for the extra styles I added to the and tags. Both say just "<style>" as the source file, with no line number, and clicking this "jumps" you to the respective <style> element in the "Elements" tab.

I didn't add template string examples. If anyone else wants to, and can, please feel free. Just post the new URL, if it changes.

If any more changes are needed, please ask.

Expected behavior:

I get source information for global styles, in object and template string format, for inline and variable styles, and can "jump" to the actual JavaScript source file in the dev tools.

Environment information:

• react version: 16.9.0
• react-dom version: 16.9.0
• @emotion/core version: 10.0.16
• babel-plugin-emotion: 10.0.16