Tools api (stealTools.build({...) not processing steal-css plugin

[DaveO-Home]

Using v1 config - current v2.0.8

stealTools.build({
        configMain: "stealjs/appl/js/config",
        main: "stealjs/appl/js/index",
        baseURL: "../../"
    }, {
            sourceMaps: false,
            bundleAssets: {
                infer: true,
                glob: [
                    '../images/favicon.ico',
                    '../appl/testapp.html',
                    '../appl/views/**/*',
                    '../appl/templates/**/*',
                    '../../README.md'
                ]
            },
            bundleSteal: false,
            dest: "dist",
            removeDevelopmentCode: true,
            minify: true,
            maxBundleRequests: 5,
            maxMainRequests: 5
        });

Builds everything except the index.css bundle

package.json...

"ext": {
      "css": "steal-css"
    },
    "cssOptions": {
      "timeout": "15"
    },
    "plugins": [
      "steal-css"
    ],

config

require("package.json!npm");
var steal = require("@steal");
/*
 * During the production build you can ignore the "Unable to load CSS in an environment without a document." exception.
 */
steal.import("node_modules/bootstrap/dist/css/bootstrap.min.css").then(function () {
    steal.import("stealjs/appl/css/site.css");    //Make sure site.css loads after bootstrap for sticky nav
});
steal.import("node_modules/tablesorter/dist/css/theme.blue.min.css");
steal.import("node_modules/tablesorter/dist/css/jquery.tablesorter.pager.min.css");  
steal.import("node_modules/font-awesome/css/font-awesome.css");

Note: stealTools.streams will build the bundles including index.css but fails to glob the artifacts and build steal.production.js

gulp.task('build', ['build2', 'bootlint'], function () {
    const graphStream = stealStream.graph({
        configMain: "stealjs/appl/js/config",
        main: "stealjs/appl/js/index",
        baseURL: "../../"
    }, {
           sourceMaps: false,
            bundleAssets: {
                infer: true,
                glob: [
                    '../images/favicon.ico',
                    '../appl/testapp.html',
                    '../appl/views/**/*',
                    '../appl/templates/**/*',
                    '../../README.md'
                ]
            },
            bundleSteal: false,
            dest: "dist",
            removeDevelopmentCode: true,
            minify: true,
            maxBundleRequests: 5,
            maxMainRequests: 5
        });

    return graphStream
        .pipe(stealStream.transpile())
        .pipe(stealStream.minify())
        .pipe(stealStream.bundle())
        .pipe(stealStream.concat())
        .pipe(stealStream.write());
});

[matthewp]

Is your question about using bundleAssets with the stream API?

[DaveO-Home]

I would prefer using just stealTools.build({..., steal-css does not work with v2 (works with streams). So my work-around was to use both. It appears that bunldeAssets fails with the stream Api which is another issue.

[matthewp]

So what's the problem with the stealTools.build() method?

[DaveO-Home]

Expecting stealTools.build to generate ../dist/bundles/stealjs/appl/js/index.css. This does not happen, the index.js file does get generated. All other files are generated as expected.

[matthewp]

And your CSS is all imported in that config file?

[DaveO-Home]

Yes, I just pushed out my work around, @github.com/DaveO-Home/embedded-acceptance-tests. The code is in ../public/stealjs/build/Gulpfile.js - starting at line 86. You can change
gulp.task('build2', ['clean', 'bootlint'], function () { to
gulp.task('build2', ['clean'], function () {
and run "gulp build2" stand-alone. Don't forget to run "npm install"
And yes all css is defined in the config

[matthewp]

That's not how people normally import css. It's not being built because those CSS files are not part of your dependency graph. What's the reason for dynamically importing your CSS in your config file?

[DaveO-Home]

So what do you suggest, they need to be loaded in a certain order. The streams api picks them up.. I'm gone for several hrs.

[matthewp]

I would put this in your index.js:

require("bootstrap/dist/css/bootstrap.min.css");
require("tablesorter/dist/css/theme.blue.min.css");
require("tablesorter/dist/css/jquery.tablesorter.pager.min.css");
require("font-awesome/css/font-awesome.css");

steal.import("stealjs/appl/css/site.css"); 

And then update your package.json to include the dynamically imported one as a bundle:

{
  ...
  "steal": {
    "bundle": ["stealjs/appl/css/site.css"]
  }
}

[DaveO-Home]

When I put the require("... ahead of steal(.. in index.js I get " ReferenceError: require is not defined" at build time; when I put the require(".. inside the steal call I get; "TypeError: "require is not a function" in the browser.
Your config definitely wakes of steal-css and the build is much cleaner, but the node-module scripts are not found, even when I load via "steal.import...". It will work however, if I copy the node_module css scripts to ".../dist". Is that how it's works? Before, tools was putting all css into 1 file, "index.css".

When I build it from config using steal.import I get
BUNDLE: stealjs/appl/js/index.css

• node_modules/bootstrap/dist/css/bootstrap.min.css!steal-css@1.3.2#css
• node_modules/font-awesome/css/font-awesome.css!steal-css@1.3.2#css
• stealjs/appl/css/site.css!steal-css@1.3.2#css
• node_modules/tablesorter/dist/css/theme.blue.min.css!steal-css@1.3.2#css
• node_modules/tablesorter/dist/css/jquery.tablesorter.pager.min.css!steal-css@1.3.2#css

When I use it in index.js with the new defined bundle, I get;
BUNDLE: stealjs/appl/css/site.css

• stealjs/appl/css/site.css!steal-css@1.3.2#css

[DaveO-Home]

Configuring individual bundles for each css file works, however load time seems to be slightly increased.
BUNDLE: node_modules/bootstrap/dist/css/bootstrap.min.css

• node_modules/bootstrap/dist/css/bootstrap.min.css!steal-css@1.3.2#css
  BUNDLE: node_modules/font-awesome/css/font-awesome.css
• node_modules/font-awesome/css/font-awesome.css!steal-css@1.3.2#css
  BUNDLE: node_modules/tablesorter/dist/css/theme.blue.min.css
• node_modules/tablesorter/dist/css/theme.blue.min.css!steal-css@1.3.2#css
  BUNDLE: stealjs/appl/css/site.css
• stealjs/appl/css/site.css!steal-css@1.3.2#css
  BUNDLE: node_modules/tablesorter/dist/css/jquery.tablesorter.pager.min.css
• node_modules/tablesorter/dist/css/jquery.tablesorter.pager.min.css!steal-css@1.3.2#css

[DaveO-Home]

FYI, I attempt to keep this Demo up to date because it is referenced via "fuse-box" as a testing resource.
@ https://fuse-box.org/docs/test-runner/test-runner
Canjs is getting some exposure via this.....

[matthewp]

< When I put the require("... ahead of steal(.. in index.js

If you are using steal syntax then instead do it like this:

steal("bootstrap/dist/css/bootstrap.min.css",
"bootstrap/dist/css/bootstrap.min.css",
"tablesorter/dist/css/theme.blue.min.css",
"tablesorter/dist/css/jquery.tablesorter.pager.min.css",
"font-awesome/css/font-awesome.css",

// Your other imports here
, function() {
  steal.import("stealjs/appl/css/site.css"); 
});

[DaveO-Home]

Now that was an easy fix..thanks