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
Support for cssnext nested at-rule syntax (apply, nested) #2335
Comments
Just a quick follow-up, I hadn't seen the
...still compiles to this:
...removing the actual selector. Definitely work-aroundable though. |
That makes postCSS libraries that rely on @ rules all but unusable within stylus. I am seriously rethinking adopting stylus at this point. |
I would love to see stylus to either
This is mostly relevant for issue tailwindlabs/discuss#11 |
Maybe a workaround would be to write a stylus plugin to just ignore |
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 build: {
extractCSS: true,
loaders: {
stylus: {
use: [require('./apply.js')()],
}
}, |
@adamwathan @MartinMuzatko @jhessin got a fork going with proper give it a try if ya want https://github.com/acidjazz/stylus |
I tried to implement this in my nuxt config but with no success. @acidjazz I did everything in my nuxt.config.js - including |
@MartinMuzatko just use my fork and use in package.json: "stylus": "acidjazz/stylus#dev", |
works like a charm @acidjazz ❤️ you are the best :) |
@adamwathan my PR was merged and is included with v0.54.6 @MartinMuzatko you no longer have to use my branch! |
Support a unstable css spec is dangrous, Append: No plan to rollback
|
Hello @iChenLei, Does this mean you're planning to rollback the changes from #2442? Even if All we really need is for Stylus to leave the |
@hybridvision No plan to remove |
Thanks for the clarification, @iChenLei! 😌 |
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:
...to just this (notice the selector has disappeared):
...and this:
...to this (notice
@apply
has been hoisted outside of the rule):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?
The text was updated successfully, but these errors were encountered: