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

Allow all classes for @apply #6580

Merged
merged 8 commits into from
Jan 4, 2022

Conversation

garymathews
Copy link
Contributor

Relates to #6321

  • Basically, apply only works for Tailwind generated classes under JIT; which is default when moving to Tailwind 3.
    • This issue is also present in Tailwind 2 when using JIT.

@RobinMalfait
Copy link
Member

Hey! Thank you for your bug report!
Much appreciated! 🙏

If I run your tests against the current master branch, then it already passes. I'll look into the actual issue and mark you as a contributor if I have a fix.

@garymathews
Copy link
Contributor Author

garymathews commented Dec 18, 2021

@RobinMalfait, thanks for fixing this 👍 #6589

However, I noticed it's required to reference @tailwind; to the particular css file with the @apply for this to work (don't even need to define a property); where before this was not necessary. (I should only need to define directives in my main css file)

it('should pickup all classes', () => {
  let config = {
    content: [{ raw: html`<div class="foo"></div>` }],
    plugins: [],
  }

  let input = css`
    @tailwind; /* remove me I break */

    .bop {
      color: red;
    }
    .bar {
      background-color: blue;
    }
    .foo {
      @apply absolute bar bop;
    }
  `

  return run(input, config).then((result) => {
    return expect(result.css).toMatchFormattedCss(css`
      @tailwind;
      .bop {
        color: red;
      }
      .bar {
        background-color: blue;
      }
      .foo {
        position: absolute;
        color: red;
        background-color: blue;
      }
    `)
  })
})
The `bar` class does not exist. If `bar` is a custom class, make sure it is defined within a `@layer` directive.

@garymathews
Copy link
Contributor Author

garymathews commented Dec 18, 2021

I found its due to an optimization where css files without a directive are ignored:
setupTrackingContext.js#L127
setupWatchingContext.js#L244

Removing the condition to allows the test to pass.

@garymathews
Copy link
Contributor Author

@RobinMalfait I've updated my PR with a solution that maintains the optimization for css without @tailwind or @apply

thecrypticace and others added 7 commits January 3, 2022 18:46
# Conflicts:
#	src/lib/setupWatchingContext.js
We use it more consistently
To match the style of the surrounding code
They do not need to be returned here. If it's needed in the future its easy enough to add it back.
And re-format comments
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

Successfully merging this pull request may close these issues.

3 participants