In `preserveModules` mode, the emitted style file will be overwritten and the position is not correct

[RunningCoderLee]

In preserveModules mode, if there are files with the same name in different folders, the emitted style file will be overwritten。

src/
  |- components/
  |       |- Card/
  |       |   |- styles/
  |       |   |    |- index.scss
  |       |   |- Card.tsx
  |       |   |- index.ts
  |       |- index.ts
  |- styles/
  |    |- public.scss
  |- index.ts

// src/components/Card/Card.tsx
import './styles/index.scss

function Card() {
// ...
}

export default Card

// src/components/Card/index.ts
import Card from './Card'

export default Card

// src/components/index.ts
import '../styles/public.scss'

export { default } from './Card'

// src/index.ts
export * from './components'

// rollup.config.js

export default {
  input: 'src/index.ts',
  preserveModules: true,
  output: [
    {
      dir: 'build/es',
      format: 'es',
      assetFileNames: '[name][extname]',
      chunkFileNames: '[name].js',
      entryFileNames: '[name].js',
      minifyInternalExports: false,
    },
  ],
  plugins: [
    typescript({
      ...
    }),
    styles({
      mode: 'extract',
      url: {
        inline: true,
      },
      sass: {
        impl: 'sass',
        fiber: require('fibers'),
      },
    }),
  ],
}

After bundle:

build/
  |- es/
      |- components/
      |        |-Card/
      |             |- Card.js
      |             |- index.js
      |- index.css
      |- index.js

Expected:

build/
  |- es/
      |- components/
      |        |-Card/
      |             |- Card.css
      |             |- Card.js
      |             |- index.js
      |- index.css
      |- index.js

[Anidetrix]

Hi @RunningCoderLee, thank you for dedicating time to this issue!

Unfortunately, I could not reproduce your problem, could you please provide a reproduction repo using something like rollup's REPL, REPL.it, or just GitHub repo?

P.S. fiber option is overwritten internally, I'll make it clearer in the next update, use fibers option instead.

[Anidetrix]

With my attempt to reproduce the issue i got:

build/es
├── Card.css
├── components
│   ├── Card
│   │   ├── Card.js
│   │   └── index.js
│   └── index.js
├── index.css
└── index.js

UPDATE 1: Still don't know why your Card.css file in not there, but I see what you mean, I suppose Card.css should be the same level as Card.js

[RunningCoderLee]

Thank you for your reply.

Here is a demo repo and you can run npm run build to reproduce this problem

https://github.com/RunningCoderLee/rollup-plugin-styles-demo

[Anidetrix]

Hi again @RunningCoderLee!

I was able to reproduce the issue using the provided repo, and also was able to determine why was the file not present/overwritten (is it mainly due to Map usage here, replaced it with array locally and now everything is fine, will be a part of the next release).

As of Card.css nesting, your PR is still applicable, but I have noted some changes there which should be taken care of before I merge it, or I can just close it and add them myself (with author's notice) if you want.

UPDATE 1: Figured out I can modify your branch directly, so I changed it myself. If any problems arise reopen this issue.

[github-actions[bot]]

:tada: This issue has been resolved in version 3.8.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: