Extracting components using Stylus about discuss HOT 13 OPEN

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

from discuss.

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.

from discuss.

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

from discuss.

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! 👍

from discuss.

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.

from discuss.

from discuss.

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

from discuss.

@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.

from discuss.

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?

from discuss.

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.

from discuss.

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.

from discuss.

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

from discuss.

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?

from discuss.