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

Comparing version 0.2.4-7fc863128baa2fcf696662f920245eee2b29422f.0 to 0.2.4

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

@@ -82,2 +82,7 @@ "use strict";
         });
+        it('should transform binary expression', function () {
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n\n        export const EmphasisText = (props) => (\n          <span\n            css={`\n              color: ${props.color};\n              text-transform: uppercase;\n              font-weight: 600;\n            `}>{props.children}</span>\n        );\n      ");
+            expect(actual).toInclude('.css-test{color:var(--var-test);}');
+            expect(actual).toInclude('<span className="css-test" style={{ "--var-test": props.color }}>{props.children}</span>');
+        });
         it('should transform no template string literal', function () {
@@ -92,2 +97,7 @@ 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    ");
         });
+        it('should transform an expression', function () {
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        const sidenav = true;\n        <div\n          css={`\n            display: grid;\n            grid-template-areas: ${\n              sidenav ? \"'header header' 'sidebar content'\" : \"'header header' 'content content'\"\n            };\n          `}\n        >\n          hello world\n        </div>\n      ");
+            expect(actual).toInclude('grid-template-areas:var(--var-test);');
+            expect(actual).toInclude("\"--var-test\": sidenav ? \"'header header' 'sidebar content'\" : \"'header header' 'content content'\"");
+        });
         it('should transform template string literal with obj variable', function () {
@@ -232,2 +242,6 @@ 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      ");
         });
+        it('should transform template literal value', function () {
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n        import React from 'react';\n\n        <div css={{ color: `blue` }}>hello world</div>\n      ");
+            expect(actual).toInclude(".css-test{color:blue;}");
+        });
         it('should transform object with no argument arrow function import', function () {
@@ -299,4 +313,9 @@ var actual = transformer.addSource({
         });
+        xit('should add quotations to dynamically set content', function () {
+            var actual = transformer.transform("\n        import '@compiled/css-in-js';\n\n        const yeah = true;\n        <div css={{ content: yeah ? 'nah' : 'yeah' }}>hello world</div>\n      ");
+            expect(actual).toInclude("\"--var-test\": '\"' + (yeah ? 'nah' : 'yeah') + '\"'");
+            expect(actual).toInclude('.css-test:after{content:var(--var-test);}');
+        });
     });
 });
 //# sourceMappingURL=index.test.js.map

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

@@ -147,2 +147,6 @@ "use strict";
         });
+        it('should only destructure a prop if hasnt been already', function () {
+            var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n\n        const ListItem = styled.div`\n          > :first-child {\n            display: ${(props) => (props.isShown ? 'none' : 'block')};\n          }\n\n          > :last-child {\n            opacity: ${(props) => (props.isShown ? 1 : 0)};\n          }\n        `;\n      ");
+            expect(actual).toInclude('({ isShown, ...props })');
+        });
         it('should transform template string with no argument function import', function () {
@@ -165,2 +169,7 @@ var actual = transformer.addSource({
         });
+        xit('should add quotations to dynamically set content', function () {
+            var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const ListItem = styled.div({\n          ':after': {\n            content: props => props.content,\n          },\n        });\n      ");
+            expect(actual).toInclude("\"--var-test\": '\"' + props.content + '\"'");
+            expect(actual).toInclude('.css-test:after{content:var(--var-test);}');
+        });
         it('should respect the definition of pseudo element content ala emotion with single quotes', function () {
@@ -182,2 +191,6 @@ var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const ListItem = styled.div({\n          ':after': {\n            content: \"''\",\n          },\n        });\n      ");
         });
+        it('should reference property access expression', function () {
+            var actual = transformer.transform("\n        import { styled } from '@compiled/css-in-js';\n        const color = { blue: 'red' };\n\n        styled.div({\n          background: color.blue,\n        });\n      ");
+            expect(actual).toInclude('"--var-test": color.blue');
+        });
         it('should not pass down invalid html attributes to the node when property has a suffix', function () {
@@ -184,0 +197,0 @@ 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      ");

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

@@ -61,3 +61,4 @@ "use strict";
                 node.expression.text === 'props' &&
-                !is_prop_valid_1.default(node.name.text)) {
+                !is_prop_valid_1.default(node.name.text) &&
+                !propsToDestructure.includes(node.name.text)) {
                 // We found a "props.foo" access with an invalid prop name.
@@ -64,0 +65,0 @@ // Let's re-write this node to remove the "props".

dist/utils/ast-node.js

@@ -58,4 +58,4 @@ "use strict";
     // Throws a string so we don't get a stack trace.
-    throw "@compiled/css-in-js => " + message + "\n\n" + node.getText() + "\n";
+    throw new Error("@compiled/css-in-js => " + message + "\n\n" + node.getText() + "\n");
 };
 //# sourceMappingURL=ast-node.js.map

dist/utils/object-literal-to-css.js

@@ -28,3 +28,27 @@ "use strict";
         var value;
-        if (ts.isSpreadAssignment(prop)) {
+        if (ts.isPropertyAssignment(prop) &&
+            (ts.isStringLiteral(prop.initializer) ||
+                ts.isNumericLiteral(prop.initializer) ||
+                ts.isNoSubstitutionTemplateLiteral(prop.initializer))) {
+            // We have a regular static assignment, e.g. "fontSize: '20px'"
+            var propertyName = ast_node_1.getIdentifierText(prop.name);
+            var parsedValue = ts.isNumericLiteral(prop.initializer)
+                ? Number(prop.initializer.text)
+                : prop.initializer.text;
+            key = kebab_case_1.default(propertyName);
+            if (propertyName === 'content' && typeof parsedValue === 'string') {
+                if (parsedValue[0] === '"' || parsedValue[0] === "'") {
+                    // Its already escaped, probably. Skip.
+                    value = parsedValue;
+                }
+                else {
+                    // Ensure that it has quotes around it
+                    value = "\"" + parsedValue + "\"";
+                }
+            }
+            else {
+                value = css_property_1.addUnitIfNeeded(propertyName, parsedValue);
+            }
+        }
+        else if (ts.isSpreadAssignment(prop)) {
             var nodeToExtractCssFrom = void 0;
@@ -116,24 +140,2 @@ if (ts.isCallExpression(prop.expression)) {
         }
-        else if (ts.isPropertyAssignment(prop) &&
-            (ts.isStringLiteral(prop.initializer) || ts.isNumericLiteral(prop.initializer))) {
-            // We have a regular static assignment, e.g. "fontSize: '20px'"
-            var propertyName = ast_node_1.getIdentifierText(prop.name);
-            var parsedValue = ts.isNumericLiteral(prop.initializer)
-                ? Number(prop.initializer.text)
-                : prop.initializer.text;
-            key = kebab_case_1.default(propertyName);
-            if (propertyName === 'content' && typeof parsedValue === 'string') {
-                if (parsedValue[0] === '"' || parsedValue[0] === "'") {
-                    // Its already escaped, probably. Skip.
-                    value = parsedValue;
-                }
-                else {
-                    // Ensure that it has quotes around it
-                    value = "\"" + parsedValue + "\"";
-                }
-            }
-            else {
-                value = css_property_1.addUnitIfNeeded(propertyName, parsedValue);
-            }
-        }
         else if (ts.isPropertyAssignment(prop) && ts.isArrowFunction(prop.initializer)) {
@@ -178,2 +180,3 @@ key = kebab_case_1.default(ast_node_1.getIdentifierText(prop.name));
                 ts.isConditionalExpression(prop.initializer) ||
+                ts.isPropertyAccessExpression(prop.initializer) ||
                 ts.isBinaryExpression(prop.initializer))) {
@@ -180,0 +183,0 @@ var cssVarName = hash_1.cssVariableHash(prop.initializer);

dist/utils/template-literal-to-css.js

@@ -148,2 +148,14 @@ "use strict";
         }
+        else if (ts.isPropertyAccessExpression(span.expression) ||
+            ts.isExpressionStatement(span.expression) ||
+            ts.isConditionalExpression(span.expression) ||
+            ts.isBinaryExpression(span.expression)) {
+            // We found something that we'll just inline reference.
+            var cssVarName = hash_1.cssVariableHash(span.expression);
+            css += "var(" + cssVarName + ")";
+            cssVariables.push({
+                expression: span.expression,
+                name: cssVarName,
+            });
+        }
         else {
@@ -150,0 +162,0 @@ throw ast_node_1.createNodeError('unsupported node', span);

package.json

 {
   "name": "@compiled/ts-transform-css-in-js",
-  "version": "0.2.4-7fc863128baa2fcf696662f920245eee2b29422f.0",
+  "version": "0.2.4",
   "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

385665

increased by2.77%

Lines of code

6045

increased by2.67%

No dependency changes