less / less-plugin-npm-import

Allows importing from NPM packages

DEPRECATED: Less 3+ in a Node environment will search NPM paths by default.

less-plugin-npm-import

Adds the ability for less to import from npm packages

lessc usage

Install with npm

npm install -g less-plugin-npm-import

In less file:

@import "npm://packagename/path/to/file.less";

or if importing a css file an import option is required:

@import (less) "npm://packagename/path/to/file.css";

css/less extensions not necessary

Options:
prefix - default: npm://

Command line usage

lessc --npm-import file.less file.css
lessc --npm-import="prefix=~" file.less file.css

Programmatic usage

var NpmImportPlugin = require("less-plugin-npm-import"),
    options = { plugins: [new NpmImportPlugin({prefix: '~'})] };
less.render(css, options)
    .then(...

Browser usage

Browser usage is not supported.

Testing

run the tests by running node test You require the dev dependencies installed (which includes less)

less-plugin-npm-import's Issues

Requires fs module

Upon run, console reads:

ERROR in ./~/less-plugin-npm-import/~/resolve/lib/async.js
Module not found: Error: Cannot resolve module 'fs' in /Users/dan/Desktop/test/node_modules/less-plugin-npm-import/node_modules/resolve/lib
 @ ./~/less-plugin-npm-import/~/resolve/lib/async.js 2:9-22

ERROR in ./~/less-plugin-npm-import/~/resolve/lib/sync.js
Module not found: Error: Cannot resolve module 'fs' in /Users/dan/Desktop/test/node_modules/less-plugin-npm-import/node_modules/resolve/lib
 @ ./~/less-plugin-npm-import/~/resolve/lib/sync.js 2:9-22

This error is resolved after installing fs with npm install fs --save

it has bug when node_modules in the deep modules

it is ok now

add less file which is in the node_modules has failed.

my mistake, sorry.

How to use with Grunt?

Hi there,

Despite my best efforts, I can't seem to get this up and running with my Grunt setup, and I would really appreciate some guidance. At present, I've got my Grunt tasks split out into individual task files within a /grunt directory using the load-grunt-config plugin: https://github.com/firstandthird/load-grunt-config. So my less compilation task is all defined within /grunt/less.js, for example.

How can I integrate less-plugin-npm-import into my Grunt setup so that I can include npm @import statements in my less files? I've installed the package already, however when I try to run my Grunt build I get `the following:

Running "less" (less) task
>> FileError: 'npm://my-npm-package.less' wasn't found in src/less/main.less on line 4, column 1:

Clearly I need to formally call/include the task - how can I do this? Thanks!

Doesn’t work with Less 2.1.0

This plugin stopped working with Less 2.1.0 when using the promise syntax.

@import (less, reference) 'npm://npm-import-plugin-test/file.css';
div:extend(.test_file_css) { }

    var file = fs.readFileSync('css/styles.less', 'utf8'),
        options = { plugins: [ npmImport ] },
        log = console.log.bind(console);

    // Works with Less 2.0.0 but in 2.1.0 it returns "[TypeError: undefined is not a function]"
    less.render(file, options)
        .then(log)
        .catch(log);


    // Works with Less 2.1.0
    less.render(file, options, function(error, output) {
        log(error || output);
    });

Test repo at https://github.com/batfink/less-bug

Nothing happens.

Hi. I have installed the plugin globally as per instructions. I have installed tachyons in my project with npm, and it shows up in my package.json. I have tried to add a simple file from that module.

@import 'npm://tachyons/src/_background-size.css';

When I run less the import statement is copied over as is; the npm is not resolved.

I then went into the node_module and manually duplicated _background-size.css and renamed it _background-size.less. I changed my code to

@import 'npm://tachyons/src/_background-size.less';

And got

Error: 'npm://tachyons/src/_background-size.less' wasn't found. Tried - npm://tachyons/src/_background-size.less, ....

It looks like the plugin is simply not running. Is there some step missing to make it register with less? Thanks.

Module's package.json file may make trouble

I made a npm module, and it's package.json file has main property with value index.js. It's common thing, I think.
Also, the module has a index.less file, and with less-plugin-npm-import, I import it in another less file like this:

@import "npm://module_name";

I thought this is alse common thing. But, I can't pass the grunt.
From the error message, it says there's something wrong with module_name/index.js file!

Before post a issue here directly, I try to find out why ... then, I think the answer may be here:

// node_modules/resolve/lib/async.js line147-151
                if (pkg.main) {
                    if (pkg.main === '.' || pkg.main === './'){
                        pkg.main = 'index'
                    }
                    loadAsFile(path.resolve(x, pkg.main), pkg, function (err, m, pkg) {

The resolve will try to load the main file defined in package.json file. So, as in my module's package.json, main is "index.js"...that's my fault?!

Maybe this is not the responsibility of less-plugin-npm-import. If so, I just share my solution here:
Change the "main" property's value from "index.js" to "index"!

PS: thanks for published less-plugin-npm-import, it's very useful!

Plugin breaks on require

var LessImport = require('less-plugin-npm-import')

This results in Uncaught TypeError: undefined is not a function and seems to be due to this statement in "node_modules/resolve/lib/core.js":

module.exports = require('./core.json').reduce(function (acc, x) {
    acc[x] = true;
    return acc;
}, {});

Not working with less-plugin-glob

I want to try to use this plugin along with less-plugin-glob, but seems that it's not working, no errors but the files are not actually imported, I have tried different ways, the same result

@import "npm://<my npm module>/**/*.less"

@import "npm://<my npm module>/**/*"

lessc --glob --npm-import <my entry file> <my output file>

lessc --npm-import --glob <my entry file> <my output file>

am I doing something wrong or just this plugin doesn't work with the other one

can I use it with less option 'syncImport: true, relativeUrls: true' ?

when I use it with less option 'syncImport: true, relativeUrls: true', nothing happen.

less.render('some content', {
 syncImport: true,
 relativeUrls: true,
 plugins: [new NpmImportPlugin({prefix: '~'})]
},function (err, result) {

  console.log(result.css)
})

ps: less 2.x

Why is the output result empty?

input default.less

@import '~antd/lib/style/themes/default.less';

const less = require('less');
const NpmImportPlugin = require('less-plugin-npm-import');
const options = {
  plugins: [ 
    new NpmImportPlugin({ prefix: '~' }),
  ]
}
less.render(content, options).then(result => result.css);

output default.css

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */

less 2.2 tests failed

NameError: variable @global-var is undefined in src/main/webapp/node_modules/less/test/browser/less/global-vars/simple.less on line 2, column 10:
1 .test {
2 color: @global-var;
3 }

this plugin breaks sourcemaps on windows

Possible of use resolve function
common paths is c:/Projects, but this returns C:/Projects (uppercased drive)
So sourceMapBasepath breaks.

Doesn't work in a .vue file

I want to use in a .vue file like below, but it doesn't work

hello.vue

<template>
  ...
</template>
<script>
  ...
</script>

<style lang="less">
  @import 'npm://less-retina-border/index.less';
</style>

plugin fails if targeting a file with a .css suffix using gulp-less

Using this plugin with gulp-less to embed normalize.css:

In gulp file

var LessPluginNPMImport = require('less-plugin-npm-import');
var npmimportless = new LessPluginNPMImport({
    prefix: 'npm://'
  })
...
stream.pipe(less({
    plugins: [npmimportless]
}))
...

normalize.css dependency contains normalize.css file (/node_modules/normalize.css/normalize.css)

In less file this fails:

@import "npm://normalize.css/normalize.css";

Fixed by removing .css suffix on the file

@import "npm://normalize.css/normalize";

How to run tests

Hi,

the README.md tells me to execute node test/index.js but the following exception occurs

LESS - npm import


fs.js:659
  return binding.readdir(pathModule._makeLong(path));
                 ^
Error: ENOENT, no such file or directory 'test/less-bom/npm-import/'
    at Object.fs.readdirSync (fs.js:659:18)
    at runTestSetInternal (/home/vk/code/js/less-plugin-npm-import/node_modules/less/test/less-test.js:177:12)
    at Object.runTestSet (/home/vk/code/js/less-plugin-npm-import/node_modules/less/test/less-test.js:159:9)
    at Object.<anonymous> (/home/vk/code/js/less-plugin-npm-import/test/index.js:9:12)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)

I think the sentence "You require the dev dependencies and less v2 in your node_modules (it will be added as a dev dependency once less v2 is released)" is the answer but I don't know what that means.

Document test process and/or fix tests

Should the tests pass? If so, can you update the README to include testing instructions?

I planned on using this as the starting point for less-plugin-bower-import but stopped when I couldn't get the tests to pass. Here's what I did:

My first attempt, after cloning the repo:

> node test/index.js

module.js:340
    throw err;
          ^
Error: Cannot find module 'less'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/jschulz/Sites/less-plugin-npm-import/test/index.js:1:74)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)

I installed less (and added it as a dependency) then tried again:

>  node test/index.js

LESS - npm import

- npm-import/test: FAIL

module.js:340
    throw err;
          ^
Error: Cannot find module 'diff'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at diff (/Users/jschulz/Sites/less-plugin-npm-import/node_modules/less/test/less-test.js:153:9)
    at difference (/Users/jschulz/Sites/less-plugin-npm-import/node_modules/less/test/less-test.js:174:9)
    at /Users/jschulz/Sites/less-plugin-npm-import/node_modules/less/test/less-test.js:145:25
    at fs.js:271:14
    at Object.oncomplete (fs.js:107:15)

I looked at the test and saw it was using Less's tests, so I went to that directory, installed Less's dependencies and tried again:

> cd node_modules/less/
> npm install
<snip>
> cd -
/Users/jschulz/Sites/less-plugin-npm-import
> node test/index.js

LESS - npm import

- npm-import/test: FAIL
.comma-delimited {
  text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
  -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset, 0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
  -webkit-transform: rotate(0deg);
}
@font-face {
  font-family: Headline;
  unicode-range: U+??????, U+0???, U+0-7F, U+A5;
}
.other {
  -moz-transform: translate(0, 11em) rotate(-90deg);
  transform: rotateX(45deg);
}
.item[data-cra_zy-attr1b-ut3=bold] {
  font-weight: bold;
}
p:not([class*="lead"]) {
  color: black;
}
input[type="text"].class#id[attr=32]:not(1) {
  color: white;
}
div#id.class[a=1][b=2].class:not(1) {
  color: white;
}
ul.comma > li:not(:only-child)::after {
  color: white;
}
ol.comma > li:nth-last-child(2)::after {
  color: white;
}
li:nth-child(4n+1),
li:nth-child(-5n),
li:nth-child(-n+2) {
  color: white;
}
a[href^="http://"] {
  color: black;
}
a[href$="http://"] {
  color: black;
}
form[data-disabled] {
  color: black;
}
p::before {
  color: black;
}
#issue322 {
  -webkit-animation: anim2 7s infinite ease-in-out;
}
@-webkit-keyframes frames {
  0% {
    border: 1px;
  }
  5.5% {
    border: 2px;
  }
  100% {
    border: 3px;
  }
}
@keyframes fontbulger1 {
  to {
    font-size: 15px;
  }
  from,
  to {
    font-size: 12px;
  }
  0%,
  100% {
    font-size: 12px;
  }
}
.units {
  font: 1.2rem/2rem;
  font: 8vw/9vw;
  font: 10vh/12vh;
  font: 12vm/15vm;
  font: 12vmin/15vmin;
  font: 1.2ch/1.5ch;
}
@supports ( box-shadow: 2px 2px 2px black ) or
          ( -moz-box-shadow: 2px 2px 2px black ) {
  .outline {
    box-shadow: 2px 2px 2px black;
    -moz-box-shadow: 2px 2px 2px black;
  }
}
@-x-document url-prefix(""github.com"") {
  h1 {
    color: red;
  }
}
@viewport {
  font-size: 10px;
}
@namespace foo url(http://www.example.com);
foo|h1 {
  color: blue;
}
foo|* {
  color: yellow;
}
|h1 {
  color: red;
}
*|h1 {
  color: green;
}
h1 {
  color: green;
}
.upper-test {
  UpperCaseProperties: allowed;
}
@host {
  div {
    display: block;
  }
}
::distributed(input::placeholder) {
  color: #b3b3b3;
}
.shadow ^ .dom,
body ^^ .shadow {
  display: done;
}
:host(.sel .a),
:host-context(.sel .b),
.sel /deep/ .b,
::content .sel {
  type: shadow-dom;
}
 /deep/ b {¶
  c: 'd';
}
 /deep/ b[e] {
  f: 'g';
}
#issue2066 {
  background: url('/images/icon-team.svg') 0 0 / contain;
}


1 Failed, 0 passed

Better, but still broken. I'm not sure if it's me, the code, or some combination of the two.