Import less code into wrapper

Hey all,

I’m working on themes support for my project and in general my idea was like this:

darkTheme.less

body.darkTheme {
  @import "~library/style.less";

  @primary-color: #000;
}

But it doesn’t work on this case:

library/style.less

.libraryPrefix-collapse {
  background: blue;
  & > &-item {
    background: red;
  }
}

Because in result I see the following code: output.css

body.dark .libraryPrefix-collapse {
  background: blue;
}
body.dark .libraryPrefix-collapse > body.dark .libraryPrefix-collapse-item {
  background: red;
}

Can you please advice something that may help on this case. I’ve read all LESS docs and issues like that but no luck. Maybe there may be used some trick or can you add some specific symbol that will help to use parent selector only for the first-level children like:

body.darkTheme % {
  @import "~library/style.less";

  @primary-color: #000;
}

I found some issues on stackoverflow & your repo like this which mention this case but no one provides solution. I wouldn’t post issue there is I had this issue with my local project only. But I’m trying to work on theming for vendor library and unfortunately I cannot touch its LESS code.

[gibbsfromncis]

@matthew-dean partially you’re right. It’s real to compile separate themes files and include them into project when you need without using specific parent selector. But it’s a little bit hard to configure a build system to do what you said. I saw issues like mine beginning from 2016 year and till now and that’s why I came there to discuss an ability to support cases like mine on less compiler level. But if you think it’s much effort for non common case you can close it.

I’ve solved my issue by compiling sources twice. First time I compile them by using command line tools to get built of library styles with my applied colors and the second time my Webpack compiles files like:

body.darkTheme{
  @import (less) "dark-theme-build.css"
}

to add body.darkTheme as parent selector for all classes applied on library styles file

I just had hope to get an ability to solve my issue on Less compiler level instead of reconfiguring my build system with some tricks.

[atvilelas]

@gibbsfromncis and @nruhe I made a simple plugin that allows you to use multiple ant design themes at the same time.

https://github.com/atvilelas/antd-theming-engine

It might generate larger css, but you can easily split that up with WebPack and load them as need. This is for development only right now. I wanted something that worked consistently without feeling like I was hacking it too much.

My next steps will be performance and clean up improvements.