Do not use js theme variables in sass (poor dev experience for now)

scripts/webpack/getThemeVariable.js

@@ -1,50 +0,0 @@
-const sass = require('node-sass');
-const sassUtils = require('node-sass-utils')(sass);
-const { get } = require('lodash');
-const tinycolor = require('tinycolor2');
-const { getTheme } = require('@grafana/ui/src/themes');
-
-const units = ['rem', 'em', 'vh', 'vw', 'vmin', 'vmax', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch'];
-const matchDimension = value => value.match(/[a-zA-Z]+|[0-9]+/g);
-
-const isHex = value => {
-  const hexRegex = /^((0x){0,1}|#{0,1})([0-9A-F]{8}|[0-9A-F]{6})$/gi;
-  return hexRegex.test(value);
-};
-
-const isDimension = value => {
-  if (typeof value !== 'string') {
-    return false;
-  }
-  const [val, unit] = matchDimension(value);
-  return units.indexOf(unit) > -1;
-};
-
-/**
- * @param {SassString} variablePath
- * @param {"dark"|"light"} themeName
- */
-function getThemeVariable(variablePath, themeName) {
-  const theme = getTheme(themeName.getValue());
-  const variable = get(theme, variablePath.getValue());
-
-  if (!variable) {
-    throw new Error(`${variablePath.getValue()} is not defined for ${themeName.getValue()}`);
-  }
-
-  if (isHex(variable)) {
-    const rgb = new tinycolor(variable).toRgb();
-    const color = new sass.types.Color(rgb.r, rgb.g, rgb.b);
-    return color;
-  }
-
-  if (isDimension(variable)) {
-    const [value, unit] = matchDimension(variable);
-    const dimension = new sassUtils.SassDimension(parseInt(value, 10), unit);
-    return sassUtils.castToSass(dimension);
-  }
-
-  return sassUtils.castToSass(variable);
-}
-
-module.exports = getThemeVariable;

scripts/webpack/getThemeVariable.test.js

@@ -1,40 +0,0 @@
-const sass = require('node-sass');
-const getThemeVariable = require('./getThemeVariable');
-const { mockTheme } = require('@grafana/ui');
-
-const themeMock = {
-  color: {
-    background: '#ff0000',
-  },
-  spacing: {
-    padding: '2em',
-  },
-  typography: {
-    fontFamily: 'Arial, sans-serif',
-  },
-};
-
-describe('Variables retrieval', () => {
-  const restoreTheme = mockTheme(() => themeMock);
-
-  afterAll(() => {
-    restoreTheme();
-  });
-
-  it('returns sass Color for color values', () => {
-    const result = getThemeVariable({ getValue: () => 'color.background' }, { getValue: () => {} });
-    expect(result).toBeInstanceOf(sass.types.Color);
-  });
-  it('returns sass Number for dimension values', () => {
-    const result = getThemeVariable({ getValue: () => 'spacing.padding' }, { getValue: () => {} });
-    expect(result).toBeInstanceOf(sass.types.Number);
-  });
-  it('returns sass String for string values', () => {
-    const result = getThemeVariable({ getValue: () => 'typography.fontFamily' }, { getValue: () => {} });
-    expect(result).toBeInstanceOf(sass.types.String);
-  });
-
-  it('throws for unknown theme paths', () => {
-    expect(() => getThemeVariable({ getValue: () => 'what.ever' }, { getValue: () => {} })).toThrow();
-  });
-});

scripts/webpack/sass.rule.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const getThemeVariable = require('./getThemeVariable');
 
 module.exports = function(options) {
   return {
@@ -27,10 +26,7 @@ module.exports = function(options) {
       {
         loader: 'sass-loader',
         options: {
-          sourceMap: options.sourceMap,
-          functions: {
-            'getThemeVariable($themeVar, $themeName: dark)': getThemeVariable,
-          },
+          sourceMap: options.sourceMap
         },
       },
     ],

scripts/webpack/webpack.hot.js

@@ -8,7 +8,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const IgnoreNotFoundExportPlugin = require("./IgnoreNotFoundExportPlugin.js");
-const getThemeVariable = require("./getThemeVariable");
 
 module.exports = merge(common, {
   entry: {
@@ -87,12 +86,7 @@ module.exports = merge(common, {
             },
           },
           {
-            loader: 'sass-loader',
-            options: {
-              functions: {
-                "getThemeVariable($themeVar, $themeName: dark)": getThemeVariable
-              }
-            }
+            loader: 'sass-loader'
           }
         ],
       },