These are chat archives for less/less.js

29th
Jan 2019
Kevin Ramharak
@KevinRamharak
Jan 29 18:37
Well i tried it:
.common {
  text-decoration: underline;
  color: #444;
  background-color: #eee;
}
.common.a {
  color: white;
  background-color: tomato;
}
.common.b {
  color: white;
  background-color: teal;
}
Not sure what you expected or what the question is about
dimtabu
@taburetkin
Jan 29 18:56
yes, my question is a little bit absolete
the thing is, i faced with dublication issue in my js app
and i was searching the source of this issue.
after some experiments i found out that less behave good and do not include repeated imports in final bundle, so this issue is related to bundler
the bundler is webpack.
when you trying to include css you have to be careful and watch that your less files do not includes any other less files which are producing any css output, because this output will be repeated in the final css
dimtabu
@taburetkin
Jan 29 19:09

for example
app entry

import componentA from './component-a';
import componentB from './component-b';
...

component-a

import './component-a.less';
export default componentA;

component-b

import './component-b.less';
export default componentB;

component-a.less

@import './component.less'
.component.a {
  ...
}

component-b.less

@import './component.less'
.component.b {
  ...
}

component.less

.component {
  /* content */
}

this simple example will produce next css:

.component { //was required by component-a.less during compilation of component-a.js
  /* content */
}
.component.a {
  ...
}
.component { //was required by component-b.less during compilation of component-b.js
  /* content */
}
.component.b {
  ...
}

so, component.less was imported twice by two different modules and its output present in final css bundle two times.
they say, that there can be applied some minifier which may detect dublications and remove it, but honestly i do not trust in this strategy
best solution, i think, will be concatenate all less files during build and compile concatenated less file once to final css.
i just have no time and experience to create special less-loader and i suppose some special plugin for webpack