Skip to content

feat: vite config postcss support exclude option#14110

Draft
ZEJIA-LIU wants to merge 3 commits into
vitejs:mainfrom
ZEJIA-LIU:feat/postcss-exclude
Draft

feat: vite config postcss support exclude option#14110
ZEJIA-LIU wants to merge 3 commits into
vitejs:mainfrom
ZEJIA-LIU:feat/postcss-exclude

Conversation

@ZEJIA-LIU

@ZEJIA-LIU ZEJIA-LIU commented Aug 15, 2023 •
edited
Loading

Copy link
Copy Markdown

Description

Additional context

Vite config postcss supports exclude options.
Just like loader in webpack, developers can use the exclude option to filter the file which they don't want to process. Something like that:

{
    test: SOMEREG,
    use: ['someLoader'],
    exclude: The exclude function
}

postcss config in vite can also be written by this pattern:

//vite config 
{
    ...
    css: {
        ...
        postcss: {
          plugins: ['some postcss plugins'],
          exclude: The exclude function
        },
        ...
    },
    ...
}

What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the PR Title Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@bolt-new-by-stackblitz

bolt-new-by-stackblitz Bot commented Aug 15, 2023

Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@ZEJIA-LIU

ZEJIA-LIU commented Aug 18, 2023 •
edited
Loading

Copy link
Copy Markdown
Author

Is there anyone can help me check this pr plz? If there is any problem, please contact me anytime~

@bluwy

bluwy commented Aug 18, 2023

Copy link
Copy Markdown
Member

Can you explain your usecase for this feature? We don't have a lot of filters setup for our features, e.g. .json, .css, .png (only assetsInclude). I'd imagine if we start with postcss, users would also want for the others, especially preprocessors.

Could your CSS be move to public/ instead too so it's not processed?

@ZEJIA-LIU

ZEJIA-LIU commented Aug 21, 2023

Copy link
Copy Markdown
Author

Can you explain your usecase for this feature? We don't have a lot of filters setup for our features, e.g. .json, .css, .png (only assetsInclude). I'd imagine if we start with postcss, users would also want for the others, especially preprocessors.

Could your CSS be move to public/ instead too so it's not processed?

Sometimes when a project introduces a third-party component library, there will be some css that has been processed. In some cases, you don’t want to postcss them.
Adding this configuration item can make our project configuration more flexible.
Although many features do not have the filter function yet, I personally think that these functions can be gradually improved through the power of the community. Maybe we can start with the postcss feature?

@bluwy

bluwy commented Aug 21, 2023

Copy link
Copy Markdown
Member

Thanks for the explanation. I think that make sense especially for postcss as it's transpiling CSS, while preprocessors are compiling to CSS. This reminds of #4653 which a file parameter can be used to conditionally apply certain postcss plugins (but however that's inefficient).

I'll put this on the team board in case we want to properly pick an API to support this case.

@bluwy bluwy added feat: css p2-nice-to-have Not breaking anything but nice to have (priority) YAO Yet another option... labels Aug 21, 2023
@ZEJIA-LIU

ZEJIA-LIU commented Aug 21, 2023

Copy link
Copy Markdown
Author

Thanks for the explanation. I think that make sense especially for postcss as it's transpiling CSS, while preprocessors are compiling to CSS. This reminds of #4653 which a file parameter can be used to conditionally apply certain postcss plugins (but however that's inefficient).

I'll put this on the team board in case we want to properly pick an API to support this case.

Thank you for taking it seriously! In fact, I'm a contributor to the taro community. We recently planned to adapt a new compilation mode for our framework for developers to choose, and we chose vite. This feature is very important to us, if it can be merged, then we will be very grateful~

@ZEJIA-LIU

ZEJIA-LIU commented Aug 22, 2023

Copy link
Copy Markdown
Author

Thanks for the explanation. I think that make sense especially for postcss as it's transpiling CSS, while preprocessors are compiling to CSS. This reminds of #4653 which a file parameter can be used to conditionally apply certain postcss plugins (but however that's inefficient).

I'll put this on the team board in case we want to properly pick an API to support this case.

By the way, not all the postcss plugins have the parameter to filter the files~

@ZEJIA-LIU
ZEJIA-LIU marked this pull request as draft November 2, 2023 06:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

feat: css p2-nice-to-have Not breaking anything but nice to have (priority) YAO Yet another option...

Projects

Team Board
Status: Later

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ZEJIA-LIU @bluwy