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

If .pcss is specified, the src in the manifest.json file will be saved as .css #12009

Closed
7 tasks done
lynrin opened this issue Feb 10, 2023 · 0 comments · Fixed by #14945
Closed
7 tasks done

If .pcss is specified, the src in the manifest.json file will be saved as .css #12009

lynrin opened this issue Feb 10, 2023 · 0 comments · Fixed by #14945
Labels
p3-minor-bug An edge case that only affects very specific usage (priority)

Comments

@lynrin
Copy link

lynrin commented Feb 10, 2023

Describe the bug

It can be obtained by accessing "http://127.0.0.1:5173/app-pcss.pcss" when executing with the vite command.
The path cannot be resolved because the contents of manifest.json generated by the ```vite build`` command are as follows.

The path differs depending on how Vite is executed, and it cannot be used correctly.
(If you are using Vita with Laravel, the path will be different between development and release, which will cause problems.)

{
  "app-pcss.css": {
    "file": "assets/app-pcss-27a0920c.css",
    "isEntry": true,
    "src": "app-pcss.css"
  },
  "app-scss.scss": {
    "file": "assets/app-scss-3a038e40.css",
    "isEntry": true,
    "src": "app-scss.scss"
  }
}

Using .pcss works fine if manifest.json looks like this:

  {
-   "app-pcss.css": {
+   "app-pcss.pcss": {
      "file": "assets/app-pcss-27a0920c.css",
      "isEntry": true,
-     "src": "app-pcss.css"
+     "src": "app-pcss.pcss"
    },
    "app-scss.scss": {
      "file": "assets/app-scss-3a038e40.css",
      "isEntry": true,
      "src": "app-scss.scss"
    }
  }

It seems that you can take measures by adding judgment whether lang is pcss or postcss in the processing of line 568 of the css.ts file.

const originalName = isPreProcessor(lang) ? cssAssetName : cssFileName

-           const originalName = isPreProcessor(lang) ? cssAssetName : cssFileName
+           const originalName = (isPreProcessor(lang) || ['pcss', 'postcss'].includes(lang)) ? cssAssetName : cssFileName

Reproduction

https://stackblitz.com/edit/vitejs-vite-vydpzr

Steps to reproduce

Create dist/manifest.json, dist/app-pcss.css and dist/app-scss.css.
Run yarn build

Dev access.
Run yarn dev
Access https://vitejsvitevydpzr-bwxk--5173.local-credentialless.webcontainer.io/app-pcss.pcss in the browser pane after running.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    vite: ^4.1.0 => 4.1.1

Used Package Manager

yarn

Logs

No response

Validations

@bluwy bluwy added the p3-minor-bug An edge case that only affects very specific usage (priority) label Feb 11, 2023
sapphi-red added a commit to sapphi-red/vite that referenced this issue Nov 10, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Nov 26, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
2 participants