Assets manifest does not include some of the stylesheets when they have the same content

[owen2345]

• I have tried upgrading by running bundle update vite_ruby.
• I have read the troubleshooting section before opening an issue.

Description 📖

Some stylesheet entrypoints are not recognized while building

Reproduction 🐞

Given app/frontend/entrypoints/application.sass.scss and app/frontend/entrypoints/sample.sass.scss and app/frontend/entrypoints/sample2.sass.scss
When generating the assets before running tests (bundle exec rspec) via bin/vite clobber && bin/vite build --mode=test --force
Then the expected entrypoints are not generated (see screenshot) and thus it fails with the following when running tests

Failure/Error: = vite_stylesheet_tag 'sample.sass.scss' # tried with without extensions
Vite Ruby can't find entrypoints/sample.sass.scss in public/vite-test/manifest.json or public/vite-test/manifest-assets.json.

Vite Ruby Info

``` bin/vite present?: true vite_ruby: 3.0.8 vite_rails: 3.0.5 rails: 7.0.1 node: v12.22.5 ```

Run bin/rake vite:info and provide the output:

root@0e060fd43d0d:/app# bin/rake vite:info
bin/vite present?: true
vite_ruby: 3.0.8
vite_rails: 3.0.5
rails: 7.0.1
node: v12.22.5
yarn: 1.22.17
pnpm: 
ruby: ruby 3.1.0p0 (2021-12-25 revision fb4df44d16) [x86_64-linux]

installed packages:
app@ /app
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Logs 📜

If not providing a reproduction:

Output

Run DEBUG=vite-plugin-ruby:* bin/vite dev or DEBUG=vite-plugin-ruby:* bin/vite build and provide the output:

Note: sample.sass.scss was not included in assets-manifest

Build with Vite complete: /app/public/vite
2022-02-01T10:43:58.100Z vite-plugin-ruby:config {
  base: '/vite/',
  build: {
    emptyOutDir: false,
    sourcemap: true,
    chunkSizeWarningLimit: '2048',
    assetsDir: 'assets',
    manifest: true,
    outDir: '../../public/vite',
    rollupOptions: { input: [Object], output: [Object] }
  },
  root: '/app/app/frontend',
  server: {
    host: 'localhost',
    https: false,
    port: 3036,
    strictPort: true,
    fs: { allow: [Array], strict: true }
  },
  entrypoints: {
    'entrypoints/application.js': '/app/app/frontend/entrypoints/application.js',
    'entrypoints/application.sass.scss': '/app/app/frontend/entrypoints/application.sass.scss',
    'entrypoints/login.sass.scss': '/app/app/frontend/entrypoints/login.sass.scss',
    'entrypoints/sample.sass.scss': '/app/app/frontend/entrypoints/sample.sass.scss',
    'entrypoints/sample2.sass.scss': '/app/app/frontend/entrypoints/sample2.sass.scss'
  }
}
2022-02-01T10:44:20.078Z vite-plugin-ruby:assets-manifest {
  manifest: Map {
    'entrypoints/application.sass.scss' => {
      file: 'assets/application.6802fa99.css',
      src: 'entrypoints/application.sass.scss'
    },
    'entrypoints/sample2.sass.scss' => {
      file: 'assets/sample.5423b091.css',
      src: 'entrypoints/sample2.sass.scss'
    }
  }
}

Screenshots 📷

Provide console or browser screenshots of the problem.

[ElMassimo]

Hi Owen! Thanks for providing detailed information 😃

Try renaming the files from .sass.scss to .scss, and it should work as expected.

---

Since Vite currently does not expose assets to plugins, vite-plugin-ruby relies on the asset filenames when matching a compiled file with the original entrypoint filename.

As a result, Vite Ruby can't currently support files with double extensions.

---

Question: what is the reason to use the .sass.scss filename suffix?

[owen2345]

@ElMassimo thanks for answering.
Looks like the problem is on vitejs side, see the following:

• Created a clean application with your suggestions
• I added 3 stylesheet entrypoints
  
• I compiled the assets using the one provided by the gem and another one by vitejs
  
• From the screenshot: I see that the first time application2.css was compiled, and in the second time only application.css was compiled
• When I run this app via bundle exec rspec, I have the above reported error

Note: Based on my quick review of vite-ruby gem, it is calling bin/vite build when needed and enabled on config/vite.json

Btw: This is the content generated in public/vite-test/manifest-assets.json

{
  "entrypoints/application3.sass.scss": {
    "file": "assets/application.6802fa99.css",
    "src": "entrypoints/application3.sass.scss"
  },
  "images/mgn2.jpg": {
    "file": "assets/mgn2.e3b0c442.jpg",
    "src": "images/mgn2.jpg"
  }
}

Thanks again!

[ElMassimo]

@owen2345 The example application seems to be using .sass.scss as the extension for the stylesheets.

Try renaming the files from .sass.scss to .scss, and it should work as expected.

What is the reason to use the .sass.scss filename suffix?

[owen2345]

@ElMassimo the problem is the same:

If you want, I can create a repo with the issue. But basically, it is a clean rails 7 app with the latest version of vite-ruby.

[ElMassimo]

@owen2345 It's likely that these example files have the exact same content, causing Rollup to generate a single file.

Please provide a minimal reproduction where the content of each stylesheet is different.

[owen2345]

@ElMassimo You are right. I had similar content in all 3 sample stylesheet files.
So, perhaps this can be considered as a bug, or maybe having a warning message could be great.
Thank you so much @ElMassimo!!!

[ElMassimo]

It's definitely a limitation, though I don't think there are valid use cases to have the same content in different files 😄

Still, I'd like to improve this in the future, provided that Vite provides access to the processed assets.