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

Comparing version 0.2.15-a3f0add8bdc3394e8057ec81d8eb147f932ef6ac.0 to 0.2.15

dist/class-names/index.d.ts

 import * as ts from 'typescript';
-export default function classNamesTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile>;
+import { TransformerOptions } from '../types';
+export default function classNamesTransformer(program: ts.Program, options?: TransformerOptions): ts.TransformerFactory<ts.SourceFile>;

dist/class-names/index.js

@@ -24,3 +24,4 @@ "use strict";
 };
-function classNamesTransformer(program) {
+function classNamesTransformer(program, options) {
+    if (options === void 0) { options = {}; }
     var transformerFactory = function (context) {
@@ -38,3 +39,3 @@ return function (sourceFile) {
                 if (isClassNameComponent(node)) {
-                    return visit_class_names_jsx_element_1.visitClassNamesJsxElement(node, context, collectedDeclarations);
+                    return visit_class_names_jsx_element_1.visitClassNamesJsxElement(node, context, collectedDeclarations, options);
                 }
@@ -41,0 +42,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';
-export declare const visitClassNamesJsxElement: (classNamesNode: ts.JsxElement, context: ts.TransformationContext, collectedDeclarations: Declarations) => ts.Node;
+import { TransformerOptions } from '../../types';
+export declare const visitClassNamesJsxElement: (classNamesNode: ts.JsxElement, context: ts.TransformationContext, collectedDeclarations: Declarations, options: TransformerOptions) => ts.Node;

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

@@ -31,3 +31,3 @@ "use strict";
 };
-exports.visitClassNamesJsxElement = function (classNamesNode, context, collectedDeclarations) {
+exports.visitClassNamesJsxElement = function (classNamesNode, context, collectedDeclarations, options) {
     var css = '';
@@ -78,4 +78,5 @@ var cssVariables = [];
         context: context,
+        nonce: options.nonce,
     });
 };
 //# sourceMappingURL=visit-class-names-jsx-element.js.map

dist/constants.d.ts

 import * as ts from 'typescript';
-export declare const CLASS_NAME_PREFIX = "css";
+export declare const CLASS_NAME_PREFIX = "cc";
 export declare const CSS_VARIABLE_PREFIX = "var";
@@ -8,2 +8,3 @@ export declare const CSS_PROP_NAME = "css";
 export declare const STYLE_PROP_NAME = "style";
+export declare const NONCE_PROP_NAME = "nonce";
 export declare const CLASSNAME_PROP_NAME = "className";
@@ -10,0 +11,0 @@ export declare const REACT_PACKAGE_NAME = "react";

dist/constants.js

@@ -12,3 +12,3 @@ "use strict";
 // Strings
-exports.CLASS_NAME_PREFIX = 'css';
+exports.CLASS_NAME_PREFIX = 'cc';
 exports.CSS_VARIABLE_PREFIX = 'var';
@@ -20,2 +20,3 @@ // Props
 exports.STYLE_PROP_NAME = 'style';
+exports.NONCE_PROP_NAME = 'nonce';
 exports.CLASSNAME_PROP_NAME = 'className';
@@ -22,0 +23,0 @@ // Identifiers

dist/css-prop/index.d.ts

 import * as ts from 'typescript';
-export default function cssPropTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile>;
+import { TransformerOptions } from '../types';
+export default function cssPropTransformer(program: ts.Program, options?: TransformerOptions): ts.TransformerFactory<ts.SourceFile>;

dist/css-prop/index.js

@@ -23,3 +23,4 @@ "use strict";
 };
-function cssPropTransformer(program) {
+function cssPropTransformer(program, options) {
+    if (options === void 0) { options = {}; }
     var transformerFactory = function (context) {
@@ -36,3 +37,3 @@ return function (sourceFile) {
                 if (visit_jsx_element_with_css_prop_1.isJsxElementWithCssProp(node)) {
-                    var newNode = visit_jsx_element_with_css_prop_1.visitJsxElementWithCssProp(node, collectedDeclarations, context);
+                    var newNode = visit_jsx_element_with_css_prop_1.visitJsxElementWithCssProp(node, collectedDeclarations, context, options);
                     if (ts.isJsxSelfClosingElement(node)) {
@@ -39,0 +40,0 @@ // It was self closing - it can't have children!

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

 import * as ts from 'typescript';
 import { Declarations } from '../../types';
+import { TransformerOptions } from '../../types';
 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) => ts.JsxFragment;
+export declare const visitJsxElementWithCssProp: (node: ts.JsxSelfClosingElement | ts.JsxElement, variableDeclarations: Declarations, context: ts.TransformationContext, options: TransformerOptions) => 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) {
+exports.visitJsxElementWithCssProp = function (node, variableDeclarations, context, options) {
     logger.log('visiting a jsx element with a css prop');
@@ -49,4 +49,4 @@ // 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] }, result));
+    return create_jsx_element_1.createCompiledComponentFromNode(node, __assign({ context: context, propsToRemove: [constants_1.CSS_PROP_NAME], nonce: options.nonce }, result));
 };
 //# sourceMappingURL=visit-jsx-element-with-css-prop.js.map

dist/index.d.ts

 import * as ts from 'typescript';
-interface TransformerOptions {
-    debug?: boolean;
-}
-export default function transformer(program: ts.Program, opts?: TransformerOptions): ts.TransformerFactory<ts.SourceFile>;
-export {};
+import { TransformerOptions } from './types';
+export default function transformer(program: ts.Program, args?: {
+    options?: TransformerOptions;
+}): ts.TransformerFactory<ts.SourceFile>;

dist/index.js

@@ -18,7 +18,9 @@ "use strict";
 var transformers = [css_prop_1.default, styled_component_1.default, class_names_1.default];
-function transformer(program, opts) {
-    if (opts === void 0) { opts = {}; }
-    logger.setEnabled(!!opts.debug);
+function transformer(program, args) {
+    if (args === void 0) { args = {}; }
+    args.options && logger.setEnabled(!!args.options.debug);
     return function (context) {
-        var initializedTransformers = transformers.map(function (transformer) { return transformer(program)(context); });
+        var initializedTransformers = transformers.map(function (transformer) {
+            return transformer(program, args.options || {})(context);
+        });
         return function (sourceFile) {
@@ -25,0 +27,0 @@ return initializedTransformers.reduce(function (source, transformer) {

dist/styled-component/index.d.ts

 import * as ts from 'typescript';
-export default function styledComponentTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile>;
+import { TransformerOptions } from '../types';
+export default function styledComponentTransformer(program: ts.Program, options?: TransformerOptions): ts.TransformerFactory<ts.SourceFile>;

dist/styled-component/index.js

@@ -17,2 +17,3 @@ "use strict";
 var constants_1 = require("../constants");
+var create_jsx_element_1 = require("../utils/create-jsx-element");
 var isStyledImportFound = function (sourceFile) {
@@ -38,3 +39,4 @@ return !!sourceFile.statements.find(function (statement) {
 };
-function styledComponentTransformer(program) {
+function styledComponentTransformer(program, options) {
+    if (options === void 0) { options = {}; }
     var transformerFactory = function (context) {
@@ -51,4 +53,16 @@ return function (sourceFile) {
                 collect_declarations_1.collectDeclarationsFromNode(node, program, collectedDeclarations);
+                if (ts.isVariableStatement(node) &&
+                    // We are assuming there will be only one declaration.
+                    // This won't work if people chain them - let's improve this later if it comes up.
+                    node.declarationList.declarations[0].initializer &&
+                    isStyledComponent(node.declarationList.declarations[0].initializer) &&
+                    ts.isIdentifier(node.declarationList.declarations[0].name)) {
+                    // We've found a styled component with a variable declaration
+                    // e.g. const StyledDiv = styled.div``.
+                    // Vist children first.
+                    var newNode = ts.visitEachChild(node, visitor, context);
+                    return [newNode, create_jsx_element_1.createDevDisplayName(node.declarationList.declarations[0].name)];
+                }
                 if (isStyledComponent(node)) {
-                    return visit_styled_component_1.visitStyledComponent(node, context, collectedDeclarations);
+                    return visit_styled_component_1.visitStyledComponent(node, context, collectedDeclarations, options);
                 }
@@ -55,0 +69,0 @@ return ts.visitEachChild(node, visitor, context);

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

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

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

@@ -60,3 +60,3 @@ "use strict";
 };
-exports.visitStyledComponent = function (node, context, collectedDeclarations) {
+exports.visitStyledComponent = function (node, context, collectedDeclarations, options) {
     var originalTagName = getTagName(node);
@@ -93,2 +93,3 @@ var result = css_builder_1.buildCss(getCssNode(node), collectedDeclarations, context);
         context: context,
+        nonce: options.nonce,
         styleFactory: function (props) { return __spreadArrays([
@@ -95,0 +96,0 @@ typescript_1.default.createSpreadAssignment(typescript_1.default.createIdentifier('props.style'))

dist/types.d.ts

@@ -19,1 +19,5 @@ import * as ts from 'typescript';
 }
+export interface TransformerOptions {
+    nonce?: string;
+    debug?: boolean;
+}

dist/utils/ast-node.d.ts

 import * as ts from 'typescript';
+export declare const createNodeError: (message: string, node: ts.Node) => never;
 export declare const getExpressionText: (node: ts.Expression) => string;
@@ -9,2 +10,1 @@ export declare const getIdentifierText: (node: ts.Expression | ts.Identifier | ts.StringLiteral | ts.NumericLiteral | ts.ComputedPropertyName | ts.ObjectBindingPattern | ts.ArrayBindingPattern) => string;
 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

@@ -11,2 +11,5 @@ "use strict";
 var ts = __importStar(require("typescript"));
+exports.createNodeError = function (message, node) {
+    throw new Error("@compiled/css-in-js => " + message + "\n\n" + node.getText() + "\n");
+};
 exports.getExpressionText = function (node) {
@@ -57,5 +60,2 @@ if (!ts.isStringLiteral(node)) {
 };
-exports.createNodeError = function (message, node) {
-    throw new Error("@compiled/css-in-js => " + message + "\n\n" + node.getText() + "\n");
-};
 //# sourceMappingURL=ast-node.js.map

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

@@ -12,2 +12,3 @@ import * as ts from 'typescript';
     context: ts.TransformationContext;
+    nonce?: string;
 }
@@ -49,2 +50,3 @@ /**
 }) => ts.JsxFragment;
+export declare const createDevDisplayName: (identifier: ts.Identifier) => ts.IfStatement;
 export {};

dist/utils/create-jsx-element.js

@@ -18,2 +18,3 @@ "use strict";
 var ts = __importStar(require("typescript"));
+var constants_1 = require("../constants");
 var stylis_1 = require("./stylis");
@@ -25,4 +26,12 @@ var hash_1 = require("./hash");
 var functional_programming_1 = require("./functional-programming");
+function stripPrefix(className) {
+    return className.replace(constants_1.CLASS_NAME_PREFIX + "-", '');
+}
 var createStyleNode = function (node, className, css, opts) {
     var STYLE_ELEMENT_NAME = constants.getStyleComponentImport(opts.context);
+    var nonceProp = opts.nonce
+        ? [
+            ts.createJsxAttribute(ts.createIdentifier(constants.NONCE_PROP_NAME), ts.createJsxExpression(undefined, ts.createIdentifier(opts.nonce))),
+        ]
+        : [];
     return ts.createJsxElement(
@@ -32,4 +41,4 @@ // We use setOriginalNode() here to work around createJsx not working without the original node.
     ts.setOriginalNode(ts.createJsxOpeningElement(STYLE_ELEMENT_NAME, [], ts.createJsxAttributes([
-        ts.createJsxAttribute(ts.createIdentifier(constants.HASH_PROP_NAME), ts.createStringLiteral(className)),
-    ])), node), [
+        ts.createJsxAttribute(ts.createIdentifier(constants.HASH_PROP_NAME), ts.createStringLiteral(stripPrefix(className))),
+    ].concat(nonceProp))), node), [
         ts.createJsxExpression(undefined, ts.createArrayLiteral(css.map(function (rule) { return ts.createStringLiteral(rule); }), false)),
@@ -183,2 +192,7 @@ ],
 };
+exports.createDevDisplayName = function (identifier) {
+    return ts.createIf(ts.createBinary(ts.createPropertyAccess(ts.createPropertyAccess(ts.createIdentifier('process'), ts.createIdentifier('env')), ts.createIdentifier('NODE_ENV')), ts.createToken(ts.SyntaxKind.EqualsEqualsEqualsToken), ts.createStringLiteral('development')), ts.createBlock([
+        ts.createExpressionStatement(ts.createBinary(ts.createPropertyAccess(identifier, ts.createIdentifier('displayName')), ts.createToken(ts.SyntaxKind.EqualsToken), ts.createStringLiteral(identifier.text))),
+    ], true), undefined);
+};
 //# sourceMappingURL=create-jsx-element.js.map

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

@@ -28,5 +28,18 @@ "use strict";
     else {
-        // Sometimes people forget to put a comma at the end.
-        // This handles that case.
-        var tailIndex = tail.indexOf(';') === -1 ? tail.indexOf('\n') : tail.indexOf(';');
+        // Sometimes people forget to put a semi-colon at the end.
+        var tailIndex = void 0;
+        // when calc property used, we get ')' along with unit in the 'literal' object
+        // Eg. `marginLeft: calc(100% - ${obj.key}rem)` will give ')rem' in the span literal
+        if (tail.indexOf(')') !== -1) {
+            tailIndex = tail.indexOf(')');
+        }
+        else if (tail.indexOf(';') !== -1) {
+            tailIndex = tail.indexOf(';');
+        }
+        else if (tail.indexOf('\n') !== -1) {
+            tailIndex = tail.indexOf('\n');
+        }
+        else {
+            tailIndex = tail.length;
+        }
         if (tailIndex === -1) {
@@ -179,4 +192,25 @@ // Ok still nothing. This means everything is a suffix!
         }
-        else if (ts.isPropertyAccessExpression(span.expression) ||
-            ts.isExpressionStatement(span.expression) ||
+        else if (ts.isPropertyAccessExpression(span.expression)) {
+            var extractedPrefix = extractPrefix(css);
+            var extractedSuffix = extractSuffix(span.literal.text);
+            var result = extractSuffix(span.literal.text);
+            css = extractedPrefix.css;
+            var cssVariableExpression = span.expression;
+            if (extractedSuffix.suffix && extractedPrefix.prefix) {
+                cssVariableExpression = expression_operators_1.joinThreeExpressions(ts.createStringLiteral(extractedPrefix.prefix), span.expression, ts.createStringLiteral(extractedSuffix.suffix));
+            }
+            else if (extractedSuffix.suffix) {
+                cssVariableExpression = expression_operators_1.joinToBinaryExpression(span.expression, ts.createStringLiteral(extractedSuffix.suffix));
+            }
+            else if (extractedPrefix.prefix) {
+                cssVariableExpression = expression_operators_1.joinToBinaryExpression(ts.createStringLiteral(extractedPrefix.prefix), span.expression);
+            }
+            var variableName = hash_1.cssVariableHash(cssVariableExpression);
+            cssVariables.push({
+                name: variableName,
+                expression: cssVariableExpression,
+            });
+            css += "var(" + variableName + ")" + result.rest;
+        }
+        else if (ts.isExpressionStatement(span.expression) ||
             ts.isConditionalExpression(span.expression) ||
@@ -183,0 +217,0 @@ ts.isBinaryExpression(span.expression)) {

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

313974

decreased by-25.44%

Number of package files

114

decreased by-9.52%

Lines of code

6018

decreased by-9.41%

No dependency changes