Skip to content

Commit

Permalink
Fix @shopify/polaris-tokens treeshaking (#11853)
Browse files Browse the repository at this point in the history
### WHAT is this pull request doing?

This PR adds `"sideEffect": "false"` to the `@shopify/polaris-tokens`
`package.json` to enable treeshaking.

### How to 🎩

- Create a new project

```sh
mkdir my-project && cd my-project
```

- Initialize a `package.json` and install the test dependencies

```
npm init -y && npm install vite @shopify/[email protected]
```

- Create a basic `vite.config.js` file using library mode

```js
import * as vite from 'vite'

export default vite.defineConfig({
  build: {
    minify: false,
    lib: {
      entry: 'index.js',
      name: 'MyLib',
      fileName: 'my-lib',
    },
  },
})
```

- Create an `index.js` file with a single named import from
`@shopify/polaris-tokens`

```js
import { themes } from '@shopify/polaris-tokens'

console.log('themes:', themes)
```

- Run a production build

```sh
npx vite build
```

**Before**

![image](https://github.com/Shopify/polaris/assets/32409546/04cbd4d6-3735-4795-a035-7bbc20611f34)

**After**

![image](https://github.com/Shopify/polaris/assets/32409546/006fe31a-73cf-4ad3-9f83-76dfbbf06c1b)
  • Loading branch information
aaronccasanova committed Apr 24, 2024
1 parent d3099a5 commit 8ce6211
Show file tree
Hide file tree
Showing 4 changed files with 7 additions and 7 deletions.
5 changes: 5 additions & 0 deletions .changeset/soft-spoons-sip.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris-tokens': patch
---

Added `"sideEffect": "false"` to the `package.json` to enable treeshaking
1 change: 1 addition & 0 deletions polaris-tokens/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"main": "dist/cjs/build/index.js",
"module": "dist/esm/build/index.mjs",
"types": "dist/types/build/index.d.ts",
"sideEffects": false,
"engines": {
"node": ">=20.10.0"
},
Expand Down
2 changes: 1 addition & 1 deletion polaris-tokens/scripts/toStyleSheet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import type {
} from '../src/themes/types';
import {metaThemePartials, metaThemeDefault} from '../src/themes';
import {themeNameDefault} from '../src/themes/constants';
import {createThemeSelector, isTokenName} from '../src/themes/utils';
import {createThemeSelector} from '../src/themes/utils';
import {createVarName} from '../src/utils';
import type {Entries} from '../src/types';

Expand Down
6 changes: 0 additions & 6 deletions polaris-tokens/src/themes/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -126,9 +126,3 @@ export function createIsTokenName(theme: Theme | MetaTheme) {
return (tokenName: unknown): tokenName is TokenName =>
tokenNames.has(tokenName as TokenName);
}

/**
* Important: Do not export from Polaris tokens. This utility is exposed
* in the `toValues` build step to ensure the `metaTheme` isn't in client bundles.
*/
export const isTokenName = createIsTokenName(metaThemeBase);

0 comments on commit 8ce6211

Please sign in to comment.