Extracting components using Stylus

[olimorris]

Firstly, congratulations to @adamwathan, @reinink, @davidhemphill and Steve Schoger for an absolutely incredible release. Incredible in that it's immeasurably usable in it's current Alpha state and also that it's just beautiful and rapid-fire to use. Serious kudos to you all.

My go to preprocessor for CSS is Stylus. Hooking up Tailwind with Stylus was absolutely no issue whatsoever until I came to trying out extracted components.

Messing around with vertical aligning flex items, this did not seem to work:

.y-center {
  @apply .flex .flex-col .justify-center;
}

but was resolved by using Stylus' @css literal:

@css {
    .y-center {
        @apply .flex .flex-col .justify-center;
    }
}

I haven't tried this out with any other preprocessor but more of a head's up for anyone who is using Stylus.

With limited knowledge I think it's to do with how Stylus processes @rules, i.e. It just outputs them verbatim. I note in my output app.css file, the @apply rule appears literally, whereas when I use the @css literal, it appears as expected.

[mehrancodes]

@olimorris Thanks for sharing this. But how about the situation when we want to use a state variant like hover with the @apply directive?

So if I have this style:

@css {
  .btn {
    @apply .hover\:shaddow
  }
  // OR like this
  .btn {
    @apply hover:shaddow
  }
}

It gives me this error

`@apply` cannot be used with `.hover\\\:shaddow` because `.hover\\\:shaddow` either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc.

[adamwathan]

Apply the regular utility in the pseudo selector, we talk about this in the docs:

https://tailwindcss.com/docs/functions-and-directives#apply On Sat, Jun 9, 2018 at 1:11 PM Mehran Rasulian notifications@github.com wrote:

@olimorris https://github.com/olimorris Thanks for sharing this. But how about the situation when we want to use a state variant like hover with the @apply directive?

So if I have this style:

@css { .btn { @apply .hover\:shaddow } // OR like this .btn { @apply hover:shaddow } }

It gives me this error

@apply cannot be used with .hover\\\:shaddow because .hover\\\:shaddow either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tailwindcss/discuss/issues/11#issuecomment-395984699, or mute the thread https://github.com/notifications/unsubscribe-auth/AEH3bGWhrj01ssmIbrGPu0VquAfFu1Sfks5t7AHRgaJpZM4QPUMn .

[MartinMuzatko]

Same issue here. I also have trouble using @apply. using @css is not really a great alternative :/

What is the proposed solution? First run postcss and then stylus? Does stylus have a built-in function to include styles of other classes?

[adamwathan]

using @css is not really a great alternative :/

Why not?

What is the proposed solution? First run postcss and then stylus?

No, always run style first.

Does stylus have a built-in function to include styles of other classes?

No, only Less supports this out of the box.

[MartinMuzatko]

With @css I need to resign from using the shortcuts the preprocessor offers to me. Why use a pre-processor then at all, if all my .styl files consist of @css {} blocks.

So no.. @css is at its best a dirty workaround, where I practically disable the pre-processor. If I want to mix @apply together with nested rules (based on stylus syntax, not post-css @nest), or use mixins, variables etc. I need to at least double the css class definitions. So now I have my components css scattered, instead of one place.

[adamwathan]

Unfortunately that's a Stylus problem, nothing we can do about that. Personally I just use postcss-preset-env to get features like nesting, and don't use any preprocessors at all.

[MartinMuzatko]

Of course it is not a problem of tailwind, I just hoped there were recommendations, other than that what was already said in the mentioned issue. Thanks @adamwathan

[acidjazz]

I'm messing with different solutions to help remedy this situation, so far i've come up with a plugin that's easier on the eyes here

.kevin
  apply(bg-orange text-blue)
  border 20px solid blue

[acidjazz]

Hey everyone just a heads up i got a fork of stylus that properly renders @apply rules properly, give it a try please! @mehrunrasoli @olimorris

https://github.com/acidjazz/stylus

[hybridvision]

Hey @acidjazz, thanks so much for your Stylus fork! I've been using it in a project for a few months now and it has been solid. It's so nice to have Tailwind + Stylus together! 👍

[acidjazz]

i'm glad its working for ya @hybridvision ! lets get this PR merged!

[tobias-kuendig]

So, I've been using tailwind today in a Vue project together with Stylus and added the following rule:

.modal
    @apply inset-0 fixed bg-white

Without noticing it at first, it looks like the apply rule is working as expected thanks to @acidjazz's PR!

Maybe it's time to update the documentation?

[hybridvision]

Yes, good point - since @acidjazz's PR was merged into the Stylus core, this now works out of the box so this note in the documentation could be removed 🎉 The only requirement is using a Stylus version that is v0.54.6 or later...

The @screen directive still doesn't work in Stylus but there are workarounds and it's less common to need this.