stylis-plugin-css-variables/dist/es/plugin.js

Stylis plugin that transforms CSS variable into static values for non-supported browsers.

var _window, _window$CSS;

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import WeakSet from '@ungap/weakset';
import { memoizedTransformContent } from './transform';
import { hasVariable } from './utils'; // Detects native CSS varialble support
// https://github.com/jhildenbiddle/css-vars-ponyfill/blob/master/src/index.js

var isNativeSupport = typeof window !== 'undefined' && ((_window = window) == null ? void 0 : (_window$CSS = _window.CSS) == null ? void 0 : _window$CSS.supports == null ? void 0 : _window$CSS.supports('(--a: 0)'));
/*
 * This plugin is for the stylis library. It's the CSS compiler used by
 * CSS-in-JS libraries like Emotion.
 *
 * https://github.com/thysultan/stylis.js
 */

var defaultOptions = {
  skipSupportedBrowsers: true
};
/*
 * Generates fallback values for CSS rule declarations that contain CSS var().
 * This plugin parses uses specified fallback values within the var()
 * function. If one is not provided, it will attempt to use the matching
 * variable declared at the :root scope.
 */

export function stylisPluginCssVariables(
/* istanbul ignore next */
options) {
  if (options === void 0) {
    options = {};
  }

  var _defaultOptions$optio = _objectSpread(_objectSpread({}, defaultOptions), options),
      skipSupportedBrowsers = _defaultOptions$optio.skipSupportedBrowsers;

  var seen = new WeakSet();
  return function plugin(context, content, selectors, parents, line, column, length, type) {
    // Skip generating CSS variable fallbacks for supported browsers
    if (skipSupportedBrowsers && isNativeSupport) return; // Borrowed guard implementation from:
    // https://github.com/Andarist/stylis-plugin-extra-scope/blob/master/src/index.js#L15

    /* istanbul ignore next */

    if (context !== 2 || type === 107 || seen.has(selectors)) return; // We only need to process the content if a CSS var() is used.

    if (!hasVariable(content)) return; // Add to our seen cache, as implemented in stylis-plugin-extra-scope

    seen.add(selectors); // We'll parse the content to match variables to their custom properties (if possible).

    var nextContent = memoizedTransformContent(content); // Lastly, we'll provide stylis with our enhanced CSS variable supported content.

    return nextContent;
  };
}