Merge branch 'main' into feat/add-types-to-swap-styles

.github/workflows/node.js.yml

@@ -41,7 +41,6 @@ jobs:
       # 5: Build package
       - name: Build Package
         run: npm run build
-
       # 6: Store artifact
       - name: Store Artifact
         uses: actions/upload-artifact@v2

babel.config.js

@@ -1,5 +1,7 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+  presets: [['@babel/preset-env', {
+    modules: false,
+  }], '@babel/preset-typescript', '@babel/preset-react'],
   plugins: ['@babel/proposal-class-properties', '@babel/proposal-object-rest-spread', "@babel/transform-typescript", "@babel/plugin-proposal-private-methods"],
   env: {
     test: {

package.json

@@ -6,8 +6,8 @@
   "license": "MIT",
   "scripts": {
     "watch-transform": "webpack --mode=development --watch --config webpack-transform.config.js",
-    "build": "webpack --mode=production",
-    "build:cy": "cross-env LAUNCHDARKLY_FLAGS=tokenThemes,gitBranchSelector,multiFileSync,tokenFlowButton npm run build",
+    "build": "cross-env NODE_ENV=production webpack --mode=production",
+    "build:cy": "cross-env LAUNCHDARKLY_FLAGS=tokenThemes,gitBranchSelector,multiFileSync,tokenFlowButton yarn build",
     "start": "cross-env webpack --mode=development --watch",
     "build-transform": "webpack --mode=production --config webpack-transform.config.js",
     "prettier:format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,json}' ",
@@ -23,11 +23,11 @@
     "@figma-plugin/helpers": "^0.15.2",
     "@gitbeaker/browser": "^35.6.0",
     "@octokit/rest": "^18.9.0",
-    "@primer/octicons-react": "^17.0.0",
+    "@primer/octicons-react": "^18.2.0",
     "@radix-ui/react-checkbox": "^0.1.5",
     "@radix-ui/react-context-menu": "^0.1.6",
     "@radix-ui/react-dropdown-menu": "0.0.19",
-    "@radix-ui/react-icons": "^1.0.3",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^0.0.14",
     "@radix-ui/react-switch": "^0.1.5",
     "@radix-ui/react-toolbar": "^0.1.5",
@@ -56,18 +56,16 @@
     "colorjs.io": "^0.4.3",
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.9.1",
-    "cypress-react-selector": "^2.3.6",
     "dnd-core": "^12.0.1",
     "dot-object": "^2.1.3",
+    "dotenv-webpack": "6.0.4",
     "downshift": "^6.1.7",
     "eventemitter3": "^4.0.7",
     "expr-eval": "^2.0.2",
     "figma-plugin-ds": "^0.1.8",
-    "file-loader": "^6.2.0",
     "file-saver": "^2.0.5",
     "framer-motion": "^6.3.11",
     "ignore-styles": "^5.0.1",
-    "json5": "^2.2.2",
     "jszip": "^3.10.0",
     "just-compact": "^3.0.1",
     "just-debounce-it": "^3.0.1",
@@ -81,13 +79,12 @@
     "lodash.debounce": "^4.0.8",
     "mixpanel-figma": "^2.0.1",
     "ml-matrix": "^6.9.0",
-    "msw": "^0.42.1",
     "object-hash": "^2.2.0",
     "object-path": "^0.11.8",
     "octokit-commit-multiple-files": "^3.2.1",
     "polished": "^4.1.3",
     "popmotion": "^11.0.0",
-    "postcss": "8.4.21",
+    "postcss": "^8.2.13",
     "postcss-calc-ast-parser": "^0.1.4",
     "react": "17.0.0",
     "react-colorful": "^5.5.1",
@@ -96,7 +93,7 @@
     "react-dnd-html5-backend": "^12.1.1",
     "react-dom": "17.0.0",
     "react-error-boundary": "^3.1.1",
-    "react-hook-form": "7.43.1",
+    "react-hook-form": "^7.29.0",
     "react-modal": "^3.11.2",
     "react-redux": "^8",
     "react-uid": "^2.3.1",
@@ -108,7 +105,7 @@
     "set-value": "^3.0.2",
     "storyblok-js-client": "^3.3.1",
     "use-debounce": "^6.0.1",
-    "zod": "3.20.6"
+    "zod": "^3.14.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -146,11 +143,11 @@
     "babel-loader": "^8.2.2",
     "concurrently": "^5.2.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^3.1.0",
+    "css-loader": "^5.2.7",
     "cypress": "^6.6.0",
+    "cypress-react-selector": "^2.3.6",
     "deep-set-in": "^2.1.3",
     "dotenv": "^16.0.1",
-    "dotenv-webpack": "^8.0.1",
     "eslint": "^8.2.0",
     "eslint-config-airbnb": "19.0.2",
     "eslint-config-airbnb-typescript": "16.1.0",
@@ -159,28 +156,31 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.4.0",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^7.2.11",
     "html-inline-script-webpack-plugin": "^3.0.0",
     "html-webpack-plugin": "^5.0.0",
     "husky": "^3.0.2",
     "jest": "^26.6.3",
     "lint-staged": "^9.2.1",
+    "loader-utils": "^2.0.4",
+    "msw": "^0.42.1",
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.0.5",
-    "react-devtools": "^4.27.2",
+    "react-devtools": "^4.24.3",
     "react-svg-loader": "^3.0.3",
     "react-test-renderer": "17.0.0",
     "serve": "^11.3.2",
-    "style-loader": "^0.23.1",
+    "style-loader": "^3.3.2",
     "svg-url-loader": "^7.1.1",
     "ts-loader": "^6.0.4",
     "ts-node": "^10.8.1",
     "tslint": "^5.18.0",
     "tslint-react": "^4.0.0",
     "typescript": "~4.7.4",
     "url-loader": "^2.1.0",
-    "webpack": "^5.76.0",
+    "webpack": "5",
     "webpack-cli": "^3.3.6",
     "whatwg-fetch": "^3.6.2"
   },

src/app/assets/fonts/jetbrainsmono.css

@@ -1,11 +1 @@
-@font-face {
-  font-family: 'JetBrainsMono';
-  font-weight: 400;
-  src: url('JetBrainsMono-Regular.woff2') format('woff2'), url('JetBrainsMono-Regular.woff') format('woff');
-}
-
-@font-face {
-  font-family: 'JetBrainsMono';
-  font-weight: 700;
-  src: url('JetBrainsMono-Bold.woff2') format('woff2'), url('JetBrainsMono-Bold.woff') format('woff');
-}
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

src/app/components/Tokens.tsx

@@ -22,7 +22,7 @@ import parseJson from '@/utils/parseJson';
 import AttentionIcon from '@/icons/attention.svg';
 import { TokensContext } from '@/context';
 import {
-  activeTokenSetSelector, manageThemesModalOpenSelector, scrollPositionSetSelector, showEditFormSelector, tokenFilterSelector, tokensSelector, tokenTypeSelector, usedTokenSetSelector,
+  activeTokenSetSelector, aliasBaseFontSizeSelector, manageThemesModalOpenSelector, scrollPositionSetSelector, showEditFormSelector, tokenFilterSelector, tokensSelector, tokenTypeSelector, usedTokenSetSelector,
 } from '@/selectors';
 import { ThemeSelector } from './ThemeSelector';
 import IconToggleableDisclosure from '@/app/components/IconToggleableDisclosure';
@@ -31,6 +31,7 @@ import { ManageThemesModal } from './ManageThemesModal';
 import { TokenSetStatus } from '@/constants/TokenSetStatus';
 import { activeTokensTabSelector } from '@/selectors/activeTokensTabSelector';
 import { stringTokensSelector } from '@/selectors/stringTokensSelector';
+import { getAliasValue } from '@/utils/alias';
 
 const StyledButton = styled('button', {
   '&:focus, &:hover': {
@@ -98,6 +99,7 @@ function Tokens({ isActive }: { isActive: boolean }) {
   const manageThemesModalOpen = useSelector(manageThemesModalOpenSelector);
   const scrollPositionSet = useSelector(scrollPositionSetSelector);
   const tokenFilter = useSelector(tokenFilterSelector);
+  const aliasBaseFontSize = useSelector(aliasBaseFontSizeSelector);
   const dispatch = useDispatch<Dispatch>();
   const [tokenSetsVisible, setTokenSetsVisible] = React.useState(true);
   const { getStringTokens } = useTokens();
@@ -191,6 +193,11 @@ function Tokens({ isActive }: { isActive: boolean }) {
     }
   }, [dispatch, tokens, stringTokens, activeTokenSet]);
 
+  React.useEffect(() => {
+    const newBaseFontSize = getAliasValue(aliasBaseFontSize, resolvedTokens);
+    dispatch.settings.setBaseFontSize(String(newBaseFontSize));
+  }, [resolvedTokens, aliasBaseFontSize]);
+
   const saveScrollPositionSet = React.useCallback((tokenSet: string) => {
     if (tokenDiv.current) {
       dispatch.uiState.setScrollPositionSet({ ...scrollPositionSet, [tokenSet]: tokenDiv.current?.scrollTop });

src/app/store/models/settings.tsx

@@ -155,7 +155,7 @@ export const settings = createModel<RootModel>()({
       };
     },
   },
-  effects: () => ({
+  effects: (dispatch) => ({
     setWindowSize: (payload) => {
       AsyncMessageChannel.ReactInstance.message({
         type: AsyncMessageTypes.RESIZE_WINDOW,
@@ -196,6 +196,7 @@ export const settings = createModel<RootModel>()({
     },
     setBaseFontSize: (payload, rootState) => {
       setUI(rootState.settings);
+      dispatch.tokenState.updateDocument({ shouldUpdateNodes: false });
     },
     setAliasBaseFontSize: (payload, rootState) => {
       setUI(rootState.settings);

src/app/styles/main.css

@@ -261,7 +261,7 @@
 }
 
 .font-mono {
-  font-family: JetBrainsMono, monospace !important;
+  font-family: 'JetBrains Mono', monospace !important;
 }
 
 .text-xs {

src/plugin/node.ts

@@ -5,7 +5,6 @@ import setValuesOnNode from './setValuesOnNode';
 import { Properties } from '@/constants/Properties';
 import { NodeTokenRefMap } from '@/types/NodeTokenRefMap';
 import { defaultNodeManager, NodeManagerNode } from './NodeManager';
-import { UpdateNodesSettings } from '@/types/UpdateNodesSettings';
 import { postToUI } from './notifiers';
 import { MessageFromPluginTypes } from '@/types/messages';
 import { BackgroundJobs } from '@/constants/BackgroundJobs';
@@ -26,6 +25,7 @@ import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { AsyncMessageTypes } from '@/types/AsyncMessages';
 import { updatePluginData } from './pluginData';
 import { extractColorInBorderTokenForAlias } from './extractColorInBorderTokenForAlias';
+import { SettingsState } from '@/app/store/models/settings';
 
 // @TODO fix typings
 
@@ -221,14 +221,13 @@ async function migrateTokens(entry: NodeManagerNode, values: MapValuesToTokensRe
 export async function updateNodes(
   entries: readonly NodeManagerNode[],
   tokens: Map<string, AnyTokenList[number]>,
-  settings?: UpdateNodesSettings,
+  settings?: SettingsState,
 ) {
   const { ignoreFirstPartForStyles, prefixStylesWithThemeName, baseFontSize } = settings ?? {};
   const figmaStyleMaps = getAllFigmaStyleMaps();
   const themeInfo = await AsyncMessageChannel.PluginInstance.message({
     type: AsyncMessageTypes.GET_THEME_INFO,
   });
-
   postToUI({
     type: MessageFromPluginTypes.START_JOB,
     job: {

src/stitches.config.ts

@@ -37,7 +37,7 @@ export const stitchesInstance = createStitches({
   theme: {
     fonts: {
       sans: 'Inter, sans-serif',
-      mono: 'JetBrainsMono, monospace',
+      mono: '\'JetBrains Mono\', monospace',
     },
     fontSizes: {
       xxsmall: '10px',

webpack.config.js

@@ -14,7 +14,6 @@ module.exports = (env, argv) => ({
   entry: {
     ui: './src/app/index.tsx', // The entry point for your UI code
     code: './src/plugin/controller.ts', // The entry point for your plugin code
-    transform: './src/utils/transform.ts', // The entry point for your plugin code
   },
 
   module: {
@@ -29,15 +28,14 @@ module.exports = (env, argv) => ({
         ],
         exclude: /node_modules/,
       },
-      // Fixing colorjs imports, see https://github.com/tokens-studio/figma-plugin/pull/1498#issuecomment-1372082627
       {
         test: /\.c?js$/,
         use: [
           {
             loader: 'babel-loader',
           },
+          //We don't add an exclude for node_modules as we need to aggressively optimize code deps
         ],
-        exclude:  /node_modules\/(?!(colorjs.io)\/)/,
       },
       // Enables including CSS by doing "import './file.css'" in your TypeScript code
       { test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }] },
@@ -65,11 +63,6 @@ module.exports = (env, argv) => ({
           },
         ],
       },
-      {
-        type: 'javascript/auto',
-        test: /\.mjs$/,
-        include: /node_modules/,
-      },
     ],
   },
 
@@ -86,13 +79,17 @@ module.exports = (env, argv) => ({
     },
     extensions: ['.tsx', '.ts', '.jsx', '.js'],
   },
-
+  optimization:{
+    nodeEnv: 'production',
+    minimize: true,
+    usedExports: true,
+    concatenateModules:true
+  },
   output: {
     filename: '[name].js',
     sourceMapFilename: "[name].js.map",
     path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
   },
-
   // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
   plugins: [
     new Dotenv({
@@ -116,6 +113,6 @@ module.exports = (env, argv) => ({
     }),
     new webpack.ProvidePlugin({
       Buffer: ['buffer', 'Buffer'],
-    }),
+    })
   ],
 });