feat(styles): add get-data sass function with initial colors

Author: richrdkng

package-lock.json

@@ -67,6 +67,7 @@
     "lodash": "^4.17.11",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.11.0",
+    "node-sass-utils": "^1.1.2",
     "popper.js": "^1.15.0",
     "sass-loader": "^7.1.0",
     "semantic-release": "^15.13.3",

package.json

@@ -0,0 +1,2 @@
+$NODE-GREEN: get-data('green')
+$NODE-GRAY:  get-data('gray')

src/styles/constants.sass

@@ -0,0 +1,51 @@
+'use strict'
+
+const sass = require('node-sass')
+const utils = require('node-sass-utils')(sass)
+
+const DEFAULT_FALLBACK = utils.castToSass('#FF0000')
+
+module.exports = data => {
+  return {
+    'get-data($key, $fallback: null)': (key, fallback) => {
+      if (utils.isNull(fallback)) {
+        fallback = DEFAULT_FALLBACK
+      }
+
+      if (utils.typeOf(key) !== 'string') {
+        return fallback
+      }
+
+      key = key.getValue()
+
+      if (key === '') {
+        return fallback
+      }
+
+      const parts = key.split('.')
+      const len = parts.length
+
+      let map = data
+
+      if (!map) {
+        return fallback
+      }
+
+      for (let i = 0, part; i < len; i++) {
+        part = parts[i]
+
+        if (part in map) {
+          map = map[part]
+        } else {
+          map = null
+        }
+      }
+
+      if (map === null) {
+        return fallback
+      }
+
+      return utils.castToSass(map)
+    }
+  }
+}

src/styles/helpers/getData.js

@@ -1,2 +1,6 @@
+@import 'constants'
+
 body
-  background: #CCC
+  // background: $COLOR
+  // background: get-data('brand.primary-color')
+  background: $NODE-GREEN

src/styles/index.sass

@@ -1,10 +1,13 @@
 'use strict'
 
 const path = require('path')
-const data = require('./data')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
+const data = require('./data')
+const brand = require('@nodewell/brand')
+const getData = require('./src/styles/helpers/getData')
+
 module.exports = {
   entry: './src/scripts/index.js',
   output: {
@@ -52,7 +55,11 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              sourceMap: true
+              sourceMap: true,
+              // data: `$COLOR: green`,
+              functions: {
+                ...getData(brand)
+              }
             }
           }
         ]