rollup-plugin-postcss | Seamless integration between Rollup and PostCSS | Style Language library

my colleague found this guide with the setup which is worked for me.

I leave it here for who can't find the same: https://dev.to/shubhadip/vue-3-component-library-270p

UPDATED: https://devsday.ru/blog/details/73660 - vite can build lib out-of-box. I haven't tried this way but suspect it works well. As always, I should look throw documentation carefully

Turn out that jest only support ES module export for the project you are working on, anything from the node_modules is not transpile or convert into CJS unless explicitly especify in the jest config.

The easy solution is to add a main field in the package.json pointing to a file that export the modules as CJS wich is what jest can work with, and also having the module field with ES export so webpack can still use the treeshaking and compile time imports etc..

The Bootstrap styles aren't working because of the PostCSS "modules" option in rollup config. This option prefixes the class names (you can see it in dist/index.css generated file, by looking for "bootstrap-min") in order to avoid conflicts, but in our case we want Bootstrap styles to be global.

I have fixed this issue. What I did.

The issue didn't come from Rollup, it was the import in the Card component that was wrong. macro was there by mistake:

Looks like DisplayHint is a TS type/interface, not an exported JS value.

Rollup per se is a bundler not a TS language analyzer. It cannot tell if a named export is a concrete JS value or merely a non-existing TS type, thus the reported error.

Rollup plugin order matters. To resolve this specific problem, just lift the typescript plugin up in order, at least before babel. TS plugin, if put to work first, will correctly erase TS type from JS code output.

Update

I know another trick, but it’s a workaround-ish one. The trick is to use import type syntax to explicitly mark DisplayHint as a TS type.

Not a problem with your React environment, its just that your css is invalid.

Theres no need to encapsulate your css property values in ticks (there are some occasions you need ticks, but none of your's need em).

I kind of figured it out. I used rollup-plugin-postcss-modules instead of rollup-plugin-postcss. This is what my rollup.config.js ended up looking like:

I'm a bit surprised you're loading types from the types.d file direct and with a build path! I'd expect rather import { Type } from '@myorg/component-library.

That's because as part of creating the package.json for a typescript-authored npm library you'd be defining a main property pointing to the place that exports all the Javascript properties and a types property pointing to the place that exports the typescript types you want.

If that main entry point (because of your build process) is actually build/index.js and the corresponding types file is build/index.d.ts then you'd never directly reference the build folder or files when importing - pointing to the right path is dealt with by the bundling process.

Take a look at a mainstream (but simple) typescript npm module like https://github.com/jamiebuilds/unstated-next/blob/master/package.json ( https://www.npmjs.com/package/unstated-next )

You can see the main property pointing to the file which should export the javascript names https://github.com/jamiebuilds/unstated-next/blob/master/package.json#L6 and the types property pointing to the file which should export the types https://github.com/jamiebuilds/unstated-next/blob/master/package.json#L9 and these happen to be in the 'dist' folder but this is never referenced when importing it as per the docs at https://www.npmjs.com/package/unstated-next