Merge pull request #337 from nostalgic-css/refactor/convert-cursor-images-to-data-uris

refactor: convert local images to data URIs

.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, '../'),
       },
       {

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",

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}`;
+};

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)),
 };

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-url: url(get-file-as-data-uri("../assets/cursor.png")) !default;
-$cursor-click-url: url(../assets/cursor-click.png) 14 0 !default;
+$cursor-click-url: url(get-file-as-data-uri("../assets/cursor-click.png")) 14 0 !default;
 
 $border-size: 4px !default;