Components not styles when built (has dist folder)

[paulm17]

I have a use case where my components are run from dist folders. Built by tsup.

I have created a repo to show the difference: https://github.com/paulm17/nextyak_build

steps to reproduce:

• cd nextyak_build
• pnpm i
• cd packages/button2
• pnpm build
• cd ../../
• pnpm run dev

There should be two buttons:

• one styled as it pulls inline javascript from the component
• the other not styled as it pulls from the build folder

expected outcome: both buttons should be styled.

note: i've just cobbled this together to show the issue using create-t3-turbo.

[jantimon]

hi @paulm17

thanks for your bug report and reproduction!

next-yak prepares the css during build

when you import a pre-built module from a dist folder, Next.js does not recompile these pre-built modules
Instead, it treats them as already-processed code, assuming that all necessary transformations (including CSS-in-JS transformations) have already been applied

there is the transpilePackages in nextjs but I have to verify that this helps in your case:

https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
}

maybe our next-yak compiler is not able to read the correct information from your precompiled code correctly

could you please post the precompiled code to this issue?

[paulm17]

Hi @jantimon

thanks for this wonderful library and taking the time to answer this issue. Really appreciate it!

Here is the next config:

  transpilePackages: [
    "@acme/button",
    "@acme/button2",
  ],

I've removed git ignore from the repo. Heres the link to the dist folder for button2.

Here is index.mjs for button2 however:

// src/button.tsx
import * as React from "react";

// src/button.css.ts
import { styled } from "next-yak";
var StyledDiv = styled.div`
  color: #333;
  padding: 16px;
  background-color: #f0f0f0;
`;

// src/button.tsx
var Button = React.forwardRef(
  ({ className, asChild = false, ...props }, ref) => {
    return /* @__PURE__ */ React.createElement(StyledDiv, null, "Hello, next-yak!");
  }
);
Button.displayName = "Button";
export {
  Button as Button2
};

[jantimon]

right now next-yak does not support *.mjs but only .ts and .tsx

therefore it won't add the styles

however we might allow configuring the exensions.
I prepared a branch which would enable here: https://github.com/jantimon/next-yak/pull/99

could you please try if that would fix this issue?

[paulm17]

Thank you for taking the time to do this.

I can now confirm that it's working!

[jantimon]

Released in 0.2.0