search

swc-project / swc

Rust-based platform for the Web
https://swc.rs
Apache License 2.0
30.95k stars 1.21k forks source link

SWC compress producing larger output than terser (minimal repro included) #7472

Closed christiango closed 1 year ago

christiango commented 1 year ago

Describe the bug

We're trying to move our webpack compilation off terser and on to swc, but we are noticing a few scenarios where our bundles are significantly larger than our current terser generated bundle.

Input code

const FluentV9ColorTokens = {
    colorNeutralForeground1: '--colorNeutralForeground1',
    colorNeutralForeground1Hover: '--colorNeutralForeground1Hover',
    colorNeutralForeground1Pressed: '--colorNeutralForeground1Pressed',
    colorNeutralForeground1Selected: '--colorNeutralForeground1Selected',
    colorNeutralForeground2: '--colorNeutralForeground2',
    colorNeutralForeground2Hover: '--colorNeutralForeground2Hover',
    colorNeutralForeground2Pressed: '--colorNeutralForeground2Pressed',
    colorNeutralForeground2Selected: '--colorNeutralForeground2Selected',
    colorNeutralForeground2BrandHover: '--colorNeutralForeground2BrandHover',
    colorNeutralForeground2BrandPressed: '--colorNeutralForeground2BrandPressed',
    colorNeutralForeground2BrandSelected: '--colorNeutralForeground2BrandSelected',
    colorNeutralForeground3: '--colorNeutralForeground3',
    colorNeutralForeground3Hover: '--colorNeutralForeground3Hover',
    colorNeutralForeground3Pressed: '--colorNeutralForeground3Pressed',
    colorNeutralForeground3Selected: '--colorNeutralForeground3Selected',
    colorNeutralForeground3BrandHover: '--colorNeutralForeground3BrandHover',
    colorNeutralForeground3BrandPressed: '--colorNeutralForeground3BrandPressed',
    colorNeutralForeground3BrandSelected: '--colorNeutralForeground3BrandSelected',
    colorNeutralForeground4: '--colorNeutralForeground4',
    colorNeutralForegroundDisabled: '--colorNeutralForegroundDisabled',
    colorBrandForegroundLink: '--colorBrandForegroundLink',
    colorBrandForegroundLinkHover: '--colorBrandForegroundLinkHover',
    colorBrandForegroundLinkPressed: '--colorBrandForegroundLinkPressed',
    colorBrandForegroundLinkSelected: '--colorBrandForegroundLinkSelected',
    colorNeutralForeground2Link: '--colorNeutralForeground2Link',
    colorNeutralForeground2LinkHover: '--colorNeutralForeground2LinkHover',
    colorNeutralForeground2LinkPressed: '--colorNeutralForeground2LinkPressed',
    colorNeutralForeground2LinkSelected: '--colorNeutralForeground2LinkSelected',
    colorCompoundBrandForeground1: '--colorCompoundBrandForeground1',
    colorCompoundBrandForeground1Hover: '--colorCompoundBrandForeground1Hover',
    colorCompoundBrandForeground1Pressed: '--colorCompoundBrandForeground1Pressed',
    colorNeutralForegroundOnBrand: '--colorNeutralForegroundOnBrand',
    colorNeutralForegroundInverted: '--colorNeutralForegroundInverted',
    colorNeutralForegroundInvertedHover: '--colorNeutralForegroundInvertedHover',
    colorNeutralForegroundInvertedPressed: '--colorNeutralForegroundInvertedPressed',
    colorNeutralForegroundInvertedSelected: '--colorNeutralForegroundInvertedSelected',
    colorNeutralForegroundInverted2: '--colorNeutralForegroundInverted2',
    colorNeutralForegroundStaticInverted: '--colorNeutralForegroundStaticInverted',
    colorNeutralForegroundInvertedLink: '--colorNeutralForegroundInvertedLink',
    colorNeutralForegroundInvertedLinkHover: '--colorNeutralForegroundInvertedLinkHover',
    colorNeutralForegroundInvertedLinkPressed: '--colorNeutralForegroundInvertedLinkPressed',
    colorNeutralForegroundInvertedLinkSelected: '--colorNeutralForegroundInvertedLinkSelected',
    colorNeutralForegroundInvertedDisabled: '--colorNeutralForegroundInvertedDisabled',
    colorBrandForeground1: '--colorBrandForeground1',
    colorBrandForeground2: '--colorBrandForeground2',
    colorNeutralForeground1Static: '--colorNeutralForeground1Static',
    colorBrandForegroundInverted: '--colorBrandForegroundInverted',
    colorBrandForegroundInvertedHover: '--colorBrandForegroundInvertedHover',
    colorBrandForegroundInvertedPressed: '--colorBrandForegroundInvertedPressed',
    colorBrandForegroundOnLight: '--colorBrandForegroundOnLight',
    colorBrandForegroundOnLightHover: '--colorBrandForegroundOnLightHover',
    colorBrandForegroundOnLightPressed: '--colorBrandForegroundOnLightPressed',
    colorBrandForegroundOnLightSelected: '--colorBrandForegroundOnLightSelected',
    colorNeutralBackground1: '--colorNeutralBackground1',
    colorNeutralBackground1Hover: '--colorNeutralBackground1Hover',
    colorNeutralBackground1Pressed: '--colorNeutralBackground1Pressed',
    colorNeutralBackground1Selected: '--colorNeutralBackground1Selected',
    colorNeutralBackground2: '--colorNeutralBackground2',
    colorNeutralBackground2Hover: '--colorNeutralBackground2Hover',
    colorNeutralBackground2Pressed: '--colorNeutralBackground2Pressed',
    colorNeutralBackground2Selected: '--colorNeutralBackground2Selected',
    colorNeutralBackground3: '--colorNeutralBackground3',
    colorNeutralBackground3Hover: '--colorNeutralBackground3Hover',
    colorNeutralBackground3Pressed: '--colorNeutralBackground3Pressed',
    colorNeutralBackground3Selected: '--colorNeutralBackground3Selected',
    colorNeutralBackground4: '--colorNeutralBackground4',
    colorNeutralBackground4Hover: '--colorNeutralBackground4Hover',
    colorNeutralBackground4Pressed: '--colorNeutralBackground4Pressed',
    colorNeutralBackground4Selected: '--colorNeutralBackground4Selected',
    colorNeutralBackground5: '--colorNeutralBackground5',
    colorNeutralBackground5Hover: '--colorNeutralBackground5Hover',
    colorNeutralBackground5Pressed: '--colorNeutralBackground5Pressed',
    colorNeutralBackground5Selected: '--colorNeutralBackground5Selected',
    colorNeutralBackground6: '--colorNeutralBackground6',
    colorNeutralBackgroundInverted: '--colorNeutralBackgroundInverted',
    colorNeutralBackgroundStatic: '--colorNeutralBackgroundStatic',
    colorSubtleBackground: '--colorSubtleBackground',
    colorSubtleBackgroundHover: '--colorSubtleBackgroundHover',
    colorSubtleBackgroundPressed: '--colorSubtleBackgroundPressed',
    colorSubtleBackgroundSelected: '--colorSubtleBackgroundSelected',
    colorSubtleBackgroundLightAlphaHover: '--colorSubtleBackgroundLightAlphaHover',
    colorSubtleBackgroundLightAlphaPressed: '--colorSubtleBackgroundLightAlphaPressed',
    colorSubtleBackgroundLightAlphaSelected: '--colorSubtleBackgroundLightAlphaSelected',
    colorSubtleBackgroundInverted: '--colorSubtleBackgroundInverted',
    colorSubtleBackgroundInvertedHover: '--colorSubtleBackgroundInvertedHover',
    colorSubtleBackgroundInvertedPressed: '--colorSubtleBackgroundInvertedPressed',
    colorSubtleBackgroundInvertedSelected: '--colorSubtleBackgroundInvertedSelected',
    colorTransparentBackground: '--colorTransparentBackground',
    colorTransparentBackgroundHover: '--colorTransparentBackgroundHover',
    colorTransparentBackgroundPressed: '--colorTransparentBackgroundPressed',
    colorTransparentBackgroundSelected: '--colorTransparentBackgroundSelected',
    colorNeutralBackgroundDisabled: '--colorNeutralBackgroundDisabled',
    colorNeutralBackgroundInvertedDisabled: '--colorNeutralBackgroundInvertedDisabled',
    colorNeutralStencil1: '--colorNeutralStencil1',
    colorNeutralStencil2: '--colorNeutralStencil2',
    colorNeutralStencil1Alpha: '--colorNeutralStencil1Alpha',
    colorNeutralStencil2Alpha: '--colorNeutralStencil2Alpha',
    colorBackgroundOverlay: '--colorBackgroundOverlay',
    colorScrollbarOverlay: '--colorScrollbarOverlay',
    colorBrandBackground: '--colorBrandBackground',
    colorBrandBackgroundHover: '--colorBrandBackgroundHover',
    colorBrandBackgroundPressed: '--colorBrandBackgroundPressed',
    colorBrandBackgroundSelected: '--colorBrandBackgroundSelected',
    colorCompoundBrandBackground: '--colorCompoundBrandBackground',
    colorCompoundBrandBackgroundHover: '--colorCompoundBrandBackgroundHover',
    colorCompoundBrandBackgroundPressed: '--colorCompoundBrandBackgroundPressed',
    colorBrandBackgroundStatic: '--colorBrandBackgroundStatic',
    colorBrandBackground2: '--colorBrandBackground2',
    colorBrandBackgroundInverted: '--colorBrandBackgroundInverted',
    colorBrandBackgroundInvertedHover: '--colorBrandBackgroundInvertedHover',
    colorBrandBackgroundInvertedPressed: '--colorBrandBackgroundInvertedPressed',
    colorBrandBackgroundInvertedSelected: '--colorBrandBackgroundInvertedSelected',
    colorNeutralStrokeAccessible: '--colorNeutralStrokeAccessible',
    colorNeutralStrokeAccessibleHover: '--colorNeutralStrokeAccessibleHover',
    colorNeutralStrokeAccessiblePressed: '--colorNeutralStrokeAccessiblePressed',
    colorNeutralStrokeAccessibleSelected: '--colorNeutralStrokeAccessibleSelected',
    colorNeutralStroke1: '--colorNeutralStroke1',
    colorNeutralStroke1Hover: '--colorNeutralStroke1Hover',
    colorNeutralStroke1Pressed: '--colorNeutralStroke1Pressed',
    colorNeutralStroke1Selected: '--colorNeutralStroke1Selected',
    colorNeutralStroke2: '--colorNeutralStroke2',
    colorNeutralStroke3: '--colorNeutralStroke3',
    colorNeutralStrokeOnBrand: '--colorNeutralStrokeOnBrand',
    colorNeutralStrokeOnBrand2: '--colorNeutralStrokeOnBrand2',
    colorNeutralStrokeOnBrand2Hover: '--colorNeutralStrokeOnBrand2Hover',
    colorNeutralStrokeOnBrand2Pressed: '--colorNeutralStrokeOnBrand2Pressed',
    colorNeutralStrokeOnBrand2Selected: '--colorNeutralStrokeOnBrand2Selected',
    colorBrandStroke1: '--colorBrandStroke1',
    colorBrandStroke2: '--colorBrandStroke2',
    colorCompoundBrandStroke: '--colorCompoundBrandStroke',
    colorCompoundBrandStrokeHover: '--colorCompoundBrandStrokeHover',
    colorCompoundBrandStrokePressed: '--colorCompoundBrandStrokePressed',
    colorNeutralStrokeDisabled: '--colorNeutralStrokeDisabled',
    colorNeutralStrokeInvertedDisabled: '--colorNeutralStrokeInvertedDisabled',
    colorTransparentStroke: '--colorTransparentStroke',
    colorTransparentStrokeInteractive: '--colorTransparentStrokeInteractive',
    colorTransparentStrokeDisabled: '--colorTransparentStrokeDisabled',
    colorStrokeFocus1: '--colorStrokeFocus1',
    colorStrokeFocus2: '--colorStrokeFocus2',
    colorNeutralShadowAmbient: '--colorNeutralShadowAmbient',
    colorNeutralShadowKey: '--colorNeutralShadowKey',
    colorNeutralShadowAmbientLighter: '--colorNeutralShadowAmbientLighter',
    colorNeutralShadowKeyLighter: '--colorNeutralShadowKeyLighter',
    colorNeutralShadowAmbientDarker: '--colorNeutralShadowAmbientDarker',
    colorNeutralShadowKeyDarker: '--colorNeutralShadowKeyDarker',
    colorBrandShadowAmbient: '--colorBrandShadowAmbient',
    colorBrandShadowKey: '--colorBrandShadowKey',
    colorPaletteDarkOrangeForeground1: '--colorPaletteDarkOrangeForeground1'
};

const AppIcon = (props)=>{
    const { dummyBool  } = props;

    if (dummyBool) {
        console.log(`var(${FluentV9ColorTokens.colorNeutralForegroundDisabled}, ${theme?.palette.neutralTertiary ?? ThemeColorPalette.Neutral.neutralTertiary})`)
    } 

    return null;
};

window.AppIcon = AppIcon;

Config

{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": false
    },
    "target": "es2020",
    "loose": false,
    "minify": {
      "compress": {
        "arguments": false,
        "arrows": true,
        "booleans": true,
        "booleans_as_integers": false,
        "collapse_vars": true,
        "comparisons": true,
        "computed_props": true,
        "conditionals": true,
        "dead_code": true,
        "directives": true,
        "drop_console": false,
        "drop_debugger": true,
        "evaluate": true,
        "expression": false,
        "hoist_funs": false,
        "hoist_props": true,
        "hoist_vars": false,
        "if_return": true,
        "join_vars": true,
        "keep_classnames": false,
        "keep_fargs": true,
        "keep_fnames": false,
        "keep_infinity": false,
        "loops": true,
        "negate_iife": true,
        "properties": true,
        "reduce_funcs": false,
        "reduce_vars": false,
        "side_effects": true,
        "switches": true,
        "typeofs": true,
        "unsafe": false,
        "unsafe_arrows": false,
        "unsafe_comps": false,
        "unsafe_Function": false,
        "unsafe_math": false,
        "unsafe_symbols": false,
        "unsafe_methods": false,
        "unsafe_proto": false,
        "unsafe_regexp": false,
        "unsafe_undefined": false,
        "unused": true,
        "const_to_let": true,
        "pristine_globals": true,
        "passes": 2
      },
      "mangle": {
        "toplevel": false,
        "keep_classnames": false,
        "keep_fnames": false,
        "keep_private_props": false,
        "ie8": false,
        "safari10": false
      }
    }
  },
  "module": {
    "type": "commonjs"
  },
  "minify": true,
  "isModule": true
}

Playground link

https://play.swc.rs/?version=1.3.60&code=H4sIAAAAAAAAA5WaW2vjSBCF3wP%2BD3oYSAIzhkj2wG7IhiRD2LDDZMBhn0eRexNhWTJtOUMI%2Fu8r6xL1rU5V8mRUXx11n251dymaHGVVua2j22KnyvrfP26qotIP1UqV2%2BgiepscRc1fdrj4Q%2B1qnRa3lVZPutqVy7M%2Fo%2BMvX4jY8WeY%2Bnf1ojTKbwFG5KdW261aIpkeYYQWqlBZjZUGBkvFQCJmUjlPYoEnMe9JLPIkFngSCz251mm5ZHs3UhI5QT9NTiIp6bEFYtEE6CRMKmdWIvAp4S1KRO4kAmMSoSeiqZBIp0IinAqJfCok0qmQfGAqzIDODKd%2By7fpYwFbMiCWUNu6kfmel6tRIhDkkp0xowhOxhsrmuGk%2FDECEPP82%2FaE4wIJdo0L%2BxTmBCsc5VaYlKxvpGc31XpzIByPjTMARYhkHOcgJhL03GNA7N992aYB53oCy9yVTfPxCAyITIibcBYnk%2BSnnUPKZAWTz0VlwujE9c5gqUWd1nkmGBwblLWPWVpMTC4oHXfhemPi8vEXrz5mwgfmgXz9HjIEm6WLol3mjNxazlBaTKYx8%2FCsm1%2BwCmkJdHd%2FGhOARATv%2BvTqQoDc7o9WFge9L7%2FnT881KdXHBRK4jyYkEON6aGMCQfaU43ChGXadZiuqZDdiTGp4zXEBRoRaXXyEESLXkQCDpfwNxIgxqZwndMluMLwnqGQ3KIEnsGQfMb92NWJMKucJXbsaDO8Jql0NSuAJrF1HzC%2FijBiTynkyE3gy4z2ZiTyZCTyZyTyZA4k5k8p5Mhd4Muc9mYs8mQs8mcs8%2BQokvuJU8gjqI1iIOEi4gCWy2D3WhRqRMduNwDRnWINhKOANKQFAEX84KQLKtFvrVbF5TpluOaBQlO2qhwqF%2Be77LJT2ZyZFiGQYN%2BmDJUWyTqKjJcXyLsKS9aE5qG03qVZlHXqqgmFewLGOZngpzzRE8XK%2BXRDDKxhZyvmIbE0VCMLasKcXtSqzvPAP0kMAJPknzSGA7tQ%2BpOTt2ii6J0yP%2FfTRjvvGjSJ9NSoPN2Q%2FRZmuiuIx1V6eG%2FHLntDz4QRQUqiEQ0%2BDA4SLNvwEOAhRpjGz3nonGfKAACQi6I0q8oYA8fvUj3nlHE6CYSTgvmCh6jUnSLwZYbYwgsFTjnkzIti%2FMCeRZKek5H3rotbVSl1lWXPbvFkTAwuJDUhEwif%2FICWRo2oAgpNIktUABdKioZ2ivQ5SkEH0a5Y%2Bju1Ar1d6guk8fK3SIaGNrr1Op%2FhvHPrrdAr1TxkryqZTbR3CvAAaLYvhpfDYORQvx4yki%2FmrijeFzasU7i7PobG3do8OILaWLsglo93OIDgZvMtZDO0%2BedK0w7QAe2QNY9QJ3bXXC%2BHEu7JWOs3q%2FAVpGBSW8ztFIvbxsg3dVtlua8xH8yqFx0E8%2FGA%2Fp8vq99X6MW8a49tuRun0f9QrkdpE2Lu2hXloPQlAsA1YaATYFn1L9YprUMfA9kCZ93hgUQmPiR%2BjUq3xsK9bKT%2FTQtW1OrTjvqGeVPA%2FgYg6nhztzydHk%2F6byqvN5q75FV1EJxtdbbanF3%2B9f1B5iL9Fy916%2FXpdVUUU7RuspRqBqKPy%2F6KTd%2BJ0%2BBhzyK8KNS2qp5NfL6k%2B%2BfQW%2BIBzavrsfy%2B0%2Fxx9equf1VpdTjddr6ZlBz80C0ue6tfo8jJ6OBA3RtenvaIL709%2FnXZN3EcHEw6%2FtKp3uozKXVGcD%2Bb8zsvG%2FenoTv%2Fr%2FH8tEvofjCoAAA%3D%3D&config=H4sIAAAAAAAAA41VwZLaMAy98xVMzj1QTp1%2BwN76DR4Ty8HUsTKWzMLs8O9VTMKyi5LphSF6fpIlPckfm%2B22OVHb%2FN5%2ByF%2F5GGwmyI9vsdA1sb2IpYG2t9TmMHDzY0ZPNELeRoJqut2Rhm3ugCuL9rv9bmI0EZFgZky2PqTgr88xW%2ByHDERPNrGKy9JDYvrKn7CM7yPAuTzbD4gRbFpBjCUTEkMHWXPcYox2IDBnmxUv401tDoRaiBEsDM4MGQcVTy5wwCQxX1EH1pkWHShQyNByOINGk1hCSyTpKflU2MGhdF3t8zc2nG0slpWYcKktkdsqXo8YiI0vSSvhHVyowR2civudGbzJwCWnV94JQ1royV8AqUC0RMn2oPmtJ7zoaYntV5kheZEsXxVc9K1lmaCTopoQvFLZsTKQOWjdzOBKC2NlW%2B06E7xQPgoODHgvWlFc03vg9qgF5esA6BVA%2Bmu9pqo7YB5TuICPA7ECv0mWrAtsOtFbPi6jdO0PGFcC9MBHdCsHpBWMy3CWLXEZlvGSHIg0wKlHClXgdQnIADCaWPflizZkPMSj6SIe1DUxiM5rE%2FeT7fZYzr1NXV0CT0uUcYhwhrik7f%2BYm1VULnwepT6P%2B8tIwy9NqVamMfzcfXlLJJXN%2FFuTanp05SmhKtTxjRFd9ZhO1HyenN%2BUuVpNoD8ze7Rtbv8AccrBqP0GAAA%3D

Expected behavior

Expected output should be small, like what terser outputs. Namely, it should not include the large FluentV9ColorTokens object and just inline the used property value.

The output from terser is something like this:

const e="--colorNeutralForegroundDisabled";window.AppIcon=o=>{const{dummyBool:r}=o;return r&&console.log(`var(${e}, ${theme?.palette.neutralTertiary??ThemeColorPalette.Neutral.neutralTertiary})`),null};

Actual behavior

The entire FluentV9ColorTokens object appears in the output

"use strict";const FluentV9ColorTokens={colorNeutralForeground1:"--colorNeutralForeground1",colorNeutralForeground1Hover:"--colorNeutralForeground1Hover",colorNeutralForeground1Pressed:"--colorNeutralForeground1Pressed",colorNeutralForeground1Selected:"--colorNeutralForeground1Selected",colorNeutralForeground2:"--colorNeutralForeground2",colorNeutralForeground2Hover:"--colorNeutralForeground2Hover",colorNeutralForeground2Pressed:"--colorNeutralForeground2Pressed",colorNeutralForeground2Selected:"--colorNeutralForeground2Selected",colorNeutralForeground2BrandHover:"--colorNeutralForeground2BrandHover",colorNeutralForeground2BrandPressed:"--colorNeutralForeground2BrandPressed",colorNeutralForeground2BrandSelected:"--colorNeutralForeground2BrandSelected",colorNeutralForeground3:"--colorNeutralForeground3",colorNeutralForeground3Hover:"--colorNeutralForeground3Hover",colorNeutralForeground3Pressed:"--colorNeutralForeground3Pressed",colorNeutralForeground3Selected:"--colorNeutralForeground3Selected",colorNeutralForeground3BrandHover:"--colorNeutralForeground3BrandHover",colorNeutralForeground3BrandPressed:"--colorNeutralForeground3BrandPressed",colorNeutralForeground3BrandSelected:"--colorNeutralForeground3BrandSelected",colorNeutralForeground4:"--colorNeutralForeground4",colorNeutralForegroundDisabled:"--colorNeutralForegroundDisabled",colorBrandForegroundLink:"--colorBrandForegroundLink",colorBrandForegroundLinkHover:"--colorBrandForegroundLinkHover",colorBrandForegroundLinkPressed:"--colorBrandForegroundLinkPressed",colorBrandForegroundLinkSelected:"--colorBrandForegroundLinkSelected",colorNeutralForeground2Link:"--colorNeutralForeground2Link",colorNeutralForeground2LinkHover:"--colorNeutralForeground2LinkHover",colorNeutralForeground2LinkPressed:"--colorNeutralForeground2LinkPressed",colorNeutralForeground2LinkSelected:"--colorNeutralForeground2LinkSelected",colorCompoundBrandForeground1:"--colorCompoundBrandForeground1",colorCompoundBrandForeground1Hover:"--colorCompoundBrandForeground1Hover",colorCompoundBrandForeground1Pressed:"--colorCompoundBrandForeground1Pressed",colorNeutralForegroundOnBrand:"--colorNeutralForegroundOnBrand",colorNeutralForegroundInverted:"--colorNeutralForegroundInverted",colorNeutralForegroundInvertedHover:"--colorNeutralForegroundInvertedHover",colorNeutralForegroundInvertedPressed:"--colorNeutralForegroundInvertedPressed",colorNeutralForegroundInvertedSelected:"--colorNeutralForegroundInvertedSelected",colorNeutralForegroundInverted2:"--colorNeutralForegroundInverted2",colorNeutralForegroundStaticInverted:"--colorNeutralForegroundStaticInverted",colorNeutralForegroundInvertedLink:"--colorNeutralForegroundInvertedLink",colorNeutralForegroundInvertedLinkHover:"--colorNeutralForegroundInvertedLinkHover",colorNeutralForegroundInvertedLinkPressed:"--colorNeutralForegroundInvertedLinkPressed",colorNeutralForegroundInvertedLinkSelected:"--colorNeutralForegroundInvertedLinkSelected",colorNeutralForegroundInvertedDisabled:"--colorNeutralForegroundInvertedDisabled",colorBrandForeground1:"--colorBrandForeground1",colorBrandForeground2:"--colorBrandForeground2",colorNeutralForeground1Static:"--colorNeutralForeground1Static",colorBrandForegroundInverted:"--colorBrandForegroundInverted",colorBrandForegroundInvertedHover:"--colorBrandForegroundInvertedHover",colorBrandForegroundInvertedPressed:"--colorBrandForegroundInvertedPressed",colorBrandForegroundOnLight:"--colorBrandForegroundOnLight",colorBrandForegroundOnLightHover:"--colorBrandForegroundOnLightHover",colorBrandForegroundOnLightPressed:"--colorBrandForegroundOnLightPressed",colorBrandForegroundOnLightSelected:"--colorBrandForegroundOnLightSelected",colorNeutralBackground1:"--colorNeutralBackground1",colorNeutralBackground1Hover:"--colorNeutralBackground1Hover",colorNeutralBackground1Pressed:"--colorNeutralBackground1Pressed",colorNeutralBackground1Selected:"--colorNeutralBackground1Selected",colorNeutralBackground2:"--colorNeutralBackground2",colorNeutralBackground2Hover:"--colorNeutralBackground2Hover",colorNeutralBackground2Pressed:"--colorNeutralBackground2Pressed",colorNeutralBackground2Selected:"--colorNeutralBackground2Selected",colorNeutralBackground3:"--colorNeutralBackground3",colorNeutralBackground3Hover:"--colorNeutralBackground3Hover",colorNeutralBackground3Pressed:"--colorNeutralBackground3Pressed",colorNeutralBackground3Selected:"--colorNeutralBackground3Selected",colorNeutralBackground4:"--colorNeutralBackground4",colorNeutralBackground4Hover:"--colorNeutralBackground4Hover",colorNeutralBackground4Pressed:"--colorNeutralBackground4Pressed",colorNeutralBackground4Selected:"--colorNeutralBackground4Selected",colorNeutralBackground5:"--colorNeutralBackground5",colorNeutralBackground5Hover:"--colorNeutralBackground5Hover",colorNeutralBackground5Pressed:"--colorNeutralBackground5Pressed",colorNeutralBackground5Selected:"--colorNeutralBackground5Selected",colorNeutralBackground6:"--colorNeutralBackground6",colorNeutralBackgroundInverted:"--colorNeutralBackgroundInverted",colorNeutralBackgroundStatic:"--colorNeutralBackgroundStatic",colorSubtleBackground:"--colorSubtleBackground",colorSubtleBackgroundHover:"--colorSubtleBackgroundHover",colorSubtleBackgroundPressed:"--colorSubtleBackgroundPressed",colorSubtleBackgroundSelected:"--colorSubtleBackgroundSelected",colorSubtleBackgroundLightAlphaHover:"--colorSubtleBackgroundLightAlphaHover",colorSubtleBackgroundLightAlphaPressed:"--colorSubtleBackgroundLightAlphaPressed",colorSubtleBackgroundLightAlphaSelected:"--colorSubtleBackgroundLightAlphaSelected",colorSubtleBackgroundInverted:"--colorSubtleBackgroundInverted",colorSubtleBackgroundInvertedHover:"--colorSubtleBackgroundInvertedHover",colorSubtleBackgroundInvertedPressed:"--colorSubtleBackgroundInvertedPressed",colorSubtleBackgroundInvertedSelected:"--colorSubtleBackgroundInvertedSelected",colorTransparentBackground:"--colorTransparentBackground",colorTransparentBackgroundHover:"--colorTransparentBackgroundHover",colorTransparentBackgroundPressed:"--colorTransparentBackgroundPressed",colorTransparentBackgroundSelected:"--colorTransparentBackgroundSelected",colorNeutralBackgroundDisabled:"--colorNeutralBackgroundDisabled",colorNeutralBackgroundInvertedDisabled:"--colorNeutralBackgroundInvertedDisabled",colorNeutralStencil1:"--colorNeutralStencil1",colorNeutralStencil2:"--colorNeutralStencil2",colorNeutralStencil1Alpha:"--colorNeutralStencil1Alpha",colorNeutralStencil2Alpha:"--colorNeutralStencil2Alpha",colorBackgroundOverlay:"--colorBackgroundOverlay",colorScrollbarOverlay:"--colorScrollbarOverlay",colorBrandBackground:"--colorBrandBackground",colorBrandBackgroundHover:"--colorBrandBackgroundHover",colorBrandBackgroundPressed:"--colorBrandBackgroundPressed",colorBrandBackgroundSelected:"--colorBrandBackgroundSelected",colorCompoundBrandBackground:"--colorCompoundBrandBackground",colorCompoundBrandBackgroundHover:"--colorCompoundBrandBackgroundHover",colorCompoundBrandBackgroundPressed:"--colorCompoundBrandBackgroundPressed",colorBrandBackgroundStatic:"--colorBrandBackgroundStatic",colorBrandBackground2:"--colorBrandBackground2",colorBrandBackgroundInverted:"--colorBrandBackgroundInverted",colorBrandBackgroundInvertedHover:"--colorBrandBackgroundInvertedHover",colorBrandBackgroundInvertedPressed:"--colorBrandBackgroundInvertedPressed",colorBrandBackgroundInvertedSelected:"--colorBrandBackgroundInvertedSelected",colorNeutralStrokeAccessible:"--colorNeutralStrokeAccessible",colorNeutralStrokeAccessibleHover:"--colorNeutralStrokeAccessibleHover",colorNeutralStrokeAccessiblePressed:"--colorNeutralStrokeAccessiblePressed",colorNeutralStrokeAccessibleSelected:"--colorNeutralStrokeAccessibleSelected",colorNeutralStroke1:"--colorNeutralStroke1",colorNeutralStroke1Hover:"--colorNeutralStroke1Hover",colorNeutralStroke1Pressed:"--colorNeutralStroke1Pressed",colorNeutralStroke1Selected:"--colorNeutralStroke1Selected",colorNeutralStroke2:"--colorNeutralStroke2",colorNeutralStroke3:"--colorNeutralStroke3",colorNeutralStrokeOnBrand:"--colorNeutralStrokeOnBrand",colorNeutralStrokeOnBrand2:"--colorNeutralStrokeOnBrand2",colorNeutralStrokeOnBrand2Hover:"--colorNeutralStrokeOnBrand2Hover",colorNeutralStrokeOnBrand2Pressed:"--colorNeutralStrokeOnBrand2Pressed",colorNeutralStrokeOnBrand2Selected:"--colorNeutralStrokeOnBrand2Selected",colorBrandStroke1:"--colorBrandStroke1",colorBrandStroke2:"--colorBrandStroke2",colorCompoundBrandStroke:"--colorCompoundBrandStroke",colorCompoundBrandStrokeHover:"--colorCompoundBrandStrokeHover",colorCompoundBrandStrokePressed:"--colorCompoundBrandStrokePressed",colorNeutralStrokeDisabled:"--colorNeutralStrokeDisabled",colorNeutralStrokeInvertedDisabled:"--colorNeutralStrokeInvertedDisabled",colorTransparentStroke:"--colorTransparentStroke",colorTransparentStrokeInteractive:"--colorTransparentStrokeInteractive",colorTransparentStrokeDisabled:"--colorTransparentStrokeDisabled",colorStrokeFocus1:"--colorStrokeFocus1",colorStrokeFocus2:"--colorStrokeFocus2",colorNeutralShadowAmbient:"--colorNeutralShadowAmbient",colorNeutralShadowKey:"--colorNeutralShadowKey",colorNeutralShadowAmbientLighter:"--colorNeutralShadowAmbientLighter",colorNeutralShadowKeyLighter:"--colorNeutralShadowKeyLighter",colorNeutralShadowAmbientDarker:"--colorNeutralShadowAmbientDarker",colorNeutralShadowKeyDarker:"--colorNeutralShadowKeyDarker",colorBrandShadowAmbient:"--colorBrandShadowAmbient",colorBrandShadowKey:"--colorBrandShadowKey",colorPaletteDarkOrangeForeground1:"--colorPaletteDarkOrangeForeground1"};window.AppIcon=r=>{let{dummyBool:o}=r;return o&&console.log(`var(${FluentV9ColorTokens.colorNeutralForegroundDisabled}, ${theme?.palette.neutralTertiary??ThemeColorPalette.Neutral.neutralTertiary})`),null};

Version

1.3.60

Additional context

One interesting thing to note is that the if statement below is critical to repro this behavior:

const AppIcon = (props)=>{
    const { dummyBool  } = props;

    if (dummyBool) {
        console.log(`var(${FluentV9ColorTokens.colorNeutralForegroundDisabled}, ${theme?.palette.neutralTertiary ?? ThemeColorPalette.Neutral.neutralTertiary})`)
    } 

    return null;
};

If I removed the if statement, the output is similar to terser


const AppIcon = (props)=>{
    const { dummyBool  } = props;

        console.log(`var(${FluentV9ColorTokens.colorNeutralForegroundDisabled}, ${theme?.palette.neutralTertiary ?? ThemeColorPalette.Neutral.neutralTertiary})`)

    return null;
};
swc-bot commented 1 year ago

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.