cssVar.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = cssVar;
  4. var _errors = _interopRequireDefault(require("../internalHelpers/_errors"));
  5. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  6. var cssVariableRegex = /--[\S]*/g;
  7. /**
  8. * Fetches the value of a passed CSS Variable in the :root scope, or otherwise returns a defaultValue if provided.
  9. *
  10. * @example
  11. * // Styles as object usage
  12. * const styles = {
  13. * 'background': cssVar('--background-color'),
  14. * }
  15. *
  16. * // styled-components usage
  17. * const div = styled.div`
  18. * background: ${cssVar('--background-color')};
  19. * `
  20. *
  21. * // CSS in JS Output
  22. *
  23. * element {
  24. * 'background': 'red'
  25. * }
  26. */
  27. function cssVar(cssVariable, defaultValue) {
  28. if (!cssVariable || !cssVariable.match(cssVariableRegex)) {
  29. throw new _errors["default"](73);
  30. }
  31. var variableValue;
  32. /* eslint-disable */
  33. /* istanbul ignore next */
  34. if (typeof document !== 'undefined' && document.documentElement !== null) {
  35. variableValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
  36. }
  37. /* eslint-enable */
  38. if (variableValue) {
  39. return variableValue.trim();
  40. } else if (defaultValue) {
  41. return defaultValue;
  42. }
  43. throw new _errors["default"](74);
  44. }
  45. module.exports = exports.default;