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

types: postcss plugin doesn't accept PluginCreator (i.e: tailwindcss) #8826

Closed
7 tasks done
zanona opened this issue Jun 28, 2022 · 0 comments · Fixed by #8830
Closed
7 tasks done

types: postcss plugin doesn't accept PluginCreator (i.e: tailwindcss) #8826

zanona opened this issue Jun 28, 2022 · 0 comments · Fixed by #8830
Labels
p2-nice-to-have Not breaking anything but nice to have (priority)

Comments

@zanona
Copy link

zanona commented Jun 28, 2022

Describe the bug

Under vite css config we can add postcss plugins, however vite's type definitions state that plugins is an array of PostCSS.Plugin[]

postcss?:
| string
| (PostCSS.ProcessOptions & {
plugins?: PostCSS.Plugin[]
})

The problem with this is that some plugins can return a PostCSS.PluginCreator instead, such as tailwindcss

import { PluginCreator } from 'postcss'
import type { Config } from './config.d'

declare const plugin: PluginCreator<string | Config | { config: string | Config }>

export { Config }
export default plugin

This disparity, makes it difficult to have valid typings when importing a tailwind config which outputs as PluginCreator on vite

PostCSS has their own type for allowing multiple plugin type formats as PostCSS.AcceptedPlugin

export type AcceptedPlugin =
  | Plugin
  | PluginCreator<any>
  | OldPlugin<any>
  | TransformCallback
  | {
      postcss: TransformCallback | Processor
    }
  | Processor

The suggestion here would be to replace PostCSS.Plugin[] with PostCSS.AcceptedPlugin[] as the return type for the plugins property under vite postcss config:

--- packages/vite/src/node/plugins/css.ts
+++ packages/vite/src/node/plugins/css.ts
export interface CSSOptions {
  /**
   * https://github.com/css-modules/postcss-modules
   */
  modules?: CSSModulesOptions | false
  preprocessorOptions?: Record<string, any>
  postcss?:
    | string
    | (PostCSS.ProcessOptions & {
-        plugins?: PostCSS.Plugin[]
+       plugins?: PostCSS.AcceptedPlugin[]
      })
  /**
   * Enables css sourcemaps during dev
   * @default false
   * @experimental
   */
  devSourcemap?: boolean
}

Reproduction

N/A Type definition only

System Info

System:
    OS: Linux 5.18 Arch Linux
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 8.56 GB / 15.51 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.7.0 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chromium: 102.0.5005.115
    Firefox: 101.0.1
  npmPackages:
    vite: ^2.8.6 => 2.9.13

Used Package Manager

npm

Logs

No response

Validations

@sapphi-red sapphi-red added the p2-nice-to-have Not breaking anything but nice to have (priority) label Jun 28, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Jul 13, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
p2-nice-to-have Not breaking anything but nice to have (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants