CSS built into javascript

StealJS
1

I’m trying to build a standalone js and css, but I’m running into a few problems:

  • standalone.js contains css making it invalid code
  • standalone.js is not minified
  • main.css is empty

Can you see what’s wrong with my script and/of package.json?

Here’s my build-script:
var stealTools = require(‘steal-tools’);

stealTools.build({
    steal: {
        config: __dirname+'/package.json!npm',
    },
    outputs: {
        "+global-css": {
            dest: __dirname + '/dist/main.css'
        },
        "+standalone": {
            dest: __dirname + '/dist/standalone.js'
        }

    }
});

(part of) my package.json:

{
  "name": "configurator",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "system": {
    "npmAlgorithm": "flat",
    "main": "./src/main.js",
    "npmIgnore": [
      "devDependencies"
    ],
    "envs": {
      "build-development": {
        "map": {
          "jquery": "@empty"
        }
      }
    }
  },
  "steal": {
    "plugins": [
      "steal-css"
    ]
  },
  "scripts": {
    "build": "steal-tools",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "raw-loader": "^0.5.1",
    "steal": "^0.16.43",
    "steal-css": "^1.2.1",
    "steal-tools": "^1.0.0",
    "system-json": "^0.1.0",
    "webpack": "^1.14.0"
  },
  "dependencies": {
    "can-component": "^3.0.3",
    "can-compute": "^3.0.4",
    "can-connect": "^1.0.14",
    "can-control": "^3.0.4",
    "can-define": "^1.0.5",
    "can-event": "^3.0.2",
    "can-route": "^3.0.5",
    "can-route-pushstate": "^3.0.1",
    "can-set": "^1.0.2",
    "can-stache": "^3.0.13",
    "can-util": "^3.2.2",
    /* snip */
    "steal": "^1.0.0",
    "steal-css": "^1.2.1",
    "steal-stache": "^3.0.3"
  }
}
2

Hi @Arjen_Haayman, a couple questions:

  1. Could you clarify what you mean when you say “standalone.js contains css making it invalid code”?

  2. Have you tried this with StealJS 1? It’s not a huge jump from 0.16 and the migration guide covers everything you need to know.

3

  1. The css is concatenated into the standalone.js.
    Like so: (snippet)

    exports.getDocument = getDocument;
    exports.getHead = getHead;
    exports.locateScheme = true;
    exports.buildType = ‘css’;
    exports.includeInBuild = true;
    }(function () {
    return this;
    }()));
    });
    /jquery.loadmask@1.0.1#jquery.loadmask.css!steal-css@1.2.1#css/
    @CHARSET “UTF-8”;

    /************************************/
    .mask-hidden {
    overflow: hidden !important;
    }

    .mask-relative {
    position: relative;
    }

  2. Using steal-tools@latest (1.1.1) doesn’t make any difference.

4

do you have a small sample app?

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

Should be all you need.

6

Yes that’s it! Thanks.

Now I know the solution I was able to find it in the documentation.
Unfortunately seems too fragmented for me te find this independently.

1 Like