@fluentui/babel-make-styles - npm Package Compare versions

Comparing version 0.0.0-nightly131c59c96120211203.1 to 0.0.0-nightly2462abf75c20211217.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Fri, 03 Dec 2021 04:13:18 GMT",
-      "tag": "@fluentui/babel-make-styles_v0.0.0-nightly131c59c96120211203.1",
-      "version": "0.0.0-nightly131c59c96120211203.1",
+      "date": "Fri, 17 Dec 2021 04:14:46 GMT",
+      "tag": "@fluentui/babel-make-styles_v0.0.0-nightly2462abf75c20211217.1",
+      "version": "0.0.0-nightly2462abf75c20211217.1",
       "comments": {
@@ -14,6 +14,12 @@ "prerelease": [
             "package": "@fluentui/babel-make-styles",
-            "commit": "6fe1f0a081835b662f3c880d6405724d3abc4c0b",
+            "commit": "4d9ea3499c852a0ed7b218202c074558963d7bca",
             "comment": "Release nightly v9"
           },
           {
+            "author": "[e-mail]",
+            "package": "@fluentui/babel-make-styles",
+            "commit": "9498e23ed57a8fc89b381428d57d1c684c4f5be6",
+            "comment": "babel-make-styles: Correctly handling sequence expressions."
+          },
+          {
             "author": "[e-mail]",
@@ -25,6 +31,12 @@ "package": "@fluentui/babel-make-styles",
           {
+            "author": "[e-mail]",
+            "package": "@fluentui/babel-make-styles",
+            "commit": "e4b1b8479916e1d88102225a146288936364c21c",
+            "comment": "fix: handle computed keys on objects"
+          },
+          {
             "author": "beachball",
             "package": "@fluentui/babel-make-styles",
-            "comment": "Bump @fluentui/make-styles to v0.0.0-nightly131c59c96120211203.1",
-            "commit": "6fe1f0a081835b662f3c880d6405724d3abc4c0b"
+            "comment": "Bump @fluentui/make-styles to v0.0.0-nightly2462abf75c20211217.1",
+            "commit": "4d9ea3499c852a0ed7b218202c074558963d7bca"
           },
@@ -34,4 +46,4 @@ {
             "package": "@fluentui/babel-make-styles",
-            "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly131c59c96120211203.1",
-            "commit": "6fe1f0a081835b662f3c880d6405724d3abc4c0b"
+            "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly2462abf75c20211217.1",
+            "commit": "4d9ea3499c852a0ed7b218202c074558963d7bca"
           },
@@ -41,4 +53,4 @@ {
             "package": "@fluentui/babel-make-styles",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly131c59c96120211203.1",
-            "commit": "6fe1f0a081835b662f3c880d6405724d3abc4c0b"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly2462abf75c20211217.1",
+            "commit": "4d9ea3499c852a0ed7b218202c074558963d7bca"
           }
@@ -45,0 +57,0 @@ ],

CHANGELOG.md

 # Change Log - @fluentui/babel-make-styles
 
-This log was last generated on Fri, 03 Dec 2021 04:13:18 GMT and should not be manually modified.
+This log was last generated on Fri, 17 Dec 2021 04:14:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly131c59c96120211203.1](https://github.com/microsoft/fluentui/tree/@fluentui/babel-make-styles_v0.0.0-nightly131c59c96120211203.1)
+## [0.0.0-nightly2462abf75c20211217.1](https://github.com/microsoft/fluentui/tree/@fluentui/babel-make-styles_v0.0.0-nightly2462abf75c20211217.1)
 
-Fri, 03 Dec 2021 04:13:18 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/babel-make-styles_v9.0.0-beta.4..@fluentui/babel-make-styles_v0.0.0-nightly131c59c96120211203.1)
+Fri, 17 Dec 2021 04:14:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/babel-make-styles_v9.0.0-beta.4..@fluentui/babel-make-styles_v0.0.0-nightly2462abf75c20211217.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/6fe1f0a081835b662f3c880d6405724d3abc4c0b) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/4d9ea3499c852a0ed7b218202c074558963d7bca) by email not defined)
+- babel-make-styles: Correctly handling sequence expressions. ([PR #21010](https://github.com/microsoft/fluentui/pull/21010) by [e-mail])
 - use new types from makeStyles core ([PR #20786](https://github.com/microsoft/fluentui/pull/20786) by [e-mail])
-- Bump @fluentui/make-styles to v0.0.0-nightly131c59c96120211203.1 ([commit](https://github.com/microsoft/fluentui/commit/6fe1f0a081835b662f3c880d6405724d3abc4c0b) by beachball)
-- Bump @fluentui/react-make-styles to v0.0.0-nightly131c59c96120211203.1 ([commit](https://github.com/microsoft/fluentui/commit/6fe1f0a081835b662f3c880d6405724d3abc4c0b) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly131c59c96120211203.1 ([commit](https://github.com/microsoft/fluentui/commit/6fe1f0a081835b662f3c880d6405724d3abc4c0b) by beachball)
+- fix: handle computed keys on objects ([PR #20969](https://github.com/microsoft/fluentui/pull/20969) by [e-mail])
+- Bump @fluentui/make-styles to v0.0.0-nightly2462abf75c20211217.1 ([commit](https://github.com/microsoft/fluentui/commit/4d9ea3499c852a0ed7b218202c074558963d7bca) by beachball)
+- Bump @fluentui/react-make-styles to v0.0.0-nightly2462abf75c20211217.1 ([commit](https://github.com/microsoft/fluentui/commit/4d9ea3499c852a0ed7b218202c074558963d7bca) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly2462abf75c20211217.1 ([commit](https://github.com/microsoft/fluentui/commit/4d9ea3499c852a0ed7b218202c074558963d7bca) by beachball)
 
@@ -20,0 +22,0 @@ ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/babel-make-styles_v9.0.0-beta.4)

dist/babel-make-styles.d.ts

@@ -24,2 +24,5 @@ import { EvalRule } from '@linaria/babel-preset';
 } | {
+    kind: 'LAZY_SEQUENCE_EXPRESSION';
+    nodePath: NodePath<types.SequenceExpression>;
+} | {
     kind: 'LAZY_MEMBER';
@@ -26,0 +29,0 @@ nodePath: NodePath<types.MemberExpression>;

lib/plugin.d.ts

@@ -17,2 +17,5 @@ import { NodePath, PluginObj, PluginPass, types as t } from '@babel/core';
 } | {
+    kind: 'LAZY_SEQUENCE_EXPRESSION';
+    nodePath: NodePath<t.SequenceExpression>;
+} | {
     kind: 'LAZY_MEMBER';
@@ -19,0 +22,0 @@ nodePath: NodePath<t.MemberExpression>;

lib/plugin.js

@@ -99,3 +99,3 @@ "use strict";
     styleSlots.forEach((styleSlotPath) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (styleSlotPath.isObjectMethod()) {
@@ -160,3 +160,14 @@ throw styleSlotPath.buildCodeFrameError('Object methods are not supported for defining styles');
                     if (propertyPath.isObjectProperty()) {
+                        const keyPath = propertyPath.get('key');
                         const valuePath = propertyPath.get('value');
+                        /**
+                         * Computed properties may require lazy evaluation.
+                         *
+                         * @example
+                         *    makeStyles({ [var]: { color: 'red' } })
+                         *    makeStyles({ [`${var}`]: { color: SOME_VARIABLE } })
+                         */
+                        if (propertyPath.node.computed) {
+                            lazyPaths.push(keyPath);
+                        }
                         if (valuePath.isStringLiteral() || valuePath.isNullLiteral() || valuePath.isNumericLiteral()) {
@@ -242,3 +253,3 @@ return;
                             }
-                            // This condition resolves "theme.alias.color.green.foreground1" to CSS variable
+                            // This condition resolves "theme.aliasColorGreenForeground1" to CSS variable
                             if (valuePath.isMemberExpression()) {
@@ -335,2 +346,15 @@ const identifierPath = getMemberExpressionIdentifier(valuePath);
             }
+            /**
+             * A scenario when slots styles are represented by a sequence expression.
+             *
+             * @example
+             *    // ❌ lazy evaluation
+             *    makeStyles({ root: (_a: { color: 'red' }, _a.backgroundColor: 'blue', _a ) })
+             *    makeStyles({ root: (_a: { color: SOME_VARIABLE }, _a.backgroundColor: 'blue', _a) })
+             *    makeStyles({ root: (_a: { color: 'red' }, _a[`. ${some_className}`]: { color: 'blue' }, _a) })
+             */
+            if (stylesPath.isSequenceExpression()) {
+                (_l = state.styleNodes) === null || _l === void 0 ? void 0 : _l.push({ kind: 'LAZY_SEQUENCE_EXPRESSION', nodePath: stylesPath });
+                return;
+            }
         }
@@ -391,3 +415,4 @@ throw styleSlotPath.buildCodeFrameError(constants_1.UNHANDLED_CASE_ERROR);
                             styleNode.kind === 'LAZY_MEMBER' ||
-                            styleNode.kind === 'LAZY_EXPRESSION_CALL') {
+                            styleNode.kind === 'LAZY_EXPRESSION_CALL' ||
+                            styleNode.kind === 'LAZY_SEQUENCE_EXPRESSION') {
                             return [...acc, styleNode.nodePath];
@@ -394,0 +419,0 @@ }

lib/utils/evaluatePathsInVM.d.ts

 import { NodePath, types as t } from '@babel/core';
+import * as template from '@babel/template';
 import type { BabelPluginOptions } from '../types';
@@ -17,5 +18,3 @@ /**
  */
-export declare const expressionTpl: (arg?: any[] | {
-    [index: string]: any;
-} | undefined) => t.Expression;
+export declare const expressionTpl: (arg?: template.PublicReplacements | undefined) => t.Expression;
 /**
@@ -22,0 +21,0 @@ * Evaluates passed paths in Node environment to resolve all lazy values.

package.json

 {
   "name": "@fluentui/babel-make-styles",
-  "version": "0.0.0-nightly131c59c96120211203.1",
+  "version": "0.0.0-nightly2462abf75c20211217.1",
   "description": "A Babel plugin that performs build time transforms for @fluentui/make-styles",
@@ -24,4 +24,4 @@ "main": "lib/index.js",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-make-styles": "0.0.0-nightly131c59c96120211203.1",
-    "@fluentui/react-theme": "0.0.0-nightly131c59c96120211203.1",
+    "@fluentui/react-make-styles": "0.0.0-nightly2462abf75c20211217.1",
+    "@fluentui/react-theme": "0.0.0-nightly2462abf75c20211217.1",
     "@fluentui/scripts": "^1.0.0",
@@ -37,3 +37,3 @@ "babel-plugin-tester": "^10.0.0"
     "@babel/traverse": "^7.12.13",
-    "@fluentui/make-styles": "0.0.0-nightly131c59c96120211203.1",
+    "@fluentui/make-styles": "0.0.0-nightly2462abf75c20211217.1",
     "@linaria/babel-preset": "^3.0.0-beta.14",
@@ -40,0 +40,0 @@ "@linaria/shaker": "^3.0.0-beta.14",

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

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

Improved metrics

Total package byte prevSize

153450

increased by1.9%

Lines of code

2410

increased by1.77%

Dependency changes

• + Added@fluentui/make-styles@0.0.0-nightly2462abf75c20211217.1(transitive)

• - Removed@fluentui/make-styles@0.0.0-nightly131c59c96120211203.1(transitive)

• Updated@fluentui/make-styles@0.0.0-nightly2462abf75c20211217.1