Exported components from a rollup package used in Astro return error of incorrect css usage

[xypnox]

Using a solid-styled component inside astro locally works fine ex:

https://github.com/xypnox/xip/blob/5a7d8731d9b9bde7d4d688870551d8ec23628226/packages/xip-warehouse/src/components/pureStyled.tsx#L1-L12

However, using from a package: https://github.com/xypnox/xip/blob/5a7d8731d9b9bde7d4d688870551d8ec23628226/packages/xip-warehouse/src/components/ui.tsx#L15-L22

Results in the error: Unexpected use of css. Make sure that solid-styled's plugin is setup correctly.

Error: Unexpected use of `css`. Make sure that solid-styled's plugin is setup correctly.
    at invariant (file:///home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected][email protected]/node_modules/solid-styled/dist/esm/development/index.mjs:165:10)
    at Module.css (file:///home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected][email protected]/node_modules/solid-styled/dist/esm/development/index.mjs:170:9)
    at Column (/home/xypnox/Projects/x/xip/packages/xip-ui/dist/source/components/elements/base.jsx:19:5)
    at Module.createComponent (file:///home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:353:15)
    at Column (/home/xypnox/Projects/x/xip/packages/xip-warehouse/src/components/ui.tsx:21:3)
    at Module.createComponent (file:///home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:353:15)
    at UIElements (/home/xypnox/Projects/x/xip/packages/xip-warehouse/src/components/ui.tsx:66:27)
    at Module.createComponent (file:///home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:353:15)
    at renderFn (/home/xypnox/Projects/x/xip/node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/@astrojs/solid-js/dist/server.js:42:14)
    at file:///home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:128:34
    at createRoot (file:///home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:58:14)
    at Module.renderToString (file:///home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:126:14)
    at Object.renderToStaticMarkup (/home/xypnox/Projects/x/xip/node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/@astrojs/solid-js/dist/server.js:70:8)
    at Object.check (/home/xypnox/Projects/x/xip/node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/@astrojs/solid-js/dist/server.js:15:47)
    at renderFrameworkComponent (/home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/astro/dist/runtime/server/render/component.js:98:33)
    at async Module.renderComponent (/home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/astro/dist/runtime/server/render/component.js:361:10)

Reference

• Astro config: https://github.com/xypnox/xip/blob/styled-porting/packages/xip-warehouse/astro.config.mjs
• Package Rollup config: https://github.com/xypnox/xip/blob/styled-porting/packages/xip-ui/rollup.config.js

[lxsmnsyc]

This is a packaging issue, as your Astro config is explicitly defined not to include node_modules, which brings us to your Rollup config where you only defined [solidStyled] which shouldn't work as it is supposed to be solidStyled(options).

[xypnox]

Changing the plugin field for rollup:

import withSolid from "rollup-preset-solid";
import solidStyled from 'rollup-plugin-solid-styled';

export default withSolid({
  targets: ["esm", "cjs"],
  input: 'src/index.tsx',
  plugins: [solidStyled()]
  // or plugins: [solidStyled({})]
});

Throws the error: solidStyled__default.default is not a function

1 % pnpm build

> [email protected] build /home/xypnox/Projects/x/xip/packages/xip-ui
> rollup -c

[!] TypeError: solidStyled__default.default is not a function
TypeError: solidStyled__default.default is not a function
    at Object.<anonymous> (/home/xypnox/Projects/x/xip/packages/xip-ui/rollup.config.js:16:44)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Object.require.extensions.<computed> [as .js] (/home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/loadConfigFile.js:621:20)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Function.Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at loadConfigFromBundledFile (/home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/loadConfigFile.js:631:42)
    at getDefaultFromTranspiledConfigFile (/home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/loadConfigFile.js:613:12)
    at loadConfigFile (/home/xypnox/Projects/x/xip/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/loadConfigFile.js:572:11)

 ELIFECYCLE  Command failed with exit code 1.

I am also using the solid rollup preset.

[lxsmnsyc]

classic. Can you try unplugin-solid-styled instead?