gulp-style-vars

A simple module to allow style configuration to be shared across the codebase.

Each input file is given as an anonymous Javascript function which returns a JSON object, which can be parsed into readable representations for each system.

All basic JSON structures are supported, including objects and lists.

The following is a basic example of the input file used by the system.

1function() {
2  return {
3    "sidebar-width": "50px",
4    "color-scheme": {
5      "theme": "#666666",
6      "background": "#333333"
7    },
8    "width-breakpoints": [
9      "800px",
10      "1200px"
11    ]
12  };
13}

Currently, this representation can be automatically converted to both SCSS and a standalone JS module.

StyleVars.toSass(src_globs, dest_folder, options)

Takes any file matching src_globs, interprets it as the StyleVars representation and converts to a SCSS variable file and outputs it to the specified folder.

Configurable options are

• options.prefix String - A prefix to add to the compiled SCSS files, defaults to "_".
• options.extension String - The extension to set for the output files, defaults to ".scss".
• options.indent Integer - The number of spaces to indent by, defaults to 4.
• options.label String - A label to be used for logging, defaults to a string representation of the source globs.
• options.cb Function - A function to call on completion, will not be called if none is provided.

Running the example above, we get

1$sidebar-width: 50px;
2$color-scheme: (
3    "theme": #666666,
4    "background": #333333
5);
6$width-breakpoints: (
7    800px,
8    1200px
9);
10

StyleVars.toModule(src_globs, dest_folder, options)

Takes any file matching src_globs, interprets it as the StyleVars representation and converts to a standalone Javascript module (which can be required) and outputs it to the specified folder.

Configurable options are

• options.prefix String - A prefix to add to the compiled JS files, defaults to "".
• options.extension String - The extension to set for the output files, defaults to ".js".
• options.definition String - A definition prefix to add to the contents of the compiled file, defaults to "module.exports = ".
• options.indent Integer - The number of spaces to indent by, defaults to 4.
• options.label String - A label to be used for logging, defaults to a string representation of the source globs.
• options.cb Function - A function to call on completion, will not be called if none is provided.

Running the example above, we get

1module.exports = {
2    "sidebar-width": "50px",
3    "color-scheme": {
4        "theme": "#666666",
5        "background": "#333333"
6    },
7    "width-breakpoints": [
8        "800px",
9        "1200px"
10    ]
11};

More complicated input files

Though everything can be done statically in the input file, all code will be evaluated on load, so more complicated structures are possible. Anything that returns a JSON object is valid, and will be compiled.

input: config.js

1function() {
2  var colors = {
3    "red": "#ff0000",
4    "green": "#00ff00"
5  };
6
7  var config = {
8    "theme-color": colors["red"],
9    "sidebar-width": "200px",
10    "app-width": "1000px"
11  };
12
13  config["content-width"] = (parseInt(config["app-width"]) - parseInt(config["sidebar-width"])) + "px";
14
15  return config;
16}

output: config.js

1module.exports = {
2    "theme-color": "#ff0000",
3    "sidebar-width": "200px",
4    "app-width": "1000px",
5    "content-width": "800px"
6};

output: _config.scss

1$theme-color: #ff0000;
2$sidebar-width: 200px;
3$app-width: 1000px;
4$content-width: 800px;