Duplicate definitions

[jo...@pdms.com]

Hello,

I've been using dot less for a while and it's really transformed how I
write CSS for the better - in particular in these days of CSS3 and
multiple ways of doing the same thing for different browsers.

However, I've found that dot less will sometimes duplicate rules if a
file is imported by more than one other file. It's probably easier
for me to explain by example.

I have split out the CSS for my site into different chunks - layout,
content and then specific other bits and bobs. I then have a single
file that combines them all together. I also have a helper file with
mixins to help with things like CSS3 etc.

So in my test, my default.less file looks like this:

@import "layout.less";
@import "content.less";


layout.less is this:

@import "mixins.less";
body
{
border: 5px solid #000;
.curves(10px);
}


content.less is:

@import "mixins.less";
.content
{
border: 3px solid red;
.curves(4px);
}


And mixins.less is:

.curves(@radius)
{
border-radius: @radius;
}


When I browse to default.less I get this:

body {
border: 5px solid #000;
border-radius: 10px;
border-radius: 10px;
}
.content {
border: 3px solid red;
border-radius: 4px;
border-radius: 4px;
}

It seems it doubles-up the rules from mixins.less each time it is
imported in.

I realise I can change it so that "default.less" imports in
mixins.less and then remove the other imports, but the way I have it
means that each less file is self-contained and this can be really
helpful for tracking down issues or reusing certain bits elsewhere.

Would I be right in thinking that this is a bug rather than
intentional behaviour?

Thanks very much,

John

[Daniel Hölbling]

Hi,

It's a lot easier to read if you use a service like Github:Gist to better differentiate between files like this:

https://gist.github.com/1779029

I don't see what the problem is.

You are using .curves() inside .content and inside body.

Therefore it's output twice in your file.

If you wanted .content to also be a mixin you have to use a parameterless mixin:

.content() {

  border: 3px solid red;

  .curves(4px);

}

If you only use the mixin syntax without braces .content dotless can't determine if this is an actual CSS declaration or only a mixin.

greetings Daniel

[John]

Thanks for the quick reply!

The problem is that each selector has the border-radius definition
twice, e.g.

body {
border: 5px solid #000;
border-radius: 10px;
border-radius: 10px;
}

It has "border-radius: 10px" twice, even though I only included the
curves mixin in that selector once. (And this is also the case for
content which includes border-radius twice).

In my example "curves" is the only mixin - ".content" and "body" are
CSS selectors referring to elements on my page.

John

[Daniel Hölbling]

Oh .. I totally missed that ;)

I guess this is intentional as you could import the same file twice to place some non-mixin declarations.
But: I wonder if it's desireable to have a mixin-function declared twice..

@Luke: You're more familiar with the current codebase.. Any ideas?

greetings Daniel

[Luke Page]

It looks like a bug. it loops round mixin definitions finding one
where the arguments match.. maybe it calls every mixin definition
where the name and arguments match rather than stopping after the
first one..

If so it should be a simple fix I could do soon.

[quark]

maybe something simple like @include_once will help with this issue?

in less.js:
.m() { color: red; }
.m() { color: black; }
.r { .m; }
returns
.r { color: red; color black; }

which could be expected desired behavior considering property
fallbacks

as example one could make a base.less file with basic css styles for
every browser and then
extend it with fancy.less containing cool fancy new stuff keeping old
css properties as fallback for crappy browsers

On 9 Лют, 13:57, Luke Page <luke.a.p...@gmail.com> wrote:
> It looks like a bug. it loops round mixin definitions finding one
> where the arguments match.. maybe it calls every mixin definition
> where the name and arguments match rather than stopping after the
> first one..
>
> If so it should be a simple fix I could do soon.
>

[Luke Page]

Any idea if there is a less.js bug for this? Or do they remove
duplicate rules if the values are the same?

[John]

Thanks again for all the replies - sorry for not responding to them
earlier.

I'd not used less.js before, but I managed to get it to compile my
default.less using node.js and it does indeed have the duplicate rules
in there too.

Not sure if this is by-design or a bug ?

On Feb 9, 3:05 pm, Luke Page <luke.a.p...@gmail.com> wrote:
> Any idea if there is a less.js bug for this? Or do they remove
> duplicate rules if the values are the same?
>

[Dave Transom]

I also found the same issue (using in the same way as John).

I expected the import to 'overwrite' the previous mixin definition,
but it seems to be appended to the previous mixin definition. I can
understand the mixin behavior - it seems pretty smart/extensible, but
it feels like there needs to be something along the lines of
"@include_once" available - particularly if the same file is imported
_more than once_.

Saying that, I'm not sure a new "@include_once" directive is needed.
Instead, if the compiler/importer tracked the @import files, and then
skipped later imports of the same file - I can't think of a case where
you would want to import the same exact .less file repeatedly.

Has this actually been addressed? I couldn't see evidence in git yet,
but maybe I missed it.

[Luke Page]

no it hasn't. But less.js has added support for import once and once it is finalized, it'll be ported.

[mogadanez]

seems it is already there.

did someone have a plans to port it in dotLess?

[clarc...@gmail.com]

> duplicate file finder

I Dont Understand What You Are Saying ?

[mogadanez]

seems it is already there( import-once ). 

http://lesscss.org/#-importing

[Luke Page]

I might get round to it eventually.. we would love a pull request though.. I'm quite busy

less.js 1.4 behavior is import-once by default, supporting @import-once explicit though and also @import-multiple in case you don't

--

You received this message because you are subscribed to the Google Groups "DotLess (Less Css for .NET)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dotless+u...@googlegroups.com.
To post to this group, send email to dot...@googlegroups.com.
Visit this group at http://groups.google.com/group/dotless?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.