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

Comparing version 0.2.17-10d15bd147c0057aa102ae22ad4acfcf81a804a6.0 to 0.2.17-9830560bb3e805b77ae05aadc4b139b79cb95536.0

dist/class-names/index.js

@@ -38,3 +38,3 @@ "use strict";
                 if (isClassNameComponent(node)) {
-                    return visit_class_names_jsx_element_1.visitClassNamesJsxElement(node, context, collectedDeclarations, options);
+                    return visit_class_names_jsx_element_1.visitClassNamesJsxElement(node, context, collectedDeclarations, options, sourceFile);
                 }
@@ -41,0 +41,0 @@ return ts.visitEachChild(node, visitor, context);

dist/class-names/visitors/visit-class-names-jsx-element.d.ts

 import * as ts from 'typescript';
 import { Declarations } from '../../types';
 import { TransformerOptions } from '../../types';
-export declare const visitClassNamesJsxElement: (classNamesNode: ts.JsxElement, context: ts.TransformationContext, collectedDeclarations: Declarations, options: TransformerOptions) => ts.Node;
+export declare const visitClassNamesJsxElement: (classNamesNode: ts.JsxElement, context: ts.TransformationContext, collectedDeclarations: Declarations, options: TransformerOptions, sourceFile: ts.SourceFile) => ts.Node;

dist/class-names/visitors/visit-class-names-jsx-element.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) {
@@ -31,3 +42,3 @@ if (mod && mod.__esModule) return mod;
 };
-exports.visitClassNamesJsxElement = function (classNamesNode, context, collectedDeclarations, options) {
+exports.visitClassNamesJsxElement = function (classNamesNode, context, collectedDeclarations, options, sourceFile) {
     var css = '';
@@ -71,12 +82,8 @@ var cssVariables = [];
         : returnNode.expression.body;
-    return create_jsx_element_1.createCompiledFragment(classNamesNode, {
-        css: css,
-        cssVariables: cssVariables,
-        children: ts.isJsxElement(children) || ts.isJsxSelfClosingElement(children)
+    return create_jsx_element_1.createCompiledFragment(classNamesNode, __assign(__assign({}, options), { css: css,
+        cssVariables: cssVariables, children: ts.isJsxElement(children) || ts.isJsxSelfClosingElement(children)
             ? children
-            : ts.createJsxExpression(undefined, children),
-        context: context,
-        nonce: options.nonce,
-    });
+            : ts.createJsxExpression(undefined, children), context: context,
+        sourceFile: sourceFile }));
 };
 //# sourceMappingURL=visit-class-names-jsx-element.js.map

dist/css-prop/index.js

@@ -36,3 +36,3 @@ "use strict";
                 if (visit_jsx_element_with_css_prop_1.isJsxElementWithCssProp(node)) {
-                    var newNode = visit_jsx_element_with_css_prop_1.visitJsxElementWithCssProp(node, collectedDeclarations, context, options);
+                    var newNode = visit_jsx_element_with_css_prop_1.visitJsxElementWithCssProp(node, collectedDeclarations, context, options, sourceFile);
                     if (ts.isJsxSelfClosingElement(node)) {
@@ -39,0 +39,0 @@ // It was self closing - it can't have children!

dist/css-prop/visitors/visit-jsx-element-with-css-prop.d.ts

@@ -5,2 +5,2 @@ import * as ts from 'typescript';
 export declare const isJsxElementWithCssProp: (node: ts.Node) => node is ts.JsxSelfClosingElement | ts.JsxElement;
-export declare const visitJsxElementWithCssProp: (node: ts.JsxSelfClosingElement | ts.JsxElement, variableDeclarations: Declarations, context: ts.TransformationContext, options: TransformerOptions) => ts.JsxFragment;
+export declare const visitJsxElementWithCssProp: (node: ts.JsxSelfClosingElement | ts.JsxElement, variableDeclarations: Declarations, context: ts.TransformationContext, options: TransformerOptions, sourceFile: ts.SourceFile) => ts.JsxFragment;

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

@@ -43,3 +43,3 @@ "use strict";
 };
-exports.visitJsxElementWithCssProp = function (node, variableDeclarations, context, options) {
+exports.visitJsxElementWithCssProp = function (node, variableDeclarations, context, options, sourceFile) {
     logger.log('visiting a jsx element with a css prop');
@@ -49,4 +49,5 @@ // Grab the css prop node
     var result = css_builder_1.buildCss(getNodeToExtract(cssProp), variableDeclarations, context);
-    return create_jsx_element_1.createCompiledComponentFromNode(node, __assign({ context: context, propsToRemove: [constants_1.CSS_PROP_NAME], nonce: options.nonce }, result));
+    return create_jsx_element_1.createCompiledComponentFromNode(node, __assign(__assign(__assign({}, options), result), { sourceFile: sourceFile,
+        context: context, propsToRemove: [constants_1.CSS_PROP_NAME] }));
 };
 //# sourceMappingURL=visit-jsx-element-with-css-prop.js.map

dist/styled-component/index.js

@@ -64,3 +64,3 @@ "use strict";
                 if (isStyledComponent(node)) {
-                    return visit_styled_component_1.visitStyledComponent(node, context, collectedDeclarations, options);
+                    return visit_styled_component_1.visitStyledComponent(node, context, collectedDeclarations, options, sourceFile);
                 }
@@ -67,0 +67,0 @@ return ts.visitEachChild(node, visitor, context);

dist/styled-component/visitors/visit-styled-component.d.ts

 import ts from 'typescript';
 import { Declarations } from '../../types';
 import { TransformerOptions } from '../../types';
-export declare const visitStyledComponent: (node: ts.CallExpression | ts.TaggedTemplateExpression, context: ts.TransformationContext, collectedDeclarations: Declarations, options: TransformerOptions) => ts.Node;
+export declare const visitStyledComponent: (node: ts.CallExpression | ts.TaggedTemplateExpression, context: ts.TransformationContext, collectedDeclarations: Declarations, options: TransformerOptions, sourceFile: ts.SourceFile) => ts.Node;

dist/styled-component/visitors/visit-styled-component.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 __spreadArrays = (this && this.__spreadArrays) || function () {
@@ -60,3 +71,3 @@ for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
 };
-exports.visitStyledComponent = function (node, context, collectedDeclarations, options) {
+exports.visitStyledComponent = function (node, context, collectedDeclarations, options, sourceFile) {
     var originalTagName = getTagName(node);
@@ -88,9 +99,5 @@ var result = css_builder_1.buildCss(getCssNode(node), collectedDeclarations, context);
     });
-    var newElement = create_jsx_element_1.createCompiledComponent(typescript_1.default.createIdentifier(constants.STYLED_AS_USAGE_NAME), {
-        css: result.css,
-        cssVariables: visitedCssVariables,
-        node: node,
+    var newElement = create_jsx_element_1.createCompiledComponent(typescript_1.default.createIdentifier(constants.STYLED_AS_USAGE_NAME), __assign(__assign({}, options), { css: result.css, cssVariables: visitedCssVariables, node: node,
         context: context,
-        nonce: options.nonce,
-        styleFactory: function (props) { return __spreadArrays([
+        sourceFile: sourceFile, styleFactory: function (props) { return __spreadArrays([
             typescript_1.default.createSpreadAssignment(typescript_1.default.createIdentifier('props.style'))
@@ -103,9 +110,7 @@ ], props.map(function (prop) {
             return prop;
-        })); },
-        classNameFactory: function (className) {
+        })); }, classNameFactory: function (className) {
             return expression_operators_1.joinToJsxExpression(className, typescript_1.default.createIdentifier('props.className'), {
                 conditional: true,
             });
-        },
-        jsxAttributes: [
+        }, jsxAttributes: [
             // {...props}
@@ -115,4 +120,3 @@ typescript_1.default.createJsxSpreadAttribute(typescript_1.default.createIdentifier('props')),
             typescript_1.default.createJsxAttribute(typescript_1.default.createIdentifier(constants.REF_PROP_NAME), typescript_1.default.createJsxExpression(undefined, typescript_1.default.createIdentifier(constants.REF_PROP_NAME))),
-        ],
-    });
+        ] }));
     return typescript_1.default.createCall(typescript_1.default.createPropertyAccess(constants.getReactDefaultImportName(context), typescript_1.default.createIdentifier(constants.FORWARD_REF_IMPORT)), undefined, [
@@ -119,0 +123,0 @@ typescript_1.default.createArrowFunction(undefined, undefined, [

dist/types.d.ts

@@ -22,2 +22,3 @@ import * as ts from 'typescript';
     debug?: boolean;
+    sourceMap?: boolean;
 }

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

@@ -13,2 +13,4 @@ import * as ts from 'typescript';
     nonce?: string;
+    sourceMap?: boolean;
+    sourceFile: ts.SourceFile;
 }
@@ -15,0 +17,0 @@ /**

dist/utils/create-jsx-element.js

@@ -25,2 +25,3 @@ "use strict";
 var functional_programming_1 = require("./functional-programming");
+var source_maps_1 = require("./source-maps");
 function stripPrefix(className) {
@@ -36,2 +37,6 @@ return className.replace(constants_1.CLASS_NAME_PREFIX + "-", '');
         : [];
+    var sourceMap = opts.sourceMap
+        ? '\n' +
+            source_maps_1.getSourceMap(opts.sourceFile.getLineAndCharacterOfPosition(node.getStart()), opts.sourceFile, opts.context)
+        : '';
     return ts.createJsxElement(
@@ -43,3 +48,9 @@ // We use setOriginalNode() here to work around createJsx not working without the original node.
     ].concat(nonceProp))), node), [
-        ts.createJsxExpression(undefined, ts.createArrayLiteral(css.map(function (rule) { return ts.createStringLiteral(rule); }), false)),
+        ts.createJsxExpression(undefined, ts.createArrayLiteral(
+        /**
+         * Each source map is tied to a specific CSS block (each CSS block/declaration is one element of the array).
+         * Ends up looking like: `.cc-1b1wq3m{font-size:20px;}\n/*# sourceMappingURL=...`
+         * When source maps are turn on.
+         */
+        css.map(function (rule) { return ts.createStringLiteral(rule + sourceMap); }), false)),
     ], 
@@ -46,0 +57,0 @@ // We use setOriginalNode() here to work around createJsx not working without the original node.

package.json

 {
   "name": "@compiled/ts-transform-css-in-js",
-  "version": "0.2.17-10d15bd147c0057aa102ae22ad4acfcf81a804a6.0",
+  "version": "0.2.17-9830560bb3e805b77ae05aadc4b139b79cb95536.0",
   "description": "The CSS in JS authoring experience you love without the runtime cost",
@@ -23,2 +23,4 @@ "author": "Michael Dougall",
     "@emotion/is-prop-valid": "^0.8.6",
+    "convert-source-map": "^1.7.0",
+    "source-map": "^0.7.3",
     "stylis": "^3.5.4",
@@ -29,4 +31,5 @@ "stylis-rule-sheet": "^0.0.10",
   "devDependencies": {
+    "@types/convert-source-map": "^1.5.1",
     "ts-transformer-testing-library": "^1.0.0-alpha.7"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

324183

increased by3.24%

Number of package files

118

increased by3.51%

Lines of code

6227

increased by3.47%

Worsened metrics

Dependency count

6

increased by50%

Dev dependency count

2

increased by100%

Dependency changes

• + Addedconvert-source-map@^1.7.0

• + Addedsource-map@^0.7.3

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedsource-map@0.7.4(transitive)