evaluate write CSS with myth preprocessor

[gasolin]

myth is a CSS pre-processor act like CSS polyfill https://github.com/segmentio/myth

Looks more fit for our concerns.

Myth lets you write pure CSS while still giving you the benefits of tools like LESS and Sass. You can still use variables and math functions

benifits:

• real css, so no interpreter needed in development phase
• can remove browser-specific prefix, which could be generated by pre-processor.
• css variable will be pre-processed for production code, less performance impact

need to do:

• check if it's able to generate specific-browser prefix (ex: pass 'ff 28' for ff only prefix) https://github.com/segmentio/myth/issues/16 (@basiclines nice to see you again :smile: )

[basiclines]

Hey @gasolin nice to see you agian too! I'm not longer involved in the Building Blocks development, and as far as i know @rnowm is taking care of it.

Anyway i've been testing myth.io couple of months ago and i was quite satisfied but i think that being able to target specific-browser prefix is not availiable right now. (in fact one of the comments on the issue that you linked is mine :D)

But, myth.io is based on rework which have differents built-in separated modules. This means that you can use myth.io var- like syntax without needed to have the prefixes output, just the features that you want to use.

I made a rudimentary script to test this out some time ago, as rework is kind of more manually work with nodeJS than myth.io wich is just running a CLI:

// Dependencies
var fs = require('fs');
var rework = require('rework');
var vars = require('rework-vars')();

// Global config
var src_path = "src/";
var dist_path = "";
var dist_name = "distributionfile.css";

// Files arrangement
var css = "";
var files = [
    'module-a.css',
    'module-b.css',
    'module-c.css',
];

// Get CSS files
files.forEach(function(key) {
    css += fs.readFileSync(src_path+key, 'utf8');
});

// Rework them only with rework-vars
var converted = rework(css)
    .use(vars)
    .toString();

// Output CSS
fs.writeFileSync(dist_path+dist_name, converted);

Hope it helps you guys on taking a step forward in the Building Blocks development :D

[gasolin]

Thanks @basiclines for feedback. I'd like to have the auto-prefixing integration, so we could generate gaia and cross platform version with a single future-proved code base.

[gasolin]

for https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks/blob/v2/style/headers.css

There's https://github.com/simme/rework-importer can interpret and inline all @import css into single file.