Import less code into wrapper

[gibbsfromncis]

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]

All answers for tickets like mine was:

It works as designed

And I agree that. I do not try to report bug. I want to know how people like me can handle the case described above because it's really useful for theming.

[calvinjuarez]

I tend to process the imported file on its own, then import the processed CSS inline. Depending on what you're using to compile your Less, there are a number of ways to automate it.

So,

First

library/style.less

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

outputs library/style.css

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

Then

darkTheme.less

body.darkTheme {
  @import (inline) "~library/style.css";

  @primary-color: #000; // note that Less vars use `@`, not `$`.
}

output.css

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

Now, if you're theming the library, this won't help as much, but there are ways around that, too. For example, put all your variables in a separate file (variables.less) and then you can import those variables in both the library styles and in your theme stylesheet.

[gibbsfromncis]

@calvinjuarez Thanks for your answer. I appreciate your help. I had hope to do not do it... Did you find solution how to automate it with webpack in dev/prod? Maybe can you advise some plugins/loaders for it?

For now I see only one solution to move compiled themes files to separate repo and then add it as npm dependency but it would be much better to keep all under the same repo...

[gibbsfromncis]

Btw. If somebody try to find simple solution for Webpack (but this doesn't cover all cases) I have used this one:

(for webpack dev config)

{
   "loader":"string-replace-loader",
   "options":{
      "multiple":[
         {
            "search":"([^a-zA-Z}][ ])body\\.darkTheme",
            "replace":"$1",
            "flags":"g"
         },
         {
         // another theme prefix add there
         }
}

Click to see full webpack module part of dev config

module: {
        rules: [
            // {
            //   enforce: "pre",
            //   test: /\.jsx?$/,
            //   exclude: /node_modules/,
            //   loader: "eslint-loader"
            // },
            {
                test   : /\.jsx?$/,
                loaders: [
                    "babel-loader",
                ],
                exclude: /node_modules/,
            },
            {
                test: /\.less$/,
                use : [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "string-replace-loader",
                    options: {
                        multiple: [
                            {
                                search: "([^a-zA-Z}][ ])body\\.darkTheme",
                                replace: "$1",
                                flags: "g",
                            },
                            {
                                search: "([^a-zA-Z}][ ])body\\.midnightTheme",
                                replace: "$1",
                                flags: "g",
                            },
                            {
                                search: "([^a-zA-Z}][ ])body\\.lightTheme",
                                replace: "$1",
                                flags: "g",
                            }
                        ]
                    }
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader : "less-loader", // compiles Less to CSS
                    options: {
                        javascriptEnabled: true
                    }
                }]
            },

(and for webpack prod config)

{
   "loader":"string-replace-loader",
   "options":{
      "multiple":[
         {
            "search":"([^}])(body.darkTheme)",
            "replace":"$1",
            "flags":"g"
         },
         {
         // another theme prefix add there
         }
      ]
   }
}

Click to see full webpack module part of production config

module: {
        loaders: [
            {
                test: /\.less$/,
                use : [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader : "less-loader", // compiles Less to CSS
                    options: {
                        javascriptEnabled: true
                    }
                }].concat(ExtractTextPlugin.extract({
                    fallback  : "style-loader",
                    use       : [
                        {
                            loader: "string-replace-loader",
                            options: {
                                multiple: [
                                    {
                                        search: "([^}])(body.darkTheme)",
                                        replace: "$1",
                                        flags: "g",
                                    },
                                    {
                                        search: "([^}])(body.midnightTheme)",
                                        replace: "$1",
                                        flags: "g",
                                    },
                                    {
                                        search: "([^}])(body.lightTheme)",
                                        replace: "$1",
                                        flags: "g",
                                    }
                                ]
                            }
                        } ,
                        "css-loader",
                        {
                            loader : "less-loader",
                            options: {
                                javascriptEnabled: true
                            }
                        },
                    ],
                    publicPath: "../"
                }))
            },
      ]
}

(Btw just make sure you put this loader on the right place. I have put it into

I've used string-replace-loader to remove wrong usages of wrapper class name from minified css code (prod config) and not minified (dev config).

if you want you can merge this 2 RegExps into one. As I said it was just fast-handed solution and maybe it's not correct. Use it for your own risk

[calvinjuarez]

@gibbsfromncis Thanks for sharing your solution! If this is a strong enough use case for you a Less plugin could be a great way to accomplish what you need, and I'm sure others would appreciate having that tool available!

[gibbsfromncis]

@calvinjuarez what do you mean about Less plugin? I've never heard about Less plugins

[matthew-dean]

@gibbsfromncis See: http://lesscss.org/features/#plugin-atrules-feature . 😁

[gibbsfromncis]

@matthew-dean @calvinjuarez I'm already working on plugin to do it. Just reused npm-import plugin.

[rjgotten]

@matthew-dean
@calvinjuarez
@gibbsfromncis

Sounds like what's needed here is functionality to reflect on the current selector and then extract the right-hand key from it, like so:

.libraryPrefix-collapse {
  @selector: selector();
  @key-class: rh-key(@selector);

  background: blue;

  & > @{key-class}-item {
    background: red;
  }
}

I.e. this is #3053

[matthew-dean]

@rjgotten I'm actually still confused what the issue is.

After all, the statement that the following "doesn't work" doesn't make sense.

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

  $primary-color: #000;
}

@gibbsfromncis
There's not enough information about library/style.less to make it clear what should happen, but doesn't. And obviously $primary-color is not a Less variable. So without clarification of the issue, I'm not sure there's an issue to address or respond to. It's just not clear what you're trying to accomplish.

[gibbsfromncis]

@matthew-dean sorry, I've updated the code variables from "$" to "@".

There is a library for React which uses LESS as css preprocessor - https://ant.design/docs/react/customize-theme

All Libraries UI elements colors generate based on @primary-color variable.

So if I do the following:

@import "~antd/lib/styles";

@primary-color: red;
@background-color: black;

In result I'll have restyled library with totally different colors. UI elements hovers/shadows will be red and backgrounds black. It works cool (thanks for LESS) but the issue is when I want to support multiple themes on my app.

My idea was to have 2 themes .less files like:
dark.less

body.darkTheme{
  @import "~antd/lib/styles";
  @primary-color: red;
  @background-color: black;
}

dark.less

body.lightTheme{
  @import "~antd/lib/styles";
  @primary-color: blue;
  @background-color: white;
}

In output I'll have 2 different css files for each theme and I'll include this 2 files into my project. When user wants to change theme from dark to blue or vise versa I'll just replace "class name" of body from "darkTheme" to "lightTheme".

But the issue is that generated files uses "body.darkTheme" or "body.lightTheme" like a parent selector inside and in result (built files) I have some parts of code like this:

body.darkTheme .ant-anchor-link-active > body.darkTheme .ant-anchor-link-title {
  color: #00A9E0;
}

and it breaks library styles because body.darkTheme cannot be inside .ant-anchor-link-active.

I fully agree that & works well and like developers designed. But I need solution to generate output where my body.darkTheme will be used only as first-level parent element and that's it.

Please let me know if something is still not clear for you.

Yesterday I've finished my plugin for this: https://github.com/gibbsfromncis/less-plugin-precompile-import to use it like:

body.darkTheme {
  @import "precompile://~ant/lib/styles";
}

And it works well. But it would be great to have official supported feature or plugin to handle cases like mine.

(Btw, Unfortunately "less-loader" for Webpack doesn't work well with Less plugins)

[matthew-dean]

🤔

Hmmmm..... @gibbsfromncis Honestly it just feels like you're taking the wrong approach for theme files.

For example:

In output I'll have 2 different css files for each theme and I'll include this 2 files into my project. When user wants to change theme from dark to blue or vise versa I'll just replace "class name" of body from "darkTheme" to "lightTheme".

Why have the top class in there at all? Why not generate both files and just have instructions for one of them to be used? You're right that if you include it at the base, it will be added to every child selector.

My question is, if you DON'T want it to be added to every child selector in the root, how are you expecting a body class to actually be applied? You are correct that I still don't understand what you are trying to achieve. Based also on the feedback from @rjgotten, I think probably this is not a Less issue?