Skip to content

TypeError: Cannot read properties of undefined (reading 'parent') on negative translate #6981

Closed
@cabello

Description

@cabello

Hello 👋

Loving TailwindCSS so far, thank you for sharing it with the world. 💜

What version of Tailwind CSS are you using?

3.0.12

What build tool (or framework if it abstracts the build tool) are you using?

"autoprefixer": "^10.4.0",
"postcss": "^8.4.5",
"react-scripts": "^4.0.3", (webpack v4)

What version of Node.js are you using?

nodejs 16.13.0

What browser are you using?

Not Applicable

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/o4VWC6LUyA

Describe your issue

I am using Tailwind with prefix: 'tw-' as shown in the reproduction URL.

  • If I use hover:tw--translate-y-1 it goes up as expected.
  • If I use no prefix in my config -translate-y-1 goes up as expected.
  • If I use hover:-tw-translate-y-1 it crashes with the following stack trace.
Rebuilding...
TypeError: Cannot read properties of undefined (reading 'parent')
    at Root.normalize (/Users/.../node_modules/tailwindcss/peers/index.js:3863:19)
    at Root.normalize (/Users/.../node_modules/tailwindcss/peers/index.js:4163:27)
    at Root.insertAfter (/Users/.../node_modules/tailwindcss/peers/index.js:3785:26)
    at Rule.after (/Users/.../node_modules/tailwindcss/peers/index.js:908:21)
    at processApply (/Users/.../node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:258:20)
    at /Users/.../node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:275:9
    at /Users/.../node_modules/tailwindcss/lib/processTailwindFeatures.js:45:50
    at Object.Once (/Users/.../node_modules/tailwindcss/lib/cli.js:619:27)
    at LazyResult.runOnRoot (/Users/.../node_modules/tailwindcss/peers/index.js:5108:27)
    at LazyResult.runAsync (/Users/.../node_modules/tailwindcss/peers/index.js:5150:30)

When I hover over on the last broken variant it shows what the CSS rule would look like.

Screen Shot 2022-01-08 at 10 15 06 PM

This could be a bug or I might be using wrong with the prefix, negative transforms should be <prefix><minus> instead of <minus><prefix>.

The autocomplete does show this as a valid possibility:

Screen Shot 2022-01-08 at 10 11 30 PM

Positive values work as expected.

Cheers, 🙇
Danilo

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions