import silent option

[lukeapage]

import takes the contents of the less file and puts it inline, as if the files were joined together. Silent continue to do this, but marks the contents as silent, so they can be referenced but not output. e.g.

//file.less
.a { color: black; }
.b .c.d { color: white; }

//main.less
@import "file.less";
.e { .a; }
.f:extend(.b .c.d) {}

current output...

.a { color: black; }
.b .c.d,
.f { color: white; }
.e { color: black; }

output with silent (@import (silent) "file.less";)

.f { color: white; }
.e { color: black; }

I see this as every selector in file.less is silenced, but if it is referenced it doesn't stop the use of it from being silent. I imagine this like a silent boolean property on root level selectors and directives - if a new selector is added to a ruleset then it still gets output.

usecase - powerful refactoring/ use of libraries.

only valid with a less file

[lukeapage]

from
#1185

[jonschlinkert]

I keep forgetting to ask about a few things with this feature:

1. how are the silent styles referenced? Are you thinking of using extend for that?
2. it sounds like what you're saying is that an external style will only show up in the compiled code if it is referenced/used, is this correct? if so this is consistent with my understanding.
3. When silent styles are used, where will they show up in the resulting CSS? At the top of the file where the silent file was @imported, or would the styles be copied over to the declaration block where they were used?

[lukeapage]

1. Extend and mixins
2. Yes
3. Imagine silent marks every directive and selector with a silent flag in
   the imported file, but imports as normal. When a selector is extended, just
   the new selector is marked as not silent. when a mixin is used, the pulled
   in rules are marked not silent (only in the pulled in place). When the css
   is generated, silent selectors / media queries containing only silent
   selectors are not output.

To answer your question, extends appear in the position of the silent
import statement, mixins are mixed in and appear in the referenced place as
normal.

This allows you to pull in a subset of a library.. e.g.

.navbar:extend(.navbar all) {}

I have just pulled only navbar related styles from bootstrap.

[jonschlinkert]

@lukeapage thanks for the clarification on this.

Extend and mixins

That's awesome! I didn't realize it would be as flexible (and powerful) as you're planning it to be. Very much looking forward to this.

[jonschlinkert]

What if we either renamed this mute, or renamed the command line option -s, --silent to -q, --quiet for suppressing the output of error messages?

If there is potential for a command line option for this eventually we should consider changing one of the two above, especially since we're already getting some confusion on a couple of other import terms, "less" and "inline" in particular.

[lukeapage]

Hadn't thought about that conflict.. good point. I don't think it will ever be a command line option but it is potentially confusing to have the same name. mute is smaller than silent and I think I prefer it.

[Soviut]

While mute makes sense, I'd say that silent or quiet are more common terms for command line flags.

[jonschlinkert]

👍

[Soviut]

For instance, in MSI installers, the comment way to silence all output is with /quiet:

http://msdn.microsoft.com/en-us/library/windows/desktop/aa372024(v=vs.85).aspx

And a search for "command line flag silent" certainly show a commonality as well.

[lukeapage]

@Soviut we are saying to keep the command line as silent but use mute as the option name inside the less @import (mute) "file.less";

[Soviut]

Wouldn't the disparity make it a bit confusing? An extra character for consistency's sake seems well worth it.

[lukeapage]

@Soviut We want them to be different because they are completely different things!

[Soviut]

Oh! Sorry, in reading back through the original proposal, mute makes a lot of sense now. Coming from an animation background, the concept of "muting channels" in Maya was very common. It seems to fit the paradigm.