JavaScript Configuration

If you are using Node.js, you can use JavaScript (or JSON) to handle the configuration for your Cell component using Synergy-Sass-Importer. This essentially lets you import JavaScript/JSON file into your Sass file. The JavaScript file can either be a JSON file, a JavaScript file that export an object, or a JavaScript file that exports a function which returns an object. The object will be converted to a Sass map and expose the $config variable to Cell.

• Setup
• Usage

Setup

Cell comes with @onenexus/synergy-sass-importer as a dependency so does not need to be manually installed

• Webpack
• CLI

Webpack

ES6 Imports

import SynergySassImporter from '@onenexus/synergy-sass-importer';

CommonJS

const SynergySassImporter = require('@onenexus/synergy-sass-importer');

Configuration

{
    test: /\.scss$/,
    use: [
        {
            loader: 'sass-loader', 
            options: {
                importer: SynergySassImporter
            }
        }
    ]
}

CLI

In Node.js projects with Node-Sass and Cell installed, no setup is needed if you generate your CSS using the node-sass CLI command

node-sass /PATH/TO/app.scss --importer=node_modules/@onenexus/synergy-sass-importer/dist/synergy-sass-importer.js

Usage

Once your Sass compiler has been setup to use Synergy-Sass-Importer, you can begin to import JavaScript/JSON files in your .scss files.

See the Synergy-Sass-Importer Wiki for full documentation

JavaScript

Using JavaScript to handle your module's configuration is the most flexible means to do it. It allows you to easily use framework-agnostic JavaScript-based themes within your project as well as allows for logic within your module's configuration.

File Exports an Object

If your JavaScript configuration file exports a plain JavaScript object, please see the JSON section for static configuration where the same rules apply. If you require themeing or any sort of logic, consider exporting a function instead.

File Exports a Function

This is the most flexible way to handle module configuration (learn more). It allows you to use themes and easily share properties accross modules. Simply export a function that takes an optional single parameter as the input. The parameter will expose the project's theme (learn more). The function should return an object. The object will be converted to a Sass map and attached to the $config variable which will be exposed to Cell.

config.js

export default (theme) => ({
    'name': 'myModule',
    'color': theme.colors.secondary,
    ...
})

styles.scss

@import 'config.js'; // `$config` will now be defined in Sass

@include module {
    ...
}

JSON

JSON files are useful for static configuration, but if you require themeing or any sort of logic, consider using JavaScript instead.

It's important to note that upon importing a .json file into your .scss file, the top-level keys become available as variables:

/config.json

{
    "foo": "red",
    "bar": {
        "qux": "10px"
    }
}

/styles.scss

@import 'config.json';

.fizz {
    color: $foo;
    height: map-get($bar, 'qux');
}

Output

.fizz {
    color: red;
    height: 10px;
}

The best way to organise JSON configuration files for Synergy modules is to have a single top-level key called config which contains your module's configuration:

{
    "config": {
        "name": "myModule",
        "color": "red",
        ...
    }
}

Upon importing this configuration file into the module's corresponding .scss file, the $config variable is now exposed to Cell using the values from the JSON file.

For more information on how to create a Synergy module using Cell and JSON configuration, see the Creating a Module page.