prophet-xcss

This has nothing to do with xCSS! I just came up with the same name and noticed it was already taken later.

This is a very simple preprocessor library for express to use different css styles for desktop and mobile.

prophet-xcss is completely backwards compatible with regular css.

In order to use this library, you simply have to include it in your express server like this:

const express = require('express')
const xcss = require('prophet-xcss')
const app = express()

app.use(xcss(['.', './css'])) 
//Include all directories, where you want to use prophet-xcss. 
//File paths can be absolute or relative! 

You can now write both desktop and mobile styles in your css, by just seperating them with a +

body{
    background-color: red + blue;
    /*This is now going to be red on desktop and blue on mobile*/

    font-size: _ + 200%;
    /*Use a _ if you want the property to not exist on one platform.*/
}

This gets served to a desktop user as

body{
    background-color: red;
}

To a mobile user it will look like this

body{
    background-color: blue;

    font-size: 200%;
}

You can also supply the paths lazily as functions. This allows you to either generate them lazily if getting your paths is somehow expensive. Additionally this can be used to dynamically change the directories you want to allow if you generate your css dynamically or something similar.

const express = require('express')
const xcss = require('prophet-xcss')
const app = express()

let mainDirectories = ['public', 'public/css']
const getOtherDirectories = () => otherDirectories.filter(x => x.includes('css'))

app.use(xcss([() => mainDirectories, () => otherDirectories])) 

mainDirectories.push('public/more_css')

---

Options

Fast Mode

app.use(xcss(['./css'], {fastMode:true}))

• Fast mode is disabled by default.
• Fast mode caches the final CSS, so it does not have to recalculate the css for each request.
• This can especially improve performance if you have a lot of CSS.
• You have to restart your server every time you make any changes to the CSS!

Verbose

app.use(xcss(['./css'], {verbose:true}))

• The verbose flag is disabled by default.
• Similar to the --verbose flag on a lot of cli-tools, it logs a lot of additional information to the console.
• This might be useful for debugging, but verbose mode should NOT be used in production code!