From 8fe6d40e1985f79e7c81c4767ceee866e235a09a Mon Sep 17 00:00:00 2001
From: Trezy <tre@trezy.com>
Date: Wed, 22 May 2019 15:55:28 -0500
Subject: [PATCH 1/2] refactor: convert local images to data URIs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I’ve added a SCSS function that, when passed a file path, will inject the file as a data URI. This
is super helpful since it ensures that the cursor images will always be available for the CSS. This
issue currently prevents the npm version of the library from being usable at all.
---
 package.json                |  1 +
 scripts/getFileAsDataURI.js | 15 +++++++++++++++
 scripts/scssFunctions.js    |  2 ++
 scss/base/variables.scss    |  4 ++--
 4 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 scripts/getFileAsDataURI.js

diff --git a/package.json b/package.json
index deee3a5..0166279 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "eslint": "^5.9.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-import": "^2.14.0",
+    "file-type": "^11.0.0",
     "git-rev-sync": "^1.12.0",
     "husky": "^1.0.0",
     "lint-staged": "^7.3.0",
diff --git a/scripts/getFileAsDataURI.js b/scripts/getFileAsDataURI.js
new file mode 100644
index 0000000..83e1114
--- /dev/null
+++ b/scripts/getFileAsDataURI.js
@@ -0,0 +1,15 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const filetype = require('file-type');
+const fs = require('fs');
+const path = require('path');
+/* eslint-enable */
+
+module.exports = (fileString) => {
+  const filepath = path.resolve(__dirname, fileString.getValue());
+  const fileBuffer = fs.readFileSync(filepath);
+
+  const fileDataURI = fileBuffer.toString('base64');
+  const { mime } = filetype(fileBuffer);
+
+  return `data:${mime};base64,${fileDataURI}`;
+};
diff --git a/scripts/scssFunctions.js b/scripts/scssFunctions.js
index d18960a..8c61b92 100644
--- a/scripts/scssFunctions.js
+++ b/scripts/scssFunctions.js
@@ -1,7 +1,9 @@
 const { types } = require('node-sass'); /* eslint-disable-line import/no-extraneous-dependencies */
 
 const getBuildData = require('./getBuildData');
+const getFileAsDataURI = require('./getFileAsDataURI');
 
 module.exports = {
   'build-data()': () => types.String(getBuildData(true)),
+  'get-file-as-data-uri($filepath)': filepath => types.String(getFileAsDataURI(filepath)),
 };
diff --git a/scss/base/variables.scss b/scss/base/variables.scss
index b760623..de1fc91 100644
--- a/scss/base/variables.scss
+++ b/scss/base/variables.scss
@@ -5,8 +5,8 @@ $font-size: 16px !default;
 $base-color: $color-black !default;
 $background-color: $color-white !default;
 
-$cursor-url: url(../assets/cursor.png) !default;
-$cursor-click-url: url(../assets/cursor-click.png) 14 0 !default;
+$cursor-url: url(get-file-as-data-uri('../assets/cursor.png')) !default;
+$cursor-click-url: url(get-file-as-data-uri('../assets/cursor-click.png')) 14 0 !default;
 
 $border-size: 4px !default;
 

From bd118e236cd5177cd8c25fd7e687d16922ad5aec Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Tue, 4 Jun 2019 09:12:58 +0900
Subject: [PATCH 2/2] refactor(storybook/webpack.config.js): add custom
 functions

---
 .storybook/webpack.config.js | 12 +++++++++++-
 scss/base/variables.scss     |  4 ++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 7e5303b..37c486d 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -1,11 +1,21 @@
 const path = require('path');
+const scssFunctions = require('../scripts/scssFunctions');
 
 module.exports = {
   module: {
     rules: [
       {
         test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader'],
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          {
+            loader: 'sass-loader',
+            options: {
+              functions: scssFunctions,
+            },
+          },
+        ],
         include: path.resolve(__dirname, '../'),
       },
       {
diff --git a/scss/base/variables.scss b/scss/base/variables.scss
index de1fc91..108d051 100644
--- a/scss/base/variables.scss
+++ b/scss/base/variables.scss
@@ -5,8 +5,8 @@ $font-size: 16px !default;
 $base-color: $color-black !default;
 $background-color: $color-white !default;
 
-$cursor-url: url(get-file-as-data-uri('../assets/cursor.png')) !default;
-$cursor-click-url: url(get-file-as-data-uri('../assets/cursor-click.png')) 14 0 !default;
+$cursor-url: url(get-file-as-data-uri("../assets/cursor.png")) !default;
+$cursor-click-url: url(get-file-as-data-uri("../assets/cursor-click.png")) 14 0 !default;
 
 $border-size: 4px !default;