seven-phases-max / less-plugin-functions Goto Github PK

Hi,

This is related to less/less.js#2747

I'd like to be able to add custom functions for usage in mixin guards.

The thing is that I'm not really interested declaring these fonctions in Less syntax but just register some custom useful functions in my build process.

Is it possible to do?

I want to use this plugin in vue.Then I add this plugin like this.

// https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less', {
      plugins: [new require('less-plugin-functions')]
    }),
    sass: generateLoaders('sass', {indentedSyntax: true}),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

But it reportes this error.

Could you please tell me how to use this plugin with webpack?
Thank you.

Maybe I misuse the plugin somehow, but I get the following problem.

My code:

// 1. variable used in function
@foo: 11px;

// 2. function
.function-bar() {
    return: 42 * @foo;
}

// 3. variable that uses function (just for more readability)
@qux: (1px + bar());

// 4. media (@qux value can be copied here directly to media condition as well)
@media (min-width: (@qux)) {

    .baz {
        less: rulez;
    }
}

Expected CSS result:

@media (min-width: 912px) {
  .qux {
    less: rulez;
  }
}

Actual result:

OperationError: Operation on an invalid type in /path/to/myfile.less on line 13, column 28:
12 // 4. media (@qux value can be copied here directly to media condition as well)
13 @media (min-width: (@qux)) {
14

I wanto include this plugin in my project.
Can you solve it?
thanks

Thanks this awesome project makes possible to use css variables in less project. The problem was less would not pass compiling less functions, such as fade, tint etc., if are css variables string passed into it. I used this plugin to override those native less functions and passes through whatever params. I used it in my project which based on ant.design, and used css variables to override less variables to achieve multiple themes and dark mode.

I just would like to appreciate the author made this awesome work. My solution may not be elegant but it works :P

like this, I dont know what happen

undefinedError: Cannot read property 'trim' of undefined

To reproduce the issue, check this https://github.com/yuxuan/less-plugin-functions-issue.

The less code:

@padding: 12px;

.cls {
  padding-right: calc(@padding - var(--width));
}

if compile with LessPluginFunctions, it would throw Cannot read property 'numerator' of undefined error. If without the plugin, it compiled successfully.

Please help.

Hello Max,

Thanks for the 2 less plugins you created (lists & this functions one) - I personally think both are much needed addition to less. 👍
I played with this less-plugin-functions yesterday and couldn't get it to work when I used uppercase characters in my funtion names.

Example:

.function-getStyleNamespace { return: "namespace-"; }

@style-ns: getStyleNamespace(); 
@{style-ns}box { display: block; color: black; }

Output:

.function-getStyleNamespace {
  return: "namespace-";
}
getStyleNamespace()box {
  display: block;
  color: black;
}

If I lowercase the function name then everything works fine.

Regards,
R.

Hi,

I have a problem with using less-plugin-functions. Could you please help me?

I've installed less-plugin-functions, but not globally: npm install --save-dev less-plugin-functions

Here is my grunt task:

    less: {
      production: {
        options: {
          paths: ["assets/css"],
          cleancss: true,
          plugins: [
            new (require('less-plugin-functions'))
          ],
          cleancssOptions: {
            keepSpecialComments: 0
          }
        },
        files: {
          "static/css/tip.css": "static/less/styles.less"
        }
      }
    },

But it does nothing. What I'm doing wrong?

Thanks.

How can I use the plugin for sublime ?

It would be less invasive like sass's @function instead of using a scope or a prefix to define the functions.

I want to use this plugin along with Less2Css in Sublime text2. Would you please tell me the way? thanks.

Got this error on compile (i use "grunt-contrib-less": "~1.2.0", which is LESS v2.6.1):

Running "less:core" (less) task
>> TypeError: plugin.install is not a function
>>     at PluginManager.addPlugin (F:\LavkaLavka\Shop\node_modules\less\lib\less\plugin-manager.js:29:12)
>>     at PluginManager.addPlugins (F:\LavkaLavka\Shop\node_modules\less\lib\less\plugin-manager.js:19:18)
>>     at Object.parse (F:\LavkaLavka\Shop\node_modules\less\lib\less\parse.js:34:27)
>>     at Object.render (F:\LavkaLavka\Shop\node_modules\less\lib\less\render.js:25:18)
>>     at F:\LavkaLavka\Shop\node_modules\less\lib\less\render.js:16:24
>>     at Object.render (F:\LavkaLavka\Shop\node_modules\less\lib\less\render.js:15:20)
>>     at compileLess (F:\LavkaLavka\Shop\node_modules\grunt-contrib-less\tasks\less.js:164:17)
>>     at F:\LavkaLavka\Shop\node_modules\grunt-contrib-less\tasks\less.js:63:9
>>     at F:\LavkaLavka\Shop\node_modules\grunt-contrib-less\node_modules\async\lib\async.js:662:13
>>     at iterate (F:\LavkaLavka\Shop\node_modules\grunt-contrib-less\node_modules\async\lib\async.js:146:13)
Warning: Error compiling .less/F133.less Use --force to continue.

Inside gruntfile

    // LESS compilation task.
    less: {
        options: {
            strictImports: true,
            plugins: [
                require('less-plugin-functions')
            ]
        },
        core: {
            src: '.less/<%= pkg.name %>.less',
            dest: 'css/<%= pkg.name %>.css'
        },
        project: {
            src: '.less/style.less',
            dest: 'css/style.css'
        }
    },

Maybe i'm doing something wrong?
I've intialized and used few less plugins this way successfully, so thought i need to write it here)

I reaaaaaallly need this functionality in less now!))