Remove loading css in production

StealJS
1

I’ve got to use this environment where I can copy/paste custom javascript and css. I’ve got 1 form for all javascript and 1 form for css.

So I’ve got this build.js
var stealTools = require(‘steal-tools’);

stealTools.build({
        config: __dirname + '/package.json!npm'
    },
    {
        bundleSteal: true,
        debug:true,
        minify:false
    }
);

This indeed creates a standalone .js and .css
Except the .js still has import statements for the css, which doesn’t work in this environment.

How do I set it up that I can still build both files, but without the reference to css in the final .js? Would this be possible?

2

I’ve tried using removeDevelopmentCode

build.js

var stealTools = require('steal-tools');

stealTools.build({
        config: __dirname + '/package.json!npm'
    },
    {
        bundleSteal: true,
        minify:false
    }
);

stealTools.build({
        config: __dirname + '/package.json!npm'
    },
    {
        dest: __dirname + '/dist/nocss',
        bundleSteal: true,
        minify:false,
        removeDevelopmentCode:false
    }
);

In main.js:

//!steal-remove-start
import 'styles/imports.css';
import 'styles/loading.css';
import 'styles/flex.css';
import 'styles/gsa_style.css';
//!steal-remove-end

To my surprise the code is built twice, but both with css included.
So apparently the removeDevelopmentCode settings doesn’t have any effect

What am I doing wrong?

3

You can use steal’s bundle option to create separate bundles for your js and css files:

http://stealjs.com/docs/StealJS.guides.progressive_loading.html#update-bundles-to-build

4

But would’t the code to load the css still be in the javascript?

5

Yeah, you’re right, it would. You could map the css files to @empty in production mode if that’s what you’re trying to do.

I’m not positive how that will affect the build output though. Not sure if the css file bundles will still be created with the actual CSS or not.

6

I noticed it works if I remove the line System.bundles={…} in the generated js.
Could it be possible to remove that line using streams? https://stealjs.com/docs/steal-tools.streams.write.html
From the documentation I don’t really understand how this should be used

7

I’ve ‘solved’ it using an awk script that strips the references to the css-files from the result. Hey, it works.

8

A couple other options.

You could use steal-conditional to only load the css files in development. Here’s a guide for using steal-conditional: http://stealjs.com/docs/StealJS.guides.boolean_conditional_loading.html . And you’d use steal.isEnv('production'), which is explained here: http://stealjs.com/docs/steal.isEnv.html.

Another option is to not put the css import statements in your JS at all, and make them meta deps in the envs config so they will load in development only.

9

but would the generate the concatenated css?