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 files 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 assigned to a variable named after the name of the file that was imported (e.g importing config.js would create a $config variable), which will be exposed 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. 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 a variable named after the file which is imported (e.g $config from a config.json file) and then made available to Sass. Under the hood, various cell tools (such as this()) look for a $config variable, so it's recommended to import your config files as config.js.

config.js

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

styles.scss

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

@include module {
    color: this('someProps'); // returns value of `theme.colors.secondary`
}

Make sure to read the Synergy-Sass-Importer docs for full setup and usage instructions; including how to use themes and setting up a local development environment with hot reloading (if using React/Webpack)

JSON

JSON files are useful for static configuration, but if you require themeing or any sort of logic, consider using JavaScript instead. The JSON object will be converted to a Sass map and attached to a variable named after the file which is imported (e.g $config from a config.json file) and then made available to Sass. Under the hood, various cell tools (such as this()) look for a $config variable, so it's recommended to import your config files as config.json.

/config.json

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

/styles.scss

@import 'config.json';

@include module('myModule') {
    color: this('foo');
    height: this('bar', 'qux');
}

Output

.myModule, [class*="myModule-"] {
    color: red;
    height: 10px;
}