Building css about builder HOT 48 CLOSED

It's not too tricky to support, but I think it is probably better to compile LESS into CSS separately before publishing a package anyway - I don't want SystemJS to be a generic build one-stop build tool at all.

from builder.

Yes, this is planned. I still have a lot to do before I can prioritise this though. It may take a few weeks yet.

from builder.

Thanks, waiting.

from builder.

hello from the future :D
+1 for bundle-sfx supporf for css plugin (and fonts and images? :D)

I'm currently trying to use jspm for building an hybrid mobile app with cordova, and just find out this message in my console:

SystemJS Builder - Plugin for github:driftyco/[email protected]/css/ionic.css!github:systemjs/[email protected] does not support sfx builds

from builder.

Working on it!

from builder.

Is it difficult to add support for building LESS/SCSS (so that this files would be converted before including in build)?

from builder.

In my code I use 'style.less!' modules for styles. How is it possible to build with Systemjs builder?

from builder.

Where did you get the LESS plugin for SystemJS, did you write your own?

If so, the plugin will build through the translate hook when bundling, but there isn't currently a build mode to individually translate separate plugin files.

from builder.

I'm currently working on simple demo project for jspm while clearing all that info to myself. I will be very happy if it could be included in jspm "examples" to help other devs, but in the context of this issue I want to ask you @guybedford , what is your opinion about combining jspm with gulp task runner just because of compiling less, sass, coffees and other staff not directly related to jspm/systemjs foundation?

Also, I have a plan to use gulp for local webserver, and maybe some md5 cachebuster for asseets in local mode serving if you dont have a plan for implementing some cache features in jspm?

And off course, I have a dream to gather it all into one yeoman generator :D

from builder.

@guybedford I don't use LESS plugin while development, and don't serve LESS on the client, my develpment server builds css from less during runtime (it also replaces .less! for .css! in JS modules, so Systemjs requestes executed my styles as usual css). That is not the case for build workflow.

So is it possible to create a plugin that will be used by builder and that will bundle *.less as *.css?

from builder.

Am I right in thinking you're just using the normal CSS plugin to load the LESS files?

If your development server is building the LESS for you, then you are actually loading CSS not LESS, which is fine.

If this same process runs at the time of SystemJS builder ok, then the CSS bundling here that is planned to be worked on soon will bundle your separate LESS files, provided they are already converted into CSS.

from builder.

@guybedford on file system (FS) I have only *.less files and in my JS modules I import (.less!), but I my http dev server makes it look like completly *.css for browser, it replaces .less! module names for .css! in all served JS modules and when brower requests some.css server while handling request first looks for corresponding some.less file and if found sends compiled css.

Builder on the other hand takes files from FS, there are only *.less sources as I mentioned.

from builder.

Right, the easiest is probably to set up a build operation to glob *.less and convert them to *.css before the build.

Alternatively, yes we could construct a LESS plugin, let me bear this in mind.

from builder.

ok, thanks, will try it as soon css build is ready.

from builder.

Sure, it's third on my list right now, so will only start working on it in about two weeks.

from builder.

Hi @guybedford

Is it possible to extract all not js dependencies from the tree (like '.css!' files) ?

Is would be useful to ask for all the css dependencies and build it our own way.
Something like :

builder.trace('app/main')
.then(function(appTree){
  // Get the css tree somehow from your app, and deps, and deps of deps, ...
  return builder.trace('app/main', 'cssOnlyPlease')
  .then(function(cssTree) {
    // return all without the css, and the css only
    return [
      builder.subtractTrees(appTree, cssTree),
      cssTree
    ];
  });
})
.spread(function(appMinusCoreTree, appMinusStyleTree) {
  // Use the #createOutput output as a vinyl file for gulp ;)
  // (see https://github.com/systemjs/builder/blob/0.4.3/lib/builder.js#L54
  //      https://github.com/wearefractal/vinyl)
  //
  // or
  return [
    builder.buildTree(appMinusCoreTree,  'output-file.js'),
    builder.buildTree(appMinusStyleTree, 'output-file.css'),
  ];
});

from builder.

I'm building an application that utilizes many generic components, such as Grid, Tree, Draggable, Button, etc. Each of these components has SCSS (SASS) style files that provide generic styling which can be customized by setting variable values.

At the application level, I have a SCSS file that sets a bunch of variables, imports the SCSS from all components, and then any application-specific overrides. My build process then compiles all the SCSS into CSS.

Has any thought gone into how this approach could be supported with SystemJS and/or JSPM? In my case, my components can't just require('index.css!') because I want to allow the application to customize the output by setting variables and use a build process to generate final CSS.

In fact, I'm not sure I like the idea of third party modules automatically requiring CSS. If I want the generic CSS that a module provides, I can require it myself.

I totally understand how a module author would require its CSS so that users can get it working quickly without hassle. But as soon as a user wants to integrate the module into a full blown application, modules that require CSS often are a source of pain.

This comment isn't specific to SASS and Compass, as I'd need the same functionality if I was using LESS, Stylus, Rework, etc.

Modules already define a main for source code. Would it make sense to define something like css.main or sass.main, etc. as well? I'm sure you've put a lot more thought into this than I have, but it seems like exposing the styling entry points to a module would be helpful.

from builder.

@guybedford btw, while css build you probably going to minify and concat css sources? Do you have/solve a problem with relative (to this file) uls in initial css source?

from builder.

Yes - we normalize the relative URLs to work against the output file.

from builder.

Hi @guybedford
Following #12 (comment)
I made progress in the filtering issue. I'll send a fork tomorrow :)

Bundler.trace('src/a', config)
.then(function(trace) {

  // Custom filter to return a tree with the modules
  // with a name starting with "vendor:"
  // like "vendor:foo"
  trace.filter(function(branch){
    return branch.name.indexOf('vendor:') === 0;
  });

  // Shortcut filter to return a tree with the modules
  // with a address finishing with "js"
  // like "vendor:foo" for "paths: {'vendor:*': 'vendor/*.js'}"
  // (the "deps" and "depMaps" are filtered too)
  trace.filterExtension('js');


  // Yet to do
  trace.concat(); 
  // return the concatenated raw output like 
  // https://github.com/systemjs/builder/blob/0.4.3/lib/builder.js#L54
  // I think


  // Yet to do
  trace.pluckAdresses(); 
  // return all the address modules in the tree

});

from builder.

Still in progress but check this : douglasduteil/builder#refacto-builder-new-api-proposal

from builder.

@douglasduteil this is an interesting API - I can see how this makes the trace tree a lot more easy to manipulate.

It would be nice if we could create an API that allowed the trace to just use the standard array functions - I'd like to keep the surface area to a minimum.

Will have a look again when I next do the build refactoring for the CSS and conditional stuff. Hoping to be able to do that sometime soon.

from builder.

+1

from builder.

Only today bumped into "SystemJS Builder - Plugin for "..." does not support sfx builds".

Just checking whether is there a plan to support it in the near future?

from builder.

@guybedford just a little question.
Do you think that the builder must inline all it can by default ?
So if you import a css in a script (import 'my/style.css!') the content of the file will be inlined and added by the css plugin on the head tag at run time ?

from builder.

@katrotz the implementations need to be plugin-specific. SFX support for the CSS plugin can certainly be added.

from builder.

@douglasduteil there are two styles of inlining - inlining the CSS in the JS file and injecting into the head, or to create a separate CSS file to go alongside the bundle file of JS.

from builder.

@guybedford @douglasduteil I'm not sure is it directly related to bundling, but can be.
I have had a problem to System.import some package before some others. System.import(...).then is called after js files of first package is loaded but styles continues to load async with second package. Concretely, I want to load all of angular material (scripts and styles) to show page layout before rest of app is loaded.

from builder.

@djindjic to clarify - you are loading a package which depends on CSS, and then after that importing another package. You then bundling the first package, and load it from the bundle, but the CSS isn't loaded by the time the System.import for that package has finished? Can you share a test project for this at all?

from builder.

I'm outdoor and I have made few commits from my phone, but I think this is right example. Something like this. You can try http://jspm-sample.tk (deployed by travis, is that awesome? :-D), I don't have dev tool right now but it was same situation as I have described above. All except angular material are bundled together but material is loaded just before it. Material css in not garanted to be loaded before bundle?

from builder.

Angular material depends on angular, which is loaded from the bundle, which then also contains app. Thus angular-material is always loading last.

from builder.

Hmmm ok, but, hypothetically, if I make two bundles with jspm arithmetics and load angular+ang-material first, will material css be loaded before app's bundle?

from builder.

Yes, if you have included app in a separate bundle. Note that trying to ensure css order is not a good idea. Rather use CSS specificity - https://github.com/guybedford/require-css/#modular-css.

from builder.

I think I don't understand last advice. I mean, its ok to override css by more specific identifier, but how this is related with css files/bundles loading order? Basically, I am looking for some optimization of page first load. Maybe I could mock and inline all needed classes (as google page insights recommend) to show initial screen before real css is loaded, but its seems a little messy for me at this moment.

from builder.

Right, ok my point on CSS was irrelevant then. Rather you just need to create a bundle that has a minimal dependency graph. The point is though that if your application code is dependent on angular and angular-material, then there's no way to have a minimal page load less than that - you need to design your dependency tree from the beginning around the minimal page load if this is what you're after (this is not importing angular or angular material in the bootstrapper code).

from builder.

On the subject of css inlining, I wrote such a plugin a few weeks ago which does this:
https://github.com/jamiewinder/systemjs-plugins/blob/master/css-inline.js

Admittedly I've not actually used or throughly tested this, but it's there if anyone is interested. Unrelated, but there is also a pair of Handlebars loaders in the same repo.

from builder.

Thanks - yes this is the approach we'll be using in the css plugin!

from builder.

This is now working on SystemJS builder master, against the builder branch of the CSS plugin -https://github.com/systemjs/plugin-css/tree/builder. Release to follow this week!

from builder.

I've described the feature for those interested in systemjs/plugin-css#6. Docs will follow on release.

from builder.

@guybedford awesome!! .. can't wait to test it :)

@djindjic maybe you wanna take a look into my angular-jspm example app (https://github.com/ng-next/ng-next-example) how I got around the problem to override angular-material styles (admittedly depending on css load order at some points .. but using CSS specificity where possible).

(In https://github.com/ng-next/ng-next-example/blob/master/front/main/bootstrap.js) I'm bootstrapping like this:

System.import( 'main' )
.then( function () {
  System.import( 'app.css!' );
})
.catch( console.error.bind( console ));

from builder.

@guybedford in https://github.com/guybedford/require-css/#modular-css it says "Reset and global styles are a repeated dependency of all modular styles that build on top of them".
Does that mean that every module that imports my-module.css! (which overrides/refines e.g. angular-material.css) should import angular-material/angular-material.css! as well?

(edit) OT: which leads me to another thought. should each module that uses the angular object import angular as well? .. or is it enough to import the angular dependency in the main module? (which is what I'm currently doing .. adding angular to the JSHint global variables).

from builder.

@andreasgrimm yes, you should never use globals and always import angular wherever it is used. You may get sporadic builder issues otherwise. For material the same idea applies, including for the material CSS dependency.

from builder.

Published in SystemJS Builder 0.7.3, [email protected].

from builder.

Note this also needs [email protected].

from builder.

Off topic but - @andreasgrimm you might be interested in https://github.com/amcdnl/systemjs-test build system ... similar to yours but automatic bundling based on deps

from builder.

Thanks @amcdnl for mentioning your project. I'll try to take a deeper look soon.

from builder.

I'm trying to build less with builder so I installed

jspm npm:less

var less = require('npm:less');

Here comes an error in one of the less.js dependency modules:

Error evaluating file:..../jspm_packages/npm/image-size@0.
3.5/lib/index.js
Module ../lib/detector not declared as a dependency.]

What can be done about it?

from builder.

@whitecolor I've posted jspm/registry#221 on the registry to trouble shoot working out whether to load from GitHub or npm and the exact override to use.

from builder.