Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

prose-code targets both inline and block code #329

Open
aarondfrancis opened this issue Dec 4, 2023 · 6 comments
Open

prose-code targets both inline and block code #329

aarondfrancis opened this issue Dec 4, 2023 · 6 comments
Assignees

Comments

@aarondfrancis
Copy link

What version of @tailwindcss/typography are you using?

0.5.9

What version of Node.js are you using?

18.18.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

tailwindlabs/tailwindcss#12496

Describe your issue

With Adam's permission, opening an issue here!

The prose-code:{utility} modifiers affect both inline code elements and code elements wrapped in pre as well.

I don't know what the right API design is, but here's the variant I added:

    plugins: [
        require('@tailwindcss/typography'),
        plugin(function ({addVariant}) {
          addVariant('prose-inline-code', '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))');
        })
    ],

I kinda think prose-code should hit inline code blocks only, but that seems like a breaking change? I dunno, up to y'all!

Godspeed

@thecrypticace thecrypticace self-assigned this Dec 4, 2023
mcgois added a commit to mcgois/tailwindcss-typography that referenced this issue Mar 28, 2024
* Add `prose-inline-code` element modifier (add selector, update readme and tests).
@kaiwen-wang
Copy link

bump, ran into this issue and writing for attention, will try the wordaround though

@jillesca
Copy link

Hit the same issue with prose-code. Workaround didn't work, got an strange error [ERROR] [postcss] Cannot access 'default' before initialization.

This is what my plugin looks like, which I copied, pasted the workaround above.

  plugins: [
    require("@tailwindcss/typography"),
    plugin(function ({ addVariant }) {
      addVariant(
        "prose-inline-code",
        '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))',
      );
    }),
  ],

Using:
"@tailwindcss/typography": "^0.5.13",
"tailwindcss": "^3.4.4",

@elalemanyo
Copy link

@jillesca This is a small play example, maybe helps you.

@kaiwen-wang
Copy link

Hit the same issue with prose-code. Workaround didn't work, got an strange error [ERROR] [postcss] Cannot access 'default' before initialization.

This is what my plugin looks like, which I copied, pasted the workaround above.

  plugins: [
    require("@tailwindcss/typography"),
    plugin(function ({ addVariant }) {
      addVariant(
        "prose-inline-code",
        '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))',
      );
    }),
  ],

Using: "@tailwindcss/typography": "^0.5.13", "tailwindcss": "^3.4.4",

Maybe it has to do with wrapping the thing with plugin? This is mine and it works:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      fontFamily: {
        'serif': ['Iowan Old Style', "serif"],
        'headings': ["Charter", 'Bitstream Charter', 'Sitka Text', "Cambria", "ui-serif", "serif"]
      },
    }
  },
  plugins: [
    require("tailwindcss-animate"),
    require('@tailwindcss/typography'),
    require('tailwindcss-opentype'),
    require("tailwind-extended-shadows"),
    function ({ addVariant }) {
      addVariant(
        'prose-inline-code',
        '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))'
      );
    },
  ],
}

@jillesca
Copy link

thanks @elalemanyo for the play and @kaiwen-wang for the sample. is working now, the issue was the plugin wrapper around the function.

@nakorndev
Copy link

Hit the same issue with prose-code. Workaround didn't work, got an strange error [ERROR] [postcss] Cannot access 'default' before initialization.
This is what my plugin looks like, which I copied, pasted the workaround above.

  plugins: [
    require("@tailwindcss/typography"),
    plugin(function ({ addVariant }) {
      addVariant(
        "prose-inline-code",
        '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))',
      );
    }),
  ],

Using: "@tailwindcss/typography": "^0.5.13", "tailwindcss": "^3.4.4",

Maybe it has to do with wrapping the thing with plugin? This is mine and it works:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      fontFamily: {
        'serif': ['Iowan Old Style', "serif"],
        'headings': ["Charter", 'Bitstream Charter', 'Sitka Text', "Cambria", "ui-serif", "serif"]
      },
    }
  },
  plugins: [
    require("tailwindcss-animate"),
    require('@tailwindcss/typography'),
    require('tailwindcss-opentype'),
    require("tailwind-extended-shadows"),
    function ({ addVariant }) {
      addVariant(
        'prose-inline-code',
        '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))'
      );
    },
  ],
}

Work for me. This variant should be added to the main repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants