refactor(babel-make-styles): simplify evaluation (#21144)

* refactor(babel-make-styles): simplify evaluation

* Update packages/babel-make-styles/src/plugin.ts

* Change files

* fix fixtures

Co-authored-by: KHMakoto <[email protected]>

change/@fluentui-babel-make-styles-483339d1-5946-49b0-81d4-f0b5d9cc738e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "simplify module evaluation",
+  "packageName": "@fluentui/babel-make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/babel-make-styles/__fixtures__/commonjs/code.ts

@@ -1,13 +1,9 @@
-import { Theme } from '@fluentui/react-theme';
 const react_make_styles_1 = require('@fluentui/react-make-styles');
 
-const useStyles = react_make_styles_1.makeStyles({
-  root: function (theme: Theme) {
-    return {
-      fontSize: theme.fontSizeBase300,
-      lineHeight: theme.lineHeightBase300,
-      fontWeight: theme.fontWeightRegular,
-    };
+export const useStyles = react_make_styles_1.makeStyles({
+  root: {
+    fontSize: '14px',
+    lineHeight: 1,
   },
 });
 

packages/babel-make-styles/__fixtures__/commonjs/output.ts

@@ -1,22 +1,14 @@
-import { Theme } from '@fluentui/react-theme';
-
 const react_make_styles_1 = require('@fluentui/react-make-styles');
 
-const useStyles = react_make_styles_1.__styles(
+export const useStyles = react_make_styles_1.__styles(
   {
     root: {
-      Be2twd7: 'fkhj508',
-      Bg96gwp: 'f1i3iumi',
-      Bhrd7zp: 'figsok6',
+      Be2twd7: 'fses1vf',
+      Bg96gwp: 'fp6vxd',
     },
   },
   {
-    d: [
-      '.fkhj508{font-size:var(--fontSizeBase300);}',
-      '.f1i3iumi{line-height:var(--lineHeightBase300);}',
-      '.figsok6{font-weight:var(--fontWeightRegular);}',
-    ],
+    d: ['.fses1vf{font-size:14px;}', '.fp6vxd{line-height:1;}'],
   },
 );
-
 console.log(useStyles);

packages/babel-make-styles/__fixtures__/config-evaluation-rules/code.ts

@@ -1,13 +1,8 @@
 import { makeStyles } from '@fluentui/react-make-styles';
-
-const func = () => {
-  // This assignment has no sense, but it will prevent us from evaluation in AST
-  // This fixture uses "sampleEvaluator.js" in plugin's config so input we should get a different color
-  const color = 'red';
-
-  return { color };
-};
+import { colorRed } from './consts';
 
 export const useStyles = makeStyles({
-  root: func(),
+  // This import has no sense, but it will prevent us from evaluation in AST by Babel
+  // This fixture uses "sampleEvaluator.js" in plugin's config so input we should get a different color
+  root: { color: colorRed },
 });

packages/babel-make-styles/__fixtures__/config-evaluation-rules/consts.ts

@@ -0,0 +1 @@
+export const colorRed = 'red';

packages/babel-make-styles/__fixtures__/config-evaluation-rules/output.ts

@@ -1,14 +1,5 @@
 import { __styles } from '@fluentui/react-make-styles';
-
-const func = () => {
-  // This assignment has no sense, but it will prevent us from evaluation in AST
-  // This fixture uses "sampleEvaluator.js" in plugin's config so input we should get a different color
-  const color = 'red';
-  return {
-    color,
-  };
-};
-
+import { colorRed } from './consts';
 export const useStyles = __styles(
   {
     root: {

packages/babel-make-styles/__fixtures__/config-evaluation-rules/sampleEvaluator.js

@@ -4,7 +4,7 @@
 const sampleEvaluator = () => {
   // Evaluators transform input code to something that will be evaluated by Node later. In evaluatePathsInVM() we expect
   // that results will be available as "exports.__mkPreval", this evaluator mocks it
-  const result = `exports.__mkPreval = [{ color: 'blue' }]`;
+  const result = `exports.__mkPreval = [{ root: { color: 'blue' } }]`;
 
   return [result, null];
 };

packages/babel-make-styles/__fixtures__/non-existing-module-call/code.tsx

@@ -2,11 +2,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { createModule } from './module';
 
 export const useStyles = makeStyles({
-  container: theme => {
-    // This assignment has no sense, but it will prevent us from evaluation in AST
-    const color = theme.colorNeutralStroke1;
-
-    return { color };
+  container: {
+    color: 'red',
   },
 });
 

packages/babel-make-styles/__fixtures__/non-existing-module-call/output.tsx

@@ -3,11 +3,11 @@ import { createModule } from './module';
 export const useStyles = __styles(
   {
     container: {
-      sj55zd: 'fq2l63j',
+      sj55zd: 'fe3e8s9',
     },
   },
   {
-    d: ['.fq2l63j{color:var(--colorNeutralStroke1);}'],
+    d: ['.fe3e8s9{color:red;}'],
   },
 );
 createModule().baz();

packages/babel-make-styles/src/plugin.test.ts

@@ -31,7 +31,6 @@ pluginTester({
       fixture: path.resolve(fixturesDir, 'error-argument-count', 'fixture.js'),
       error: /function accepts only a single param/,
     },
-
     {
       title: 'errors: throws on invalid config',
       fixture: path.resolve(fixturesDir, 'error-config-babel-options', 'fixture.ts'),
@@ -42,17 +41,6 @@ pluginTester({
       },
       error: /Validation failed for passed config/,
     },
-
-    {
-      title: 'errors: throws on invalid slot',
-      fixture: path.resolve(fixturesDir, 'error-style-method', 'fixture.js'),
-      error: /Object methods are not supported for defining styles/,
-    },
-    {
-      title: 'errors: throws on invalid property',
-      fixture: path.resolve(fixturesDir, 'error-style-property', 'fixture.js'),
-      error: /Object methods are not supported for defining styles/,
-    },
   ],
 
   plugin,