3.0.7: config fontSize values starting with a dash do not work

[driskull]

What version of Tailwind CSS are you using?

3.0.7

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

postcss 8.4.5

What version of Node.js are you using?

v16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOs

Reproduction URL

https://play.tailwindcss.com/njvEQhMmdu?file=css

Describe your issue

After upgrade from 3.0.6 to 3.0.7, seeing the following error:

Cannot read properties of undefined (reading 'parent')

If I log the following out...

if (!extractClasses(rule).some((thing)=>thing === applyCandidate
                            )) {
                                console.log({
                                    classes: extractClasses(rule),
                                    applyCandidate
                                })
                                rule.remove();
                                return;
                            }

I get...

{ classes: [ '-text-1h' ], applyCandidate: 'text--1h' }

Playground: https://play.tailwindcss.com/njvEQhMmdu?file=css

It seems like the fontSize with a negative value is no longer working?

[driskull]

We're upgrading from 1x to 3x so it might be something to do with that.

It seems like fontSize values such as "-1h" work in 1x but not in 2x.

In 3x it seems like it should work according to the playground but it doesn't.

[driskull]

Is the following supported?

fontSize: {
 "-1": "1rem"
}

If so, then it's likely a bug. If not, I will change all my values to the following...

fontSize: {
 "n1": "1rem"
}

[jcfranco]

After upgrade from 3.0.6 to 3.0.7, seeing the following error:

FWIW, --prefixed keys don't seem to work since 3.0.0.

Assuming the above is supported, the following could be used as a test based on the repro case:

it('allows prefixing theme keys with -', () => {
  let config = {
    content: [
      {
        raw: html`<div class="zero">
          <div class="neg">The font size should be 40px but its not</div>

          The font size should be 10px and it is
        </div>`,
      },
    ],
    corePlugins: { preflight: false },
    plugins: [],
    theme: {
      fontSize: {
        '-1h': '40px',
        '0h': '10px',
      },
    },
  }

  let input = css`
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer components {
      .neg {
        @apply text--1h;
      }

      .zero {
        @apply text-0h;
      }
    }
  `

  return run(input, config).then((result) => {
    expect(result.css).toMatchFormattedCss(css`
      .neg {
        font-size: 40px;
      }

      .zero {
        font-size: 10px;
      }
    `)
  })
})

[reinink]

Hey! When you add a dash to the beginning of a config value in your tailwind.config.js file, Tailwind automatically puts the dash at the beginning of the class name. This was introduced in Tailwind v1 as a way to configure negative values for things like margin, top/right/bottom/left, etc. For example:

// tailwind.config.js
modules.exports = {
  theme: {
    margin: {
        '-2': '-0.5rem',
        // This becomes `-mt-2`
    }
  }
}

It sounds like maybe some utilities in previous versions of Tailwind were allowing you to use leading dashes in config values and generating classes that had double dashes in the middle, like text--1h. This was not by design, and unfortunately if that behaves differently in Tailwind v3.0 that's just a breaking change that you're going to have to update your code to accommodate.

As of Tailwind v3.0 this behavior should be totally consistent across all utilities, and there's no way to configure your theme to generate classes that include the double dash.

Sorry that you've run into this, if you really need the class to be named text--1h, right now the only solution is to add it to your CSS file:

@layer utilities {
  .text--1h {
    font-size: 40px;
  }
}

Hope that helps! 👍