huasofoundries / systemjs-less-plugin Goto Github PK

I try to bundle simple tmp.less file

.drop-down-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAABISURBVDhPY2hoaPhPLgZrBgIGUvGoZihOTEzEGrIgcWR1IDGsNqMbgK4RhHFqBmGYAdg0gjBezSCMSyMIE9SMDw91zeThhv8Ami96gQcIp6MAAAAASUVORK5CYII=);
}

In config I add
meta: { "tmp": { deps: [ "tmp.less!less" ] } },
After bundling:
jspm bundle tmp
I get a wrong result for icon url. Instead of original url(data.. I have url(D:\tmp\LessUrl/data...

(function(c){var d=document,a='appendChild',i='styleSheet',s=d.createElement('style');s.type='text/css';d.getElementsByTagName('head')[0][a](s);s[i]?s[i].cssText=c:s[a](d.createTextNode(c));})
(".drop-down-icon {\n  background-image: url(D:\\tmp\\LessUrl/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAABISURBVDhPY2hoaPhPLgZrBgIGUvGoZihOTEzEGrIgcWR1IDGsNqMbgK4RhHFqBmGYAdg0gjBezSCMSyMIE9SMDw91zeThhv8Ami96gQcIp6MAAAAASUVORK5CYII=);\n}\n");

lessPlugin.zip

The only way I could find to reference a package that contains a less file is to use something like @import '../../jspm_packages/github/distros/[email protected]/bootstrap/index.less'. Which is obviously going to easily end up in a maintenance nightmare down the road.

The import statement in the typescript plugin for example properly resolves the package, without any version information attached, unless the paths start with . or ...

Is there a way to specify the paths in a similar fashion with this plugin, e.g. @import 'bootstrap-less/bootstrap/index.less? Thanks.

Hi !

I read that "system-less-plugin supports the same build options" as plugin-css. But how exactly they can be set. I am doing this:

SystemJS.config({
    rootURL: './public'
});

But on building it seems it still looks for the files in the wrong folder. For example /my-file.less it is not resolved as ....../public/my-file.less. It keeps the the same path '/', that is obviously wrong.

Am I missing something?

I've been trying to bundle up the .less files contained in the bootstrap-less package, with no success so far. For example the command jspm bundle bootstrap-less/bootstrap/index.less! dist/external-deps-bootstrap.js, seems to compile the bootstrap less files. However, for dev purposes, if a .less file in the app references any .less file from bootstrap, all the .less files get downloaded again. Is it possible to ignore the compilation of these files but still bundle them? Would then a a second config be required to be referenced from the app in order to perform the compilation in the browser?

The config is below:

SystemJS.config({
  paths: {
    "github:": "jspm_packages/github/",
    "npm:": "jspm_packages/npm/",
    "web-client/": "ClientSrc/",
  },
  devConfig: {
  transpiler: "plugin-typescript",
  typescriptOptions: {
    "tsconfig": true
  },
  packages: {
    "web-client": {
      "main": "modules/main.dev.ts",
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "plugin-typescript"
        },
        "*.less": {
          "loader": "less"
        },
        "*.css": {
          "loader": "less"
        }
      }
    }
  },
 [... mappings ,etc.]
});

Any help would be appreciated. Thanks.

There are some console.log()s that make this module more verbose than it needs to be IMHO. They seem to have been added for debugging. Are you okay with removing them, or switching to debug?

In https://github.com/InstaGIS/systemjs-less-plugin/blob/master/less-builder.js#L26, rather than directly writing System, it is better to use compileOpts.systemGlobal as in SFX builds the System global is called $__System, which is tracked through this property.

Hello,

thank you for your work on this plugin. I see it's about to become an official SystemJS plugin for LESS.

A lot has changed in the source code. The plugin is now based on standard workflow introduced by css-plugin-base. Since last version of this plugin actual LESS compilation has moved to translate() function because this is the API.

Unfortunately this broke bundling in my project. I deal with legacy Bootstrap v2 styles. I need to override certain core Bootstrap variables and mixins. This was possible before because that version of the plugin concatenated all LESS files before compiling and rebased @import and url calls. The new version also rebases correctly. But I have no access to core Bootstrap vars in my project styles. And I can't simply @import (reference) core bootstrap.less because its path varies.

There are LESS plugins that can resolve jspm modules' paths like https://github.com/sebasrodriguez/jspm-less.

This way I'm able to @import (reference) bootstrap.less in my project styles. But unfortunately SystemJS rebasing of css urls stops working.

Then I came with other solution: I created a Gulp task that appends an @import to my project overrides to the end of bootstrap.less in its normal location before running jspm bundle. This works but LESS needs to know how to resolve jspm paths. If I manually prepend

var JspmLess = System._nodeRequire("jspm-less");

to https://github.com/HuasoFoundries/systemjs-less-plugin/blob/master/src/less.js and add it later during compilation:

less.render(style, {
...
plugins: [new JspmLess()]
...
});

then jspm is able to compile and bundle LESS. My project styles that are scoped in view components and use some bootstrap vars or mixins must only have @import (reference) bootstrap.less prepended.

But https://github.com/HuasoFoundries/systemjs-less-plugin/blob/master/src/less.js is supposed to run in browser and in Node. The System._nodeRequire doesn't work in browser when there's a need to dynamically load less files.

I don't know if I approach the problem correctly. My suggestion is to include JSPM path resolution for LESS directly in the systemjs-less-plugin.

This is new after recent changes. less-builder.js complains because sourceMap option was changed to false:

Trace: [TypeError: Cannot read property 'toString' of undefined]
    at eval (file:///Users/***/Documents/EP-trunk/jspm_packages/github/HuasoFoundries/[email protected]/less-builder.js:93:13)

When I manually changed sourceMap: false to sourceMap: outputOpts.sourceMaps then this happened:

Trace: { [Error: Cannot find module 'source-map']
  message: 'Cannot find module \'source-map\'',
  stack: 'Error: Cannot find module \'source-map\'\n    at Function.Module._resolveFilename (module.js:336:15)\n    at Function.Module._load (module.js:286:25)\n    at Module.require (module.js:365:17)\n    at require (module.js:384:17)\n    at Object.getSourceMapGenerator (/Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less-node/environment.js:12:16)\n    at new SourceMapOutput (/Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less/source-map-output.js:25:59)\n    at SourceMapBuilder.toCSS (/Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less/source-map-builder.js:8:31)\n    at ParseTree.toCSS (/Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less/parse-tree.js:33:47)\n    at /Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less/render.js:31:40\n    at /Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less/parse.js:63:17\n    at Object.finish [as _finish] (/Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less/parser/parser.js:183:28)\n    at Object.ImportVisitor._onSequencerEmpty (/Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less/visitors/import-visitor.js:35:14)\n    at ImportSequencer.tryRun (/Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less/visitors/import-sequencer.js:50:14)\n    at /Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less/visitors/import-sequencer.js:19:25\n    at fileParsedFunc (/Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less/import-manager.js:50:17)\n    at /Users/***/Documents/EP-trunk/jspm_packages/github/less/[email protected]/lib/less/import-manager.js:113:21' }
    at eval (file:///Users/***/Documents/EP-trunk/jspm_packages/github/HuasoFoundries/[email protected]/less-builder.js:93:13)

Hi,

I am trying to use it in my angular2 app, but it seems that the less files are not loaded and I can't understand why.

Any help please?

Hi there and thanks for this plugin.

Environment:
jspm: 0.17.0-beta.42
systemjs: 0.20.14
systemjs-builder: 0.16.9
systemjs-less-plugin: 2.0.0

When I try to build a static js with systemjs-builder I get error:

ReferenceError: window is not defined

I've debugged bit and it seems that this condition is not met, because this.builder is undefined and that's why less.browser.js is used also in node environment. Not sure why.