cssta - npm Package Compare versions

Comparing version 0.9.3 to 0.9.4

compiler/babel/__tests__/viewport.js

@@ -33,2 +33,7 @@ "use strict";
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+it("Supports simple viewport units with calc", function () {
+    var css = __testUtil__1.styled.test(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: calc(10vw - 100px);\n  "], ["\n    width: calc(10vw - 100px);\n  "])));
+    var code = __testUtil__1.build(css);
+    expect(code).toMatchInlineSnapshot("\n    \"import React from 'react';\n    import useViewportStyle from 'cssta/runtime/useViewportStyle';\n    const unresolvedStyleTuples0 = [['width', 'calc(10vw - 100px)']];\n    const Example = React.forwardRef((props, ref) => {\n      const styles0 = useViewportStyle(unresolvedStyleTuples0);\n      const style = props.style != null ? [styles0, props.style] : styles0;\n      return <Element {...props} ref={ref} style={style} />;\n    });\"\n  ");
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

compiler/babel/__tests__/viewport.ts

@@ -147,1 +147,19 @@ import { styled, build } from "../__testUtil__";
 });
+
+it("Supports simple viewport units with calc", () => {
+  const css = styled.test`
+    width: calc(10vw - 100px);
+  `;
+
+  const code = build(css);
+  expect(code).toMatchInlineSnapshot(`
+    "import React from 'react';
+    import useViewportStyle from 'cssta/runtime/useViewportStyle';
+    const unresolvedStyleTuples0 = [['width', 'calc(10vw - 100px)']];
+    const Example = React.forwardRef((props, ref) => {
+      const styles0 = useViewportStyle(unresolvedStyleTuples0);
+      const style = props.style != null ? [styles0, props.style] : styles0;
+      return <Element {...props} ref={ref} style={style} />;
+    });"
+  `);
+});

compiler/babel/styleSheet/index.js

@@ -37,3 +37,3 @@ "use strict";
     var t = babel.types;
-    var baseUnresolvedStyleTuplesVariable = styleTuples_1.createTopLevelStyleTuplesVariable(babel, path, styleTuples);
+    var baseUnresolvedStyleTuplesVariable = styleTuples_1.createTopLevelStyleTuplesVariable(babel, path, substitutionMap, styleTuples);
     var unresolvedStyleTuplesVariable;
@@ -69,3 +69,3 @@ if (viewportMode === viewport_1.ViewportMode.None) {
     else if (viewportMode === viewport_1.ViewportMode.ComplexUnits) {
-        var unresolvedStyleTuplesVariable = styleTuples_1.createTopLevelStyleTuplesVariable(babel, path, styleTuples);
+        var unresolvedStyleTuplesVariable = styleTuples_1.createTopLevelStyleTuplesVariable(babel, path, substitutionMap, styleTuples);
         var cssToReactNativeImport = util_1.getOrCreateImport(babel, path, "cssta/runtime/useViewportStyle");
@@ -72,0 +72,0 @@ styleExpression = util_1.createVariable(babel, path, "styles", t.callExpression(cssToReactNativeImport, [unresolvedStyleTuplesVariable]), { prefix0: true });

compiler/babel/styleSheet/index.ts

@@ -41,2 +41,3 @@ import { StyleTuple } from "../../../runtime/cssUtil";
     path,
+    substitutionMap,
     styleTuples
@@ -115,2 +116,3 @@ );
       path,
+      substitutionMap,
       styleTuples
@@ -117,0 +119,0 @@ );

compiler/babel/styleSheet/styleBody.js

@@ -12,2 +12,3 @@ "use strict";
 var substituteSimpleUnit_1 = __importDefault(require("./substituteSimpleUnit"));
+var util_2 = require("./util");
 var InterpolationType;
@@ -23,3 +24,3 @@ (function (InterpolationType) {
     }
-    else if (css_to_react_native_1.getPropertyName(prop) in simpleUnitTypes_1["default"]) {
+    else if (css_to_react_native_1.getPropertyName(prop) in simpleUnitTypes_1["default"] && !util_2.calcRe.test(value)) {
         return InterpolationType.NoOrSimple;
@@ -26,0 +27,0 @@ }

compiler/babel/styleSheet/styleBody.ts

 import { getPropertyName } from "css-to-react-native";
 import { transformStyleTuples, StyleTuple } from "../../../runtime/cssUtil";
+import { SubstitutionMap } from "../extractCss";
 import { jsonToNode, getOrCreateImport } from "../util";
@@ -11,3 +12,3 @@ import {
 import substituteSimpleUnit from "./substituteSimpleUnit";
-import { SubstitutionMap } from "../extractCss";
+import { calcRe } from "./util";
 
@@ -30,3 +31,3 @@ enum InterpolationType {
     return InterpolationType.NoOrSimple;
-  } else if (getPropertyName(prop) in unitTypes) {
+  } else if (getPropertyName(prop) in unitTypes && !calcRe.test(value)) {
     return InterpolationType.NoOrSimple;
@@ -33,0 +34,0 @@ }

compiler/babel/styleSheet/styleTuples.js

 "use strict";
 exports.__esModule = true;
 var util_1 = require("../util");
-exports.createTopLevelStyleTuplesVariable = function (babel, path, styleTuples) {
-    var unresolvedStyleTuplesVariable = util_1.createTopLevelVariable(babel, path, "unresolvedStyleTuples", util_1.jsonToNode(babel, styleTuples), { prefix0: true });
+var substitutionUtil_1 = require("./substitutionUtil");
+exports.createTopLevelStyleTuplesVariable = function (babel, path, substitutionMap, styleTuples) {
+    var t = babel.types;
+    var styleTuplesNode = t.arrayExpression(styleTuples.map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return t.arrayExpression([
+            t.stringLiteral(key),
+            substitutionUtil_1.getStringWithSubstitutedValues(babel, substitutionMap, value)
+        ]);
+    }));
+    var unresolvedStyleTuplesVariable = util_1.createTopLevelVariable(babel, path, "unresolvedStyleTuples", styleTuplesNode, { prefix0: true });
     return unresolvedStyleTuplesVariable;
 };

compiler/babel/styleSheet/styleTuples.ts

 import { StyleTuple } from "../../../runtime/cssUtil";
-import { createTopLevelVariable, jsonToNode } from "../util";
+import { SubstitutionMap } from "../extractCss";
+import { createTopLevelVariable } from "../util";
+import { getStringWithSubstitutedValues } from "./substitutionUtil";
 
@@ -7,4 +9,14 @@ export const createTopLevelStyleTuplesVariable = (
   path: any,
+  substitutionMap: SubstitutionMap,
   styleTuples: StyleTuple[]
 ) => {
+  const { types: t } = babel;
+  const styleTuplesNode = t.arrayExpression(
+    styleTuples.map(([key, value]) =>
+      t.arrayExpression([
+        t.stringLiteral(key),
+        getStringWithSubstitutedValues(babel, substitutionMap, value)
+      ])
+    )
+  );
   const unresolvedStyleTuplesVariable = createTopLevelVariable(
@@ -14,3 +26,3 @@ babel,
     "unresolvedStyleTuples",
-    jsonToNode(babel, styleTuples),
+    styleTuplesNode,
     { prefix0: true }
@@ -17,0 +29,0 @@ );

compiler/babel/styleSheet/viewport.js

@@ -24,2 +24,3 @@ "use strict";
 var simpleUnitTypes_1 = __importStar(require("./simpleUnitTypes"));
+var util_1 = require("./util");
 var ViewportMode;
@@ -38,3 +39,4 @@ (function (ViewportMode) {
         }
-        else if (simpleUnitTypes_1["default"][css_to_react_native_1.getPropertyName(prop)] === simpleUnitTypes_1.UnitType.Length) {
+        else if (simpleUnitTypes_1["default"][css_to_react_native_1.getPropertyName(prop)] === simpleUnitTypes_1.UnitType.Length &&
+            !util_1.calcRe.test(value)) {
             return ViewportMode.SimpleLengthUnits;
@@ -41,0 +43,0 @@ }

compiler/babel/styleSheet/viewport.ts

@@ -8,2 +8,3 @@ import { getPropertyName } from "css-to-react-native";
 import unitTypes, { UnitType } from "./simpleUnitTypes";
+import { calcRe } from "./util";
 
@@ -22,3 +23,6 @@ export enum ViewportMode {
           return ViewportMode.None;
-        } else if (unitTypes[getPropertyName(prop)] === UnitType.Length) {
+        } else if (
+          unitTypes[getPropertyName(prop)] === UnitType.Length &&
+          !calcRe.test(value)
+        ) {
           return ViewportMode.SimpleLengthUnits;
@@ -25,0 +29,0 @@ } else {

package.json

 {
   "name": "cssta",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "main": "index.js",
@@ -45,2 +45,4 @@ "license": "MIT",
     "@types/react-test-renderer": "^16.9.0",
+    "@typescript-eslint/eslint-plugin": "^2.4.0",
+    "@typescript-eslint/parser": "^2.4.0",
     "babel-plugin-macros": "^2.6.1",
@@ -47,0 +49,0 @@ "eslint": "^6.3.0",

runtime/cssUtil.js

@@ -17,2 +17,3 @@ "use strict";
 var colors_1 = __importDefault(require("./css-transforms/colors"));
+var calc_1 = __importDefault(require("./css-transforms/calc"));
 exports.transformStyleTuples = function (styleTuples, appliedVariables) {
@@ -26,2 +27,3 @@ var transformedStyleTuples = styleTuples.map(function (_a) {
         transformedValue = colors_1["default"](transformedValue);
+        transformedValue = calc_1["default"](transformedValue);
         return [property, transformedValue];
@@ -28,0 +30,0 @@ });

runtime/cssUtil.ts

 import cssToReactNative, { transformRawValue } from "css-to-react-native";
 import transformVariables from "./css-transforms/variables";
 import transformColors from "./css-transforms/colors";
+import transformCalc from "./css-transforms/calc";
 import { Variables } from "./VariablesContext";
@@ -22,2 +23,3 @@ // Viewport (hopefully) already transformed
     transformedValue = transformColors(transformedValue);
+    transformedValue = transformCalc(transformedValue);
     return [property, transformedValue];
@@ -24,0 +26,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

489169

increased by2.9%

Number of package files

158

increased by3.27%

Lines of code

11991

increased by1.74%

Worsened metrics

Dev dependency count

19

increased by11.76%

No dependency changes