Shared variables between JS/SCSS

[jesse-mm]

A lot of MM projects already use sassify-webpack plugin for sharing variables. Since newer releases of webpack this became a bit buggy.

This PR will add node-sass-json-importer for node-sass. This allows sharing variables using JSON with node-sass. Previously intergration with node-sass-json-importer this wasn't possible due to the vue-loader. The new version of vue-loader supports passing objects to other loaders.

To get all this working, I needed to removed extract-text-webpack-plugin (beta status) reasoning) with mini-css-extract-plugin. Also upgraded webpack to 4.4.x so it's compatible with mini-css-extract-plugin.

Note Maybe it's even a good idea to update webpack to the latest version

[ThaNarie]

Should we update

vue-skeleton/src/asset/style/util/_variable.scss

Line 11 in 166ba41

$mediaQueries: ();

to load load the queries from an empty JSON file with the loader?

Should we by default include the DeviceStateTracker to be configured from the json files? Or at least add some docs on how to use json variables in both JS and CSS?

[jesse-mm]

@ThaNarie I was thinking to leave out mediaQueries in JSON. Just wanted to have shared-variables stub so people can add their own ones. We could opt for some default ones;

After the PR merge I'll update the docs on the wiki about using shared-variables.json, and have some instructions how to integerate with DeviceStateTracker

FYI in a current project I've got this in my variables.scss:

/**
* $mediaQueries
* MediaQueries are exposed using data/shared-variables.json
* DO NOT IMPORT mediaQueries.scss as it used as reference file for the IDE only
* When adding mediaQueries to shared-variables update mediaQueries.scss file as well to have IDE
* autocompletion.
*/

[ThaNarie]

Not sure if we want/need a data/shared-variables.json, each different type of variables could have its own json file?

[jesse-mm]

True that; We could remove it from utils.scss and just add a proper description on using this functionality in the wiki.

[hjeti]

Looks good to me.

[jesse-mm]

I've updated this PR with latest webpack and mini-css-extract-plugin and made media queries 'shared' by default.

Docs (will be added to the wiki once merged)

Sharing variables between JavaScript and SASS

Vue skeleton comes with the node-sass-json-importer support. The skeleton imports by default mediaQueries.json which contains a standard set of media queries. This setup plays nicely with the respond-to mixin provided by seng-scss.

Using mediaQueries together with seng-device-state-tracker

To use seng-device-state-tracker make sure it is installed first. Add it by running yarn add seng-device-state-tracker. The snippet below is a simple example setup using mediaQueries.json together with seng-device-state-tracker.

startUp.js

import DeviceStateTracker from 'seng-device-state-tracker';
import { mediaQueries } from 'data/mediaQueries.json';

...
Vue.use(VueExposePlugin, {
    // ... other exposed variables to the VueInstance
    $deviceStateTracker: new DeviceStateTracker({
      mediaQueries,
      deviceState: Object.keys(mediaQueries).reduce(
        (mediaQueryList, mediaQueryName, index) => ({
          ...mediaQueryList,
          [mediaQueryName]: index,
        }),
        {},
      ),
      showStateIndicator: process.env.NODE_ENV !== 'production',
    }),
});

More information on usage can be found here seng-device-state-tracker.

[hjeti]

Looks good to me.