milandekruijf / pandacss-preset-typography Goto Github PK

I've installed it into my Qwik project with @pandacss/dev and it just doesn't seem to generate the code for the matching selector.

The recipe is generated, but the styling is not applied. In my tries it worked neither with or without a size.

import { component$, Slot } from '@builder.io/qwik';
import { Box, Container, prose } from '@fancypage/styles';

export const MdxPage = component$(() => (
  <Container maxW="page" px="16">
    <Box class={prose({ size: 'lg' })}>
      <Slot />
    </Box>
  </Container>
));

Hey, I'm currently using this preset with some customizations on my end, it looks like this:

className={cx(prose(), article(), css(xxx))}

prose is generated from pandacss-preset-typography
article is one of my config recipe

the issue is that some of my article styles are being overriden, due to the CSS specificity being the same between prose and article
so if you exposed the createRecipe I could create it and customize it directly on my end, that way there wouldnt be any clash because the prose styles that I'm trying to override would simply not be there anymore
(probably using the recipe extension, or at least a deep merge)

I tested your preset using Stackblitz or Codesandbox (can not recall) and it worked just fine. However trying to integrate in a Nextjs (or Astro) example app failed in the same way.

Classname is undefined and styles are only applied partial

Reproduction Repo
https://github.com/cschroeter/panda-typo-bug-nextjs

I can also provide the Astro setup if you are interesed for troubleshooting.

Hey mate.

Great stuff you have there. Do you plan to add not-prose support?

For reference: tailwindlabs/tailwindcss-typography#32

We get this when no options are passed