Override the default storybook babel configuration (#809)

This change allows the @compiled/babel-plugin to run on source code,
instead of transpiled code

.storybook/.babelrc.json

@@ -0,0 +1,4 @@
+{
+  "plugins": [["@compiled/babel-plugin", { "importReact": false }]],
+  "presets": ["@babel/preset-typescript", ["@babel/preset-react", { "runtime": "automatic" }]]
+}

.storybook/main.js

@@ -1,7 +1,7 @@
 module.exports = {
   addons: ['storybook-addon-performance/register', 'storybook-addon-pseudo-states'],
-  stories: ['../examples/stories/*.tsx'],
   core: {
     builder: 'webpack5',
   },
+  stories: ['../examples/stories/*.tsx'],
 };

examples/stories/css-prop-string.tsx

@@ -10,15 +10,15 @@ export const TemplateLiteral = (): JSX.Element => {
     <div
       css={`
         display: flex;
-        font-size: 50px;
+        font-size: 30px;
         color: blue;
       `}>
       blue text
     </div>
   );
 };
 
-export const TemplateLiteralCSS = (): JSX.Element => {
+export const InlineCssTaggedTemplateExpression = (): JSX.Element => {
   return (
     <div
       css={css`
@@ -31,6 +31,16 @@ export const TemplateLiteralCSS = (): JSX.Element => {
   );
 };
 
+const taggedTemplateExpressionCss = css`
+  display: flex;
+  font-size: 30px;
+  color: green;
+`;
+
+export const CssTaggedTemplateExpression = (): JSX.Element => {
+  return <div css={taggedTemplateExpressionCss}>green text</div>;
+};
+
 export const UsingMixinImportSpread = (): JSX.Element => {
   return <div css={{ ...primary }}>purple text spread</div>;
 };