Wrong import path

[akisvolanis]

Hi there, i have an issue with the injected import paths. I use customCSSPath like id => id.replace(process.cwd()+ '/src', '').replace(/\\/g, '/').replace('.module', '') in order to keep all css files relative to my components js files inside my dist folder. But the same path is used for the injected import, which is invalid. Do i miss something in configuration? Thank you!

[DanielAmenou]

Hi @akisvolanis,

Just to clarify, it's not necessary to include .module in the path when using this plugin - you can safely remove it. However, if there's a specific reason you need to keep it, please share your Rollup configuration so I can better understand the issue and assist you.

[akisvolanis]

Hi @DanielAmenou and thanks for your quick response. Yes i know removing module from file name is not necessary but it helps in my case. So with my current rollup config i have the right file structure i want for my lib:

The same file structure i have for the source code, but everything under src folder, thats why i used customCSSPath in order to concat '/src'.

But, as i mentioned, the injected css import into dist/components/alert/Alert.module.js looks like this:

which as you can see it's invalid, based on the file structure. I want the css import to be like import"./Alert.css"; Here is also my rollup config:

// rollup.config.js

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import {libStylePlugin} from 'rollup-plugin-lib-style';
import input from './input-paths.js';

export default {
  input,
  output: [
    {
      dir: 'dist',
      format: 'esm',
      sourcemap: true,
      exports: 'named',
      preserveModules: true,
      preserveModulesRoot: 'src',
      entryFileNames: '[name].js',
    },
  ],
  plugins: [
    peerDepsExternal(),
    replace({
      preventAssignment: true,
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
    resolve({
      browser: true,
    }),
    typescript({ tsconfig: './tsconfig.json' }),
    commonjs(),
    libStylePlugin({
      customCSSPath: id => id.replace(process.cwd()+ '/src', '').replace(/\\/g, '/').replace('.module', ''),
    }),
    terser(),
  ],
};

Also tried to set customPath into ../.. so the injected import looks like import"../../components/alert/Alert.css", but it works only for the components that are placed directly under components folder, which is not ok for my lib, as i have also other nested components into subfolders.

[DanielAmenou]

I tried to reproduce the problem on my side, but unfortunately, I couldn't replicate it. In my reproduction, I used a single entry point file, so I believe the issue might be related to how you've configured the input. However, since that configuration wasn't shared with me, it's difficult to pinpoint the cause.

Could you please provide more details about your setup, particularly how you’re configuring the input in your Rollup config?

[akisvolanis]

Sure here is my config input:

// input-paths.js
const inputs = [
  'src/components/alert/Alert.tsx',
  'src/components/badge/Badge.tsx',
  ...
];

i use multiple entries in order to import each component separately like: import Alert from '@mylib/components/alert'

[DanielAmenou]

I'd be happy to help you more, but it may take some time to find a solution that is complete for this specific issue.

I believe this can be resolved by using a single entry point in your setup. Instead of using deep imports like: import Alert from '@mylib/components/alert'; I recommend switching to the following import style: import { Alert } from '@mylib';

modern bundlers (like Rollup or Webpack) support tree shaking, which ensures that only the code you actually use will be included in the final bundle.

To enable proper tree shaking for your CSS files, you should also add the following to your package.json: "sideEffects": ["**/*.css"]

This will help the bundler know that your CSS files should not be tree-shaken while allowing the JavaScript to be optimized.

[akisvolanis]

Tried also with a single entry file as input, but again the injected css import is wrong. Could you share your reproduction project where it seems to wrong right to have a look? Thanks again.