Support for cssnext nested at-rule syntax (apply, nested)

[adamwathan]

Hey folks! I noticed currently Stylus doesn't elegantly handle at-rules inside of selectors like @apply or @nested which are new CSS specifications and currently transpilable with cssnext.

For example, Stylus compiles this:

.foo {
  @nest span & {
    color: #f00;
  }
}

...to just this (notice the selector has disappeared):

@nest span & {
  color: #f00;
}

...and this:

.danger {
  color: #f00;
  @apply --danger-theme;
}

...to this (notice @apply has been hoisted outside of the rule):

.danger {
  color: #f00;
}
@apply --danger-theme;

Are there any known workarounds or escaping strategies that can be used to preserve the original formatting for processing by cssnext or other PostCSS plugins that make use of at-rules in this way?

[adamwathan]

Just a quick follow-up, I hadn't seen the @css syntax for CSS literals which does mostly work here. The one caveat I would mention is that this:

.foo {
  @css {
    @nest span & {
      color: #f00;
    }
  }
}

...still compiles to this:

  @nest span & {
    color: #f00;
  }

...removing the actual selector. Definitely work-aroundable though.

[jhessin]

That makes postCSS libraries that rely on @ rules all but unusable within stylus. I am seriously rethinking adopting stylus at this point.

[MartinMuzatko]

I would love to see stylus to either

• adopt new css language features like @apply
• or create their own alternative to @apply

This is mostly relevant for issue https://github.com/tailwindcss/discuss/issues/11 Generally, I'm missing a way to transclude existing css rules within a new css rule. Are there any plans regarding this issue @Panya ?

[MartinMuzatko]

Maybe a workaround would be to write a stylus plugin to just ignore @apply. Is there a way to do that?

[acidjazz]

@tj @Panya @kizu do you think we can get 2c from any of y'all on how we can approach this? maybe we can do this via the javascript API?

all that really needs to happen is to ignore @apply, @nested etc and not treat it as an other @rule

this would be huge for the tailwind and cssnext communities!

[acidjazz]

Hey everyone, while I'm messing with stylus and looking for a solution I've come up with an alternative plugin. I do not see a why to ignore @apply from the javascript api @MartinMuzatko but i did come up with a plugin that is much easier on the eyes:

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

will result in

.kevin {
  @apply bg-orange text-blue;
  border: 20px solid blue;
}

Here is the plugin, I'll later on link a repo as I update and test it:

var stylus = require('stylus')

exports = module.exports = plugin;

function plugin() {
  return function (style) {
    style.define('apply', function() {
      let strings = Object.keys(arguments).map( (key) => arguments[key].string)
      return new stylus.nodes.String(` @apply ${strings.join(' ')};`, ' ')
    });
  }
};

here is how i've implemented it in my nuxt.config.js (you just need to get it into the use [] array when using stylus-loader

  build: {
    extractCSS: true,
    loaders: {
      stylus: {
        use: [require('./apply.js')()],
      }
    },

[acidjazz]

@adamwathan @MartinMuzatko @jhessin got a fork going with proper @apply support!

give it a try if ya want https://github.com/acidjazz/stylus

[MartinMuzatko]

I tried to implement this in my nuxt config but with no success. @acidjazz Did I forget anything?

I did everything in my nuxt.config.js - including const stylus = require('stylus')

[acidjazz]

@MartinMuzatko just use my fork and use @apply naturally

in package.json:

    "stylus": "acidjazz/stylus#dev",

[MartinMuzatko]

works like a charm @acidjazz ❤️ you are the best :)

[acidjazz]

@adamwathan my PR was merged and is included with v0.54.6 @MartinMuzatko you no longer have to use my branch!

[iChenLei]

@apply is removed , more detailed -> https://www.xanthir.com/b4o00

Support a unstable css spec is dangrous, @nest is same.

---

Append: No plan to rollback @apply support #2442 !

[hybridvision]

Hello @iChenLei,

Does this mean you're planning to rollback the changes from #2442? Even if @apply isn't going to be in the official CSS spec, it's very important for those of us who use Stylus with Tailwind CSS (see: https://tailwindcss.com/docs/extracting-components#extracting-component-classes-with-apply).

All we really need is for Stylus to leave the @apply alone so that Tailwind's PostCSS can process it. I don't see the harm in leaving this in the Stylus core as a whitelisted exception. Tailwind CSS has a huge user base and it would be a shame to make Stylus incompatible with it once again.

[iChenLei]

@hybridvision No plan to remove @apply support. Don't worry. we respect all existing features. Don't break our ecosystem is my first Criterion. ❤️

[hybridvision]

Thanks for the clarification, @iChenLei! 😌