@compiled/ts-transform-css-in-js - npm Package Compare versions

Comparing version 0.0.10-6537d0f3b48e8baa8210f018548c8023d9ed8822.0 to 0.0.10-731bf67894cff40d398a421ff31bc2988efc8f86.0

dist/class-names/__tests__/index.test.js

@@ -16,3 +16,3 @@ "use strict";
         var actual = transformer.transform("\n      import { ClassNames } from '@compiled/css-in-js';\n\n      const ListItem = () => (\n        <ClassNames>\n          {({ css }) => (<div className={css({ fontSize: '20px' })}>hello, world!</div>)}\n        </ClassNames>\n      );\n    ");
-        expect(actual).toInclude('const ListItem = () => (<><style>.test-class{font-size:20px;}</style><div className={"test-class"}>hello, world!</div></>);');
+        expect(actual).toInclude('const ListItem = () => (<><Style hash="test-class">.test-class{font-size:20px;}</Style><div className={"test-class"}>hello, world!</div></>);');
     });
@@ -27,15 +27,15 @@ it('should remove class names import', function () {
             expect(actual).toInclude('style={{ "--fontSize-test-css-variable": fontSize + "px" }}');
-            expect(actual).toInclude('<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--fontSize-test-css-variable);}');
         });
         it('should transform no template string literal', function () {
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css`font-size: 20px`}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:20px;}</style>');
+            expect(actual).toInclude('.test-class{font-size:20px;}');
         });
         it('should transform template string literal with string variable', function () {
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        const fontSize = '12px';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css`font-size: ${fontSize};`}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude("<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>");
+            expect(actual).toInclude(".test-class{font-size:var(--fontSize-test-css-variable);}");
         });
         it('should transform template string literal with numeric variable', function () {
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        const fontSize = 12;\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css`font-size: ${fontSize};`}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude("<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>");
+            expect(actual).toInclude(".test-class{font-size:var(--fontSize-test-css-variable);}");
         });
@@ -47,7 +47,7 @@ it('should transform template string literal with string import', function () {
             }).transform("\n        import { ClassNames } from '@compiled/css-in-js';\n        import { fontSize } from './constants';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css`font-size: ${fontSize};`}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude("<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>");
+            expect(actual).toInclude(".test-class{font-size:var(--fontSize-test-css-variable);}");
         });
         it('should transform template string literal with obj variable', function () {
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        const color = { color: 'blue' };\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css`${color}`}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;}");
         });
@@ -59,3 +59,3 @@ it('should transform template string literal with obj import', function () {
             }).transform("\n        import { ClassNames } from '@compiled/css-in-js';\n        import { color } from './mix';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css`${color}`}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;}");
         });
@@ -66,3 +66,3 @@ it.todo('should transform template string literal with array variable');
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        const color = () => ({ color: 'blue' });\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css`${color()}`}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;}");
         });
@@ -74,7 +74,7 @@ it('should transform template string with no argument arrow function import', function () {
             }).transform("\n        import { ClassNames } from '@compiled/css-in-js';\n        import { color } from './mixin';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css`${color()}`}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;}");
         });
         it('should transform template string with no argument function variable', function () {
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        function color() { return { color: 'blue' }; }\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css`${color()}`}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;}");
         });
@@ -86,3 +86,3 @@ it('should transform template string with no argument function import', function () {
             }).transform("\n        import { ClassNames } from '@compiled/css-in-js';\n        import { color } from './mixin';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css`${color()}`}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;}");
         });
@@ -98,19 +98,19 @@ it.todo('should transform template string with argument function variable');
             expect(actual).toInclude('style={{ "--fontSize-test-css-variable": fontSize + "px" }}');
-            expect(actual).toInclude('<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--fontSize-test-css-variable);}');
         });
         it('should transform object with simple values', function () {
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css, style }) => <div style={style} className={css({ color: 'red', margin: 0 })}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude('<style>.test-class{color:red;margin:0;}</style>');
+            expect(actual).toInclude('.test-class{color:red;margin:0;}');
         });
         it('should transform object with nested object into a selector', function () {
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css, style }) => <div style={style} className={css({ ':hover': { color: 'red', margin: 0 } })}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude('<style>.test-class:hover{color:red;margin:0;}</style>');
+            expect(actual).toInclude('.test-class:hover{color:red;margin:0;}');
         });
         it('should transform object that has a variable reference', function () {
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        const color = 'red';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css, style }) => <div style={style} className={css({ color, margin: 0 })}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);margin:0;}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);margin:0;}');
         });
         it('should transform object spread from variable', function () {
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        const mixin = {\n          color: 'red',\n        };\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css, style }) => <div style={style} className={css({ color: 'blue', ...mixin })}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;color:red;}');
         });
@@ -122,7 +122,7 @@ it('should transform object spread from import', function () {
             }).transform("\n        import { ClassNames } from '@compiled/css-in-js';\n        import { mixin } from './mixy';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css, style }) => <div style={style} className={css({ color: 'blue', ...mixin })}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;color:red;}');
         });
         it('should transform object with string variable', function () {
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        const color = 'blue';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css, style }) => <div style={style} className={css({ color })}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('<div style={{ "--color-test-css-variable": color }} className={"test-class"}>hello, world!</div>');
@@ -135,7 +135,7 @@ });
             }).transform("\n        import { ClassNames } from '@compiled/css-in-js';\n        import { color } from './mixy';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css, style }) => <div style={style} className={css({ color })}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
         });
         it('should transform object with obj variable', function () {
             var actual = transformer.transform("\n        import { ClassNames } from '@compiled/css-in-js';\n\n        const hover = { color: 'red' };\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css({ fontSize: '20px', ':hover': hover })}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:20px;}.test-class:hover{color:red;}</style>');
+            expect(actual).toInclude('.test-class{font-size:20px;}.test-class:hover{color:red;}');
         });
@@ -147,3 +147,3 @@ it('should transform object with obj import', function () {
             }).transform("\n        import { ClassNames } from '@compiled/css-in-js';\n        import { hover } from './mixins';\n\n        const ListItem = () => (\n          <ClassNames>\n            {({ css }) => <div className={css({ fontSize: '20px', ':hover': hover })}>hello, world!</div>}\n          </ClassNames>\n        );\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:20px;}.test-class:hover{color:red;}</style>');
+            expect(actual).toInclude('.test-class{font-size:20px;}.test-class:hover{color:red;}');
         });
@@ -150,0 +150,0 @@ it.todo('should transform object with array variable');

dist/class-names/index.js

@@ -14,2 +14,3 @@ "use strict";
 var collect_declarations_1 = require("../utils/collect-declarations");
+var visit_source_file_ensure_style_import_1 = require("../utils/visit-source-file-ensure-style-import");
 var CLASS_NAMES_NAME = 'ClassNames';
@@ -30,8 +31,10 @@ var isClassNamesFound = function (sourceFile) {
             }
+            var transformedSourceFile = visit_source_file_ensure_style_import_1.visitSourceFileEnsureStyleImport(sourceFile, context);
             var collectedDeclarations = {};
             var visitor = function (node) {
                 collect_declarations_1.collectDeclarationsFromNode(node, program, collectedDeclarations);
-                if (ast_node_1.isPackageModuleImport(node, CLASS_NAMES_NAME)) {
-                    return ts.createEmptyStatement();
-                }
+                // TODO: Remove CLASS_NAMES_NAME import instead of entire statement.
+                // if (isPackageModuleImport(node, CLASS_NAMES_NAME)) {
+                //   return ts.createEmptyStatement();
+                // }
                 if (isClassNameComponent(node)) {
@@ -42,3 +45,3 @@ return visit_class_names_jsx_element_1.visitClassNamesJsxElement(node, context, collectedDeclarations);
             };
-            return ts.visitNode(sourceFile, visitor);
+            return ts.visitNode(transformedSourceFile, visitor);
         };
@@ -45,0 +48,0 @@ };

dist/class-names/visitors/visit-class-names-jsx-element.js

@@ -85,4 +85,5 @@ "use strict";
         children: children,
+        context: context,
     });
 };
 //# sourceMappingURL=visit-class-names-jsx-element.js.map

dist/css-prop/__tests__/index.test.js

@@ -25,11 +25,15 @@ "use strict";
         var actual = transformer.transform("\n      /** @jsx jsx */\n      import { jsx } from '@compiled/css-in-js';\n\n      <div css={{}}>hello world</div>\n    ");
-        expect(actual).toInclude('import React from "react";');
+        expect(actual).toInclude("import React from \"react\";");
     });
+    it('should ensure Style has been imported', function () {
+        var actual = transformer.transform("\n      /** @jsx jsx */\n      import React from 'react';\n      import { jsx } from '@compiled/css-in-js';\n\n      <div css={{}}>hello world</div>\n    ");
+        expect(actual).toIncludeRepeated("import { Style, jsx } from '@compiled/css-in-js';", 1);
+    });
     it('should do nothing if react default import is already defined', function () {
         var actual = transformer.transform("\n      /** @jsx jsx */\n      import React from 'react';\n      import { jsx } from '@compiled/css-in-js';\n\n      <div css={{}}>hello world</div>\n    ");
-        expect(actual).toIncludeRepeated("import React from \"react\";", 1);
+        expect(actual).toIncludeRepeated("import React from 'react';", 1);
     });
     it('should add react default import if it only has named imports', function () {
         var actual = transformer.transform("\n      /** @jsx jsx */\n      import { useState } from 'react';\n      import { jsx } from '@compiled/css-in-js';\n\n      <div css={{}}>hello world</div>\n    ");
-        expect(actual).toIncludeRepeated('import React, { useState } from "react"', 1);
+        expect(actual).toIncludeRepeated("import React, { useState } from 'react'", 1);
     });
@@ -54,15 +58,15 @@ it('should concat explicit use of class name prop on an element', function () {
             expect(actual).toInclude('style={{ "--fontSize-test-css-variable": fontSize + "px" }}');
-            expect(actual).toInclude('<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--fontSize-test-css-variable);}');
         });
         it('should transform string literal', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        <div css=\"font-size: 20px;\">hello world</div>\n    ");
-            expect(actual).toInclude('<style>.test-class{font-size:20px;}</style>');
+            expect(actual).toInclude('.test-class{font-size:20px;}');
         });
         it('should transform no template string literal', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        <div css={`font-size: 20px;`}>hello world</div>\n    ");
-            expect(actual).toInclude('<style>.test-class{font-size:20px;}</style>');
+            expect(actual).toInclude('.test-class{font-size:20px;}');
         });
         it('should transform template string literal with string variable', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const color = 'blue';\n        <div css={`color: ${color};`}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('<div className="test-class" style={{ "--color-test-css-variable": color }}>hello world</div>');
@@ -72,3 +76,3 @@ });
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const style = { color: 'blue', fontSize: '30px' };\n        <div css={`${style}`}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;font-size:30px;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;font-size:30px;}');
         });
@@ -80,3 +84,3 @@ it('should transform template string literal with obj import', function () {
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { style } from './mixins';\n\n        <div\n          css={`\n            :last-child {\n              ${style};\n            }\n          `}\n          >\n          hello world\n        </div>\n      ");
-            expect(actual).toInclude('<style>.test-class:last-child{color:blue;font-size:30px;}</style>');
+            expect(actual).toInclude('.test-class:last-child{color:blue;font-size:30px;}');
         });
@@ -88,3 +92,3 @@ it('should transform template string literal with obj import being used as a selector', function () {
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { style } from './mixins';\n\n        <div css={`${style}`}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class:hover{color:blue;font-size:30px;}</style>');
+            expect(actual).toInclude('.test-class:hover{color:blue;font-size:30px;}');
         });
@@ -95,7 +99,7 @@ it.todo('should transform template string literal with array variable');
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const style = () => ({ color: 'blue', fontSize: '30px' });\n        <div css={`${style}`}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;font-size:30px;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;font-size:30px;}');
         });
         it('should transform template string with no argument arrow function call variable', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const style = () => ({ color: 'blue', fontSize: '30px' });\n        <div css={`${style()}`}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;font-size:30px;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;font-size:30px;}');
         });
@@ -107,7 +111,7 @@ it('should transform template string with no argument arrow function call import', function () {
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { style } from './stylez';\n\n        <div css={`${style()}`}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;font-size:30px;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;font-size:30px;}');
         });
         it('should transform template string with no argument function variable', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        function mixin() {\n          return { color: 'red' };\n        }\n\n        <div css={`${mixin()}`}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:red;}');
         });
@@ -119,3 +123,3 @@ it('should transform template string with no argument function import', function () {
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { mixin } from './func-mixin';\n\n        <div css={`${mixin()}`}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:red;}');
         });
@@ -126,3 +130,3 @@ it.todo('should transform template string with argument function variable');
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const style = (color: string) => ({ color, fontSize: '30px' });\n        const primary = 'red';\n        <div css={`${style(primary)}`}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);font-size:30px;}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);font-size:30px;}');
             expect(actual).toInclude('style={{ "--color-test-css-variable": primary }}');
@@ -135,3 +139,3 @@ });
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { style } from './mixy-in';\n\n        const primary = 'red';\n        <div css={`${style(primary)}`}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);font-size:30px;}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);font-size:30px;}');
             expect(actual).toInclude('style={{ "--color-test-css-variable": primary }}');
@@ -144,11 +148,11 @@ });
             expect(actual).toInclude('style={{ "--fontSize-test-css-variable": fontSize + "px" }}');
-            expect(actual).toInclude('<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--fontSize-test-css-variable);}');
         });
         it('should transform object with simple values', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        <div css={{ lineHeight: 20, color: 'blue' }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{line-height:20;color:blue;}</style>');
+            expect(actual).toInclude('.test-class{line-height:20;color:blue;}');
         });
         it('should move right hand value (px, em, etc) after variable into style attribute', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const fontSize = 12;\n\n        <div css={{ fontSize: `${fontSize}px` }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--fontSize-test-css-variable);}');
             expect(actual).toInclude('style={{ "--fontSize-test-css-variable": fontSize + "px" }}');
@@ -158,3 +162,3 @@ });
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        <div css={{ ':hover': { color: 'blue' } }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class:hover{color:blue;}</style>');
+            expect(actual).toInclude('.test-class:hover{color:blue;}');
         });
@@ -164,3 +168,3 @@ it('should transform object that has a variable reference', function () {
             expect(actual).toInclude('style={{ "--color-test-css-variable": blue }}');
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
         });
@@ -170,7 +174,7 @@ it('should transform object that has a destructured variable reference', function () {
             expect(actual).toInclude('<div className="test-class" style={{ "--color-test-css-variable": color }}>hello world</div>');
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
         });
         it('should transform object spread from variable', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const mixin = { color: 'red' };\n        <div css={{ color: 'blue', ...mixin }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;color:red;}');
         });
@@ -182,7 +186,7 @@ it('should transform object spread from import', function () {
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { mixin } from './mixins';\n\n        <div css={{ color: 'blue', ...mixin }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;color:red;}');
         });
         it('should transform object with string variable', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const text = 'red';\n\n        <div css={{ color: text }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('<div className="test-class" style={{ "--color-test-css-variable": text }}>');
@@ -192,3 +196,3 @@ });
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const color = 'red';\n\n        <div css={{ color }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('<div className="test-class" style={{ "--color-test-css-variable": color }}>');
@@ -201,3 +205,3 @@ });
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { color } from './colors';\n\n        <div css={{ color }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('<div className="test-class" style={{ "--color-test-css-variable": color }}>');
@@ -207,3 +211,3 @@ });
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const mixin = { color: 'blue' };\n\n        <div\n          css={{\n            display: 'flex',\n            fontSize: '50px',\n            color: 'blue',\n            ':hover': mixin,\n          }}>\n          Hello, world!\n        </div>\n    ");
-            expect(actual).toInclude('<style>.test-class{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:50px;color:blue;}.test-class:hover{color:blue;}</style>');
+            expect(actual).toInclude('.test-class{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:50px;color:blue;}.test-class:hover{color:blue;}');
         });
@@ -215,3 +219,3 @@ it('should transform object with obj import', function () {
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { mixin } from './mixins';\n\n        <div\n          css={{\n            display: 'flex',\n            fontSize: '50px',\n            color: 'blue',\n            ':hover': mixin,\n          }}>\n          Hello, world!\n        </div>\n    ");
-            expect(actual).toInclude('<style>.test-class{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:50px;color:blue;}.test-class:hover{color:blue;}</style>');
+            expect(actual).toInclude('.test-class{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:50px;color:blue;}.test-class:hover{color:blue;}');
         });
@@ -222,3 +226,3 @@ it.todo('should transform object with array variable');
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const mixin = () => ({ color: 'red' });\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;color:red;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;color:red;}");
         });
@@ -230,7 +234,7 @@ it('should transform object with no argument arrow function import', function () {
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { mixin } from './mixins';\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;color:red;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;color:red;}");
         });
         it('should transform object spread with no argument arrow function variable', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const mixin = () => ({ color: 'red' });\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;color:red;}');
         });
@@ -242,15 +246,15 @@ it('should transform object spread with no argument arrow function import', function () {
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { mixin } from './mixins';\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;color:red;}');
         });
         it('should transform object spread with no argument function variable', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        function mixin() {\n          return { color: 'red' };\n        }\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;color:red;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;color:red;}");
         });
         it('should transform object with no argument arrow function', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const mixin = () => ({ color: 'red' });\n\n        <div css={{ color: 'blue', ':hover': mixin() }}>hello world</div>\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;}.test-class:hover{color:red;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;}.test-class:hover{color:red;}");
         });
         it('should transform object with no argument function variable', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        function mixin() {\n          return { color: 'red' };\n        }\n\n        <div css={{ color: 'blue', ':hover': mixin() }}>hello world</div>\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;}.test-class:hover{color:red;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;}.test-class:hover{color:red;}");
         });
@@ -262,7 +266,7 @@ it('should transform object with no argument function import', function () {
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { mixin } from './mixins';\n\n        <div css={{ color: 'blue', ':hover': mixin() }}>hello world</div>\n      ");
-            expect(actual).toInclude("<style>.test-class{color:blue;}.test-class:hover{color:red;}</style>");
+            expect(actual).toInclude(".test-class{color:blue;}.test-class:hover{color:red;}");
         });
         it('should transform object spread with no argument function variable', function () {
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        function mixin() {\n          return { color: 'red' };\n        }\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;color:red;}');
         });
@@ -274,3 +278,3 @@ it('should transform object spread with no argument function import', function () {
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { mixin } from './mixins';\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;color:red;}');
         });
@@ -281,3 +285,3 @@ it.todo('should transform object with argument function variable');
             var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const mixin = (color: string) => ({ color });\n        const color = 'red';\n\n        <div css={{ color: 'blue', ...mixin(color) }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:blue;color:var(--color-test-css-variable);}');
             expect(actual).toInclude('style={{ "--color-test-css-variable": color }}>');
@@ -290,3 +294,3 @@ });
             }).transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { mixin } from './styles';\n\n        const color = 'red';\n\n        <div css={{ color: 'blue', ...mixin(color) }}>hello world</div>\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:blue;color:var(--color-test-css-variable);}');
             expect(actual).toInclude('style={{ "--color-test-css-variable": color }}>');
@@ -293,0 +297,0 @@ });

dist/css-prop/index.js

@@ -14,2 +14,3 @@ "use strict";
 var visit_source_file_ensure_default_react_import_1 = require("../utils/visit-source-file-ensure-default-react-import");
+var visit_source_file_ensure_style_import_1 = require("../utils/visit-source-file-ensure-style-import");
 var ast_node_1 = require("../utils/ast-node");
@@ -41,3 +42,3 @@ var collect_declarations_1 = require("../utils/collect-declarations");
             logger.log('found file with jsx pragma');
-            var transformedSourceFile = visit_source_file_ensure_default_react_import_1.visitSourceFileEnsureDefaultReactImport(sourceFile, context);
+            var transformedSourceFile = visit_source_file_ensure_default_react_import_1.visitSourceFileEnsureDefaultReactImport(visit_source_file_ensure_style_import_1.visitSourceFileEnsureStyleImport(sourceFile, context), context);
             var visitor = function (node) {
@@ -44,0 +45,0 @@ collect_declarations_1.collectDeclarationsFromNode(node, program, collectedDeclarations);

dist/css-prop/visitors/visit-jsx-element-with-css-prop.js

@@ -16,8 +16,5 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var ts = __importStar(require("typescript"));
-var stylis_1 = __importDefault(require("stylis"));
+var stylis_1 = require("../../utils/stylis");
 var identifiers_1 = require("../../utils/identifiers");
@@ -31,3 +28,9 @@ var object_literal_to_css_1 = require("../../utils/object-literal-to-css");
 var CLASSNAME_PROP = 'className';
-var STYLE_PROP = 'style';
+var STYLE_ATTRIBUTE_NAME = 'style';
+var HASH_ATTRIBUTE_NAME = 'hash';
+var getStyleElementName = function (isCommonJs) {
+    return isCommonJs
+        ? ts.createPropertyAccess(ts.createIdentifier('css_in_js_1'), ts.createIdentifier('Style'))
+        : ts.createIdentifier('Style');
+};
 exports.visitJsxElementWithCssProp = function (node, variableDeclarations, context) {
@@ -80,3 +83,3 @@ logger.log('visiting a jsx element with a css prop');
     var attributedNode = ts.isJsxSelfClosingElement(node) ? node : node.openingElement;
-    var previousStyleAttribute = attributedNode.attributes.properties.filter(function (prop) { return prop.name && ast_node_1.getIdentifierText(prop.name) === STYLE_PROP; })[0];
+    var previousStyleAttribute = attributedNode.attributes.properties.filter(function (prop) { return prop.name && ast_node_1.getIdentifierText(prop.name) === STYLE_ATTRIBUTE_NAME; })[0];
     var previousStyleProps = [];
@@ -95,3 +98,3 @@ if (previousStyleAttribute &&
             ast_node_1.getIdentifierText(prop.name) !== CLASSNAME_PROP &&
-            ast_node_1.getIdentifierText(prop.name) !== STYLE_PROP;
+            ast_node_1.getIdentifierText(prop.name) !== STYLE_ATTRIBUTE_NAME;
     }), [
@@ -102,3 +105,3 @@ // Reference style via className
         cssVariables.length
-            ? ts.createJsxAttribute(ts.createIdentifier('style'), ts.createJsxExpression(undefined, ts.createObjectLiteral(previousStyleProps.concat(cssVariables.map(function (cssVariable) {
+            ? ts.createJsxAttribute(ts.createIdentifier(STYLE_ATTRIBUTE_NAME), ts.createJsxExpression(undefined, ts.createObjectLiteral(previousStyleProps.concat(cssVariables.map(function (cssVariable) {
                 return ts.createPropertyAssignment(ts.createStringLiteral(cssVariable.name), cssVariable.expression);
@@ -108,3 +111,4 @@ })))))
     ]).filter(function (item) { return typeof item !== 'undefined' && ts.isJsxAttribute(item); });
-    var compiledCss = stylis_1.default("." + className, cssToPassThroughCompiler);
+    var compiledCss = stylis_1.stylis("." + className, cssToPassThroughCompiler);
+    var STYLE_ELEMENT_NAME = getStyleElementName(context.getCompilerOptions().module === ts.ModuleKind.CommonJS);
     // Create the style element that will precede the node that had the css prop.
@@ -114,6 +118,8 @@ var styleNode = ts.createJsxElement(
     // See: https://github.com/microsoft/TypeScript/issues/35686
-    ts.setOriginalNode(ts.createJsxOpeningElement(ts.createIdentifier('style'), [], ts.createJsxAttributes([])), node), [ts.createJsxText(compiledCss)], 
+    ts.setOriginalNode(ts.createJsxOpeningElement(STYLE_ELEMENT_NAME, [], ts.createJsxAttributes([
+        ts.createJsxAttribute(ts.createIdentifier(HASH_ATTRIBUTE_NAME), ts.createStringLiteral(className)),
+    ])), node), compiledCss.map(function (rule) { return ts.createJsxText(rule); }), 
     // We use setOriginalNode() here to work around createJsx not working without the original node.
     // See: https://github.com/microsoft/TypeScript/issues/35686
-    ts.setOriginalNode(ts.createJsxClosingElement(ts.createIdentifier('style')), node));
+    ts.setOriginalNode(ts.createJsxClosingElement(STYLE_ELEMENT_NAME), node));
     // Create a new fragment that will wrap both the style and the node we found initially.
@@ -120,0 +126,0 @@ var newFragmentParent = ts.createJsxFragment(

dist/styled-component/__tests__/index.test.js

@@ -20,3 +20,3 @@ "use strict";
         var actual = transformer.transform("\n      import { styled } from '@compiled/css-in-js';\n      const ListItem = styled.div({\n        fontSize: '20px',\n      });\n    ");
-        expect(actual).toInclude('const ListItem = props => <><style>.test-class{font-size:20px;}</style><div {...props} className=');
+        expect(actual).toInclude('const ListItem = props => <><Style hash="test-class">.test-class{font-size:20px;}</Style><div {...props} className={"test-class" + (props.className ? " " + props.className : "")}></div></>');
     });
@@ -38,3 +38,3 @@ it('should not pass down invalid html attributes to the node', function () {
         var actual = transformer.transform("\n      import { styled } from '@compiled/css-in-js';\n      const ListItem = styled.div`\n        font-size: 20px;\n      `;\n    ");
-        expect(actual).toInclude('const ListItem = props => <><style>.test-class{font-size:20px;}</style><div {...props} className');
+        expect(actual).toInclude('const ListItem = props => <><Style hash="test-class">.test-class{font-size:20px;}</Style><div {...props} className={"test-class" + (props.className ? " " + props.className : "")}></div></>');
     });
@@ -47,3 +47,3 @@ it('should add react default import if missing', function () {
         var actual = transformer.transform("\n      import { useState } from 'react';\n      import { styled } from '@compiled/css-in-js';\n      const ListItem = styled.div`\n        font-size: 20px;\n      `;\n    ");
-        expect(actual).toInclude('import React, { useState } from "react";');
+        expect(actual).toInclude("import React, { useState } from 'react';");
     });
@@ -56,3 +56,3 @@ it('should spread down props to element', function () {
         var actual = transformer.transform("\n      import React from 'react';\n      import { styled } from '@compiled/css-in-js';\n      const ListItem = styled.div`\n        font-size: 20px;\n      `;\n    ");
-        expect(actual).toInclude('import React from "react";');
+        expect(actual).toInclude("import React from 'react';");
     });
@@ -66,7 +66,7 @@ it('should concat class name prop if defined', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const ListItem = styled.div`\n          font-size: 12;\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:12;}</style>');
+            expect(actual).toInclude('.test-class{font-size:12;}');
         });
         it('should not pass down invalid html attributes to the node when property has a suffix', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const ListItem = styled.div`\n          font-size: ${props => props.textSize}px;\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:var(--textSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--textSize-test-css-variable);}');
             expect(actual).toInclude('({ textSize, ...props }) =>');
@@ -78,3 +78,3 @@ expect(actual).toInclude('"--textSize-test-css-variable": textSize + "px"');
             expect(actual).toInclude('style={{ ...props.style, "--fontSize-test-css-variable": fontSize + "px" }}');
-            expect(actual).toInclude('<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--fontSize-test-css-variable);}');
         });
@@ -84,19 +84,19 @@ it('should persist suffix of dynamic property value into inline styles when missing a semi colon', function () {
             expect(actual).toInclude('"--fontSize-test-css-variable": fontSize + "px" }}');
-            expect(actual).toInclude('<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--fontSize-test-css-variable);}');
         });
         it('should transform no template string literal', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const ListItem = styled.div`\n          font-size: 20px;\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:20px;}</style>');
+            expect(actual).toInclude('.test-class{font-size:20px;}');
         });
         it('should transform template string literal with string variable', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const fontSize = '20px';\n\n        const ListItem = styled.div`\n          font-size: ${fontSize};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--fontSize-test-css-variable);}');
         });
         it('should transform template string literal with numeric variable', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const margin = 0;\n\n        const ListItem = styled.div`\n          margin: ${margin};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{margin:var(--margin-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{margin:var(--margin-test-css-variable);}');
         });
         it('should transform template string literal with prop reference', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const ListItem = styled.div`\n          color: ${props => props.color};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('"--color-test-css-variable": props.color }}');
@@ -109,7 +109,7 @@ });
             }).transform("\n        import { styled } from '@compiled/css-in-js';\n        import { fontSize } from './fonts';\n\n        const ListItem = styled.div`\n          font-size: ${fontSize};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--fontSize-test-css-variable);}');
         });
         it('should transform template string literal with obj variable', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const h200 = { fontSize: '12px' };\n\n        const ListItem = styled.div`\n          font-size: ${h200};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size: font-size:12px;}</style>');
+            expect(actual).toInclude('.test-class{font-size: font-size:12px;}');
         });
@@ -121,7 +121,7 @@ it('should transform template string literal with obj import', function () {
             }).transform("\n        import { styled } from '@compiled/css-in-js';\n        import { h200 } from './typo';\n\n        const ListItem = styled.div`\n          font-size: ${h200};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size: font-size:12px;}</style>');
+            expect(actual).toInclude('.test-class{font-size: font-size:12px;}');
         });
         it('should reference identifier pointing to a call expression if it returns simple value', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const em = (str: string) => str;\n        const color = em('blue');\n\n        const ListItem = styled.div`\n          color: ${color};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('"--color-test-css-variable": color }}>');
@@ -131,3 +131,3 @@ });
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const em = (str: string) => str;\n\n        const ListItem = styled.div`\n          color: ${em('blue')};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--em-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--em-test-css-variable);}');
             expect(actual).toInclude('"--em-test-css-variable": em(\'blue\') }}>');
@@ -139,3 +139,3 @@ });
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const mixin = () => ({ color: 'red' });\n\n        const ListItem = styled.div`\n          ${mixin()};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:red;}');
         });
@@ -147,7 +147,7 @@ it('should transform template string with no argument arrow function import', function () {
             }).transform("\n        import { styled } from '@compiled/css-in-js';\n        import { mixin } from './mixin';\n\n        const ListItem = styled.div`\n          ${mixin()};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:red;}');
         });
         it('should transform template string with no argument function variable', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        function mixin() {\n          return { color: 'red' };\n        }\n\n        const ListItem = styled.div`\n          ${mixin()};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:red;}');
         });
@@ -159,3 +159,3 @@ it('should transform template string with no argument function import', function () {
             }).transform("\n        import { styled } from '@compiled/css-in-js';\n        import { mixin } from './func-mixin';\n\n        const ListItem = styled.div`\n          ${mixin()};\n        `;\n      ");
-            expect(actual).toInclude('<style>.test-class{color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:red;}');
         });
@@ -170,23 +170,23 @@ it.todo('should transform template string with argument function variable');
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const ListItem = styled.div({\n          ':after': {\n            content: '\"\"',\n          },\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class:after{content:"";}</style>');
+            expect(actual).toInclude('.test-class:after{content:"";}');
         });
         it('should respect the definition of pseudo element content ala emotion with single quotes', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const ListItem = styled.div({\n          ':after': {\n            content: \"''\",\n          },\n        });\n      ");
-            expect(actual).toInclude("<style>.test-class:after{content:'';}</style>");
+            expect(actual).toInclude(".test-class:after{content:'';}");
         });
         it('should respect the definition of pseudo element content ala styled components with no content', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const ListItem = styled.div({\n          ':after': {\n            content: '',\n          },\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class:after{content:"";}</style>');
+            expect(actual).toInclude('.test-class:after{content:"";}');
         });
         it('should respect the definition of pseudo element content ala styled components with content', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const ListItem = styled.div({\n          ':after': {\n            content: '\uD83D\uDE0E',\n          },\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class:after{content:"😎";}</style>');
+            expect(actual).toInclude('.test-class:after{content:"😎";}');
         });
         it('should append "px" on numeric literals if missing', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const ListItem = styled.div({\n          fontSize: 12,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:12px;}</style>');
+            expect(actual).toInclude('.test-class{font-size:12px;}');
         });
         it('should not pass down invalid html attributes to the node when property has a suffix', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const ListItem = styled.div({\n          fontSize: props => `${props.textSize}px`,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:var(--textSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--textSize-test-css-variable);}');
             expect(actual).toInclude('({ textSize, ...props }) =>');
@@ -197,3 +197,3 @@ expect(actual).toInclude('"--textSize-test-css-variable": `${textSize}px`');
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const ListItem = styled.div({\n          fontSize: `${props => props.textSize}px`,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:var(--textSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--textSize-test-css-variable);}');
             expect(actual).toInclude('({ textSize, ...props }) =>');
@@ -205,15 +205,15 @@ expect(actual).toInclude('"--textSize-test-css-variable": textSize + "px"');
             expect(actual).toInclude('"--fontSize-test-css-variable": props.fontSize + "px" }}');
-            expect(actual).toInclude('<style>.test-class{font-size:var(--fontSize-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{font-size:var(--fontSize-test-css-variable);}');
         });
         it('should transform object with simple values', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const ListItem = styled.div({\n          color: 'blue',\n          margin: 0,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{color:blue;margin:0;}</style>');
+            expect(actual).toInclude('.test-class{color:blue;margin:0;}');
         });
         it('should transform object with nested object into a selector', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const ListItem = styled.div({\n          ':hover': {\n            color: 'blue',\n            margin: 0,\n          },\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class:hover{color:blue;margin:0;}</style>');
+            expect(actual).toInclude('.test-class:hover{color:blue;margin:0;}');
         });
         it('should reference identifier pointing to a call expression if it returns simple value', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const em = (str: string) => str;\n        const color = em('blue');\n\n        const ListItem = styled.div({\n          color,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('"--color-test-css-variable": color }}>');
@@ -223,3 +223,3 @@ });
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const em = (str: string) => str;\n\n        const ListItem = styled.div({\n          color: em('blue'),\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('"--color-test-css-variable": em(\'blue\') }}>');
@@ -229,3 +229,3 @@ });
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const color = 'blue';\n\n        const ListItem = styled.div({\n          color,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('"--color-test-css-variable": color }}>');
@@ -235,3 +235,3 @@ });
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const ListItem = styled.div({\n          color: props => props.color,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('"--color-test-css-variable": props.color }}');
@@ -241,3 +241,3 @@ });
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const h100 = { fontSize: '12px' };\n\n        const ListItem = styled.div({\n          ...h100,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:12px;}</style>');
+            expect(actual).toInclude('.test-class{font-size:12px;}');
         });
@@ -249,7 +249,7 @@ it('should transform object spread from import', function () {
             }).transform("\n        import { styled } from '@compiled/css-in-js';\n        import { h100 } from './tip';\n\n        const ListItem = styled.div({\n          ...h100,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:12px;}</style>');
+            expect(actual).toInclude('.test-class{font-size:12px;}');
         });
         it('should transform object with string variable', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const color = 'blue';\n\n        const ListItem = styled.div({\n          color: color,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('"--color-test-css-variable": color }}');
@@ -262,3 +262,3 @@ });
             }).transform("\n        import { styled } from '@compiled/css-in-js';\n        import { color } from './colors';\n\n        const ListItem = styled.div({\n          color,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{color:var(--color-test-css-variable);}</style>');
+            expect(actual).toInclude('.test-class{color:var(--color-test-css-variable);}');
             expect(actual).toInclude('"--color-test-css-variable": color }}');
@@ -268,3 +268,3 @@ });
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const hover = { color: 'red' };\n\n        const ListItem = styled.div({\n          fontSize: '20px',\n          ':hover': hover,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:20px;}.test-class:hover{color:red;}</style>');
+            expect(actual).toInclude('.test-class{font-size:20px;}.test-class:hover{color:red;}');
         });
@@ -276,3 +276,3 @@ it('should transform object with obj import', function () {
             }).transform("\n        import { styled } from '@compiled/css-in-js';\n        import { hover } from './mixins';\n\n        const ListItem = styled.div({\n          fontSize: '20px',\n          ':hover': hover,\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{font-size:20px;}.test-class:hover{color:red;}</style>');
+            expect(actual).toInclude('.test-class{font-size:20px;}.test-class:hover{color:red;}');
         });
@@ -283,3 +283,3 @@ it.todo('should transform object with array variable');
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const mixin = () => ({ color: 'red' });\n\n        const ListItem = styled.div({\n          ...mixin(),\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:red;}');
         });
@@ -291,7 +291,7 @@ it('should transform object with no argument arrow function import', function () {
             }).transform("\n        import { styled } from '@compiled/css-in-js';\n        import { mixin } from './mixin';\n\n        const ListItem = styled.div({\n          ...mixin(),\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:red;}');
         });
         it('should transform object with no argument function variable', function () {
             var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        function mixin() {\n          return { color: 'red' };\n        }\n\n        const ListItem = styled.div({\n          ...mixin(),\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:red;}');
         });
@@ -303,3 +303,3 @@ it('should transform object with no argument function import', function () {
             }).transform("\n        import { styled } from '@compiled/css-in-js';\n        import { mixin } from './mixin';\n\n        const ListItem = styled.div({\n          ...mixin(),\n        });\n      ");
-            expect(actual).toInclude('<style>.test-class{color:red;}</style>');
+            expect(actual).toInclude('.test-class{color:red;}');
         });
@@ -306,0 +306,0 @@ it.todo('should transform object with argument function variable');

dist/styled-component/index.js

@@ -15,2 +15,3 @@ "use strict";
 var visit_source_file_ensure_default_react_import_1 = require("../utils/visit-source-file-ensure-default-react-import");
+var visit_source_file_ensure_style_import_1 = require("../utils/visit-source-file-ensure-style-import");
 var STYLED_NAME = 'styled';
@@ -39,9 +40,10 @@ var isStyledImportFound = function (sourceFile) {
             }
-            var transformedSourceFile = visit_source_file_ensure_default_react_import_1.visitSourceFileEnsureDefaultReactImport(sourceFile, context);
+            var transformedSourceFile = visit_source_file_ensure_default_react_import_1.visitSourceFileEnsureDefaultReactImport(visit_source_file_ensure_style_import_1.visitSourceFileEnsureStyleImport(sourceFile, context), context);
             var collectedDeclarations = {};
             var visitor = function (node) {
                 collect_declarations_1.collectDeclarationsFromNode(node, program, collectedDeclarations);
-                if (ast_node_1.isPackageModuleImport(node, STYLED_NAME)) {
-                    return ts.createEmptyStatement();
-                }
+                // TODO: Remove STYLED_NAME import instead of removing entire thing.
+                // if (isPackageModuleImport(node, STYLED_NAME)) {
+                //   return ts.createEmptyStatement();
+                // }
                 if (isStyledComponent(node)) {
@@ -48,0 +50,0 @@ return visit_styled_component_1.visitStyledComponent(node, context, collectedDeclarations);

dist/styled-component/visitors/visit-styled-component.js

@@ -97,3 +97,3 @@ "use strict";
         .filter(Boolean);
-    var newElement = create_jsx_element_1.createJsxElement(tagName, __assign(__assign({}, result), { originalNode: node, styleFactory: function (props) { return __spreadArrays([
+    var newElement = create_jsx_element_1.createJsxElement(tagName, __assign(__assign({}, result), { originalNode: node, context: context, styleFactory: function (props) { return __spreadArrays([
             typescript_1.default.createSpreadAssignment(typescript_1.default.createIdentifier('props.style'))
@@ -100,0 +100,0 @@ ], props.map(function (prop) {

dist/utils/create-jsx-element.d.ts

@@ -12,2 +12,3 @@ import * as ts from 'typescript';
     children?: ts.JsxChild;
+    context: ts.TransformationContext;
 }
@@ -14,0 +15,0 @@ /**

dist/utils/create-jsx-element.js

@@ -27,10 +27,14 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var ts = __importStar(require("typescript"));
-var stylis_1 = __importDefault(require("stylis"));
+var stylis_1 = require("./stylis");
 var identifiers_1 = require("./identifiers");
 var ast_node_1 = require("./ast-node");
+var HASH_ATTRIBUTE_NAME = 'hash';
+var STYLE_ATTRIBUTE_NAME = 'style';
+var getStyleElementName = function (isCommonJs) {
+    return isCommonJs
+        ? ts.createPropertyAccess(ts.createIdentifier('css_in_js_1'), ts.createIdentifier('Style'))
+        : ts.createIdentifier('Style');
+};
 /**
@@ -46,3 +50,4 @@ * Will return something like this:
     var className = identifiers_1.nextClassName(opts.css);
-    var compiledCss = stylis_1.default(opts.skipClassName ? "." + className : '', opts.css);
+    var compiledCss = stylis_1.stylis(opts.skipClassName ? "." + className : '', opts.css);
+    var STYLE_ELEMENT_NAME = getStyleElementName(opts.context.getCompilerOptions().module === ts.ModuleKind.CommonJS);
     // Create the style element that will precede the node that had the css prop.
@@ -52,8 +57,8 @@ var styleNode = ts.createJsxElement(
     // See: https://github.com/microsoft/TypeScript/issues/35686
-    ts.setOriginalNode(ts.createJsxOpeningElement(ts.createIdentifier('style'), [], ts.createJsxAttributes([])), originalNode), 
-    // should this be text or an jsx expression?
-    [ts.createJsxText(compiledCss)], 
+    ts.setOriginalNode(ts.createJsxOpeningElement(STYLE_ELEMENT_NAME, [], ts.createJsxAttributes([
+        ts.createJsxAttribute(ts.createIdentifier(HASH_ATTRIBUTE_NAME), ts.createStringLiteral(className)),
+    ])), originalNode), compiledCss.map(function (rule) { return ts.createJsxText(rule); }), 
     // We use setOriginalNode() here to work around createJsx not working without the original node.
     // See: https://github.com/microsoft/TypeScript/issues/35686
-    ts.setOriginalNode(ts.createJsxClosingElement(ts.createIdentifier('style')), originalNode));
+    ts.setOriginalNode(ts.createJsxClosingElement(STYLE_ELEMENT_NAME), originalNode));
     var children = [
@@ -75,3 +80,4 @@ // important that the style goes before the node
     var className = identifiers_1.nextClassName(opts.css);
-    var compiledCss = stylis_1.default("." + className, opts.css);
+    var compiledCss = stylis_1.stylis("." + className, opts.css);
+    var STYLE_ELEMENT_NAME = getStyleElementName(opts.context.getCompilerOptions().module === ts.ModuleKind.CommonJS);
     // Create the style element that will precede the node that had the css prop.
@@ -81,8 +87,8 @@ var styleNode = ts.createJsxElement(
     // See: https://github.com/microsoft/TypeScript/issues/35686
-    ts.setOriginalNode(ts.createJsxOpeningElement(ts.createIdentifier('style'), [], ts.createJsxAttributes([])), originalNode), 
-    // should this be text or an jsx expression?
-    [ts.createJsxText(compiledCss)], 
+    ts.setOriginalNode(ts.createJsxOpeningElement(STYLE_ELEMENT_NAME, [], ts.createJsxAttributes([
+        ts.createJsxAttribute(ts.createIdentifier(HASH_ATTRIBUTE_NAME), ts.createStringLiteral(className)),
+    ])), originalNode), compiledCss.map(function (rule) { return ts.createJsxText(rule); }), 
     // We use setOriginalNode() here to work around createJsx not working without the original node.
     // See: https://github.com/microsoft/TypeScript/issues/35686
-    ts.setOriginalNode(ts.createJsxClosingElement(ts.createIdentifier('style')), originalNode));
+    ts.setOriginalNode(ts.createJsxClosingElement(STYLE_ELEMENT_NAME), originalNode));
     var elementNode = ts.createJsxElement(
@@ -106,3 +112,3 @@ // We use setOriginalNode() here to work around createJsx not working without the original node.
         var elementNodeAttributes = ast_node_1.getJsxNodeAttributes(elementNode);
-        elementNodeAttributes.properties.push(ts.createJsxAttribute(ts.createIdentifier('style'), ts.createJsxExpression(undefined, ts.createObjectLiteral(opts.styleFactory ? opts.styleFactory(styleProps) : styleProps, false))));
+        elementNodeAttributes.properties.push(ts.createJsxAttribute(ts.createIdentifier(STYLE_ATTRIBUTE_NAME), ts.createJsxExpression(undefined, ts.createObjectLiteral(opts.styleFactory ? opts.styleFactory(styleProps) : styleProps, false))));
     }
@@ -109,0 +115,0 @@ // Create a new fragment that will wrap both the style and the node we found initially.

dist/utils/visit-source-file-ensure-default-react-import.js

@@ -48,3 +48,3 @@ "use strict";
             /* decorators */ undefined, 
-            /* modifiers */ undefined, ts.createImportClause(ts.createIdentifier(REACT_DEFAULT_IMPORT_NAME), node.importClause && node.importClause.namedBindings), ts.createLiteral(REACT_PKG));
+            /* modifiers */ undefined, ts.createImportClause(ts.createIdentifier(REACT_DEFAULT_IMPORT_NAME), node.importClause && node.importClause.namedBindings), node.moduleSpecifier);
         }
@@ -51,0 +51,0 @@ return ts.visitEachChild(node, visitor, context);

package.json

 {
   "name": "@compiled/ts-transform-css-in-js",
-  "version": "0.0.10-6537d0f3b48e8baa8210f018548c8023d9ed8822.0",
+  "version": "0.0.10-731bf67894cff40d398a421ff31bc2988efc8f86.0",
   "description": "Typescript first CSS in JS library that compiles away to nothing. 🔧🚧",
@@ -16,2 +16,3 @@ "author": "Michael Dougall",
     "stylis": "^3.5.4",
+    "stylis-rule-sheet": "^0.0.10",
     "typescript": "^3.7.3"
@@ -18,0 +19,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

368375

increased by2.62%

Number of package files

118

increased by7.27%

Lines of code

5755

increased by2.64%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedstylis-rule-sheet@^0.0.10

• + Addedstylis-rule-sheet@0.0.10(transitive)