Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: deprecates emitPackage #2302

Merged
merged 1 commit into from
Mar 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .changeset/neat-buttons-shout.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
'@pandacss/types': minor
---

Deprecates `emitPackage`, it will be removed in the next major version.

## Why?

It's known for causing several issues:

- bundlers sometimes eagerly cache the `node_modules`, leading to `panda codegen` updates to the `styled-system` not
visible in the browser
- auto-imports are not suggested in your IDE.
- in some IDE the typings are not always reflected properly

## As alternatives, you can use:

- relative paths instead of absolute paths (e.g. `../styled-system/css` instead of `styled-system/css`)
- use [package.json #imports](https://nodejs.org/api/packages.html#subpath-imports) and/or tsconfig path aliases (prefer
package.json#imports when possible, TS 5.4 supports them by default) like `#styled-system/css` instead of
`styled-system/css`
- for a [component library](https://panda-css.com/docs/guides/component-library), use a dedicated workspace package
(e.g. `@acme/styled-system`) and use `importMap: "@acme/styled-system"` so that Panda knows which entrypoint to
extract, e.g. `import { css } from '@acme/styled-system/css'`
11 changes: 11 additions & 0 deletions packages/types/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,17 @@ interface CodegenOptions {
/**
* Whether to emit the artifacts to `node_modules` as a package.
* @default false
* @deprecated `emitPackage` is deprecated, it's known for causing several issues:
* - bundlers sometimes eagerly cache the `node_modules`, leading to `panda codegen` updates to the `styled-system` not visible in the browser
* - auto-imports are not suggested in your IDE.
* - in some IDE the typings are not always reflected properly
*
* As alternatives, you can use:
* - relative paths instead of absolute paths (e.g. `../styled-system/css` instead of `styled-system/css`)
* - use package.json #imports and/or tsconfig path aliases (prefer package.json#imports when possible, TS 5.4 supports them by default) like `#styled-system/css` instead of `styled-system/css`
* @see https://nodejs.org/api/packages.html#subpath-imports
* - for a component library, use a dedicated workspace package (e.g. `@acme/styled-system`) and use `importMap: "@acme/styled-system"` so that Panda knows which entrypoint to extract, e.g. `import { css } from '@acme/styled-system/css'`
* @see https://panda-css.com/docs/guides/component-library
*/
emitPackage?: boolean
/**
Expand Down
14 changes: 0 additions & 14 deletions website/pages/docs/overview/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,6 @@ layout: none

Here's a list of frequently asked questions (FAQ) and how to resolve common issues in Panda.

### Why do I get a "Cannot find X module from 'styled-system'" error?

This error seems to be caused by process timing issues between file writes. This has been fixed recently but if you experience this persistently, consider the following workarounds:

- Check the code to git: Remove the `styled-system` folder from the `.gitignore` file to enable git tracking. Technically, the files emitted will remain the same if the Panda config does not change.

- Use the `emitPackage: true` option and write the files to the `node_modules` directory.

---

### How does Panda manage style conflicts ?
Expand Down Expand Up @@ -206,12 +198,6 @@ In such a case, check the [`outExtension`](/docs/references/config#outextension)

---

### How should I use emitPackage with yarn PnP?

When using `emitPackage: true` with yarn PnP, set the `nodeLinker` to 'node-modules' in your `.yarnrc.yml`. This tells Yarn to use the traditional way of linking dependencies, which can solve compatibility issues.

---

### Why does importing `styled` not exist?

You should use [`config.jsxFramework`](/docs/concepts/style-props#configure-jsx) when you need to import styled components. You can then use the [`jsxFactory`](/references/config#jsxfactory) option to set the name of the factory component.
Expand Down
23 changes: 0 additions & 23 deletions website/pages/docs/references/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -299,29 +299,6 @@ Then the result looks like this:

## File system options

### emitPackage

**Type**: `boolean`

**Default**: `false`

Whether to emit the artifacts to `node_modules` as a package. Will generate a `package.json` file that contains exports
for each of the the generated `outdir` entrypoints:

- `styled-system/css`
- `styled-system/jsx`
- `styled-system/patterns`
- `styled-system/recipes`
- `styled-system/tokens`
- `styled-system/types`
- `styled-system/styles.css`

```json
{
"emitPackage": true
}
```

### gitignore

**Type**: `boolean`
Expand Down
Loading