Closed paulm17 closed 2 months ago
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?
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
};
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?
Thank you for taking the time to do this.
I can now confirm that it's working!
Released in 0.2.0
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:
There should be two buttons:
expected outcome: both buttons should be styled.
note: i've just cobbled this together to show the issue using create-t3-turbo.