crunch / postcss-less Goto Github PK

All seems to work fine with less v2.7. Any chance this project will get an update?

I couldn't get this to work until I added less to my package.json, and re-ran npm install.

I have no idea what might be/might have been going wrong, but even after switching node.js versions, repeatedly deleting out node_modules, and doing whatever it was I could, I still couldn't get this to work - I kept getting a message saying: Cannot find module 'less'.

I finally, on a whim, decided to add 'less' to my devDependencies, and then it magically worked. And I can see that 'less' is prefectly clearly added to your own devDependencies, so I don't know if this is a bug in Node, or what it could be. Still, if that's something that's expected, then maybe that could be added to the README. And if it's not - then maybe there's a bug somewhere?

I'm happy to help try and track it down, just let me know what I can do to help.

Thanks for making a great package!

It appears to be choking on line comments:

[10:45:46] Using gulpfile ~/gulpfile.js
[10:45:46] Starting 'css'...
[10:45:46] Starting 'js'...
[10:45:46] Starting 'css:watch'...
[10:45:46] Starting 'js:watch'...
[10:45:47] 'css' errored after 79 ms
[10:45:47] Error in plugin 'gulp-postcss'
Message:
    /Users/stevendvachon/less/site.less:6:1: Unknown word

// Namespaces
^
@import "site/text";
Details:
    fileName: /Users/stevendvachon/less/site.less
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false
[10:45:47] The following tasks did not complete: js, css:watch, js:watch
[10:45:47] Did you forget to signal async completion?

var less = require("postcss-less-parser");
var lessOptions = { rootpath:"/", strictMath:true };
var postcss = require("gulp-postcss");
var postcssPlugins = [ less(lessOptions)/*, cssnext, cssnano({autoprefixer:false})*/ ];

gulp.src("./less/site.less")
  .pipe(postcss(postcssPlugins))
  .pipe(concat("style.css"));

Consider the following Less:

.nav-placeholder {
  height: 70px;
  @media (min-width: 700px) {
    height: 50px;
  }
}

This is valid Less, but throws an error in the console when map: true option is set in the postCSS config:

Fatal error: Invalid mapping: {"generated":{"line":1,"column":4349},"source":"../partials/nav.less","original":{"line":1,"column":-1},"name":null}

Curiously, the following works fine:

.nav {
  .nav-placeholder {
    height: 70px;
  }
  @media (min-width: 700px) {
    .nav-placeholder
      height: 50px;
    }
  }
}

Notice that the media query is still nested but the rules are contained in a selector block.

Not sure if this is a bug for the normal postcss repo but I'll see where this goes!

Here's the code that breaks.

/* PostCSS Style Handling */
var map = require('postcss-map');
var autoprefixer = require('autoprefixer');
var nestedAncestors = require('postcss-nested-ancestors');
var nested = require('postcss-nested');
var lessEngine = require('postcss-less-engine');

...

module: {
    loaders: [
        {
            test: /\.less$/,
        loader: ExtractLESS.extract('style-loader', ['css-loader', 'less-loader']),
        }
    ]
},
postcss: function () {
    return [
        map(),
            nestedAncestors,
        nested,
        autoprefixer,
    ]
},

ERROR Unable to load webpack configuration file "webpack.config.dev.js": Cannot find module 'postcss'

BUT this code works...

/* PostCSS Style Handling */
var map = require('postcss-map');
var autoprefixer = require('autoprefixer');
var nestedAncestors = require('postcss-nested-ancestors');
var nested = require('postcss-nested');
// var lessEngine = require('postcss-less-engine');

...

I ran this repository with the following example and got this error description

The following code just changes the file name

//js

var postcss=require('postcss');
var less = require('postcss-less-engine');
var autoprefixer = require('autoprefixer');
const fs=require('fs');
const path=require('path');
 
var exampleLess = fs.readFileSync(path.join(__dirname, './aaa.less'), 'utf8');
 
postcss([
    less({ strictMath: true }), 
    autoprefixer()
  ])
  .process(exampleLess, { parser: less.parser, from: 'aaa.less' })
  .then(function (result) {
    console.log(result.css);
  }, function(err) {
      console.log(err);
});

//aaa.less

.app{
    color: #fff;
    .le{
        font-size: 24px;
        color: #3756;
    }
}

Hi

is import inline supported?

it seems that with "postcss-less-engine":"^0.6.1" and "less": "^2.7.1" it's ignored

thanks so much

My compile times have increased from 3.5s to 4.3s, when compared to running less.js separately from postcss.

Requesting a small improvement to the AtRule type. When parsing @rule(); or @rule; it would be great to have a convenience property shared with regular Rule types; node.ruleWithoutBody. Presently we're having to frequently use:

(node.type === 'atrule' && (!node.nodes || (node.nodes && node.nodes.length === 0)))

which works, but it gets messy. Any chance of adding that property to AtRule nodes as well?

There're mentions of "postcss-less", "postcss-less-engine" and "postcss-less-parser". Please pick one.

When I checkout the code on a Windows 7 machine, it automatically transforms every line ending from LF to CRLF and this makes the tests explode.

I can edit my git configuration to not turn line endings automatically to windows style by calling git config --global core.autocrlf true, but it seems like an unnecessary extra round for windows users to do, since git will change the line endings back to LF when I commit. (By the way, these are the default settings for git on windows)

I would be happier, if that option would be removed from the tests.

import './less/index.less'; import '../../button/index.less';
console show error: file wasn't found.
reason:opts param is shared. so engine still uses the same filename when i import multiple nest less file.

Stringifying and parsing with Less directly works fine without errors, so my CSS is fine.

Hello, I get the following message output to err executing the following test code:
"TypeError: postcss.root is not a constructor"

'''

const less = require('postcss-less-engine');

var exampleLess = fs.readFileSync(path.join(__dirname, 'less/test.less'), 'utf8');

postcss([
less({ strictMath: true }),
autoprefixer(),
])
.process(exampleLess, { parser: less.parser, from: 'less/test.less' })
.then(function (result) {
console.log(result.css);
}, function(err) {console.log("ERROR!!" + err)});
'''