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

Comparing version 0.1.1-b53bef65f5525dfd06c7f9fbb2dd32f28bb8fbb5.0 to 0.2.0

dist/__tests__/index.test.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importStar = (this && this.__importStar) || function (mod) {
@@ -21,2 +32,9 @@ if (mod && mod.__esModule) return mod;
 };
+var createTsConfig = function (transformer, overrides) {
+    if (overrides === void 0) { overrides = {}; }
+    return ({
+        transformers: { before: [transformer] },
+        compilerOptions: __assign({ module: ts.ModuleKind.ES2015, jsx: ts.JsxEmit.Preserve, target: ts.ScriptTarget.ESNext }, overrides),
+    });
+};
 describe('root transformer', function () {
@@ -26,6 +44,3 @@ it('should not blow up when transforming with const', function () {
         expect(function () {
-            ts.transpileModule("\n          /** @jsx jsx */\n          import { jsx } from '@compiled/css-in-js';\n          const MyComponent = () => <div css={{ fontSize: '20px' }}>hello world</div>\n        ", {
-                transformers: { before: [transformer] },
-                compilerOptions: { module: ts.ModuleKind.ESNext, jsx: ts.JsxEmit.React },
-            });
+            ts.transpileModule("\n          import '@compiled/css-in-js';\n          import React from 'react';\n          const MyComponent = () => <div css={{ fontSize: '20px' }}>hello world</div>\n        ", createTsConfig(transformer));
         }).not.toThrow();
@@ -36,6 +51,3 @@ });
         expect(function () {
-            ts.transpileModule("\n          /** @jsx jsx */\n          import { jsx } from '@compiled/css-in-js';\n          var MyComponent = () => <div css={{ fontSize: '20px' }}>hello world</div>\n        ", {
-                transformers: { before: [transformer] },
-                compilerOptions: { module: ts.ModuleKind.ESNext, jsx: ts.JsxEmit.React },
-            });
+            ts.transpileModule("\n          import '@compiled/css-in-js';\n          import React from 'react';\n          var MyComponent = () => <div css={{ fontSize: '20px' }}>hello world</div>\n        ", createTsConfig(transformer));
         }).not.toThrow();
@@ -47,3 +59,3 @@ });
             .setFilePath('/index.tsx')
-            .addMock({ name: '@compiled/css-in-js', content: "export const jsx: any = () => null" })
+            .addMock({ name: 'react', content: "export default null;" })
             .addSource({
@@ -54,3 +66,3 @@ path: '/mixins.ts',
         expect(function () {
-            transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        import { mixin } from './mixins';\n\n        <div css={{ ':hover': mixin }}>hello</div>\n      ");
+            transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        import { mixin } from './mixins';\n\n        <div css={{ ':hover': mixin }}>hello</div>\n      ");
         }).not.toThrow();
@@ -60,22 +72,8 @@ });
         var transformer = index_1.default(stubProgam, {});
-        var actual = ts.transpileModule("\n        /** @jsx jsx */\n        import { jsx, styled } from '@compiled/css-in-js';\n\n        const StyledDiv = styled.div({});\n        <div css={{ fontSize: '20px' }}>hello world</div>\n      ", {
-            transformers: { before: [transformer] },
-            compilerOptions: {
-                module: ts.ModuleKind.ES2015,
-                esModuleInterop: true,
-                jsx: ts.JsxEmit.React,
-            },
-        });
-        expect(actual.outputText).toInclude("import { Style, jsx, styled } from '@compiled/css-in-js'");
+        var actual = ts.transpileModule("\n        import { styled } from '@compiled/css-in-js';\n\n        const StyledDiv = styled.div({});\n        <div css={{ fontSize: '20px' }}>hello world</div>\n      ", createTsConfig(transformer));
+        expect(actual.outputText).toInclude("import { Style } from '@compiled/css-in-js'");
     });
     xit('should match react import when transforming to common js', function () {
         var transformer = index_1.default(stubProgam, {});
-        var actual = ts.transpileModule("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n        <div css={{ fontSize: '20px' }}>hello world</div>\n      ", {
-            transformers: { before: [transformer] },
-            compilerOptions: {
-                module: ts.ModuleKind.CommonJS,
-                esModuleInterop: true,
-                jsx: ts.JsxEmit.React,
-            },
-        });
+        var actual = ts.transpileModule("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        <div css={{ fontSize: '20px' }}>hello world</div>\n      ", createTsConfig(transformer, { module: ts.ModuleKind.CommonJS }));
         expect(actual.outputText).toInclude('var react_1 = __importDefault(require("react"));');
@@ -85,3 +83,23 @@ expect(actual.outputText).toInclude('react_1.createElement');
     });
+    it('should not change code where there is no compiled components', function () {
+        var transformer = index_1.default(stubProgam, {});
+        var actual = ts.transpileModule("\n      const one = 1;\n    ", createTsConfig(transformer));
+        expect(actual.outputText).toMatchInlineSnapshot("\n      \"const one = 1;\n      \"\n    ");
+    });
+    it('should transform a styled component', function () {
+        var transformer = index_1.default(stubProgam, {});
+        var actual = ts.transpileModule("\n      import { styled } from '@compiled/css-in-js';\n\n      styled.div`\n        font-size: 12px;\n      `;\n    ", createTsConfig(transformer));
+        expect(actual.outputText).toMatchInlineSnapshot("\n      \"import React from \\\"react\\\";\n      import { Style } from '@compiled/css-in-js';\n      props => <><Style hash=\\\"css-1x3e11p\\\">{[\\\".css-1x3e11p{font-size:12px;}\\\"]}</Style><div {...props} className={\\\"css-1x3e11p\\\" + (props.className ? \\\" \\\" + props.className : \\\"\\\")}></div></>;\n      \"\n    ");
+    });
+    it('should transform css prop', function () {
+        var transformer = index_1.default(stubProgam, {});
+        var actual = ts.transpileModule("\n      import '@compiled/css-in-js';\n\n      <div css={{ fontSize: 12 }} />\n    ", createTsConfig(transformer));
+        expect(actual.outputText).toMatchInlineSnapshot("\n      \"import React from \\\"react\\\";\n      import { Style } from '@compiled/css-in-js';\n      <><Style hash=\\\"css-1iqe21w\\\">{[\\\".css-1iqe21w{font-size:12px;}\\\"]}</Style><div className=\\\"css-1iqe21w\\\"/></>;\n      \"\n    ");
+    });
+    it('should transform classnames component', function () {
+        var transformer = index_1.default(stubProgam, {});
+        var actual = ts.transpileModule("\n      import { ClassNames } from '@compiled/css-in-js';\n\n      <ClassNames>\n        {({ css }) => <div className={css({ fontSize: 12 })} />}\n      </ClassNames>\n    ", createTsConfig(transformer));
+        expect(actual.outputText).toMatchInlineSnapshot("\n      \"import React from \\\"react\\\";\n      import { Style } from '@compiled/css-in-js';\n      <><Style hash=\\\"css-2lhdif\\\">{[\\\".css-1iqe21w{font-size:12px;}\\\"]}</Style><div className={\\\"css-1iqe21w\\\"}/></>;\n      \"\n    ");
+    });
 });
 //# sourceMappingURL=index.test.js.map

dist/class-names/index.js

@@ -30,10 +30,8 @@ "use strict";
             }
-            var transformedSourceFile = visit_source_file_ensure_style_import_1.visitSourceFileEnsureStyleImport(sourceFile, context);
+            var transformedSourceFile = visit_source_file_ensure_style_import_1.visitSourceFileEnsureStyleImport(sourceFile, context, {
+                removeNamedImport: CLASS_NAMES_NAME,
+            });
             var collectedDeclarations = {};
             var visitor = function (node) {
                 collect_declarations_1.collectDeclarationsFromNode(node, program, collectedDeclarations);
-                // TODO: Remove CLASS_NAMES_NAME import instead of entire statement.
-                // if (isPackageModuleImport(node, CLASS_NAMES_NAME)) {
-                //   return ts.createEmptyStatement();
-                // }
                 if (isClassNameComponent(node)) {
@@ -40,0 +38,0 @@ return visit_class_names_jsx_element_1.visitClassNamesJsxElement(node, context, collectedDeclarations);

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

@@ -20,27 +20,27 @@ "use strict";
     it('should transform a self closing element', function () {
-        var actual = transformer.transform("\n      /** @jsx jsx */\n      import { jsx } from '@compiled/css-in-js';\n\n      <div css={{}} />\n    ");
+        var actual = transformer.transform("\n      import '@compiled/css-in-js';\n      import React from 'react';\n\n      <div css={{}} />\n    ");
         expect(actual).toInclude('<div className="css-test"/>');
     });
     it('should replace css prop with class name', function () {
-        var actual = transformer.transform("\n      /** @jsx jsx */\n      import { jsx } from '@compiled/css-in-js';\n\n      <div css={{}}>hello world</div>\n    ");
+        var actual = transformer.transform("\n      import '@compiled/css-in-js';\n      import React from 'react';\n\n      <div css={{}}>hello world</div>\n    ");
         expect(actual).toInclude('<div className="css-test">hello world</div>');
     });
     it('should add react default import if missing', function () {
-        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\";");
+        var actual = transformer.transform("\n      import '@compiled/css-in-js';\n      import React from 'react';\n\n      <div css={{}}>hello world</div>\n    ");
+        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);
+        var actual = transformer.transform("\n      import '@compiled/css-in-js';\n      import React from 'react';\n\n      <div css={{}}>hello world</div>\n    ");
+        expect(actual).toIncludeRepeated("import { Style } 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    ");
+        var actual = transformer.transform("\n      import '@compiled/css-in-js';\n      import React from 'react';\n\n      <div css={{}}>hello world</div>\n    ");
         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    ");
+        var actual = transformer.transform("\n      import '@compiled/css-in-js';\n      import { useState } from 'react';\n      import React from 'react';\n\n      <div css={{}}>hello world</div>\n    ");
         expect(actual).toIncludeRepeated("import React, { useState } from 'react'", 1);
     });
     it('should concat explicit use of class name prop on an element', function () {
-        var actual = transformer.transform("\n      /** @jsx jsx */\n      import { jsx } from '@compiled/css-in-js';\n\n      <div className=\"foobar\" css={{}}>hello world</div>\n    ");
+        var actual = transformer.transform("\n      import '@compiled/css-in-js';\n      import React from 'react';\n\n      <div className=\"foobar\" css={{}}>hello world</div>\n    ");
         expect(actual).toInclude('className={"css-test" + " " + "foobar"}');
@@ -50,7 +50,7 @@ });
     it('should concat implicit use of class name prop where class name is a jsx expression', function () {
-        var actual = transformer.transform("\n      /** @jsx jsx */\n      import { jsx } from '@compiled/css-in-js';\n\n      const getFoo = () => 'foobar';\n\n      <div css={{}} className={getFoo()}>hello world</div>\n    ");
+        var actual = transformer.transform("\n      import '@compiled/css-in-js';\n      import React from 'react';\n\n      const getFoo = () => 'foobar';\n\n      <div css={{}} className={getFoo()}>hello world</div>\n    ");
         expect(actual).toInclude('className={"css-test" + " " + getFoo()}');
     });
     it('should concat use of inline styles when there is use of dynamic css', function () {
-        var actual = transformer.transform("\n      /** @jsx jsx */\n      import { jsx } from '@compiled/css-in-js';\n\n      const color = 'blue';\n\n      <div css={{ color: color }} style={{ display: \"block\" }}>hello world</div>\n    ");
+        var actual = transformer.transform("\n      import '@compiled/css-in-js';\n      import React from 'react';\n\n      const color = 'blue';\n\n      <div css={{ color: color }} style={{ display: \"block\" }}>hello world</div>\n    ");
         expect(actual).toInclude('style={{ display: "block", "--var-test": color }}');
@@ -61,3 +61,3 @@ });
         it('should persist suffix of dynamic property value into inline styles', function () {
-            var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const fontSize = 20;\n\n        <div css={`font-size: ${fontSize}px;`}>hello world</div>\n      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const fontSize = 20;\n\n        <div css={`font-size: ${fontSize}px;`}>hello world</div>\n      ");
             expect(actual).toInclude('style={{ "--var-test": fontSize + "px" }}');
@@ -67,11 +67,11 @@ expect(actual).toInclude('.css-test{font-size:var(--var-test);}');
         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    ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        <div css=\"font-size: 20px;\">hello world</div>\n    ");
             expect(actual).toInclude('.css-test{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    ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        <div css={`font-size: 20px;`}>hello world</div>\n    ");
             expect(actual).toInclude('.css-test{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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const color = 'blue';\n        <div css={`color: ${color};`}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:var(--var-test);}');
@@ -81,3 +81,3 @@ expect(actual).toInclude('<div className="css-test" style={{ "--var-test": color }}>hello world</div>');
         it('should transform template string literal with obj 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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const style = { color: 'blue', fontSize: '30px' };\n        <div css={`${style}`}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:blue;font-size:30px;}');
@@ -89,3 +89,3 @@ });
                 contents: "export const style = { color: 'blue', fontSize: '30px' };",
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\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('.css-test:last-child{color:blue;font-size:30px;}');
@@ -97,3 +97,3 @@ });
                 contents: "export const style = { ':hover': { color: 'blue', fontSize: '30px' } };",
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        import { style } from './mixins';\n\n        <div css={`${style}`}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test:hover{color:blue;font-size:30px;}');
@@ -104,7 +104,7 @@ });
         it('should transform template string 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 style = () => ({ color: 'blue', fontSize: '30px' });\n        <div css={`${style}`}>hello world</div>\n      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const style = () => ({ color: 'blue', fontSize: '30px' });\n        <div css={`${style}`}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const style = () => ({ color: 'blue', fontSize: '30px' });\n        <div css={`${style()}`}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:blue;font-size:30px;}');
@@ -116,7 +116,7 @@ });
                 contents: "export const style = () => ({ color: 'blue', fontSize: '30px' });",
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        import { style } from './stylez';\n\n        <div css={`${style()}`}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        function mixin() {\n          return { color: 'red' };\n        }\n\n        <div css={`${mixin()}`}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:red;}');
@@ -128,3 +128,3 @@ });
                 contents: "\n          export function mixin() {\n            return { color: 'red' };\n          }\n        ",
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        import { mixin } from './func-mixin';\n\n        <div css={`${mixin()}`}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:red;}');
@@ -135,3 +135,3 @@ });
         xit('should transform template string with argument arrow function variable', function () {
-            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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\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('.css-test{color:var(--var-test);font-size:30px;}');
@@ -144,3 +144,3 @@ expect(actual).toInclude('style={{ "--var-test": primary }}');
                 contents: "export const style = (color: string) => ({ color, fontSize: '30px' });",
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        import { style } from './mixy-in';\n\n        const primary = 'red';\n        <div css={`${style(primary)}`}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:var(--var-test);font-size:30px;}');
@@ -152,3 +152,3 @@ expect(actual).toInclude('style={{ "--var-test": primary }}');
         it('should persist suffix of dynamic property value into inline styles', function () {
-            var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const fontSize = 20;\n\n        <div css={{ fontSize: `${fontSize}px` }}>hello world</div>\n      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const fontSize = 20;\n\n        <div css={{ fontSize: `${fontSize}px` }}>hello world</div>\n      ");
             expect(actual).toInclude('style={{ "--var-test": fontSize + "px" }}');
@@ -158,7 +158,7 @@ expect(actual).toInclude('.css-test{font-size:var(--var-test);}');
         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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        <div css={{ lineHeight: 20, color: 'blue' }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const fontSize = 12;\n\n        <div css={{ fontSize: `${fontSize}px` }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{font-size:var(--var-test);}');
@@ -168,7 +168,7 @@ expect(actual).toInclude('style={{ "--var-test": fontSize + "px" }}');
         it('should transform object with nested object into a selector', function () {
-            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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        <div css={{ ':hover': { color: 'blue' } }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test:hover{color:blue;}');
         });
         it('should transform object that has a variable reference', function () {
-            var actual = transformer.transform("\n        /** @jsx jsx */\n        import { jsx } from '@compiled/css-in-js';\n\n        const blue: string = 'blue';\n        <div css={{ color: blue }}>hello world</div>\n      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const blue: string = 'blue';\n        <div css={{ color: blue }}>hello world</div>\n      ");
             expect(actual).toInclude('style={{ "--var-test": blue }}');
@@ -178,3 +178,3 @@ expect(actual).toInclude('.css-test{color:var(--var-test);}');
         it('should transform object that has a destructured variable reference', function () {
-            var actual = transformer.transform("\n        /** @jsx jsx */\n        import { useState } from 'react';\n        import { jsx } from '@compiled/css-in-js';\n\n        const [color, setColor] = useState('blue');\n        <div css={{ color }}>hello world</div>\n      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import { useState } from 'react';\n        import React from 'react';\n\n        const [color, setColor] = useState('blue');\n        <div css={{ color }}>hello world</div>\n      ");
             expect(actual).toInclude('<div className="css-test" style={{ "--var-test": color }}>hello world</div>');
@@ -184,3 +184,3 @@ expect(actual).toInclude('.css-test{color:var(--var-test);}');
         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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const mixin = { color: 'red' };\n        <div css={{ color: 'blue', ...mixin }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:blue;color:red;}');
@@ -192,7 +192,7 @@ });
                 contents: "export const mixin = { color: 'red' };",
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        import { mixin } from './mixins';\n\n        <div css={{ color: 'blue', ...mixin }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const text = 'red';\n\n        <div css={{ color: text }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:var(--var-test);}');
@@ -202,3 +202,3 @@ expect(actual).toInclude('<div className="css-test" style={{ "--var-test": text }}>');
         it('should transform object with string variable using shorthand notation', function () {
-            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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const color = 'red';\n\n        <div css={{ color }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:var(--var-test);}');
@@ -211,3 +211,3 @@ expect(actual).toInclude('<div className="css-test" style={{ "--var-test": color }}>');
                 contents: "export const color = 'red';",
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        import { color } from './colors';\n\n        <div css={{ color }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:var(--var-test);}');
@@ -217,3 +217,3 @@ expect(actual).toInclude('<div className="css-test" style={{ "--var-test": color }}>');
         it('should transform object with obj variable', function () {
-            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    ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\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('.css-test{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:50px;color:blue;}');
@@ -226,3 +226,3 @@ expect(actual).toInclude('.css-test:hover{color:blue;}');
                 contents: "export const mixin = { color: 'blue' };",
-            }).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    ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\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('.css-test{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:50px;color:blue;}');
@@ -234,3 +234,3 @@ expect(actual).toInclude('.css-test:hover{color:blue;}');
         it('should transform object 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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const mixin = () => ({ color: 'red' });\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
             expect(actual).toInclude(".css-test{color:blue;color:red;}");
@@ -242,7 +242,7 @@ });
                 contents: "export const mixin = () => ({ color: 'red' });",
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        import { mixin } from './mixins';\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
             expect(actual).toInclude(".css-test{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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const mixin = () => ({ color: 'red' });\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:blue;color:red;}');
@@ -254,11 +254,11 @@ });
                 contents: "export const mixin = () => ({ color: 'red' });",
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        import { mixin } from './mixins';\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        function mixin() {\n          return { color: 'red' };\n        }\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
             expect(actual).toInclude(".css-test{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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const mixin = () => ({ color: 'red' });\n\n        <div css={{ color: 'blue', ':hover': mixin() }}>hello world</div>\n      ");
             expect(actual).toInclude(".css-test{color:blue;}");
@@ -268,3 +268,3 @@ expect(actual).toInclude('.css-test: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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        function mixin() {\n          return { color: 'red' };\n        }\n\n        <div css={{ color: 'blue', ':hover': mixin() }}>hello world</div>\n      ");
             expect(actual).toInclude(".css-test{color:blue;}");
@@ -277,3 +277,3 @@ expect(actual).toInclude('.css-test:hover{color:red;}');
                 contents: "\n          export function mixin() {\n            return { color: 'red' };\n          }\n        ",
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        import { mixin } from './mixins';\n\n        <div css={{ color: 'blue', ':hover': mixin() }}>hello world</div>\n      ");
             expect(actual).toInclude(".css-test{color:blue;}");
@@ -283,3 +283,3 @@ expect(actual).toInclude('.css-test: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      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        function mixin() {\n          return { color: 'red' };\n        }\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:blue;color:red;}');
@@ -291,3 +291,3 @@ });
                 contents: "\n          export function mixin() {\n            return { color: 'red' };\n          }\n        ",
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n        import { mixin } from './mixins';\n\n        <div css={{ color: 'blue', ...mixin() }}>hello world</div>\n      ");
             expect(actual).toInclude('.css-test{color:blue;color:red;}');
@@ -298,3 +298,3 @@ });
         it('should transform object with 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: string) => ({ color });\n        const color = 'red';\n\n        <div css={{ color: 'blue', ...mixin(color) }}>hello world</div>\n      ");
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\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('.css-test{color:blue;color:var(--var-test);}');
@@ -307,3 +307,3 @@ expect(actual).toInclude('style={{ "--var-test": color }}>');
                 contents: 'export const mixin = (color: string) => ({ color });',
-            }).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      ");
+            }).transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\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('.css-test{color:blue;color:var(--var-test);}');
@@ -310,0 +310,0 @@ expect(actual).toInclude('style={{ "--var-test": color }}>');

dist/css-prop/index.js

@@ -17,16 +17,9 @@ "use strict";
 var collect_declarations_1 = require("../utils/collect-declarations");
-var JSX_PRAGMA = 'jsx';
 var isJsxPragmaFoundWithOurJsxFunction = function (sourceFile) {
     return (
-    // __HACK_ALERT__!! This isn't in the TS types. Is this bad?
-    sourceFile.pragmas.get(JSX_PRAGMA) &&
-        // Only continue if we've found an import for this pkg.
-        sourceFile.statements.find(function (statement) {
-            return ast_node_1.isPackageModuleImport(statement, JSX_PRAGMA);
-        }));
+    // Only continue if we've found an import for this pkg.
+    sourceFile.statements.find(function (statement) {
+        return ast_node_1.isPackageModuleImport(statement);
+    }));
 };
-var resetJsxPragma = function (sourceFile) {
-    sourceFile.pragmas.clear();
-    delete sourceFile.localJsxFactory;
-};
 function cssPropTransformer(program) {
@@ -39,3 +32,2 @@ var transformerFactory = function (context) {
             }
-            resetJsxPragma(sourceFile);
             var collectedDeclarations = {};
@@ -42,0 +34,0 @@ logger.log('found file with jsx pragma');

dist/styled-component/index.js

@@ -39,10 +39,6 @@ "use strict";
             }
-            var transformedSourceFile = visit_source_file_ensure_default_react_import_1.visitSourceFileEnsureDefaultReactImport(visit_source_file_ensure_style_import_1.visitSourceFileEnsureStyleImport(sourceFile, context), context);
+            var transformedSourceFile = visit_source_file_ensure_default_react_import_1.visitSourceFileEnsureDefaultReactImport(visit_source_file_ensure_style_import_1.visitSourceFileEnsureStyleImport(sourceFile, context, { removeNamedImport: STYLED_NAME }), context);
             var collectedDeclarations = {};
             var visitor = function (node) {
                 collect_declarations_1.collectDeclarationsFromNode(node, program, collectedDeclarations);
-                // TODO: Remove STYLED_NAME import instead of removing entire thing.
-                // if (isPackageModuleImport(node, STYLED_NAME)) {
-                //   return ts.createEmptyStatement();
-                // }
                 if (isStyledComponent(node)) {
@@ -49,0 +45,0 @@ return visit_styled_component_1.visitStyledComponent(node, context, collectedDeclarations);

dist/utils/ast-node.d.ts

@@ -8,3 +8,3 @@ import * as ts from 'typescript';
 export declare const getJsxNodeAttributesValue: (node: ts.JsxSelfClosingElement | ts.JsxElement, propertyName: string) => ts.StringLiteral | ts.JsxExpression | undefined;
-export declare const isPackageModuleImport: (statement: ts.Node, namedImport: string) => boolean;
+export declare const isPackageModuleImport: (statement: ts.Node, namedImport?: string | undefined) => boolean;
 export declare const createNodeError: (message: string, node: ts.Node) => never;

dist/utils/ast-node.js

@@ -39,12 +39,16 @@ "use strict";
     var _a, _b;
-    if (!ts.isImportDeclaration(statement) ||
-        !ts.isStringLiteral(statement.moduleSpecifier) ||
-        !((_a = statement.importClause) === null || _a === void 0 ? void 0 : _a.namedBindings) ||
-        !ts.isNamedImports((_b = statement.importClause) === null || _b === void 0 ? void 0 : _b.namedBindings)) {
+    if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier)) {
         return false;
     }
-    var isLibraryImport = statement.moduleSpecifier.text === '@compiled/css-in-js';
+    var isLibraryImport = statement.moduleSpecifier.text.startsWith('@compiled/css-in-js');
     if (!isLibraryImport) {
         return false;
     }
+    if (namedImport === undefined) {
+        return true;
+    }
+    if (!((_a = statement.importClause) === null || _a === void 0 ? void 0 : _a.namedBindings) ||
+        !ts.isNamedImports((_b = statement.importClause) === null || _b === void 0 ? void 0 : _b.namedBindings)) {
+        return false;
+    }
     var isStyledImported = statement.importClause.namedBindings.elements.filter(function (specifier) { return specifier.name.escapedText === namedImport; }).length > 0;
@@ -51,0 +55,0 @@ return isStyledImported;

dist/utils/visit-source-file-ensure-style-import.d.ts

 import * as ts from 'typescript';
-export declare const visitSourceFileEnsureStyleImport: (sourceFile: ts.SourceFile, context: ts.TransformationContext) => ts.SourceFile;
+export declare const visitSourceFileEnsureStyleImport: (sourceFile: ts.SourceFile, context: ts.TransformationContext, opts?: {
+    removeNamedImport?: string | undefined;
+}) => ts.SourceFile;

dist/utils/visit-source-file-ensure-style-import.js

@@ -14,3 +14,4 @@ "use strict";
 var STYLE_IMPORT = 'Style';
-exports.visitSourceFileEnsureStyleImport = function (sourceFile, context) {
+exports.visitSourceFileEnsureStyleImport = function (sourceFile, context, opts) {
+    if (opts === void 0) { opts = {}; }
     var visitor = function (node) {
@@ -26,11 +27,18 @@ if (ts.isImportDeclaration(node) &&
                 ts.isNamedImports(node.importClause.namedBindings)) {
-                namedImports = Array.from(node.importClause.namedBindings.elements);
+                namedImports = Array.from(node.importClause.namedBindings.elements).filter(function (imp) {
+                    if (opts.removeNamedImport) {
+                        return imp.name.text !== opts.removeNamedImport;
+                    }
+                    return true;
+                });
             }
-            if (namedImports.some(function (val) { return val.name.text === STYLE_IMPORT; })) {
-                // Import already exists - return early
-                return node;
+            if (!namedImports.some(function (val) { return val.name.text === STYLE_IMPORT; })) {
+                // Import already exists
+                namedImports = [
+                    ts.createImportSpecifier(undefined, ts.createIdentifier(STYLE_IMPORT)),
+                ].concat(namedImports);
             }
             return ts.updateImportDeclaration(node, 
             /* decorators */ undefined, 
-            /* modifiers */ undefined, ts.createImportClause(defaultImport, ts.createNamedImports([ts.createImportSpecifier(undefined, ts.createIdentifier(STYLE_IMPORT))].concat(namedImports))), node.moduleSpecifier);
+            /* modifiers */ undefined, ts.createImportClause(defaultImport, ts.createNamedImports(namedImports)), node.moduleSpecifier);
         }
@@ -37,0 +45,0 @@ return ts.visitEachChild(node, visitor, context);

package.json

 {
   "name": "@compiled/ts-transform-css-in-js",
-  "version": "0.1.1-b53bef65f5525dfd06c7f9fbb2dd32f28bb8fbb5.0",
+  "version": "0.2.0",
   "description": "The CSS in JS authoring experience you love without the runtime cost",
@@ -5,0 +5,0 @@ "author": "Michael Dougall",

No alert changes

Improved metrics

Total package byte prevSize

367679

increased by1.12%

Lines of code

5773

increased by1.16%

No dependency changes