# CSS built into javascript

**URL:** <https://forums.bitovi.com/t/css-built-into-javascript/546>\
**Category:** StealJS\
**Created:** [February 6, 2017, 9:19am UTC](https://forums.bitovi.com/t/css-built-into-javascript/546 "2017-02-06T09:19:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [February 6, 2017, 9:19am UTC](https://forums.bitovi.com/t/css-built-into-javascript/546/1 "2017-02-06T09:19:21Z")

</div>

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"
  }
}
```

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [February 6, 2017, 10:50pm UTC](https://forums.bitovi.com/t/css-built-into-javascript/546/2 "2017-02-06T22:50:55Z")

</div>

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](http://stealjs.com/docs/StealJS.topics.migrating-one.html) covers everything you need to know.

---

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [February 7, 2017, 7:50am UTC](https://forums.bitovi.com/t/css-built-into-javascript/546/3 "2017-02-07T07:50:47Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![pYr0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/pyr0x/32/95_2.png) [@pYr0x](https://forums.bitovi.com/u/pYr0x)\
**Post date:** [February 7, 2017, 8:13am UTC](https://forums.bitovi.com/t/css-built-into-javascript/546/4 "2017-02-07T08:13:57Z")

</div>

do you have a small sample app?

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [February 7, 2017, 5:10pm UTC](https://forums.bitovi.com/t/css-built-into-javascript/546/5 "2017-02-07T17:10:18Z")

</div>

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

```

Should be all you need.

---

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [February 8, 2017, 8:32am UTC](https://forums.bitovi.com/t/css-built-into-javascript/546/6 "2017-02-08T08:32:44Z")

</div>

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.