Preprocess external global styles (#198)

src/babel-external.js

@@ -25,10 +25,11 @@ const getCss = (path, validate = false) => {
 
 const getStyledJsx = (css, opts, path) => {
   const useSourceMaps = Boolean(opts.sourceMaps)
-  let globalCss = css.modified || css
+  const commonHash = hash(css.modified || css)
-  const commonHash = hash(globalCss)
   const globalHash = `1${commonHash}`
   const scopedHash = `2${commonHash}`
+  let compiledCss
+  let globalCss
   let scopedCss
   const prefix = `[${MARKUP_ATTRIBUTE_EXTERNAL}~="${scopedHash}"]`
   const isTemplateLiteral = Boolean(css.modified)
@@ -37,7 +38,7 @@ const getStyledJsx = (css, opts, path) => {
     const generator = makeSourceMapGenerator(opts.file)
     const filename = opts.sourceFileName
     const offset = path.get('loc').node.start
-    scopedCss = addSourceMaps(
+    compiledCss = [/* global */'', prefix].map(prefix => addSourceMaps(
       transform(
         prefix,
         css.modified || css,
@@ -49,13 +50,15 @@ const getStyledJsx = (css, opts, path) => {
       ),
       generator,
       filename
-    )
+    ))
   } else {
-    scopedCss = transform(
+    compiledCss = ['', prefix].map(prefix => transform(
       prefix,
       css.modified || css
-    )
+    ))
   }
+  globalCss = compiledCss[0]
+  scopedCss = compiledCss[1]
 
   if (css.replacements) {
     globalCss = restoreExpressions(

test/fixtures/styles.out.js

@@ -1,15 +1,12 @@
 const color = 'red';
 
-export const foo = new String(`div { color: ${color}}`);
+export const foo = new String(`div {color: ${color}}`);
 
 foo.__hash = '12372219376';
 foo.__scoped = `div[data-jsx-ext~="22372219376"] {color: ${color}}`;
 foo.__scopedHash = '22372219376';
 
-var __styledJsxDefaultExport = new String(`
+var __styledJsxDefaultExport = new String(`div {font-size: 3em} p {color: ${color}}`);
-  div { font-size: 3em }
-  p { color: ${color}}
-`);
 
 __styledJsxDefaultExport.__hash = '11196972566';
 __styledJsxDefaultExport.__scoped = `div[data-jsx-ext~="21196972566"] {font-size: 3em}p[data-jsx-ext~="21196972566"] {color: ${color}}`;

test/fixtures/styles2.out.js

@@ -1,4 +1,4 @@
-var __styledJsxDefaultExport = new String("\n  div { font-size: 3em }\n");
+var __styledJsxDefaultExport = new String("div {font-size: 3em}");
 
 __styledJsxDefaultExport.__hash = "1706034274";
 __styledJsxDefaultExport.__scoped = "div[data-jsx-ext~=\"2706034274\"] {font-size: 3em}";