How can I use real-time CSS styling with Titanium and Pixate

Question

I want to use real-time CSS styling in a Titanium app with Pixate. In their documentation, they mention a video which demonstrates how to setup this in XCode.

Another video demonstrates this within a Titanium App, but I didn't find an explanation on how to achieve this.

How can I enable real-time CSS styling?

Answer 1

After some digging I did find the way to do it. I'm not sure if this is the intended way, however it works fine.

Put this code in your app.js and the simulator will instantly refresh with changes when saving the CSS file.

var PX = require('com.pixate.framework');
PX.styleSheetFromFilePathWithOrigin({ 
    monitor: true,
    origin: 0,
    filename: '/absolute/path/to/app.css'
});
    // you can add multiple css files to monitor
PX.styleSheetFromFilePathWithOrigin({ 
    monitor: true,
    origin: 0,
    filename: '/absolute/path/to/another_file.css'
});

Answer 2

Pixate maintains a Titanium module for this very purpose.

https://github.com/Pixate/Titanium-Pixate