6289 lines
175 KiB
JavaScript
6289 lines
175 KiB
JavaScript
import transformDeclPairs from 'css-to-react-native';
|
||
import { typeOf, isElement, isValidElementType } from 'react-is';
|
||
import React, { useContext, useMemo, createElement, Component } from 'react';
|
||
import 'shallowequal';
|
||
import Stylis from '@emotion/stylis';
|
||
import unitless from '@emotion/unitless';
|
||
import supportsColor from 'supports-color';
|
||
import hoist from 'hoist-non-react-statics';
|
||
|
||
//
|
||
|
||
/* eslint-disable no-bitwise */
|
||
var AD_REPLACER_R = /(a)(d)/gi;
|
||
/* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalised
|
||
* counterparts */
|
||
|
||
var charsLength = 52;
|
||
/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */
|
||
|
||
var getAlphabeticChar = function getAlphabeticChar(code) {
|
||
return String.fromCharCode(code + (code > 25 ? 39 : 97));
|
||
};
|
||
/* input a number, usually a hash and convert it to base-52 */
|
||
|
||
|
||
function generateAlphabeticName(code) {
|
||
var name = '';
|
||
var x;
|
||
/* get a char and divide by alphabet-length */
|
||
|
||
for (x = Math.abs(code); x > charsLength; x = x / charsLength | 0) {
|
||
name = getAlphabeticChar(x % charsLength) + name;
|
||
}
|
||
|
||
return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2');
|
||
}
|
||
|
||
//
|
||
|
||
/* eslint-disable */
|
||
var SEED = 5381; // When we have separate strings it's useful to run a progressive
|
||
// version of djb2 where we pretend that we're still looping over
|
||
// the same string
|
||
|
||
var phash = function phash(h, x) {
|
||
var i = x.length;
|
||
|
||
while (i) {
|
||
h = h * 33 ^ x.charCodeAt(--i);
|
||
}
|
||
|
||
return h;
|
||
}; // This is a djb2 hashing function
|
||
|
||
var hash = function hash(x) {
|
||
return phash(SEED, x);
|
||
};
|
||
|
||
//
|
||
var generateComponentId = (function (str) {
|
||
return generateAlphabeticName(hash(str) >>> 0);
|
||
});
|
||
|
||
//
|
||
function getComponentName(target) {
|
||
return (process.env.NODE_ENV !== 'production' ? typeof target === 'string' && target : false) || // $FlowFixMe
|
||
target.displayName || // $FlowFixMe
|
||
target.name || 'Component';
|
||
}
|
||
|
||
//
|
||
function isFunction(test) {
|
||
return typeof test === 'function';
|
||
}
|
||
|
||
//
|
||
function isStatelessFunction(test) {
|
||
return typeof test === 'function' && !(test.prototype && test.prototype.isReactComponent);
|
||
}
|
||
|
||
//
|
||
var isPlainObject = (function (x) {
|
||
return x !== null && typeof x === 'object' && (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' && !typeOf(x);
|
||
});
|
||
|
||
//
|
||
function isStyledComponent(target) {
|
||
return target && typeof target.styledComponentId === 'string';
|
||
}
|
||
|
||
function _defineProperties(target, props) {
|
||
for (var i = 0; i < props.length; i++) {
|
||
var descriptor = props[i];
|
||
descriptor.enumerable = descriptor.enumerable || false;
|
||
descriptor.configurable = true;
|
||
if ("value" in descriptor) descriptor.writable = true;
|
||
Object.defineProperty(target, descriptor.key, descriptor);
|
||
}
|
||
}
|
||
|
||
function _createClass(Constructor, protoProps, staticProps) {
|
||
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
||
if (staticProps) _defineProperties(Constructor, staticProps);
|
||
return Constructor;
|
||
}
|
||
|
||
function _extends() {
|
||
_extends = Object.assign || function (target) {
|
||
for (var i = 1; i < arguments.length; i++) {
|
||
var source = arguments[i];
|
||
|
||
for (var key in source) {
|
||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||
target[key] = source[key];
|
||
}
|
||
}
|
||
}
|
||
|
||
return target;
|
||
};
|
||
|
||
return _extends.apply(this, arguments);
|
||
}
|
||
|
||
function _inheritsLoose(subClass, superClass) {
|
||
subClass.prototype = Object.create(superClass.prototype);
|
||
subClass.prototype.constructor = subClass;
|
||
subClass.__proto__ = superClass;
|
||
}
|
||
|
||
function _objectWithoutPropertiesLoose(source, excluded) {
|
||
if (source == null) return {};
|
||
var target = {};
|
||
var sourceKeys = Object.keys(source);
|
||
var key, i;
|
||
|
||
for (i = 0; i < sourceKeys.length; i++) {
|
||
key = sourceKeys[i];
|
||
if (excluded.indexOf(key) >= 0) continue;
|
||
target[key] = source[key];
|
||
}
|
||
|
||
return target;
|
||
}
|
||
|
||
//
|
||
var SC_ATTR = typeof process !== 'undefined' && typeof process.env !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
|
||
var SC_ATTR_ACTIVE = 'active';
|
||
var SC_ATTR_VERSION = 'data-styled-version';
|
||
var SC_VERSION = "5.3.11";
|
||
var SPLITTER = '/*!sc*/\n';
|
||
var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
|
||
var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean' ? SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env !== 'undefined' ? typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== '' ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY : typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== '' ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY : process.env.NODE_ENV !== 'production' : false); // Shared empty execution context when generating static styles
|
||
|
||
//
|
||
var EMPTY_ARRAY = Object.freeze([]);
|
||
var EMPTY_OBJECT = Object.freeze({});
|
||
|
||
var errorMap = {
|
||
"1": "Cannot create styled-component for component: %s.\n\n",
|
||
"2": "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",
|
||
"3": "Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",
|
||
"4": "The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",
|
||
"5": "The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",
|
||
"6": "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",
|
||
"7": "ThemeProvider: Please return an object from your \"theme\" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n",
|
||
"8": "ThemeProvider: Please make your \"theme\" prop an object.\n\n",
|
||
"9": "Missing document `<head>`\n\n",
|
||
"10": "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",
|
||
"11": "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",
|
||
"12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",
|
||
"13": "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",
|
||
"14": "ThemeProvider: \"theme\" prop is required.\n\n",
|
||
"15": "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",
|
||
"16": "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",
|
||
"17": "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"
|
||
};
|
||
|
||
//
|
||
var ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};
|
||
/**
|
||
* super basic version of sprintf
|
||
*/
|
||
|
||
function format() {
|
||
var a = arguments.length <= 0 ? undefined : arguments[0];
|
||
var b = [];
|
||
|
||
for (var c = 1, len = arguments.length; c < len; c += 1) {
|
||
b.push(c < 0 || arguments.length <= c ? undefined : arguments[c]);
|
||
}
|
||
|
||
b.forEach(function (d) {
|
||
a = a.replace(/%[a-z]/, d);
|
||
});
|
||
return a;
|
||
}
|
||
/**
|
||
* Create an error file out of errors.md for development and a simple web link to the full errors
|
||
* in production mode.
|
||
*/
|
||
|
||
|
||
function throwStyledComponentsError(code) {
|
||
for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||
interpolations[_key - 1] = arguments[_key];
|
||
}
|
||
|
||
if (process.env.NODE_ENV === 'production') {
|
||
throw new Error("An error occurred. See https://git.io/JUIaE#" + code + " for more information." + (interpolations.length > 0 ? " Args: " + interpolations.join(', ') : ''));
|
||
} else {
|
||
throw new Error(format.apply(void 0, [ERRORS[code]].concat(interpolations)).trim());
|
||
}
|
||
}
|
||
|
||
//
|
||
/** Create a GroupedTag with an underlying Tag implementation */
|
||
|
||
var makeGroupedTag = function makeGroupedTag(tag) {
|
||
return new DefaultGroupedTag(tag);
|
||
};
|
||
var BASE_SIZE = 1 << 9;
|
||
|
||
var DefaultGroupedTag = /*#__PURE__*/function () {
|
||
function DefaultGroupedTag(tag) {
|
||
this.groupSizes = new Uint32Array(BASE_SIZE);
|
||
this.length = BASE_SIZE;
|
||
this.tag = tag;
|
||
}
|
||
|
||
var _proto = DefaultGroupedTag.prototype;
|
||
|
||
_proto.indexOfGroup = function indexOfGroup(group) {
|
||
var index = 0;
|
||
|
||
for (var i = 0; i < group; i++) {
|
||
index += this.groupSizes[i];
|
||
}
|
||
|
||
return index;
|
||
};
|
||
|
||
_proto.insertRules = function insertRules(group, rules) {
|
||
if (group >= this.groupSizes.length) {
|
||
var oldBuffer = this.groupSizes;
|
||
var oldSize = oldBuffer.length;
|
||
var newSize = oldSize;
|
||
|
||
while (group >= newSize) {
|
||
newSize <<= 1;
|
||
|
||
if (newSize < 0) {
|
||
throwStyledComponentsError(16, "" + group);
|
||
}
|
||
}
|
||
|
||
this.groupSizes = new Uint32Array(newSize);
|
||
this.groupSizes.set(oldBuffer);
|
||
this.length = newSize;
|
||
|
||
for (var i = oldSize; i < newSize; i++) {
|
||
this.groupSizes[i] = 0;
|
||
}
|
||
}
|
||
|
||
var ruleIndex = this.indexOfGroup(group + 1);
|
||
|
||
for (var _i = 0, l = rules.length; _i < l; _i++) {
|
||
if (this.tag.insertRule(ruleIndex, rules[_i])) {
|
||
this.groupSizes[group]++;
|
||
ruleIndex++;
|
||
}
|
||
}
|
||
};
|
||
|
||
_proto.clearGroup = function clearGroup(group) {
|
||
if (group < this.length) {
|
||
var length = this.groupSizes[group];
|
||
var startIndex = this.indexOfGroup(group);
|
||
var endIndex = startIndex + length;
|
||
this.groupSizes[group] = 0;
|
||
|
||
for (var i = startIndex; i < endIndex; i++) {
|
||
this.tag.deleteRule(startIndex);
|
||
}
|
||
}
|
||
};
|
||
|
||
_proto.getGroup = function getGroup(group) {
|
||
var css = '';
|
||
|
||
if (group >= this.length || this.groupSizes[group] === 0) {
|
||
return css;
|
||
}
|
||
|
||
var length = this.groupSizes[group];
|
||
var startIndex = this.indexOfGroup(group);
|
||
var endIndex = startIndex + length;
|
||
|
||
for (var i = startIndex; i < endIndex; i++) {
|
||
css += "" + this.tag.getRule(i) + SPLITTER;
|
||
}
|
||
|
||
return css;
|
||
};
|
||
|
||
return DefaultGroupedTag;
|
||
}();
|
||
|
||
//
|
||
var MAX_SMI = 1 << 31 - 1;
|
||
var groupIDRegister = new Map();
|
||
var reverseRegister = new Map();
|
||
var nextFreeGroup = 1;
|
||
var getGroupForId = function getGroupForId(id) {
|
||
if (groupIDRegister.has(id)) {
|
||
return groupIDRegister.get(id);
|
||
}
|
||
|
||
while (reverseRegister.has(nextFreeGroup)) {
|
||
nextFreeGroup++;
|
||
}
|
||
|
||
var group = nextFreeGroup++;
|
||
|
||
if (process.env.NODE_ENV !== 'production' && ((group | 0) < 0 || group > MAX_SMI)) {
|
||
throwStyledComponentsError(16, "" + group);
|
||
}
|
||
|
||
groupIDRegister.set(id, group);
|
||
reverseRegister.set(group, id);
|
||
return group;
|
||
};
|
||
var getIdForGroup = function getIdForGroup(group) {
|
||
return reverseRegister.get(group);
|
||
};
|
||
var setGroupForId = function setGroupForId(id, group) {
|
||
if (group >= nextFreeGroup) {
|
||
nextFreeGroup = group + 1;
|
||
}
|
||
|
||
groupIDRegister.set(id, group);
|
||
reverseRegister.set(group, id);
|
||
};
|
||
|
||
//
|
||
var SELECTOR = "style[" + SC_ATTR + "][" + SC_ATTR_VERSION + "=\"" + SC_VERSION + "\"]";
|
||
var MARKER_RE = new RegExp("^" + SC_ATTR + "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\].*?\"([^\"]*)");
|
||
var outputSheet = function outputSheet(sheet) {
|
||
var tag = sheet.getTag();
|
||
var length = tag.length;
|
||
var css = '';
|
||
|
||
for (var group = 0; group < length; group++) {
|
||
var id = getIdForGroup(group);
|
||
if (id === undefined) continue;
|
||
var names = sheet.names.get(id);
|
||
var rules = tag.getGroup(group);
|
||
if (!names || !rules || !names.size) continue;
|
||
var selector = SC_ATTR + ".g" + group + "[id=\"" + id + "\"]";
|
||
var content = '';
|
||
|
||
if (names !== undefined) {
|
||
names.forEach(function (name) {
|
||
if (name.length > 0) {
|
||
content += name + ",";
|
||
}
|
||
});
|
||
} // NOTE: It's easier to collect rules and have the marker
|
||
// after the actual rules to simplify the rehydration
|
||
|
||
|
||
css += "" + rules + selector + "{content:\"" + content + "\"}" + SPLITTER;
|
||
}
|
||
|
||
return css;
|
||
};
|
||
|
||
var rehydrateNamesFromContent = function rehydrateNamesFromContent(sheet, id, content) {
|
||
var names = content.split(',');
|
||
var name;
|
||
|
||
for (var i = 0, l = names.length; i < l; i++) {
|
||
// eslint-disable-next-line
|
||
if (name = names[i]) {
|
||
sheet.registerName(id, name);
|
||
}
|
||
}
|
||
};
|
||
|
||
var rehydrateSheetFromTag = function rehydrateSheetFromTag(sheet, style) {
|
||
var parts = (style.textContent || '').split(SPLITTER);
|
||
var rules = [];
|
||
|
||
for (var i = 0, l = parts.length; i < l; i++) {
|
||
var part = parts[i].trim();
|
||
if (!part) continue;
|
||
var marker = part.match(MARKER_RE);
|
||
|
||
if (marker) {
|
||
var group = parseInt(marker[1], 10) | 0;
|
||
var id = marker[2];
|
||
|
||
if (group !== 0) {
|
||
// Rehydrate componentId to group index mapping
|
||
setGroupForId(id, group); // Rehydrate names and rules
|
||
// looks like: data-styled.g11[id="idA"]{content:"nameA,"}
|
||
|
||
rehydrateNamesFromContent(sheet, id, marker[3]);
|
||
sheet.getTag().insertRules(group, rules);
|
||
}
|
||
|
||
rules.length = 0;
|
||
} else {
|
||
rules.push(part);
|
||
}
|
||
}
|
||
};
|
||
|
||
var rehydrateSheet = function rehydrateSheet(sheet) {
|
||
var nodes = document.querySelectorAll(SELECTOR);
|
||
|
||
for (var i = 0, l = nodes.length; i < l; i++) {
|
||
var node = nodes[i];
|
||
|
||
if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {
|
||
rehydrateSheetFromTag(sheet, node);
|
||
|
||
if (node.parentNode) {
|
||
node.parentNode.removeChild(node);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
//
|
||
|
||
/* eslint-disable camelcase, no-undef */
|
||
var getNonce = function getNonce() {
|
||
return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
|
||
};
|
||
|
||
//
|
||
var ELEMENT_TYPE = 1;
|
||
/* Node.ELEMENT_TYPE */
|
||
|
||
/** Find last style element if any inside target */
|
||
|
||
var findLastStyleTag = function findLastStyleTag(target) {
|
||
var childNodes = target.childNodes;
|
||
|
||
for (var i = childNodes.length; i >= 0; i--) {
|
||
var child = childNodes[i];
|
||
|
||
if (child && child.nodeType === ELEMENT_TYPE && child.hasAttribute(SC_ATTR)) {
|
||
return child;
|
||
}
|
||
}
|
||
|
||
return undefined;
|
||
};
|
||
/** Create a style element inside `target` or <head> after the last */
|
||
|
||
|
||
var makeStyleTag = function makeStyleTag(target) {
|
||
var head = document.head;
|
||
var parent = target || head;
|
||
var style = document.createElement('style');
|
||
var prevStyle = findLastStyleTag(parent);
|
||
var nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;
|
||
style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);
|
||
style.setAttribute(SC_ATTR_VERSION, SC_VERSION);
|
||
var nonce = getNonce();
|
||
if (nonce) style.setAttribute('nonce', nonce);
|
||
parent.insertBefore(style, nextSibling);
|
||
return style;
|
||
};
|
||
/** Get the CSSStyleSheet instance for a given style element */
|
||
|
||
var getSheet = function getSheet(tag) {
|
||
if (tag.sheet) {
|
||
return tag.sheet;
|
||
} // Avoid Firefox quirk where the style element might not have a sheet property
|
||
|
||
|
||
var _document = document,
|
||
styleSheets = _document.styleSheets;
|
||
|
||
for (var i = 0, l = styleSheets.length; i < l; i++) {
|
||
var sheet = styleSheets[i];
|
||
|
||
if (sheet.ownerNode === tag) {
|
||
return sheet;
|
||
}
|
||
}
|
||
|
||
throwStyledComponentsError(17);
|
||
return undefined;
|
||
};
|
||
|
||
//
|
||
/** Create a CSSStyleSheet-like tag depending on the environment */
|
||
|
||
var makeTag = function makeTag(_ref) {
|
||
var isServer = _ref.isServer,
|
||
useCSSOMInjection = _ref.useCSSOMInjection,
|
||
target = _ref.target;
|
||
|
||
if (isServer) {
|
||
return new VirtualTag(target);
|
||
} else if (useCSSOMInjection) {
|
||
return new CSSOMTag(target);
|
||
} else {
|
||
return new TextTag(target);
|
||
}
|
||
};
|
||
var CSSOMTag = /*#__PURE__*/function () {
|
||
function CSSOMTag(target) {
|
||
var element = this.element = makeStyleTag(target); // Avoid Edge bug where empty style elements don't create sheets
|
||
|
||
element.appendChild(document.createTextNode(''));
|
||
this.sheet = getSheet(element);
|
||
this.length = 0;
|
||
}
|
||
|
||
var _proto = CSSOMTag.prototype;
|
||
|
||
_proto.insertRule = function insertRule(index, rule) {
|
||
try {
|
||
this.sheet.insertRule(rule, index);
|
||
this.length++;
|
||
return true;
|
||
} catch (_error) {
|
||
return false;
|
||
}
|
||
};
|
||
|
||
_proto.deleteRule = function deleteRule(index) {
|
||
this.sheet.deleteRule(index);
|
||
this.length--;
|
||
};
|
||
|
||
_proto.getRule = function getRule(index) {
|
||
var rule = this.sheet.cssRules[index]; // Avoid IE11 quirk where cssText is inaccessible on some invalid rules
|
||
|
||
if (rule !== undefined && typeof rule.cssText === 'string') {
|
||
return rule.cssText;
|
||
} else {
|
||
return '';
|
||
}
|
||
};
|
||
|
||
return CSSOMTag;
|
||
}();
|
||
/** A Tag that emulates the CSSStyleSheet API but uses text nodes */
|
||
|
||
var TextTag = /*#__PURE__*/function () {
|
||
function TextTag(target) {
|
||
var element = this.element = makeStyleTag(target);
|
||
this.nodes = element.childNodes;
|
||
this.length = 0;
|
||
}
|
||
|
||
var _proto2 = TextTag.prototype;
|
||
|
||
_proto2.insertRule = function insertRule(index, rule) {
|
||
if (index <= this.length && index >= 0) {
|
||
var node = document.createTextNode(rule);
|
||
var refNode = this.nodes[index];
|
||
this.element.insertBefore(node, refNode || null);
|
||
this.length++;
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
};
|
||
|
||
_proto2.deleteRule = function deleteRule(index) {
|
||
this.element.removeChild(this.nodes[index]);
|
||
this.length--;
|
||
};
|
||
|
||
_proto2.getRule = function getRule(index) {
|
||
if (index < this.length) {
|
||
return this.nodes[index].textContent;
|
||
} else {
|
||
return '';
|
||
}
|
||
};
|
||
|
||
return TextTag;
|
||
}();
|
||
/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */
|
||
|
||
var VirtualTag = /*#__PURE__*/function () {
|
||
function VirtualTag(_target) {
|
||
this.rules = [];
|
||
this.length = 0;
|
||
}
|
||
|
||
var _proto3 = VirtualTag.prototype;
|
||
|
||
_proto3.insertRule = function insertRule(index, rule) {
|
||
if (index <= this.length) {
|
||
this.rules.splice(index, 0, rule);
|
||
this.length++;
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
};
|
||
|
||
_proto3.deleteRule = function deleteRule(index) {
|
||
this.rules.splice(index, 1);
|
||
this.length--;
|
||
};
|
||
|
||
_proto3.getRule = function getRule(index) {
|
||
if (index < this.length) {
|
||
return this.rules[index];
|
||
} else {
|
||
return '';
|
||
}
|
||
};
|
||
|
||
return VirtualTag;
|
||
}();
|
||
|
||
var SHOULD_REHYDRATE = IS_BROWSER;
|
||
var defaultOptions = {
|
||
isServer: !IS_BROWSER,
|
||
useCSSOMInjection: !DISABLE_SPEEDY
|
||
};
|
||
/** Contains the main stylesheet logic for stringification and caching */
|
||
|
||
var StyleSheet = /*#__PURE__*/function () {
|
||
/** Register a group ID to give it an index */
|
||
StyleSheet.registerId = function registerId(id) {
|
||
return getGroupForId(id);
|
||
};
|
||
|
||
function StyleSheet(options, globalStyles, names) {
|
||
if (options === void 0) {
|
||
options = EMPTY_OBJECT;
|
||
}
|
||
|
||
if (globalStyles === void 0) {
|
||
globalStyles = {};
|
||
}
|
||
|
||
this.options = _extends({}, defaultOptions, {}, options);
|
||
this.gs = globalStyles;
|
||
this.names = new Map(names);
|
||
this.server = !!options.isServer; // We rehydrate only once and use the sheet that is created first
|
||
|
||
if (!this.server && IS_BROWSER && SHOULD_REHYDRATE) {
|
||
SHOULD_REHYDRATE = false;
|
||
rehydrateSheet(this);
|
||
}
|
||
}
|
||
|
||
var _proto = StyleSheet.prototype;
|
||
|
||
_proto.reconstructWithOptions = function reconstructWithOptions(options, withNames) {
|
||
if (withNames === void 0) {
|
||
withNames = true;
|
||
}
|
||
|
||
return new StyleSheet(_extends({}, this.options, {}, options), this.gs, withNames && this.names || undefined);
|
||
};
|
||
|
||
_proto.allocateGSInstance = function allocateGSInstance(id) {
|
||
return this.gs[id] = (this.gs[id] || 0) + 1;
|
||
}
|
||
/** Lazily initialises a GroupedTag for when it's actually needed */
|
||
;
|
||
|
||
_proto.getTag = function getTag() {
|
||
return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));
|
||
}
|
||
/** Check whether a name is known for caching */
|
||
;
|
||
|
||
_proto.hasNameForId = function hasNameForId(id, name) {
|
||
return this.names.has(id) && this.names.get(id).has(name);
|
||
}
|
||
/** Mark a group's name as known for caching */
|
||
;
|
||
|
||
_proto.registerName = function registerName(id, name) {
|
||
getGroupForId(id);
|
||
|
||
if (!this.names.has(id)) {
|
||
var groupNames = new Set();
|
||
groupNames.add(name);
|
||
this.names.set(id, groupNames);
|
||
} else {
|
||
this.names.get(id).add(name);
|
||
}
|
||
}
|
||
/** Insert new rules which also marks the name as known */
|
||
;
|
||
|
||
_proto.insertRules = function insertRules(id, name, rules) {
|
||
this.registerName(id, name);
|
||
this.getTag().insertRules(getGroupForId(id), rules);
|
||
}
|
||
/** Clears all cached names for a given group ID */
|
||
;
|
||
|
||
_proto.clearNames = function clearNames(id) {
|
||
if (this.names.has(id)) {
|
||
this.names.get(id).clear();
|
||
}
|
||
}
|
||
/** Clears all rules for a given group ID */
|
||
;
|
||
|
||
_proto.clearRules = function clearRules(id) {
|
||
this.getTag().clearGroup(getGroupForId(id));
|
||
this.clearNames(id);
|
||
}
|
||
/** Clears the entire tag which deletes all rules but not its names */
|
||
;
|
||
|
||
_proto.clearTag = function clearTag() {
|
||
// NOTE: This does not clear the names, since it's only used during SSR
|
||
// so that we can continuously output only new rules
|
||
this.tag = undefined;
|
||
}
|
||
/** Outputs the current sheet as a CSS string with markers for SSR */
|
||
;
|
||
|
||
_proto.toString = function toString() {
|
||
return outputSheet(this);
|
||
};
|
||
|
||
return StyleSheet;
|
||
}();
|
||
|
||
/**
|
||
* MIT License
|
||
*
|
||
* Copyright (c) 2016 Sultan Tarimo
|
||
*
|
||
* Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||
* this software and associated documentation files (the "Software"),
|
||
* to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||
* sell copies of the Software and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||
*
|
||
* The above copyright notice and this permission notice shall be included in all
|
||
* copies or substantial portions of the Software.
|
||
*
|
||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
||
* OR IMPLIED INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
|
||
* IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||
*/
|
||
|
||
/* eslint-disable */
|
||
function insertRulePlugin (insertRule) {
|
||
var delimiter = '/*|*/';
|
||
var needle = delimiter + "}";
|
||
|
||
function toSheet(block) {
|
||
if (block) {
|
||
try {
|
||
insertRule(block + "}");
|
||
} catch (e) {}
|
||
}
|
||
}
|
||
|
||
return function ruleSheet(context, content, selectors, parents, line, column, length, ns, depth, at) {
|
||
switch (context) {
|
||
// property
|
||
case 1:
|
||
// @import
|
||
if (depth === 0 && content.charCodeAt(0) === 64) return insertRule(content + ";"), '';
|
||
break;
|
||
// selector
|
||
|
||
case 2:
|
||
if (ns === 0) return content + delimiter;
|
||
break;
|
||
// at-rule
|
||
|
||
case 3:
|
||
switch (ns) {
|
||
// @font-face, @page
|
||
case 102:
|
||
case 112:
|
||
return insertRule(selectors[0] + content), '';
|
||
|
||
default:
|
||
return content + (at === 0 ? delimiter : '');
|
||
}
|
||
|
||
case -2:
|
||
content.split(needle).forEach(toSheet);
|
||
}
|
||
};
|
||
}
|
||
|
||
var COMMENT_REGEX = /^\s*\/\/.*$/gm;
|
||
var COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];
|
||
function createStylisInstance(_temp) {
|
||
var _ref = _temp === void 0 ? EMPTY_OBJECT : _temp,
|
||
_ref$options = _ref.options,
|
||
options = _ref$options === void 0 ? EMPTY_OBJECT : _ref$options,
|
||
_ref$plugins = _ref.plugins,
|
||
plugins = _ref$plugins === void 0 ? EMPTY_ARRAY : _ref$plugins;
|
||
|
||
var stylis = new Stylis(options); // Wrap `insertRulePlugin to build a list of rules,
|
||
// and then make our own plugin to return the rules. This
|
||
// makes it easier to hook into the existing SSR architecture
|
||
|
||
var parsingRules = []; // eslint-disable-next-line consistent-return
|
||
|
||
var returnRulesPlugin = function returnRulesPlugin(context) {
|
||
if (context === -2) {
|
||
var parsedRules = parsingRules;
|
||
parsingRules = [];
|
||
return parsedRules;
|
||
}
|
||
};
|
||
|
||
var parseRulesPlugin = insertRulePlugin(function (rule) {
|
||
parsingRules.push(rule);
|
||
});
|
||
|
||
var _componentId;
|
||
|
||
var _selector;
|
||
|
||
var _selectorRegexp;
|
||
|
||
var _consecutiveSelfRefRegExp;
|
||
|
||
var selfReferenceReplacer = function selfReferenceReplacer(match, offset, string) {
|
||
if ( // do not replace the first occurrence if it is complex (has a modifier)
|
||
(offset === 0 ? COMPLEX_SELECTOR_PREFIX.indexOf(string[_selector.length]) === -1 : true) && // no consecutive self refs (.b.b); that is a precedence boost and treated differently
|
||
!string.match(_consecutiveSelfRefRegExp)) {
|
||
return "." + _componentId;
|
||
}
|
||
|
||
return match;
|
||
};
|
||
/**
|
||
* When writing a style like
|
||
*
|
||
* & + & {
|
||
* color: red;
|
||
* }
|
||
*
|
||
* The second ampersand should be a reference to the static component class. stylis
|
||
* has no knowledge of static class so we have to intelligently replace the base selector.
|
||
*
|
||
* https://github.com/thysultan/stylis.js/tree/v3.5.4#plugins <- more info about the context phase values
|
||
* "2" means this plugin is taking effect at the very end after all other processing is complete
|
||
*/
|
||
|
||
|
||
var selfReferenceReplacementPlugin = function selfReferenceReplacementPlugin(context, _, selectors) {
|
||
if (context === 2 && selectors.length && selectors[0].lastIndexOf(_selector) > 0) {
|
||
// eslint-disable-next-line no-param-reassign
|
||
selectors[0] = selectors[0].replace(_selectorRegexp, selfReferenceReplacer);
|
||
}
|
||
};
|
||
|
||
stylis.use([].concat(plugins, [selfReferenceReplacementPlugin, parseRulesPlugin, returnRulesPlugin]));
|
||
|
||
function stringifyRules(css, selector, prefix, componentId) {
|
||
if (componentId === void 0) {
|
||
componentId = '&';
|
||
}
|
||
|
||
var flatCSS = css.replace(COMMENT_REGEX, '');
|
||
var cssStr = selector && prefix ? prefix + " " + selector + " { " + flatCSS + " }" : flatCSS; // stylis has no concept of state to be passed to plugins
|
||
// but since JS is single-threaded, we can rely on that to ensure
|
||
// these properties stay in sync with the current stylis run
|
||
|
||
_componentId = componentId;
|
||
_selector = selector;
|
||
_selectorRegexp = new RegExp("\\" + _selector + "\\b", 'g');
|
||
_consecutiveSelfRefRegExp = new RegExp("(\\" + _selector + "\\b){2,}");
|
||
return stylis(prefix || !selector ? '' : selector, cssStr);
|
||
}
|
||
|
||
stringifyRules.hash = plugins.length ? plugins.reduce(function (acc, plugin) {
|
||
if (!plugin.name) {
|
||
throwStyledComponentsError(15);
|
||
}
|
||
|
||
return phash(acc, plugin.name);
|
||
}, SEED).toString() : '';
|
||
return stringifyRules;
|
||
}
|
||
|
||
//
|
||
var StyleSheetContext = React.createContext();
|
||
var StyleSheetConsumer = StyleSheetContext.Consumer;
|
||
var StylisContext = React.createContext();
|
||
var StylisConsumer = StylisContext.Consumer;
|
||
var masterSheet = new StyleSheet();
|
||
var masterStylis = createStylisInstance();
|
||
|
||
//
|
||
|
||
var Keyframes = /*#__PURE__*/function () {
|
||
function Keyframes(name, rules) {
|
||
var _this = this;
|
||
|
||
this.inject = function (styleSheet, stylisInstance) {
|
||
if (stylisInstance === void 0) {
|
||
stylisInstance = masterStylis;
|
||
}
|
||
|
||
var resolvedName = _this.name + stylisInstance.hash;
|
||
|
||
if (!styleSheet.hasNameForId(_this.id, resolvedName)) {
|
||
styleSheet.insertRules(_this.id, resolvedName, stylisInstance(_this.rules, resolvedName, '@keyframes'));
|
||
}
|
||
};
|
||
|
||
this.toString = function () {
|
||
return throwStyledComponentsError(12, String(_this.name));
|
||
};
|
||
|
||
this.name = name;
|
||
this.id = "sc-keyframes-" + name;
|
||
this.rules = rules;
|
||
}
|
||
|
||
var _proto = Keyframes.prototype;
|
||
|
||
_proto.getName = function getName(stylisInstance) {
|
||
if (stylisInstance === void 0) {
|
||
stylisInstance = masterStylis;
|
||
}
|
||
|
||
return this.name + stylisInstance.hash;
|
||
};
|
||
|
||
return Keyframes;
|
||
}();
|
||
|
||
//
|
||
|
||
/**
|
||
* inlined version of
|
||
* https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js
|
||
*/
|
||
var uppercaseCheck = /([A-Z])/;
|
||
var uppercasePattern = /([A-Z])/g;
|
||
var msPattern = /^ms-/;
|
||
|
||
var prefixAndLowerCase = function prefixAndLowerCase(_char) {
|
||
return "-" + _char.toLowerCase();
|
||
};
|
||
/**
|
||
* Hyphenates a camelcased CSS property name, for example:
|
||
*
|
||
* > hyphenateStyleName('backgroundColor')
|
||
* < "background-color"
|
||
* > hyphenateStyleName('MozTransition')
|
||
* < "-moz-transition"
|
||
* > hyphenateStyleName('msTransition')
|
||
* < "-ms-transition"
|
||
*
|
||
* As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
|
||
* is converted to `-ms-`.
|
||
*
|
||
* @param {string} string
|
||
* @return {string}
|
||
*/
|
||
|
||
|
||
function hyphenateStyleName(string) {
|
||
return uppercaseCheck.test(string) ? string.replace(uppercasePattern, prefixAndLowerCase).replace(msPattern, '-ms-') : string;
|
||
}
|
||
|
||
//
|
||
|
||
function addUnitIfNeeded(name, value) {
|
||
// https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133
|
||
// $FlowFixMe
|
||
if (value == null || typeof value === 'boolean' || value === '') {
|
||
return '';
|
||
}
|
||
|
||
if (typeof value === 'number' && value !== 0 && !(name in unitless) && !name.startsWith('--')) {
|
||
return value + "px"; // Presumes implicit 'px' suffix for unitless numbers except for CSS variables
|
||
}
|
||
|
||
return String(value).trim();
|
||
}
|
||
|
||
//
|
||
/**
|
||
* It's falsish not falsy because 0 is allowed.
|
||
*/
|
||
|
||
var isFalsish = function isFalsish(chunk) {
|
||
return chunk === undefined || chunk === null || chunk === false || chunk === '';
|
||
};
|
||
|
||
var objToCssArray = function objToCssArray(obj, prevKey) {
|
||
var rules = [];
|
||
|
||
for (var key in obj) {
|
||
if (!obj.hasOwnProperty(key) || isFalsish(obj[key])) continue;
|
||
|
||
if (Array.isArray(obj[key]) && obj[key].isCss || isFunction(obj[key])) {
|
||
rules.push(hyphenateStyleName(key) + ":", obj[key], ';');
|
||
} else if (isPlainObject(obj[key])) {
|
||
rules.push.apply(rules, objToCssArray(obj[key], key));
|
||
} else {
|
||
rules.push(hyphenateStyleName(key) + ": " + addUnitIfNeeded(key, obj[key]) + ";");
|
||
}
|
||
}
|
||
|
||
return prevKey ? [prevKey + " {"].concat(rules, ['}']) : rules;
|
||
};
|
||
function flatten(chunk, executionContext, styleSheet, stylisInstance) {
|
||
if (Array.isArray(chunk)) {
|
||
var ruleSet = [];
|
||
|
||
for (var i = 0, len = chunk.length, result; i < len; i += 1) {
|
||
result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);
|
||
if (result === '') continue;else if (Array.isArray(result)) ruleSet.push.apply(ruleSet, result);else ruleSet.push(result);
|
||
}
|
||
|
||
return ruleSet;
|
||
}
|
||
|
||
if (isFalsish(chunk)) {
|
||
return '';
|
||
}
|
||
/* Handle other components */
|
||
|
||
|
||
if (isStyledComponent(chunk)) {
|
||
return "." + chunk.styledComponentId;
|
||
}
|
||
/* Either execute or defer the function */
|
||
|
||
|
||
if (isFunction(chunk)) {
|
||
if (isStatelessFunction(chunk) && executionContext) {
|
||
var _result = chunk(executionContext);
|
||
|
||
if (process.env.NODE_ENV !== 'production' && isElement(_result)) {
|
||
// eslint-disable-next-line no-console
|
||
console.warn(getComponentName(chunk) + " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.");
|
||
}
|
||
|
||
return flatten(_result, executionContext, styleSheet, stylisInstance);
|
||
} else return chunk;
|
||
}
|
||
|
||
if (chunk instanceof Keyframes) {
|
||
if (styleSheet) {
|
||
chunk.inject(styleSheet, stylisInstance);
|
||
return chunk.getName(stylisInstance);
|
||
} else return chunk;
|
||
}
|
||
/* Handle objects */
|
||
|
||
|
||
return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();
|
||
}
|
||
|
||
//
|
||
var printed = {};
|
||
function warnOnce(message) {
|
||
if (printed[message]) return;
|
||
printed[message] = true;
|
||
if (typeof console !== 'undefined' && console.warn) console.warn(message);
|
||
}
|
||
|
||
//
|
||
var SINGLE_QUOTE = "'".charCodeAt(0);
|
||
var DOUBLE_QUOTE = '"'.charCodeAt(0);
|
||
var BACKSLASH = '\\'.charCodeAt(0);
|
||
var SLASH = '/'.charCodeAt(0);
|
||
var NEWLINE = '\n'.charCodeAt(0);
|
||
var SPACE = ' '.charCodeAt(0);
|
||
var FEED = '\f'.charCodeAt(0);
|
||
var TAB = '\t'.charCodeAt(0);
|
||
var CR = '\r'.charCodeAt(0);
|
||
var OPEN_SQUARE = '['.charCodeAt(0);
|
||
var CLOSE_SQUARE = ']'.charCodeAt(0);
|
||
var OPEN_PARENTHESES = '('.charCodeAt(0);
|
||
var CLOSE_PARENTHESES = ')'.charCodeAt(0);
|
||
var OPEN_CURLY = '{'.charCodeAt(0);
|
||
var CLOSE_CURLY = '}'.charCodeAt(0);
|
||
var SEMICOLON = ';'.charCodeAt(0);
|
||
var ASTERISK = '*'.charCodeAt(0);
|
||
var COLON = ':'.charCodeAt(0);
|
||
var AT = '@'.charCodeAt(0);
|
||
var RE_AT_END = /[ \n\t\r\f\{\(\)'"\\;/\[\]#]/g;
|
||
var RE_WORD_END = /[ \n\t\r\f\(\)\{\}:;@!'"\\\]\[#]|\/(?=\*)/g;
|
||
var RE_BAD_BRACKET = /.[\\\/\("'\n]/;
|
||
function tokenize(input, options) {
|
||
if (options === void 0) {
|
||
options = {};
|
||
}
|
||
|
||
var tokens = [];
|
||
var css = input.css.valueOf();
|
||
var ignore = options.ignoreErrors;
|
||
var code, next, quote, lines, last, content, escape, nextLine, nextOffset, escaped, escapePos, prev, n;
|
||
var length = css.length;
|
||
var offset = -1;
|
||
var line = 1;
|
||
var pos = 0;
|
||
|
||
function unclosed(what) {
|
||
throw input.error("Unclosed " + what, line, pos - offset);
|
||
}
|
||
|
||
while (pos < length) {
|
||
code = css.charCodeAt(pos);
|
||
|
||
if (code === NEWLINE || code === FEED || code === CR && css.charCodeAt(pos + 1) !== NEWLINE) {
|
||
offset = pos;
|
||
line += 1;
|
||
}
|
||
|
||
switch (code) {
|
||
case NEWLINE:
|
||
case SPACE:
|
||
case TAB:
|
||
case CR:
|
||
case FEED:
|
||
next = pos;
|
||
|
||
do {
|
||
next += 1;
|
||
code = css.charCodeAt(next);
|
||
|
||
if (code === NEWLINE) {
|
||
offset = next;
|
||
line += 1;
|
||
}
|
||
} while (code === SPACE || code === NEWLINE || code === TAB || code === CR || code === FEED);
|
||
|
||
tokens.push(['space', css.slice(pos, next)]);
|
||
pos = next - 1;
|
||
break;
|
||
|
||
case OPEN_SQUARE:
|
||
tokens.push(['[', '[', line, pos - offset]);
|
||
break;
|
||
|
||
case CLOSE_SQUARE:
|
||
tokens.push([']', ']', line, pos - offset]);
|
||
break;
|
||
|
||
case OPEN_CURLY:
|
||
tokens.push(['{', '{', line, pos - offset]);
|
||
break;
|
||
|
||
case CLOSE_CURLY:
|
||
tokens.push(['}', '}', line, pos - offset]);
|
||
break;
|
||
|
||
case COLON:
|
||
tokens.push([':', ':', line, pos - offset]);
|
||
break;
|
||
|
||
case SEMICOLON:
|
||
tokens.push([';', ';', line, pos - offset]);
|
||
break;
|
||
|
||
case OPEN_PARENTHESES:
|
||
prev = tokens.length ? tokens[tokens.length - 1][1] : '';
|
||
n = css.charCodeAt(pos + 1);
|
||
|
||
if (prev === 'url' && n !== SINGLE_QUOTE && n !== DOUBLE_QUOTE && n !== SPACE && n !== NEWLINE && n !== TAB && n !== FEED && n !== CR) {
|
||
next = pos;
|
||
|
||
do {
|
||
escaped = false;
|
||
next = css.indexOf(')', next + 1);
|
||
|
||
if (next === -1) {
|
||
if (ignore) {
|
||
next = pos;
|
||
break;
|
||
} else {
|
||
unclosed('bracket');
|
||
}
|
||
}
|
||
|
||
escapePos = next;
|
||
|
||
while (css.charCodeAt(escapePos - 1) === BACKSLASH) {
|
||
escapePos -= 1;
|
||
escaped = !escaped;
|
||
}
|
||
} while (escaped);
|
||
|
||
tokens.push(['brackets', css.slice(pos, next + 1), line, pos - offset, line, next - offset]);
|
||
pos = next;
|
||
} else {
|
||
next = css.indexOf(')', pos + 1);
|
||
content = css.slice(pos, next + 1);
|
||
|
||
if (next === -1 || RE_BAD_BRACKET.test(content)) {
|
||
tokens.push(['(', '(', line, pos - offset]);
|
||
} else {
|
||
tokens.push(['brackets', content, line, pos - offset, line, next - offset]);
|
||
pos = next;
|
||
}
|
||
}
|
||
|
||
break;
|
||
|
||
case CLOSE_PARENTHESES:
|
||
tokens.push([')', ')', line, pos - offset]);
|
||
break;
|
||
|
||
case SINGLE_QUOTE:
|
||
case DOUBLE_QUOTE:
|
||
quote = code === SINGLE_QUOTE ? "'" : '"';
|
||
next = pos;
|
||
|
||
do {
|
||
escaped = false;
|
||
next = css.indexOf(quote, next + 1);
|
||
|
||
if (next === -1) {
|
||
if (ignore) {
|
||
next = pos + 1;
|
||
break;
|
||
} else {
|
||
unclosed('quote');
|
||
}
|
||
}
|
||
|
||
escapePos = next;
|
||
|
||
while (css.charCodeAt(escapePos - 1) === BACKSLASH) {
|
||
escapePos -= 1;
|
||
escaped = !escaped;
|
||
}
|
||
} while (escaped);
|
||
|
||
content = css.slice(pos, next + 1);
|
||
lines = content.split('\n');
|
||
last = lines.length - 1;
|
||
|
||
if (last > 0) {
|
||
nextLine = line + last;
|
||
nextOffset = next - lines[last].length;
|
||
} else {
|
||
nextLine = line;
|
||
nextOffset = offset;
|
||
}
|
||
|
||
tokens.push(['string', css.slice(pos, next + 1), line, pos - offset, nextLine, next - nextOffset]);
|
||
offset = nextOffset;
|
||
line = nextLine;
|
||
pos = next;
|
||
break;
|
||
|
||
case AT:
|
||
RE_AT_END.lastIndex = pos + 1;
|
||
RE_AT_END.test(css);
|
||
|
||
if (RE_AT_END.lastIndex === 0) {
|
||
next = css.length - 1;
|
||
} else {
|
||
next = RE_AT_END.lastIndex - 2;
|
||
}
|
||
|
||
tokens.push(['at-word', css.slice(pos, next + 1), line, pos - offset, line, next - offset]);
|
||
pos = next;
|
||
break;
|
||
|
||
case BACKSLASH:
|
||
next = pos;
|
||
escape = true;
|
||
|
||
while (css.charCodeAt(next + 1) === BACKSLASH) {
|
||
next += 1;
|
||
escape = !escape;
|
||
}
|
||
|
||
code = css.charCodeAt(next + 1);
|
||
|
||
if (escape && code !== SLASH && code !== SPACE && code !== NEWLINE && code !== TAB && code !== CR && code !== FEED) {
|
||
next += 1;
|
||
}
|
||
|
||
tokens.push(['word', css.slice(pos, next + 1), line, pos - offset, line, next - offset]);
|
||
pos = next;
|
||
break;
|
||
|
||
default:
|
||
if (code === SLASH && css.charCodeAt(pos + 1) === ASTERISK) {
|
||
next = css.indexOf('*/', pos + 2) + 1;
|
||
|
||
if (next === 0) {
|
||
if (ignore) {
|
||
next = css.length;
|
||
} else {
|
||
unclosed('comment');
|
||
}
|
||
}
|
||
|
||
content = css.slice(pos, next + 1);
|
||
lines = content.split('\n');
|
||
last = lines.length - 1;
|
||
|
||
if (last > 0) {
|
||
nextLine = line + last;
|
||
nextOffset = next - lines[last].length;
|
||
} else {
|
||
nextLine = line;
|
||
nextOffset = offset;
|
||
}
|
||
|
||
tokens.push(['comment', content, line, pos - offset, nextLine, next - nextOffset]);
|
||
offset = nextOffset;
|
||
line = nextLine;
|
||
pos = next;
|
||
} else {
|
||
RE_WORD_END.lastIndex = pos + 1;
|
||
RE_WORD_END.test(css);
|
||
|
||
if (RE_WORD_END.lastIndex === 0) {
|
||
next = css.length - 1;
|
||
} else {
|
||
next = RE_WORD_END.lastIndex - 2;
|
||
}
|
||
|
||
tokens.push(['word', css.slice(pos, next + 1), line, pos - offset, line, next - offset]);
|
||
pos = next;
|
||
}
|
||
|
||
break;
|
||
}
|
||
|
||
pos++;
|
||
}
|
||
|
||
return tokens;
|
||
}
|
||
|
||
//
|
||
var HIGHLIGHT_THEME = {
|
||
brackets: [36, 39],
|
||
// cyan
|
||
string: [31, 39],
|
||
// red
|
||
'at-word': [31, 39],
|
||
// red
|
||
comment: [90, 39],
|
||
// gray
|
||
'{': [32, 39],
|
||
// green
|
||
'}': [32, 39],
|
||
// green
|
||
':': [1, 22],
|
||
// bold
|
||
';': [1, 22],
|
||
// bold
|
||
'(': [1, 22],
|
||
// bold
|
||
')': [1, 22] // bold
|
||
|
||
};
|
||
|
||
function code(color) {
|
||
return "\x1B[" + color + "m";
|
||
}
|
||
|
||
function terminalHighlight(css) {
|
||
var tokens = tokenize(new Input(css), {
|
||
ignoreErrors: true
|
||
});
|
||
var result = [];
|
||
tokens.forEach(function (token) {
|
||
var color = HIGHLIGHT_THEME[token[0]];
|
||
|
||
if (color) {
|
||
result.push(token[1].split(/\r?\n/).map(function (i) {
|
||
return code(color[0]) + i + code(color[1]);
|
||
}).join('\n'));
|
||
} else {
|
||
result.push(token[1]);
|
||
}
|
||
});
|
||
return result.join('');
|
||
}
|
||
|
||
/**
|
||
* The CSS parser throws this error for broken CSS.
|
||
*
|
||
* Custom parsers can throw this error for broken custom syntax using
|
||
* the {@link Node#error} method.
|
||
*
|
||
* PostCSS will use the input source map to detect the original error location.
|
||
* If you wrote a Sass file, compiled it to CSS and then parsed it with PostCSS,
|
||
* PostCSS will show the original position in the Sass file.
|
||
*
|
||
* If you need the position in the PostCSS input
|
||
* (e.g., to debug the previous compiler), use `error.input.file`.
|
||
*
|
||
* @example
|
||
* // Catching and checking syntax error
|
||
* try {
|
||
* postcss.parse('a{')
|
||
* } catch (error) {
|
||
* if ( error.name === 'CssSyntaxError' ) {
|
||
* error //=> CssSyntaxError
|
||
* }
|
||
* }
|
||
*
|
||
* @example
|
||
* // Raising error from plugin
|
||
* throw node.error('Unknown variable', { plugin: 'postcss-vars' });
|
||
*/
|
||
|
||
var CssSyntaxError = /*#__PURE__*/function () {
|
||
/**
|
||
* @param {string} message - error message
|
||
* @param {number} [line] - source line of the error
|
||
* @param {number} [column] - source column of the error
|
||
* @param {string} [source] - source code of the broken file
|
||
* @param {string} [file] - absolute path to the broken file
|
||
* @param {string} [plugin] - PostCSS plugin name, if error came from plugin
|
||
*/
|
||
function CssSyntaxError(message, line, column, source, file, plugin) {
|
||
/**
|
||
* @member {string} - Always equal to `'CssSyntaxError'`. You should
|
||
* always check error type
|
||
* by `error.name === 'CssSyntaxError'` instead of
|
||
* `error instanceof CssSyntaxError`, because
|
||
* npm could have several PostCSS versions.
|
||
*
|
||
* @example
|
||
* if ( error.name === 'CssSyntaxError' ) {
|
||
* error //=> CssSyntaxError
|
||
* }
|
||
*/
|
||
this.name = 'CssSyntaxError';
|
||
/**
|
||
* @member {string} - Error message.
|
||
*
|
||
* @example
|
||
* error.message //=> 'Unclosed block'
|
||
*/
|
||
|
||
this.reason = message;
|
||
|
||
if (file) {
|
||
/**
|
||
* @member {string} - Absolute path to the broken file.
|
||
*
|
||
* @example
|
||
* error.file //=> 'a.sass'
|
||
* error.input.file //=> 'a.css'
|
||
*/
|
||
this.file = file;
|
||
}
|
||
|
||
if (source) {
|
||
/**
|
||
* @member {string} - Source code of the broken file.
|
||
*
|
||
* @example
|
||
* error.source //=> 'a { b {} }'
|
||
* error.input.column //=> 'a b { }'
|
||
*/
|
||
this.source = source;
|
||
}
|
||
|
||
if (plugin) {
|
||
/**
|
||
* @member {string} - Plugin name, if error came from plugin.
|
||
*
|
||
* @example
|
||
* error.plugin //=> 'postcss-vars'
|
||
*/
|
||
this.plugin = plugin;
|
||
}
|
||
|
||
if (typeof line !== 'undefined' && typeof column !== 'undefined') {
|
||
/**
|
||
* @member {number} - Source line of the error.
|
||
*
|
||
* @example
|
||
* error.line //=> 2
|
||
* error.input.line //=> 4
|
||
*/
|
||
this.line = line;
|
||
/**
|
||
* @member {number} - Source column of the error.
|
||
*
|
||
* @example
|
||
* error.column //=> 1
|
||
* error.input.column //=> 4
|
||
*/
|
||
|
||
this.column = column;
|
||
}
|
||
|
||
this.setMessage();
|
||
|
||
if (Error.captureStackTrace) {
|
||
Error.captureStackTrace(this, CssSyntaxError);
|
||
}
|
||
}
|
||
|
||
var _proto = CssSyntaxError.prototype;
|
||
|
||
_proto.setMessage = function setMessage() {
|
||
/**
|
||
* @member {string} - Full error text in the GNU error format
|
||
* with plugin, file, line and column.
|
||
*
|
||
* @example
|
||
* error.message //=> 'a.css:1:1: Unclosed block'
|
||
*/
|
||
this.message = this.plugin ? this.plugin + ": " : '';
|
||
this.message += this.file ? this.file : '<css input>';
|
||
|
||
if (typeof this.line !== 'undefined') {
|
||
this.message += ":" + this.line + ":" + this.column;
|
||
}
|
||
|
||
this.message += ": " + this.reason;
|
||
}
|
||
/**
|
||
* Returns a few lines of CSS source that caused the error.
|
||
*
|
||
* If the CSS has an input source map without `sourceContent`,
|
||
* this method will return an empty string.
|
||
*
|
||
* @param {boolean} [color] whether arrow will be colored red by terminal
|
||
* color codes. By default, PostCSS will detect
|
||
* color support by `process.stdout.isTTY`
|
||
* and `process.env.NODE_DISABLE_COLORS`.
|
||
*
|
||
* @example
|
||
* error.showSourceCode() //=> " 4 | }
|
||
* // 5 | a {
|
||
* // > 6 | bad
|
||
* // | ^
|
||
* // 7 | }
|
||
* // 8 | b {"
|
||
*
|
||
* @return {string} few lines of CSS source that caused the error
|
||
*/
|
||
;
|
||
|
||
_proto.showSourceCode = function showSourceCode(color) {
|
||
var _this = this;
|
||
|
||
if (!this.source) return '';
|
||
var css = this.source;
|
||
if (typeof color === 'undefined') color = supportsColor;
|
||
if (color) css = terminalHighlight(css);
|
||
var lines = css.split(/\r?\n/);
|
||
var start = Math.max(this.line - 3, 0);
|
||
var end = Math.min(this.line + 2, lines.length);
|
||
var maxWidth = String(end).length;
|
||
return lines.slice(start, end).map(function (line, index) {
|
||
var number = start + 1 + index;
|
||
var padded = (" " + number).slice(-maxWidth);
|
||
var gutter = " " + padded + " | ";
|
||
|
||
if (number === _this.line) {
|
||
var spacing = gutter.replace(/\d/g, ' ') + line.slice(0, _this.column - 1).replace(/[^\t]/g, ' ');
|
||
return ">" + gutter + line + "\n " + spacing + "^";
|
||
} else {
|
||
return " " + gutter + line;
|
||
}
|
||
}).join('\n');
|
||
}
|
||
/**
|
||
* Returns error position, message and source code of the broken part.
|
||
*
|
||
* @example
|
||
* error.toString() //=> "CssSyntaxError: app.css:1:1: Unclosed block
|
||
* // > 1 | a {
|
||
* // | ^"
|
||
*
|
||
* @return {string} error position, message and source code
|
||
*/
|
||
;
|
||
|
||
_proto.toString = function toString() {
|
||
var code = this.showSourceCode();
|
||
|
||
if (code) {
|
||
code = "\n\n" + code + "\n";
|
||
}
|
||
|
||
return this.name + ": " + this.message + code;
|
||
};
|
||
|
||
_createClass(CssSyntaxError, [{
|
||
key: "generated",
|
||
get: function get() {
|
||
warnOnce('CssSyntaxError#generated is deprecated. Use input instead.');
|
||
return this.input;
|
||
}
|
||
/**
|
||
* @memberof CssSyntaxError#
|
||
* @member {Input} input - Input object with PostCSS internal information
|
||
* about input file. If input has source map
|
||
* from previous tool, PostCSS will use origin
|
||
* (for example, Sass) source. You can use this
|
||
* object to get PostCSS input source.
|
||
*
|
||
* @example
|
||
* error.input.file //=> 'a.css'
|
||
* error.file //=> 'a.sass'
|
||
*/
|
||
|
||
}]);
|
||
|
||
return CssSyntaxError;
|
||
}();
|
||
|
||
//
|
||
|
||
/* eslint-disable valid-jsdoc */
|
||
var defaultRaw = {
|
||
colon: ': ',
|
||
indent: ' ',
|
||
beforeDecl: '\n',
|
||
beforeRule: '\n',
|
||
beforeOpen: ' ',
|
||
beforeClose: '\n',
|
||
beforeComment: '\n',
|
||
after: '\n',
|
||
emptyBody: '',
|
||
commentLeft: ' ',
|
||
commentRight: ' '
|
||
};
|
||
|
||
function capitalize(str) {
|
||
return str[0].toUpperCase() + str.slice(1);
|
||
}
|
||
|
||
var Stringifier = /*#__PURE__*/function () {
|
||
function Stringifier(builder) {
|
||
this.builder = builder;
|
||
}
|
||
|
||
var _proto = Stringifier.prototype;
|
||
|
||
_proto.stringify = function stringify(node, semicolon) {
|
||
this[node.type](node, semicolon);
|
||
};
|
||
|
||
_proto.root = function root(node) {
|
||
this.body(node);
|
||
if (node.raws.after) this.builder(node.raws.after);
|
||
};
|
||
|
||
_proto.comment = function comment(node) {
|
||
var left = this.raw(node, 'left', 'commentLeft');
|
||
var right = this.raw(node, 'right', 'commentRight');
|
||
this.builder("/*" + left + node.text + right + "*/", node);
|
||
};
|
||
|
||
_proto.decl = function decl(node, semicolon) {
|
||
var between = this.raw(node, 'between', 'colon');
|
||
var string = node.prop + between + this.rawValue(node, 'value');
|
||
|
||
if (node.important) {
|
||
string += node.raws.important || ' !important';
|
||
}
|
||
|
||
if (semicolon) string += ';';
|
||
this.builder(string, node);
|
||
};
|
||
|
||
_proto.rule = function rule(node) {
|
||
this.block(node, this.rawValue(node, 'selector'));
|
||
};
|
||
|
||
_proto.atrule = function atrule(node, semicolon) {
|
||
var name = "@" + node.name;
|
||
var params = node.params ? this.rawValue(node, 'params') : '';
|
||
|
||
if (typeof node.raws.afterName !== 'undefined') {
|
||
name += node.raws.afterName;
|
||
} else if (params) {
|
||
name += ' ';
|
||
}
|
||
|
||
if (node.nodes) {
|
||
this.block(node, name + params);
|
||
} else {
|
||
var end = (node.raws.between || '') + (semicolon ? ';' : '');
|
||
this.builder(name + params + end, node);
|
||
}
|
||
};
|
||
|
||
_proto.body = function body(node) {
|
||
var last = node.nodes.length - 1;
|
||
|
||
while (last > 0) {
|
||
if (node.nodes[last].type !== 'comment') break;
|
||
last -= 1;
|
||
}
|
||
|
||
var semicolon = this.raw(node, 'semicolon');
|
||
|
||
for (var i = 0; i < node.nodes.length; i++) {
|
||
var child = node.nodes[i];
|
||
var before = this.raw(child, 'before');
|
||
if (before) this.builder(before);
|
||
this.stringify(child, last !== i || semicolon);
|
||
}
|
||
};
|
||
|
||
_proto.block = function block(node, start) {
|
||
var between = this.raw(node, 'between', 'beforeOpen');
|
||
this.builder(start + between + "{", node, 'start');
|
||
var after;
|
||
|
||
if (node.nodes && node.nodes.length) {
|
||
this.body(node);
|
||
after = this.raw(node, 'after');
|
||
} else {
|
||
after = this.raw(node, 'after', 'emptyBody');
|
||
}
|
||
|
||
if (after) this.builder(after);
|
||
this.builder('}', node, 'end');
|
||
};
|
||
|
||
_proto.raw = function raw(node, own, detect) {
|
||
var value;
|
||
if (!detect) detect = own; // Already had
|
||
|
||
if (own) {
|
||
value = node.raws[own];
|
||
if (typeof value !== 'undefined') return value;
|
||
}
|
||
|
||
var parent = node.parent; // Hack for first rule in CSS
|
||
|
||
if (detect === 'before') {
|
||
if (!parent || parent.type === 'root' && parent.first === node) {
|
||
return '';
|
||
}
|
||
} // Floating child without parent
|
||
|
||
|
||
if (!parent) return defaultRaw[detect]; // Detect style by other nodes
|
||
|
||
var root = node.root();
|
||
if (!root.rawCache) root.rawCache = {};
|
||
|
||
if (typeof root.rawCache[detect] !== 'undefined') {
|
||
return root.rawCache[detect];
|
||
}
|
||
|
||
if (detect === 'before' || detect === 'after') {
|
||
return this.beforeAfter(node, detect);
|
||
} else {
|
||
var method = "raw" + capitalize(detect);
|
||
|
||
if (this[method]) {
|
||
value = this[method](root, node);
|
||
} else {
|
||
root.walk(function (i) {
|
||
value = i.raws[own];
|
||
if (typeof value !== 'undefined') return false;
|
||
});
|
||
}
|
||
}
|
||
|
||
if (typeof value === 'undefined') value = defaultRaw[detect];
|
||
root.rawCache[detect] = value;
|
||
return value;
|
||
};
|
||
|
||
_proto.rawSemicolon = function rawSemicolon(root) {
|
||
var value;
|
||
root.walk(function (i) {
|
||
if (i.nodes && i.nodes.length && i.last.type === 'decl') {
|
||
value = i.raws.semicolon;
|
||
if (typeof value !== 'undefined') return false;
|
||
}
|
||
});
|
||
return value;
|
||
};
|
||
|
||
_proto.rawEmptyBody = function rawEmptyBody(root) {
|
||
var value;
|
||
root.walk(function (i) {
|
||
if (i.nodes && i.nodes.length === 0) {
|
||
value = i.raws.after;
|
||
if (typeof value !== 'undefined') return false;
|
||
}
|
||
});
|
||
return value;
|
||
};
|
||
|
||
_proto.rawIndent = function rawIndent(root) {
|
||
if (root.raws.indent) return root.raws.indent;
|
||
var value;
|
||
root.walk(function (i) {
|
||
var p = i.parent;
|
||
|
||
if (p && p !== root && p.parent && p.parent === root) {
|
||
if (typeof i.raws.before !== 'undefined') {
|
||
var parts = i.raws.before.split('\n');
|
||
value = parts[parts.length - 1];
|
||
value = value.replace(/[^\s]/g, '');
|
||
return false;
|
||
}
|
||
}
|
||
});
|
||
return value;
|
||
};
|
||
|
||
_proto.rawBeforeComment = function rawBeforeComment(root, node) {
|
||
var value;
|
||
root.walkComments(function (i) {
|
||
if (typeof i.raws.before !== 'undefined') {
|
||
value = i.raws.before;
|
||
|
||
if (value.indexOf('\n') !== -1) {
|
||
value = value.replace(/[^\n]+$/, '');
|
||
}
|
||
|
||
return false;
|
||
}
|
||
});
|
||
|
||
if (typeof value === 'undefined') {
|
||
value = this.raw(node, null, 'beforeDecl');
|
||
}
|
||
|
||
return value;
|
||
};
|
||
|
||
_proto.rawBeforeDecl = function rawBeforeDecl(root, node) {
|
||
var value;
|
||
root.walkDecls(function (i) {
|
||
if (typeof i.raws.before !== 'undefined') {
|
||
value = i.raws.before;
|
||
|
||
if (value.indexOf('\n') !== -1) {
|
||
value = value.replace(/[^\n]+$/, '');
|
||
}
|
||
|
||
return false;
|
||
}
|
||
});
|
||
|
||
if (typeof value === 'undefined') {
|
||
value = this.raw(node, null, 'beforeRule');
|
||
}
|
||
|
||
return value;
|
||
};
|
||
|
||
_proto.rawBeforeRule = function rawBeforeRule(root) {
|
||
var value;
|
||
root.walk(function (i) {
|
||
if (i.nodes && (i.parent !== root || root.first !== i)) {
|
||
if (typeof i.raws.before !== 'undefined') {
|
||
value = i.raws.before;
|
||
|
||
if (value.indexOf('\n') !== -1) {
|
||
value = value.replace(/[^\n]+$/, '');
|
||
}
|
||
|
||
return false;
|
||
}
|
||
}
|
||
});
|
||
return value;
|
||
};
|
||
|
||
_proto.rawBeforeClose = function rawBeforeClose(root) {
|
||
var value;
|
||
root.walk(function (i) {
|
||
if (i.nodes && i.nodes.length > 0) {
|
||
if (typeof i.raws.after !== 'undefined') {
|
||
value = i.raws.after;
|
||
|
||
if (value.indexOf('\n') !== -1) {
|
||
value = value.replace(/[^\n]+$/, '');
|
||
}
|
||
|
||
return false;
|
||
}
|
||
}
|
||
});
|
||
return value;
|
||
};
|
||
|
||
_proto.rawBeforeOpen = function rawBeforeOpen(root) {
|
||
var value;
|
||
root.walk(function (i) {
|
||
if (i.type !== 'decl') {
|
||
value = i.raws.between;
|
||
if (typeof value !== 'undefined') return false;
|
||
}
|
||
});
|
||
return value;
|
||
};
|
||
|
||
_proto.rawColon = function rawColon(root) {
|
||
var value;
|
||
root.walkDecls(function (i) {
|
||
if (typeof i.raws.between !== 'undefined') {
|
||
value = i.raws.between.replace(/[^\s:]/g, '');
|
||
return false;
|
||
}
|
||
});
|
||
return value;
|
||
};
|
||
|
||
_proto.beforeAfter = function beforeAfter(node, detect) {
|
||
var value;
|
||
|
||
if (node.type === 'decl') {
|
||
value = this.raw(node, null, 'beforeDecl');
|
||
} else if (node.type === 'comment') {
|
||
value = this.raw(node, null, 'beforeComment');
|
||
} else if (detect === 'before') {
|
||
value = this.raw(node, null, 'beforeRule');
|
||
} else {
|
||
value = this.raw(node, null, 'beforeClose');
|
||
}
|
||
|
||
var buf = node.parent;
|
||
var depth = 0;
|
||
|
||
while (buf && buf.type !== 'root') {
|
||
depth += 1;
|
||
buf = buf.parent;
|
||
}
|
||
|
||
if (value.indexOf('\n') !== -1) {
|
||
var indent = this.raw(node, null, 'indent');
|
||
|
||
if (indent.length) {
|
||
for (var step = 0; step < depth; step++) {
|
||
value += indent;
|
||
}
|
||
}
|
||
}
|
||
|
||
return value;
|
||
};
|
||
|
||
_proto.rawValue = function rawValue(node, prop) {
|
||
var value = node[prop];
|
||
var raw = node.raws[prop];
|
||
|
||
if (raw && raw.value === value) {
|
||
return raw.raw;
|
||
} else {
|
||
return value;
|
||
}
|
||
};
|
||
|
||
return Stringifier;
|
||
}();
|
||
|
||
//
|
||
function stringify(node, builder) {
|
||
var str = new Stringifier(builder);
|
||
str.stringify(node);
|
||
}
|
||
|
||
/**
|
||
* @typedef {object} position
|
||
* @property {number} line - source line in file
|
||
* @property {number} column - source column in file
|
||
*/
|
||
|
||
/**
|
||
* @typedef {object} source
|
||
* @property {Input} input - {@link Input} with input file
|
||
* @property {position} start - The starting position of the node’s source
|
||
* @property {position} end - The ending position of the node’s source
|
||
*/
|
||
|
||
var cloneNode = function cloneNode(obj, parent) {
|
||
var cloned = new obj.constructor();
|
||
|
||
for (var i in obj) {
|
||
if (!obj.hasOwnProperty(i)) continue;
|
||
var value = obj[i];
|
||
var type = typeof value;
|
||
|
||
if (i === 'parent' && type === 'object') {
|
||
if (parent) cloned[i] = parent;
|
||
} else if (i === 'source') {
|
||
cloned[i] = value;
|
||
} else if (value instanceof Array) {
|
||
cloned[i] = value.map(function (j) {
|
||
return cloneNode(j, cloned);
|
||
});
|
||
} else if (i !== 'before' && i !== 'after' && i !== 'between' && i !== 'semicolon') {
|
||
if (type === 'object' && value !== null) value = cloneNode(value);
|
||
cloned[i] = value;
|
||
}
|
||
}
|
||
|
||
return cloned;
|
||
};
|
||
/**
|
||
* All node classes inherit the following common methods.
|
||
*
|
||
* @abstract
|
||
*/
|
||
|
||
|
||
var Node = /*#__PURE__*/function () {
|
||
/**
|
||
* @param {object} [defaults] - value for node properties
|
||
*/
|
||
function Node(defaults) {
|
||
if (defaults === void 0) {
|
||
defaults = {};
|
||
}
|
||
|
||
this.raws = {};
|
||
|
||
for (var name in defaults) {
|
||
this[name] = defaults[name];
|
||
}
|
||
}
|
||
/**
|
||
* Returns a CssSyntaxError instance containing the original position
|
||
* of the node in the source, showing line and column numbers and also
|
||
* a small excerpt to facilitate debugging.
|
||
*
|
||
* If present, an input source map will be used to get the original position
|
||
* of the source, even from a previous compilation step
|
||
* (e.g., from Sass compilation).
|
||
*
|
||
* This method produces very useful error messages.
|
||
*
|
||
* @param {string} message - error description
|
||
* @param {object} [opts] - options
|
||
* @param {string} opts.plugin - plugin name that created this error.
|
||
* PostCSS will set it automatically.
|
||
* @param {string} opts.word - a word inside a node’s string that should
|
||
* be highlighted as the source of the error
|
||
* @param {number} opts.index - an index inside a node’s string that should
|
||
* be highlighted as the source of the error
|
||
*
|
||
* @return {CssSyntaxError} error object to throw it
|
||
*
|
||
* @example
|
||
* if ( !variables[name] ) {
|
||
* throw decl.error('Unknown variable ' + name, { word: name });
|
||
* // CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black
|
||
* // color: $black
|
||
* // a
|
||
* // ^
|
||
* // background: white
|
||
* }
|
||
*/
|
||
|
||
|
||
var _proto = Node.prototype;
|
||
|
||
_proto.error = function error(message, opts) {
|
||
if (opts === void 0) {
|
||
opts = {};
|
||
}
|
||
|
||
if (this.source) {
|
||
var pos = this.positionBy(opts);
|
||
return this.source.input.error(message, pos.line, pos.column, opts);
|
||
} else {
|
||
return new CssSyntaxError(message);
|
||
}
|
||
}
|
||
/**
|
||
* This method is provided as a convenience wrapper for {@link Result#warn}.
|
||
*
|
||
* @param {Result} result - the {@link Result} instance
|
||
* that will receive the warning
|
||
* @param {string} text - warning message
|
||
* @param {object} [opts] - options
|
||
* @param {string} opts.plugin - plugin name that created this warning.
|
||
* PostCSS will set it automatically.
|
||
* @param {string} opts.word - a word inside a node’s string that should
|
||
* be highlighted as the source of the warning
|
||
* @param {number} opts.index - an index inside a node’s string that should
|
||
* be highlighted as the source of the warning
|
||
*
|
||
* @return {Warning} created warning object
|
||
*
|
||
* @example
|
||
* const plugin = postcss.plugin('postcss-deprecated', () => {
|
||
* return (root, result) => {
|
||
* root.walkDecls('bad', decl => {
|
||
* decl.warn(result, 'Deprecated property bad');
|
||
* });
|
||
* };
|
||
* });
|
||
*/
|
||
;
|
||
|
||
_proto.warn = function warn(result, text, opts) {
|
||
var data = {
|
||
node: this
|
||
};
|
||
|
||
for (var i in opts) {
|
||
data[i] = opts[i];
|
||
}
|
||
|
||
return result.warn(text, data);
|
||
}
|
||
/**
|
||
* Removes the node from its parent and cleans the parent properties
|
||
* from the node and its children.
|
||
*
|
||
* @example
|
||
* if ( decl.prop.match(/^-webkit-/) ) {
|
||
* decl.remove();
|
||
* }
|
||
*
|
||
* @return {Node} node to make calls chain
|
||
*/
|
||
;
|
||
|
||
_proto.remove = function remove() {
|
||
if (this.parent) {
|
||
this.parent.removeChild(this);
|
||
}
|
||
|
||
this.parent = undefined;
|
||
return this;
|
||
}
|
||
/**
|
||
* Returns a CSS string representing the node.
|
||
*
|
||
* @param {stringifier|syntax} [stringifier] - a syntax to use
|
||
* in string generation
|
||
*
|
||
* @return {string} CSS string of this node
|
||
*
|
||
* @example
|
||
* postcss.rule({ selector: 'a' }).toString() //=> "a {}"
|
||
*/
|
||
;
|
||
|
||
_proto.toString = function toString(stringifier) {
|
||
if (stringifier === void 0) {
|
||
stringifier = stringify;
|
||
}
|
||
|
||
if (stringifier.stringify) stringifier = stringifier.stringify;
|
||
var result = '';
|
||
stringifier(this, function (i) {
|
||
result += i;
|
||
});
|
||
return result;
|
||
}
|
||
/**
|
||
* Returns a clone of the node.
|
||
*
|
||
* The resulting cloned node and its (cloned) children will have
|
||
* a clean parent and code style properties.
|
||
*
|
||
* @param {object} [overrides] - new properties to override in the clone.
|
||
*
|
||
* @example
|
||
* const cloned = decl.clone({ prop: '-moz-' + decl.prop });
|
||
* cloned.raws.before //=> undefined
|
||
* cloned.parent //=> undefined
|
||
* cloned.toString() //=> -moz-transform: scale(0)
|
||
*
|
||
* @return {Node} clone of the node
|
||
*/
|
||
;
|
||
|
||
_proto.clone = function clone(overrides) {
|
||
if (overrides === void 0) {
|
||
overrides = {};
|
||
}
|
||
|
||
var cloned = cloneNode(this);
|
||
|
||
for (var name in overrides) {
|
||
cloned[name] = overrides[name];
|
||
}
|
||
|
||
return cloned;
|
||
}
|
||
/**
|
||
* Shortcut to clone the node and insert the resulting cloned node
|
||
* before the current node.
|
||
*
|
||
* @param {object} [overrides] - new properties to override in the clone.
|
||
*
|
||
* @example
|
||
* decl.cloneBefore({ prop: '-moz-' + decl.prop });
|
||
*
|
||
* @return {Node} - new node
|
||
*/
|
||
;
|
||
|
||
_proto.cloneBefore = function cloneBefore(overrides) {
|
||
if (overrides === void 0) {
|
||
overrides = {};
|
||
}
|
||
|
||
var cloned = this.clone(overrides);
|
||
this.parent.insertBefore(this, cloned);
|
||
return cloned;
|
||
}
|
||
/**
|
||
* Shortcut to clone the node and insert the resulting cloned node
|
||
* after the current node.
|
||
*
|
||
* @param {object} [overrides] - new properties to override in the clone.
|
||
*
|
||
* @return {Node} - new node
|
||
*/
|
||
;
|
||
|
||
_proto.cloneAfter = function cloneAfter(overrides) {
|
||
if (overrides === void 0) {
|
||
overrides = {};
|
||
}
|
||
|
||
var cloned = this.clone(overrides);
|
||
this.parent.insertAfter(this, cloned);
|
||
return cloned;
|
||
}
|
||
/**
|
||
* Inserts node(s) before the current node and removes the current node.
|
||
*
|
||
* @param {...Node} nodes - node(s) to replace current one
|
||
*
|
||
* @example
|
||
* if ( atrule.name == 'mixin' ) {
|
||
* atrule.replaceWith(mixinRules[atrule.params]);
|
||
* }
|
||
*
|
||
* @return {Node} current node to methods chain
|
||
*/
|
||
;
|
||
|
||
_proto.replaceWith = function replaceWith() {
|
||
var _this = this;
|
||
|
||
if (this.parent) {
|
||
for (var _len = arguments.length, nodes = new Array(_len), _key = 0; _key < _len; _key++) {
|
||
nodes[_key] = arguments[_key];
|
||
}
|
||
|
||
nodes.forEach(function (node) {
|
||
_this.parent.insertBefore(_this, node);
|
||
});
|
||
this.remove();
|
||
}
|
||
|
||
return this;
|
||
}
|
||
/**
|
||
* Removes the node from its current parent and inserts it
|
||
* at the end of `newParent`.
|
||
*
|
||
* This will clean the `before` and `after` code {@link Node#raws} data
|
||
* from the node and replace them with the indentation style of `newParent`.
|
||
* It will also clean the `between` property
|
||
* if `newParent` is in another {@link Root}.
|
||
*
|
||
* @param {Container} newParent - container node where the current node
|
||
* will be moved
|
||
*
|
||
* @example
|
||
* atrule.moveTo(atrule.root());
|
||
*
|
||
* @return {Node} current node to methods chain
|
||
*/
|
||
;
|
||
|
||
_proto.moveTo = function moveTo(newParent) {
|
||
this.cleanRaws(this.root() === newParent.root());
|
||
this.remove();
|
||
newParent.append(this);
|
||
return this;
|
||
}
|
||
/**
|
||
* Removes the node from its current parent and inserts it into
|
||
* a new parent before `otherNode`.
|
||
*
|
||
* This will also clean the node’s code style properties just as it would
|
||
* in {@link Node#moveTo}.
|
||
*
|
||
* @param {Node} otherNode - node that will be before current node
|
||
*
|
||
* @return {Node} current node to methods chain
|
||
*/
|
||
;
|
||
|
||
_proto.moveBefore = function moveBefore(otherNode) {
|
||
this.cleanRaws(this.root() === otherNode.root());
|
||
this.remove();
|
||
otherNode.parent.insertBefore(otherNode, this);
|
||
return this;
|
||
}
|
||
/**
|
||
* Removes the node from its current parent and inserts it into
|
||
* a new parent after `otherNode`.
|
||
*
|
||
* This will also clean the node’s code style properties just as it would
|
||
* in {@link Node#moveTo}.
|
||
*
|
||
* @param {Node} otherNode - node that will be after current node
|
||
*
|
||
* @return {Node} current node to methods chain
|
||
*/
|
||
;
|
||
|
||
_proto.moveAfter = function moveAfter(otherNode) {
|
||
this.cleanRaws(this.root() === otherNode.root());
|
||
this.remove();
|
||
otherNode.parent.insertAfter(otherNode, this);
|
||
return this;
|
||
}
|
||
/**
|
||
* Returns the next child of the node’s parent.
|
||
* Returns `undefined` if the current node is the last child.
|
||
*
|
||
* @return {Node|undefined} next node
|
||
*
|
||
* @example
|
||
* if ( comment.text === 'delete next' ) {
|
||
* const next = comment.next();
|
||
* if ( next ) {
|
||
* next.remove();
|
||
* }
|
||
* }
|
||
*/
|
||
;
|
||
|
||
_proto.next = function next() {
|
||
var index = this.parent.index(this);
|
||
return this.parent.nodes[index + 1];
|
||
}
|
||
/**
|
||
* Returns the previous child of the node’s parent.
|
||
* Returns `undefined` if the current node is the first child.
|
||
*
|
||
* @return {Node|undefined} previous node
|
||
*
|
||
* @example
|
||
* const annotation = decl.prev();
|
||
* if ( annotation.type == 'comment' ) {
|
||
* readAnnotation(annotation.text);
|
||
* }
|
||
*/
|
||
;
|
||
|
||
_proto.prev = function prev() {
|
||
var index = this.parent.index(this);
|
||
return this.parent.nodes[index - 1];
|
||
};
|
||
|
||
_proto.toJSON = function toJSON() {
|
||
var fixed = {};
|
||
|
||
for (var name in this) {
|
||
if (!this.hasOwnProperty(name)) continue;
|
||
if (name === 'parent') continue;
|
||
var value = this[name];
|
||
|
||
if (value instanceof Array) {
|
||
fixed[name] = value.map(function (i) {
|
||
if (typeof i === 'object' && i.toJSON) {
|
||
return i.toJSON();
|
||
} else {
|
||
return i;
|
||
}
|
||
});
|
||
} else if (typeof value === 'object' && value.toJSON) {
|
||
fixed[name] = value.toJSON();
|
||
} else {
|
||
fixed[name] = value;
|
||
}
|
||
}
|
||
|
||
return fixed;
|
||
}
|
||
/**
|
||
* Returns a {@link Node#raws} value. If the node is missing
|
||
* the code style property (because the node was manually built or cloned),
|
||
* PostCSS will try to autodetect the code style property by looking
|
||
* at other nodes in the tree.
|
||
*
|
||
* @param {string} prop - name of code style property
|
||
* @param {string} [defaultType] - name of default value, it can be missed
|
||
* if the value is the same as prop
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a { background: white }');
|
||
* root.nodes[0].append({ prop: 'color', value: 'black' });
|
||
* root.nodes[0].nodes[1].raws.before //=> undefined
|
||
* root.nodes[0].nodes[1].raw('before') //=> ' '
|
||
*
|
||
* @return {string} code style value
|
||
*/
|
||
;
|
||
|
||
_proto.raw = function raw(prop, defaultType) {
|
||
var str = new Stringifier();
|
||
return str.raw(this, prop, defaultType);
|
||
}
|
||
/**
|
||
* Finds the Root instance of the node’s tree.
|
||
*
|
||
* @example
|
||
* root.nodes[0].nodes[0].root() === root
|
||
*
|
||
* @return {Root} root parent
|
||
*/
|
||
;
|
||
|
||
_proto.root = function root() {
|
||
var result = this;
|
||
|
||
while (result.parent) {
|
||
result = result.parent;
|
||
}
|
||
|
||
return result;
|
||
};
|
||
|
||
_proto.cleanRaws = function cleanRaws(keepBetween) {
|
||
delete this.raws.before;
|
||
delete this.raws.after;
|
||
if (!keepBetween) delete this.raws.between;
|
||
};
|
||
|
||
_proto.positionInside = function positionInside(index) {
|
||
var string = this.toString();
|
||
var column = this.source.start.column;
|
||
var line = this.source.start.line;
|
||
|
||
for (var i = 0; i < index; i++) {
|
||
if (string[i] === '\n') {
|
||
column = 1;
|
||
line += 1;
|
||
} else {
|
||
column += 1;
|
||
}
|
||
}
|
||
|
||
return {
|
||
line: line,
|
||
column: column
|
||
};
|
||
};
|
||
|
||
_proto.positionBy = function positionBy(opts) {
|
||
var pos = this.source.start;
|
||
|
||
if (opts.index) {
|
||
pos = this.positionInside(opts.index);
|
||
} else if (opts.word) {
|
||
var index = this.toString().indexOf(opts.word);
|
||
if (index !== -1) pos = this.positionInside(index);
|
||
}
|
||
|
||
return pos;
|
||
};
|
||
|
||
_proto.removeSelf = function removeSelf() {
|
||
warnOnce('Node#removeSelf is deprecated. Use Node#remove.');
|
||
return this.remove();
|
||
};
|
||
|
||
_proto.replace = function replace(nodes) {
|
||
warnOnce('Node#replace is deprecated. Use Node#replaceWith');
|
||
return this.replaceWith(nodes);
|
||
};
|
||
|
||
_proto.style = function style(own, detect) {
|
||
warnOnce('Node#style() is deprecated. Use Node#raw()');
|
||
return this.raw(own, detect);
|
||
};
|
||
|
||
_proto.cleanStyles = function cleanStyles(keepBetween) {
|
||
warnOnce('Node#cleanStyles() is deprecated. Use Node#cleanRaws()');
|
||
return this.cleanRaws(keepBetween);
|
||
};
|
||
|
||
_createClass(Node, [{
|
||
key: "before",
|
||
get: function get() {
|
||
warnOnce('Node#before is deprecated. Use Node#raws.before');
|
||
return this.raws.before;
|
||
},
|
||
set: function set(val) {
|
||
warnOnce('Node#before is deprecated. Use Node#raws.before');
|
||
this.raws.before = val;
|
||
}
|
||
}, {
|
||
key: "between",
|
||
get: function get() {
|
||
warnOnce('Node#between is deprecated. Use Node#raws.between');
|
||
return this.raws.between;
|
||
},
|
||
set: function set(val) {
|
||
warnOnce('Node#between is deprecated. Use Node#raws.between');
|
||
this.raws.between = val;
|
||
}
|
||
/**
|
||
* @memberof Node#
|
||
* @member {string} type - String representing the node’s type.
|
||
* Possible values are `root`, `atrule`, `rule`,
|
||
* `decl`, or `comment`.
|
||
*
|
||
* @example
|
||
* postcss.decl({ prop: 'color', value: 'black' }).type //=> 'decl'
|
||
*/
|
||
|
||
/**
|
||
* @memberof Node#
|
||
* @member {Container} parent - the node’s parent node.
|
||
*
|
||
* @example
|
||
* root.nodes[0].parent == root;
|
||
*/
|
||
|
||
/**
|
||
* @memberof Node#
|
||
* @member {source} source - the input source of the node
|
||
*
|
||
* The property is used in source map generation.
|
||
*
|
||
* If you create a node manually (e.g., with `postcss.decl()`),
|
||
* that node will not have a `source` property and will be absent
|
||
* from the source map. For this reason, the plugin developer should
|
||
* consider cloning nodes to create new ones (in which case the new node’s
|
||
* source will reference the original, cloned node) or setting
|
||
* the `source` property manually.
|
||
*
|
||
* ```js
|
||
* // Bad
|
||
* const prefixed = postcss.decl({
|
||
* prop: '-moz-' + decl.prop,
|
||
* value: decl.value
|
||
* });
|
||
*
|
||
* // Good
|
||
* const prefixed = decl.clone({ prop: '-moz-' + decl.prop });
|
||
* ```
|
||
*
|
||
* ```js
|
||
* if ( atrule.name == 'add-link' ) {
|
||
* const rule = postcss.rule({ selector: 'a', source: atrule.source });
|
||
* atrule.parent.insertBefore(atrule, rule);
|
||
* }
|
||
* ```
|
||
*
|
||
* @example
|
||
* decl.source.input.from //=> '/home/ai/a.sass'
|
||
* decl.source.start //=> { line: 10, column: 2 }
|
||
* decl.source.end //=> { line: 10, column: 12 }
|
||
*/
|
||
|
||
/**
|
||
* @memberof Node#
|
||
* @member {object} raws - Information to generate byte-to-byte equal
|
||
* node string as it was in the origin input.
|
||
*
|
||
* Every parser saves its own properties,
|
||
* but the default CSS parser uses:
|
||
*
|
||
* * `before`: the space symbols before the node. It also stores `*`
|
||
* and `_` symbols before the declaration (IE hack).
|
||
* * `after`: the space symbols after the last child of the node
|
||
* to the end of the node.
|
||
* * `between`: the symbols between the property and value
|
||
* for declarations, selector and `{` for rules, or last parameter
|
||
* and `{` for at-rules.
|
||
* * `semicolon`: contains true if the last child has
|
||
* an (optional) semicolon.
|
||
* * `afterName`: the space between the at-rule name and its parameters.
|
||
* * `left`: the space symbols between `/*` and the comment’s text.
|
||
* * `right`: the space symbols between the comment’s text
|
||
* and <code>*/</code>.
|
||
* * `important`: the content of the important statement,
|
||
* if it is not just `!important`.
|
||
*
|
||
* PostCSS cleans selectors, declaration values and at-rule parameters
|
||
* from comments and extra spaces, but it stores origin content in raws
|
||
* properties. As such, if you don’t change a declaration’s value,
|
||
* PostCSS will use the raw value with comments.
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a {\n color:black\n}')
|
||
* root.first.first.raws //=> { before: '\n ', between: ':' }
|
||
*/
|
||
|
||
}]);
|
||
|
||
return Node;
|
||
}();
|
||
|
||
/**
|
||
* Represents a CSS declaration.
|
||
*
|
||
* @extends Node
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a { color: black }');
|
||
* const decl = root.first.first;
|
||
* decl.type //=> 'decl'
|
||
* decl.toString() //=> ' color: black'
|
||
*/
|
||
|
||
var Declaration = /*#__PURE__*/function (_Node) {
|
||
_inheritsLoose(Declaration, _Node);
|
||
|
||
function Declaration(defaults) {
|
||
var _this;
|
||
|
||
_this = _Node.call(this, defaults) || this;
|
||
_this.type = 'decl';
|
||
return _this;
|
||
}
|
||
|
||
_createClass(Declaration, [{
|
||
key: "_value",
|
||
get: function get() {
|
||
warnOnce('Node#_value was deprecated. Use Node#raws.value');
|
||
return this.raws.value;
|
||
},
|
||
set: function set(val) {
|
||
warnOnce('Node#_value was deprecated. Use Node#raws.value');
|
||
this.raws.value = val;
|
||
}
|
||
}, {
|
||
key: "_important",
|
||
get: function get() {
|
||
warnOnce('Node#_important was deprecated. Use Node#raws.important');
|
||
return this.raws.important;
|
||
},
|
||
set: function set(val) {
|
||
warnOnce('Node#_important was deprecated. Use Node#raws.important');
|
||
this.raws.important = val;
|
||
}
|
||
/**
|
||
* @memberof Declaration#
|
||
* @member {string} prop - the declaration’s property name
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a { color: black }');
|
||
* const decl = root.first.first;
|
||
* decl.prop //=> 'color'
|
||
*/
|
||
|
||
/**
|
||
* @memberof Declaration#
|
||
* @member {string} value - the declaration’s value
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a { color: black }');
|
||
* const decl = root.first.first;
|
||
* decl.value //=> 'black'
|
||
*/
|
||
|
||
/**
|
||
* @memberof Declaration#
|
||
* @member {boolean} important - `true` if the declaration
|
||
* has an !important annotation.
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a { color: black !important; color: red }');
|
||
* root.first.first.important //=> true
|
||
* root.first.last.important //=> undefined
|
||
*/
|
||
|
||
/**
|
||
* @memberof Declaration#
|
||
* @member {object} raws - Information to generate byte-to-byte equal
|
||
* node string as it was in the origin input.
|
||
*
|
||
* Every parser saves its own properties,
|
||
* but the default CSS parser uses:
|
||
*
|
||
* * `before`: the space symbols before the node. It also stores `*`
|
||
* and `_` symbols before the declaration (IE hack).
|
||
* * `between`: the symbols between the property and value
|
||
* for declarations, selector and `{` for rules, or last parameter
|
||
* and `{` for at-rules.
|
||
* * `important`: the content of the important statement,
|
||
* if it is not just `!important`.
|
||
*
|
||
* PostCSS cleans declaration from comments and extra spaces,
|
||
* but it stores origin content in raws properties.
|
||
* As such, if you don’t change a declaration’s value,
|
||
* PostCSS will use the raw value with comments.
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a {\n color:black\n}')
|
||
* root.first.first.raws //=> { before: '\n ', between: ':' }
|
||
*/
|
||
|
||
}]);
|
||
|
||
return Declaration;
|
||
}(Node);
|
||
|
||
/**
|
||
* Represents a comment between declarations or statements (rule and at-rules).
|
||
*
|
||
* Comments inside selectors, at-rule parameters, or declaration values
|
||
* will be stored in the `raws` properties explained above.
|
||
*
|
||
* @extends Node
|
||
*/
|
||
|
||
var Comment = /*#__PURE__*/function (_Node) {
|
||
_inheritsLoose(Comment, _Node);
|
||
|
||
function Comment(defaults) {
|
||
var _this;
|
||
|
||
_this = _Node.call(this, defaults) || this;
|
||
_this.type = 'comment';
|
||
return _this;
|
||
}
|
||
|
||
_createClass(Comment, [{
|
||
key: "left",
|
||
get: function get() {
|
||
warnOnce('Comment#left was deprecated. Use Comment#raws.left');
|
||
return this.raws.left;
|
||
},
|
||
set: function set(val) {
|
||
warnOnce('Comment#left was deprecated. Use Comment#raws.left');
|
||
this.raws.left = val;
|
||
}
|
||
}, {
|
||
key: "right",
|
||
get: function get() {
|
||
warnOnce('Comment#right was deprecated. Use Comment#raws.right');
|
||
return this.raws.right;
|
||
},
|
||
set: function set(val) {
|
||
warnOnce('Comment#right was deprecated. Use Comment#raws.right');
|
||
this.raws.right = val;
|
||
}
|
||
/**
|
||
* @memberof Comment#
|
||
* @member {string} text - the comment’s text
|
||
*/
|
||
|
||
/**
|
||
* @memberof Comment#
|
||
* @member {object} raws - Information to generate byte-to-byte equal
|
||
* node string as it was in the origin input.
|
||
*
|
||
* Every parser saves its own properties,
|
||
* but the default CSS parser uses:
|
||
*
|
||
* * `before`: the space symbols before the node.
|
||
* * `left`: the space symbols between `/*` and the comment’s text.
|
||
* * `right`: the space symbols between the comment’s text.
|
||
*/
|
||
|
||
}]);
|
||
|
||
return Comment;
|
||
}(Node);
|
||
|
||
//
|
||
|
||
var Parser = /*#__PURE__*/function () {
|
||
function Parser(input) {
|
||
this.input = input;
|
||
this.pos = 0;
|
||
this.root = new Root();
|
||
this.current = this.root;
|
||
this.spaces = '';
|
||
this.semicolon = false;
|
||
this.root.source = {
|
||
input: input,
|
||
start: {
|
||
line: 1,
|
||
column: 1
|
||
}
|
||
};
|
||
}
|
||
|
||
var _proto = Parser.prototype;
|
||
|
||
_proto.tokenize = function tokenize$1() {
|
||
this.tokens = tokenize(this.input);
|
||
};
|
||
|
||
_proto.loop = function loop() {
|
||
var token;
|
||
|
||
while (this.pos < this.tokens.length) {
|
||
token = this.tokens[this.pos];
|
||
|
||
switch (token[0]) {
|
||
case 'space':
|
||
case ';':
|
||
this.spaces += token[1];
|
||
break;
|
||
|
||
case '}':
|
||
this.end(token);
|
||
break;
|
||
|
||
case 'comment':
|
||
this.comment(token);
|
||
break;
|
||
|
||
case 'at-word':
|
||
this.atrule(token);
|
||
break;
|
||
|
||
case '{':
|
||
this.emptyRule(token);
|
||
break;
|
||
|
||
default:
|
||
this.other();
|
||
break;
|
||
}
|
||
|
||
this.pos += 1;
|
||
}
|
||
|
||
this.endFile();
|
||
};
|
||
|
||
_proto.comment = function comment(token) {
|
||
var node = new Comment();
|
||
this.init(node, token[2], token[3]);
|
||
node.source.end = {
|
||
line: token[4],
|
||
column: token[5]
|
||
};
|
||
var text = token[1].slice(2, -2);
|
||
|
||
if (/^\s*$/.test(text)) {
|
||
node.text = '';
|
||
node.raws.left = text;
|
||
node.raws.right = '';
|
||
} else {
|
||
var match = text.match(/^(\s*)([^]*[^\s])(\s*)$/);
|
||
node.text = match[2];
|
||
node.raws.left = match[1];
|
||
node.raws.right = match[3];
|
||
}
|
||
};
|
||
|
||
_proto.emptyRule = function emptyRule(token) {
|
||
var node = new Rule();
|
||
this.init(node, token[2], token[3]);
|
||
node.selector = '';
|
||
node.raws.between = '';
|
||
this.current = node;
|
||
};
|
||
|
||
_proto.other = function other() {
|
||
var token;
|
||
var end = false;
|
||
var type = null;
|
||
var colon = false;
|
||
var bracket = null;
|
||
var brackets = [];
|
||
var start = this.pos;
|
||
|
||
while (this.pos < this.tokens.length) {
|
||
token = this.tokens[this.pos];
|
||
type = token[0];
|
||
|
||
if (type === '(' || type === '[') {
|
||
if (!bracket) bracket = token;
|
||
brackets.push(type === '(' ? ')' : ']');
|
||
} else if (brackets.length === 0) {
|
||
if (type === ';') {
|
||
if (colon) {
|
||
this.decl(this.tokens.slice(start, this.pos + 1));
|
||
return;
|
||
} else {
|
||
break;
|
||
}
|
||
} else if (type === '{') {
|
||
this.rule(this.tokens.slice(start, this.pos + 1));
|
||
return;
|
||
} else if (type === '}') {
|
||
this.pos -= 1;
|
||
end = true;
|
||
break;
|
||
} else if (type === ':') {
|
||
colon = true;
|
||
}
|
||
} else if (type === brackets[brackets.length - 1]) {
|
||
brackets.pop();
|
||
if (brackets.length === 0) bracket = null;
|
||
}
|
||
|
||
this.pos += 1;
|
||
}
|
||
|
||
if (this.pos === this.tokens.length) {
|
||
this.pos -= 1;
|
||
end = true;
|
||
}
|
||
|
||
if (brackets.length > 0) this.unclosedBracket(bracket);
|
||
|
||
if (end && colon) {
|
||
while (this.pos > start) {
|
||
token = this.tokens[this.pos][0];
|
||
if (token !== 'space' && token !== 'comment') break;
|
||
this.pos -= 1;
|
||
}
|
||
|
||
this.decl(this.tokens.slice(start, this.pos + 1));
|
||
return;
|
||
}
|
||
|
||
this.unknownWord(start);
|
||
};
|
||
|
||
_proto.rule = function rule(tokens) {
|
||
tokens.pop();
|
||
var node = new Rule();
|
||
this.init(node, tokens[0][2], tokens[0][3]);
|
||
node.raws.between = this.spacesFromEnd(tokens);
|
||
this.raw(node, 'selector', tokens);
|
||
this.current = node;
|
||
};
|
||
|
||
_proto.decl = function decl(tokens) {
|
||
var node = new Declaration();
|
||
this.init(node);
|
||
var last = tokens[tokens.length - 1];
|
||
|
||
if (last[0] === ';') {
|
||
this.semicolon = true;
|
||
tokens.pop();
|
||
}
|
||
|
||
if (last[4]) {
|
||
node.source.end = {
|
||
line: last[4],
|
||
column: last[5]
|
||
};
|
||
} else {
|
||
node.source.end = {
|
||
line: last[2],
|
||
column: last[3]
|
||
};
|
||
}
|
||
|
||
while (tokens[0][0] !== 'word') {
|
||
node.raws.before += tokens.shift()[1];
|
||
}
|
||
|
||
node.source.start = {
|
||
line: tokens[0][2],
|
||
column: tokens[0][3]
|
||
};
|
||
node.prop = '';
|
||
|
||
while (tokens.length) {
|
||
var type = tokens[0][0];
|
||
|
||
if (type === ':' || type === 'space' || type === 'comment') {
|
||
break;
|
||
}
|
||
|
||
node.prop += tokens.shift()[1];
|
||
}
|
||
|
||
node.raws.between = '';
|
||
var token;
|
||
|
||
while (tokens.length) {
|
||
token = tokens.shift();
|
||
|
||
if (token[0] === ':') {
|
||
node.raws.between += token[1];
|
||
break;
|
||
} else {
|
||
node.raws.between += token[1];
|
||
}
|
||
}
|
||
|
||
if (node.prop[0] === '_' || node.prop[0] === '*') {
|
||
node.raws.before += node.prop[0];
|
||
node.prop = node.prop.slice(1);
|
||
}
|
||
|
||
node.raws.between += this.spacesFromStart(tokens);
|
||
this.precheckMissedSemicolon(tokens);
|
||
|
||
for (var i = tokens.length - 1; i > 0; i--) {
|
||
token = tokens[i];
|
||
|
||
if (token[1] === '!important') {
|
||
node.important = true;
|
||
var string = this.stringFrom(tokens, i);
|
||
string = this.spacesFromEnd(tokens) + string;
|
||
if (string !== ' !important') node.raws.important = string;
|
||
break;
|
||
} else if (token[1] === 'important') {
|
||
var cache = tokens.slice(0);
|
||
var str = '';
|
||
|
||
for (var j = i; j > 0; j--) {
|
||
var _type = cache[j][0];
|
||
|
||
if (str.trim().indexOf('!') === 0 && _type !== 'space') {
|
||
break;
|
||
}
|
||
|
||
str = cache.pop()[1] + str;
|
||
}
|
||
|
||
if (str.trim().indexOf('!') === 0) {
|
||
node.important = true;
|
||
node.raws.important = str;
|
||
tokens = cache;
|
||
}
|
||
}
|
||
|
||
if (token[0] !== 'space' && token[0] !== 'comment') {
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.raw(node, 'value', tokens);
|
||
if (node.value.indexOf(':') !== -1) this.checkMissedSemicolon(tokens);
|
||
};
|
||
|
||
_proto.atrule = function atrule(token) {
|
||
var node = new AtRule();
|
||
node.name = token[1].slice(1);
|
||
|
||
if (node.name === '') {
|
||
this.unnamedAtrule(node, token);
|
||
}
|
||
|
||
this.init(node, token[2], token[3]);
|
||
var last = false;
|
||
var open = false;
|
||
var params = [];
|
||
this.pos += 1;
|
||
|
||
while (this.pos < this.tokens.length) {
|
||
token = this.tokens[this.pos];
|
||
|
||
if (token[0] === ';') {
|
||
node.source.end = {
|
||
line: token[2],
|
||
column: token[3]
|
||
};
|
||
this.semicolon = true;
|
||
break;
|
||
} else if (token[0] === '{') {
|
||
open = true;
|
||
break;
|
||
} else if (token[0] === '}') {
|
||
this.end(token);
|
||
break;
|
||
} else {
|
||
params.push(token);
|
||
}
|
||
|
||
this.pos += 1;
|
||
}
|
||
|
||
if (this.pos === this.tokens.length) {
|
||
last = true;
|
||
}
|
||
|
||
node.raws.between = this.spacesFromEnd(params);
|
||
|
||
if (params.length) {
|
||
node.raws.afterName = this.spacesFromStart(params);
|
||
this.raw(node, 'params', params);
|
||
|
||
if (last) {
|
||
token = params[params.length - 1];
|
||
node.source.end = {
|
||
line: token[4],
|
||
column: token[5]
|
||
};
|
||
this.spaces = node.raws.between;
|
||
node.raws.between = '';
|
||
}
|
||
} else {
|
||
node.raws.afterName = '';
|
||
node.params = '';
|
||
}
|
||
|
||
if (open) {
|
||
node.nodes = [];
|
||
this.current = node;
|
||
}
|
||
};
|
||
|
||
_proto.end = function end(token) {
|
||
if (this.current.nodes && this.current.nodes.length) {
|
||
this.current.raws.semicolon = this.semicolon;
|
||
}
|
||
|
||
this.semicolon = false;
|
||
this.current.raws.after = (this.current.raws.after || '') + this.spaces;
|
||
this.spaces = '';
|
||
|
||
if (this.current.parent) {
|
||
this.current.source.end = {
|
||
line: token[2],
|
||
column: token[3]
|
||
};
|
||
this.current = this.current.parent;
|
||
} else {
|
||
this.unexpectedClose(token);
|
||
}
|
||
};
|
||
|
||
_proto.endFile = function endFile() {
|
||
if (this.current.parent) this.unclosedBlock();
|
||
|
||
if (this.current.nodes && this.current.nodes.length) {
|
||
this.current.raws.semicolon = this.semicolon;
|
||
}
|
||
|
||
this.current.raws.after = (this.current.raws.after || '') + this.spaces;
|
||
} // Helpers
|
||
;
|
||
|
||
_proto.init = function init(node, line, column) {
|
||
this.current.push(node);
|
||
node.source = {
|
||
start: {
|
||
line: line,
|
||
column: column
|
||
},
|
||
input: this.input
|
||
};
|
||
node.raws.before = this.spaces;
|
||
this.spaces = '';
|
||
if (node.type !== 'comment') this.semicolon = false;
|
||
};
|
||
|
||
_proto.raw = function raw(node, prop, tokens) {
|
||
var token, type;
|
||
var length = tokens.length;
|
||
var value = '';
|
||
var clean = true;
|
||
|
||
for (var i = 0; i < length; i += 1) {
|
||
token = tokens[i];
|
||
type = token[0];
|
||
|
||
if (type === 'comment' || type === 'space' && i === length - 1) {
|
||
clean = false;
|
||
} else {
|
||
value += token[1];
|
||
}
|
||
}
|
||
|
||
if (!clean) {
|
||
var raw = tokens.reduce(function (all, i) {
|
||
return all + i[1];
|
||
}, '');
|
||
node.raws[prop] = {
|
||
value: value,
|
||
raw: raw
|
||
};
|
||
}
|
||
|
||
node[prop] = value;
|
||
};
|
||
|
||
_proto.spacesFromEnd = function spacesFromEnd(tokens) {
|
||
var lastTokenType;
|
||
var spaces = '';
|
||
|
||
while (tokens.length) {
|
||
lastTokenType = tokens[tokens.length - 1][0];
|
||
if (lastTokenType !== 'space' && lastTokenType !== 'comment') break;
|
||
spaces = tokens.pop()[1] + spaces;
|
||
}
|
||
|
||
return spaces;
|
||
};
|
||
|
||
_proto.spacesFromStart = function spacesFromStart(tokens) {
|
||
var next;
|
||
var spaces = '';
|
||
|
||
while (tokens.length) {
|
||
next = tokens[0][0];
|
||
if (next !== 'space' && next !== 'comment') break;
|
||
spaces += tokens.shift()[1];
|
||
}
|
||
|
||
return spaces;
|
||
};
|
||
|
||
_proto.stringFrom = function stringFrom(tokens, from) {
|
||
var result = '';
|
||
|
||
for (var i = from; i < tokens.length; i++) {
|
||
result += tokens[i][1];
|
||
}
|
||
|
||
tokens.splice(from, tokens.length - from);
|
||
return result;
|
||
};
|
||
|
||
_proto.colon = function colon(tokens) {
|
||
var brackets = 0;
|
||
var token, type, prev;
|
||
|
||
for (var i = 0; i < tokens.length; i++) {
|
||
token = tokens[i];
|
||
type = token[0];
|
||
|
||
if (type === '(') {
|
||
brackets += 1;
|
||
} else if (type === ')') {
|
||
brackets -= 1;
|
||
} else if (brackets === 0 && type === ':') {
|
||
if (!prev) {
|
||
this.doubleColon(token);
|
||
} else if (prev[0] === 'word' && prev[1] === 'progid') {
|
||
continue;
|
||
} else {
|
||
return i;
|
||
}
|
||
}
|
||
|
||
prev = token;
|
||
}
|
||
|
||
return false;
|
||
} // Errors
|
||
;
|
||
|
||
_proto.unclosedBracket = function unclosedBracket(bracket) {
|
||
throw this.input.error('Unclosed bracket', bracket[2], bracket[3]);
|
||
};
|
||
|
||
_proto.unknownWord = function unknownWord(start) {
|
||
var token = this.tokens[start];
|
||
throw this.input.error('Unknown word', token[2], token[3]);
|
||
};
|
||
|
||
_proto.unexpectedClose = function unexpectedClose(token) {
|
||
throw this.input.error('Unexpected }', token[2], token[3]);
|
||
};
|
||
|
||
_proto.unclosedBlock = function unclosedBlock() {
|
||
var pos = this.current.source.start;
|
||
throw this.input.error('Unclosed block', pos.line, pos.column);
|
||
};
|
||
|
||
_proto.doubleColon = function doubleColon(token) {
|
||
throw this.input.error('Double colon', token[2], token[3]);
|
||
};
|
||
|
||
_proto.unnamedAtrule = function unnamedAtrule(node, token) {
|
||
throw this.input.error('At-rule without name', token[2], token[3]);
|
||
};
|
||
|
||
_proto.precheckMissedSemicolon = function precheckMissedSemicolon(tokens) {
|
||
};
|
||
|
||
_proto.checkMissedSemicolon = function checkMissedSemicolon(tokens) {
|
||
var colon = this.colon(tokens);
|
||
if (colon === false) return;
|
||
var founded = 0;
|
||
var token;
|
||
|
||
for (var j = colon - 1; j >= 0; j--) {
|
||
token = tokens[j];
|
||
|
||
if (token[0] !== 'space') {
|
||
founded += 1;
|
||
if (founded === 2) break;
|
||
}
|
||
}
|
||
|
||
throw this.input.error('Missed semicolon', token[2], token[3]);
|
||
};
|
||
|
||
return Parser;
|
||
}();
|
||
|
||
//
|
||
function parse(css, opts) {
|
||
if (opts && opts.safe) {
|
||
throw new Error('Option safe was removed. ' + 'Use parser: require("postcss-safe-parser")');
|
||
}
|
||
|
||
var input = new Input(css, opts);
|
||
var parser = new Parser(input);
|
||
|
||
try {
|
||
parser.tokenize();
|
||
parser.loop();
|
||
} catch (e) {
|
||
if (e.name === 'CssSyntaxError' && opts && opts.from) {
|
||
if (/\.scss$/i.test(opts.from)) {
|
||
e.message += '\nYou tried to parse SCSS with ' + 'the standard CSS parser; ' + 'try again with the postcss-scss parser';
|
||
} else if (/\.less$/i.test(opts.from)) {
|
||
e.message += '\nYou tried to parse Less with ' + 'the standard CSS parser; ' + 'try again with the postcss-less parser';
|
||
}
|
||
}
|
||
|
||
throw e;
|
||
}
|
||
|
||
return parser.root;
|
||
}
|
||
|
||
function cleanSource(nodes) {
|
||
return nodes.map(function (i) {
|
||
if (i.nodes) i.nodes = cleanSource(i.nodes);
|
||
delete i.source;
|
||
return i;
|
||
});
|
||
}
|
||
/**
|
||
* @callback childCondition
|
||
* @param {Node} node - container child
|
||
* @param {number} index - child index
|
||
* @param {Node[]} nodes - all container children
|
||
* @return {boolean}
|
||
*/
|
||
|
||
/**
|
||
* @callback childIterator
|
||
* @param {Node} node - container child
|
||
* @param {number} index - child index
|
||
* @return {false|undefined} returning `false` will break iteration
|
||
*/
|
||
|
||
/**
|
||
* The {@link Root}, {@link AtRule}, and {@link Rule} container nodes
|
||
* inherit some common methods to help work with their children.
|
||
*
|
||
* Note that all containers can store any content. If you write a rule inside
|
||
* a rule, PostCSS will parse it.
|
||
*
|
||
* @extends Node
|
||
* @abstract
|
||
*/
|
||
|
||
|
||
var Container = /*#__PURE__*/function (_Node) {
|
||
_inheritsLoose(Container, _Node);
|
||
|
||
function Container() {
|
||
return _Node.apply(this, arguments) || this;
|
||
}
|
||
|
||
var _proto = Container.prototype;
|
||
|
||
_proto.push = function push(child) {
|
||
child.parent = this;
|
||
this.nodes.push(child);
|
||
return this;
|
||
}
|
||
/**
|
||
* Iterates through the container’s immediate children,
|
||
* calling `callback` for each child.
|
||
*
|
||
* Returning `false` in the callback will break iteration.
|
||
*
|
||
* This method only iterates through the container’s immediate children.
|
||
* If you need to recursively iterate through all the container’s descendant
|
||
* nodes, use {@link Container#walk}.
|
||
*
|
||
* Unlike the for `{}`-cycle or `Array#forEach` this iterator is safe
|
||
* if you are mutating the array of child nodes during iteration.
|
||
* PostCSS will adjust the current index to match the mutations.
|
||
*
|
||
* @param {childIterator} callback - iterator receives each node and index
|
||
*
|
||
* @return {false|undefined} returns `false` if iteration was broke
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a { color: black; z-index: 1 }');
|
||
* const rule = root.first;
|
||
*
|
||
* for ( let decl of rule.nodes ) {
|
||
* decl.cloneBefore({ prop: '-webkit-' + decl.prop });
|
||
* // Cycle will be infinite, because cloneBefore moves the current node
|
||
* // to the next index
|
||
* }
|
||
*
|
||
* rule.each(decl => {
|
||
* decl.cloneBefore({ prop: '-webkit-' + decl.prop });
|
||
* // Will be executed only for color and z-index
|
||
* });
|
||
*/
|
||
;
|
||
|
||
_proto.each = function each(callback) {
|
||
if (!this.lastEach) this.lastEach = 0;
|
||
if (!this.indexes) this.indexes = {};
|
||
this.lastEach += 1;
|
||
var id = this.lastEach;
|
||
this.indexes[id] = 0;
|
||
if (!this.nodes) return undefined;
|
||
var index, result;
|
||
|
||
while (this.indexes[id] < this.nodes.length) {
|
||
index = this.indexes[id];
|
||
result = callback(this.nodes[index], index);
|
||
if (result === false) break;
|
||
this.indexes[id] += 1;
|
||
}
|
||
|
||
delete this.indexes[id];
|
||
return result;
|
||
}
|
||
/**
|
||
* Traverses the container’s descendant nodes, calling callback
|
||
* for each node.
|
||
*
|
||
* Like container.each(), this method is safe to use
|
||
* if you are mutating arrays during iteration.
|
||
*
|
||
* If you only need to iterate through the container’s immediate children,
|
||
* use {@link Container#each}.
|
||
*
|
||
* @param {childIterator} callback - iterator receives each node and index
|
||
*
|
||
* @return {false|undefined} returns `false` if iteration was broke
|
||
*
|
||
* @example
|
||
* root.walk(node => {
|
||
* // Traverses all descendant nodes.
|
||
* });
|
||
*/
|
||
;
|
||
|
||
_proto.walk = function walk(callback) {
|
||
return this.each(function (child, i) {
|
||
var result = callback(child, i);
|
||
|
||
if (result !== false && child.walk) {
|
||
result = child.walk(callback);
|
||
}
|
||
|
||
return result;
|
||
});
|
||
}
|
||
/**
|
||
* Traverses the container’s descendant nodes, calling callback
|
||
* for each declaration node.
|
||
*
|
||
* If you pass a filter, iteration will only happen over declarations
|
||
* with matching properties.
|
||
*
|
||
* Like {@link Container#each}, this method is safe
|
||
* to use if you are mutating arrays during iteration.
|
||
*
|
||
* @param {string|RegExp} [prop] - string or regular expression
|
||
* to filter declarations by property name
|
||
* @param {childIterator} callback - iterator receives each node and index
|
||
*
|
||
* @return {false|undefined} returns `false` if iteration was broke
|
||
*
|
||
* @example
|
||
* root.walkDecls(decl => {
|
||
* checkPropertySupport(decl.prop);
|
||
* });
|
||
*
|
||
* root.walkDecls('border-radius', decl => {
|
||
* decl.remove();
|
||
* });
|
||
*
|
||
* root.walkDecls(/^background/, decl => {
|
||
* decl.value = takeFirstColorFromGradient(decl.value);
|
||
* });
|
||
*/
|
||
;
|
||
|
||
_proto.walkDecls = function walkDecls(prop, callback) {
|
||
if (!callback) {
|
||
callback = prop;
|
||
return this.walk(function (child, i) {
|
||
if (child.type === 'decl') {
|
||
return callback(child, i);
|
||
}
|
||
});
|
||
} else if (prop instanceof RegExp) {
|
||
return this.walk(function (child, i) {
|
||
if (child.type === 'decl' && prop.test(child.prop)) {
|
||
return callback(child, i);
|
||
}
|
||
});
|
||
} else {
|
||
return this.walk(function (child, i) {
|
||
if (child.type === 'decl' && child.prop === prop) {
|
||
return callback(child, i);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
/**
|
||
* Traverses the container’s descendant nodes, calling callback
|
||
* for each rule node.
|
||
*
|
||
* If you pass a filter, iteration will only happen over rules
|
||
* with matching selectors.
|
||
*
|
||
* Like {@link Container#each}, this method is safe
|
||
* to use if you are mutating arrays during iteration.
|
||
*
|
||
* @param {string|RegExp} [selector] - string or regular expression
|
||
* to filter rules by selector
|
||
* @param {childIterator} callback - iterator receives each node and index
|
||
*
|
||
* @return {false|undefined} returns `false` if iteration was broke
|
||
*
|
||
* @example
|
||
* const selectors = [];
|
||
* root.walkRules(rule => {
|
||
* selectors.push(rule.selector);
|
||
* });
|
||
* console.log(`Your CSS uses ${selectors.length} selectors`);
|
||
*/
|
||
;
|
||
|
||
_proto.walkRules = function walkRules(selector, callback) {
|
||
if (!callback) {
|
||
callback = selector;
|
||
return this.walk(function (child, i) {
|
||
if (child.type === 'rule') {
|
||
return callback(child, i);
|
||
}
|
||
});
|
||
} else if (selector instanceof RegExp) {
|
||
return this.walk(function (child, i) {
|
||
if (child.type === 'rule' && selector.test(child.selector)) {
|
||
return callback(child, i);
|
||
}
|
||
});
|
||
} else {
|
||
return this.walk(function (child, i) {
|
||
if (child.type === 'rule' && child.selector === selector) {
|
||
return callback(child, i);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
/**
|
||
* Traverses the container’s descendant nodes, calling callback
|
||
* for each at-rule node.
|
||
*
|
||
* If you pass a filter, iteration will only happen over at-rules
|
||
* that have matching names.
|
||
*
|
||
* Like {@link Container#each}, this method is safe
|
||
* to use if you are mutating arrays during iteration.
|
||
*
|
||
* @param {string|RegExp} [name] - string or regular expression
|
||
* to filter at-rules by name
|
||
* @param {childIterator} callback - iterator receives each node and index
|
||
*
|
||
* @return {false|undefined} returns `false` if iteration was broke
|
||
*
|
||
* @example
|
||
* root.walkAtRules(rule => {
|
||
* if ( isOld(rule.name) ) rule.remove();
|
||
* });
|
||
*
|
||
* let first = false;
|
||
* root.walkAtRules('charset', rule => {
|
||
* if ( !first ) {
|
||
* first = true;
|
||
* } else {
|
||
* rule.remove();
|
||
* }
|
||
* });
|
||
*/
|
||
;
|
||
|
||
_proto.walkAtRules = function walkAtRules(name, callback) {
|
||
if (!callback) {
|
||
callback = name;
|
||
return this.walk(function (child, i) {
|
||
if (child.type === 'atrule') {
|
||
return callback(child, i);
|
||
}
|
||
});
|
||
} else if (name instanceof RegExp) {
|
||
return this.walk(function (child, i) {
|
||
if (child.type === 'atrule' && name.test(child.name)) {
|
||
return callback(child, i);
|
||
}
|
||
});
|
||
} else {
|
||
return this.walk(function (child, i) {
|
||
if (child.type === 'atrule' && child.name === name) {
|
||
return callback(child, i);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
/**
|
||
* Traverses the container’s descendant nodes, calling callback
|
||
* for each comment node.
|
||
*
|
||
* Like {@link Container#each}, this method is safe
|
||
* to use if you are mutating arrays during iteration.
|
||
*
|
||
* @param {childIterator} callback - iterator receives each node and index
|
||
*
|
||
* @return {false|undefined} returns `false` if iteration was broke
|
||
*
|
||
* @example
|
||
* root.walkComments(comment => {
|
||
* comment.remove();
|
||
* });
|
||
*/
|
||
;
|
||
|
||
_proto.walkComments = function walkComments(callback) {
|
||
return this.walk(function (child, i) {
|
||
if (child.type === 'comment') {
|
||
return callback(child, i);
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* Inserts new nodes to the start of the container.
|
||
*
|
||
* @param {...(Node|object|string|Node[])} children - new nodes
|
||
*
|
||
* @return {Node} this node for methods chain
|
||
*
|
||
* @example
|
||
* const decl1 = postcss.decl({ prop: 'color', value: 'black' });
|
||
* const decl2 = postcss.decl({ prop: 'background-color', value: 'white' });
|
||
* rule.append(decl1, decl2);
|
||
*
|
||
* root.append({ name: 'charset', params: '"UTF-8"' }); // at-rule
|
||
* root.append({ selector: 'a' }); // rule
|
||
* rule.append({ prop: 'color', value: 'black' }); // declaration
|
||
* rule.append({ text: 'Comment' }) // comment
|
||
*
|
||
* root.append('a {}');
|
||
* root.first.append('color: black; z-index: 1');
|
||
*/
|
||
;
|
||
|
||
_proto.append = function append() {
|
||
var _this = this;
|
||
|
||
for (var _len = arguments.length, children = new Array(_len), _key = 0; _key < _len; _key++) {
|
||
children[_key] = arguments[_key];
|
||
}
|
||
|
||
children.forEach(function (child) {
|
||
var nodes = _this.normalize(child, _this.last);
|
||
|
||
nodes.forEach(function (node) {
|
||
return _this.nodes.push(node);
|
||
});
|
||
});
|
||
return this;
|
||
}
|
||
/**
|
||
* Inserts new nodes to the end of the container.
|
||
*
|
||
* @param {...(Node|object|string|Node[])} children - new nodes
|
||
*
|
||
* @return {Node} this node for methods chain
|
||
*
|
||
* @example
|
||
* const decl1 = postcss.decl({ prop: 'color', value: 'black' });
|
||
* const decl2 = postcss.decl({ prop: 'background-color', value: 'white' });
|
||
* rule.prepend(decl1, decl2);
|
||
*
|
||
* root.append({ name: 'charset', params: '"UTF-8"' }); // at-rule
|
||
* root.append({ selector: 'a' }); // rule
|
||
* rule.append({ prop: 'color', value: 'black' }); // declaration
|
||
* rule.append({ text: 'Comment' }) // comment
|
||
*
|
||
* root.append('a {}');
|
||
* root.first.append('color: black; z-index: 1');
|
||
*/
|
||
;
|
||
|
||
_proto.prepend = function prepend() {
|
||
var _this2 = this;
|
||
|
||
for (var _len2 = arguments.length, children = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
||
children[_key2] = arguments[_key2];
|
||
}
|
||
|
||
children = children.reverse();
|
||
children.forEach(function (child) {
|
||
var nodes = _this2.normalize(child, _this2.first, 'prepend').reverse();
|
||
|
||
nodes.forEach(function (node) {
|
||
return _this2.nodes.unshift(node);
|
||
});
|
||
|
||
for (var id in _this2.indexes) {
|
||
_this2.indexes[id] = _this2.indexes[id] + nodes.length;
|
||
}
|
||
});
|
||
return this;
|
||
};
|
||
|
||
_proto.cleanRaws = function cleanRaws(keepBetween) {
|
||
_Node.prototype.cleanRaws.call(this, keepBetween);
|
||
|
||
if (this.nodes) {
|
||
this.nodes.forEach(function (node) {
|
||
return node.cleanRaws(keepBetween);
|
||
});
|
||
}
|
||
}
|
||
/**
|
||
* Insert new node before old node within the container.
|
||
*
|
||
* @param {Node|number} exist - child or child’s index.
|
||
* @param {Node|object|string|Node[]} add - new node
|
||
*
|
||
* @return {Node} this node for methods chain
|
||
*
|
||
* @example
|
||
* rule.insertBefore(decl, decl.clone({ prop: '-webkit-' + decl.prop }));
|
||
*/
|
||
;
|
||
|
||
_proto.insertBefore = function insertBefore(exist, add) {
|
||
var _this3 = this;
|
||
|
||
exist = this.index(exist);
|
||
var type = exist === 0 ? 'prepend' : false;
|
||
var nodes = this.normalize(add, this.nodes[exist], type).reverse();
|
||
nodes.forEach(function (node) {
|
||
return _this3.nodes.splice(exist, 0, node);
|
||
});
|
||
var index;
|
||
|
||
for (var id in this.indexes) {
|
||
index = this.indexes[id];
|
||
|
||
if (exist <= index) {
|
||
this.indexes[id] = index + nodes.length;
|
||
}
|
||
}
|
||
|
||
return this;
|
||
}
|
||
/**
|
||
* Insert new node after old node within the container.
|
||
*
|
||
* @param {Node|number} exist - child or child’s index
|
||
* @param {Node|object|string|Node[]} add - new node
|
||
*
|
||
* @return {Node} this node for methods chain
|
||
*/
|
||
;
|
||
|
||
_proto.insertAfter = function insertAfter(exist, add) {
|
||
var _this4 = this;
|
||
|
||
exist = this.index(exist);
|
||
var nodes = this.normalize(add, this.nodes[exist]).reverse();
|
||
nodes.forEach(function (node) {
|
||
return _this4.nodes.splice(exist + 1, 0, node);
|
||
});
|
||
var index;
|
||
|
||
for (var id in this.indexes) {
|
||
index = this.indexes[id];
|
||
|
||
if (exist < index) {
|
||
this.indexes[id] = index + nodes.length;
|
||
}
|
||
}
|
||
|
||
return this;
|
||
};
|
||
|
||
_proto.remove = function remove(child) {
|
||
if (typeof child !== 'undefined') {
|
||
warnOnce('Container#remove is deprecated. ' + 'Use Container#removeChild');
|
||
this.removeChild(child);
|
||
} else {
|
||
_Node.prototype.remove.call(this);
|
||
}
|
||
|
||
return this;
|
||
}
|
||
/**
|
||
* Removes node from the container and cleans the parent properties
|
||
* from the node and its children.
|
||
*
|
||
* @param {Node|number} child - child or child’s index
|
||
*
|
||
* @return {Node} this node for methods chain
|
||
*
|
||
* @example
|
||
* rule.nodes.length //=> 5
|
||
* rule.removeChild(decl);
|
||
* rule.nodes.length //=> 4
|
||
* decl.parent //=> undefined
|
||
*/
|
||
;
|
||
|
||
_proto.removeChild = function removeChild(child) {
|
||
child = this.index(child);
|
||
this.nodes[child].parent = undefined;
|
||
this.nodes.splice(child, 1);
|
||
var index;
|
||
|
||
for (var id in this.indexes) {
|
||
index = this.indexes[id];
|
||
|
||
if (index >= child) {
|
||
this.indexes[id] = index - 1;
|
||
}
|
||
}
|
||
|
||
return this;
|
||
}
|
||
/**
|
||
* Removes all children from the container
|
||
* and cleans their parent properties.
|
||
*
|
||
* @return {Node} this node for methods chain
|
||
*
|
||
* @example
|
||
* rule.removeAll();
|
||
* rule.nodes.length //=> 0
|
||
*/
|
||
;
|
||
|
||
_proto.removeAll = function removeAll() {
|
||
this.nodes.forEach(function (node) {
|
||
return node.parent = undefined;
|
||
});
|
||
this.nodes = [];
|
||
return this;
|
||
}
|
||
/**
|
||
* Passes all declaration values within the container that match pattern
|
||
* through callback, replacing those values with the returned result
|
||
* of callback.
|
||
*
|
||
* This method is useful if you are using a custom unit or function
|
||
* and need to iterate through all values.
|
||
*
|
||
* @param {string|RegExp} pattern - replace pattern
|
||
* @param {object} opts - options to speed up the search
|
||
* @param {string|string[]} opts.props - an array of property names
|
||
* @param {string} opts.fast - string that’s used
|
||
* to narrow down values and speed up
|
||
the regexp search
|
||
* @param {function|string} callback - string to replace pattern
|
||
* or callback that returns a new
|
||
* value.
|
||
* The callback will receive
|
||
* the same arguments as those
|
||
* passed to a function parameter
|
||
* of `String#replace`.
|
||
*
|
||
* @return {Node} this node for methods chain
|
||
*
|
||
* @example
|
||
* root.replaceValues(/\d+rem/, { fast: 'rem' }, string => {
|
||
* return 15 * parseInt(string) + 'px';
|
||
* });
|
||
*/
|
||
;
|
||
|
||
_proto.replaceValues = function replaceValues(pattern, opts, callback) {
|
||
if (!callback) {
|
||
callback = opts;
|
||
opts = {};
|
||
}
|
||
|
||
this.walkDecls(function (decl) {
|
||
if (opts.props && opts.props.indexOf(decl.prop) === -1) return;
|
||
if (opts.fast && decl.value.indexOf(opts.fast) === -1) return;
|
||
decl.value = decl.value.replace(pattern, callback);
|
||
});
|
||
return this;
|
||
}
|
||
/**
|
||
* Returns `true` if callback returns `true`
|
||
* for all of the container’s children.
|
||
*
|
||
* @param {childCondition} condition - iterator returns true or false.
|
||
*
|
||
* @return {boolean} is every child pass condition
|
||
*
|
||
* @example
|
||
* const noPrefixes = rule.every(i => i.prop[0] !== '-');
|
||
*/
|
||
;
|
||
|
||
_proto.every = function every(condition) {
|
||
return this.nodes.every(condition);
|
||
}
|
||
/**
|
||
* Returns `true` if callback returns `true` for (at least) one
|
||
* of the container’s children.
|
||
*
|
||
* @param {childCondition} condition - iterator returns true or false.
|
||
*
|
||
* @return {boolean} is some child pass condition
|
||
*
|
||
* @example
|
||
* const hasPrefix = rule.some(i => i.prop[0] === '-');
|
||
*/
|
||
;
|
||
|
||
_proto.some = function some(condition) {
|
||
return this.nodes.some(condition);
|
||
}
|
||
/**
|
||
* Returns a `child`’s index within the {@link Container#nodes} array.
|
||
*
|
||
* @param {Node} child - child of the current container.
|
||
*
|
||
* @return {number} child index
|
||
*
|
||
* @example
|
||
* rule.index( rule.nodes[2] ) //=> 2
|
||
*/
|
||
;
|
||
|
||
_proto.index = function index(child) {
|
||
if (typeof child === 'number') {
|
||
return child;
|
||
} else {
|
||
return this.nodes.indexOf(child);
|
||
}
|
||
}
|
||
/**
|
||
* The container’s first child.
|
||
*
|
||
* @type {Node}
|
||
*
|
||
* @example
|
||
* rule.first == rules.nodes[0];
|
||
*/
|
||
;
|
||
|
||
_proto.normalize = function normalize(nodes, sample) {
|
||
var _this5 = this;
|
||
|
||
if (typeof nodes === 'string') {
|
||
nodes = cleanSource(parse(nodes).nodes);
|
||
} else if (!Array.isArray(nodes)) {
|
||
if (nodes.type === 'root') {
|
||
nodes = nodes.nodes;
|
||
} else if (nodes.type) {
|
||
nodes = [nodes];
|
||
} else if (nodes.prop) {
|
||
if (typeof nodes.value === 'undefined') {
|
||
throw new Error('Value field is missed in node creation');
|
||
} else if (typeof nodes.value !== 'string') {
|
||
nodes.value = String(nodes.value);
|
||
}
|
||
|
||
nodes = [new Declaration(nodes)];
|
||
} else if (nodes.selector) {
|
||
nodes = [new Rule(nodes)];
|
||
} else if (nodes.name) {
|
||
nodes = [new AtRule(nodes)];
|
||
} else if (nodes.text) {
|
||
nodes = [new Comment(nodes)];
|
||
} else {
|
||
throw new Error('Unknown node type in node creation');
|
||
}
|
||
}
|
||
|
||
var processed = nodes.map(function (i) {
|
||
if (typeof i.raws === 'undefined') i = _this5.rebuild(i);
|
||
if (i.parent) i = i.clone();
|
||
|
||
if (typeof i.raws.before === 'undefined') {
|
||
if (sample && typeof sample.raws.before !== 'undefined') {
|
||
i.raws.before = sample.raws.before.replace(/[^\s]/g, '');
|
||
}
|
||
}
|
||
|
||
i.parent = _this5;
|
||
return i;
|
||
});
|
||
return processed;
|
||
};
|
||
|
||
_proto.rebuild = function rebuild(node, parent) {
|
||
var _this6 = this;
|
||
|
||
var fix;
|
||
|
||
if (node.type === 'root') {
|
||
fix = new Root();
|
||
} else if (node.type === 'atrule') {
|
||
fix = new AtRule();
|
||
} else if (node.type === 'rule') {
|
||
fix = new Rule();
|
||
} else if (node.type === 'decl') {
|
||
fix = new Declaration();
|
||
} else if (node.type === 'comment') {
|
||
fix = new Comment();
|
||
}
|
||
|
||
for (var i in node) {
|
||
if (i === 'nodes') {
|
||
fix.nodes = node.nodes.map(function (j) {
|
||
return _this6.rebuild(j, fix);
|
||
});
|
||
} else if (i === 'parent' && parent) {
|
||
fix.parent = parent;
|
||
} else if (node.hasOwnProperty(i)) {
|
||
fix[i] = node[i];
|
||
}
|
||
}
|
||
|
||
return fix;
|
||
};
|
||
|
||
_proto.eachInside = function eachInside(callback) {
|
||
warnOnce('Container#eachInside is deprecated. ' + 'Use Container#walk instead.');
|
||
return this.walk(callback);
|
||
};
|
||
|
||
_proto.eachDecl = function eachDecl(prop, callback) {
|
||
warnOnce('Container#eachDecl is deprecated. ' + 'Use Container#walkDecls instead.');
|
||
return this.walkDecls(prop, callback);
|
||
};
|
||
|
||
_proto.eachRule = function eachRule(selector, callback) {
|
||
warnOnce('Container#eachRule is deprecated. ' + 'Use Container#walkRules instead.');
|
||
return this.walkRules(selector, callback);
|
||
};
|
||
|
||
_proto.eachAtRule = function eachAtRule(name, callback) {
|
||
warnOnce('Container#eachAtRule is deprecated. ' + 'Use Container#walkAtRules instead.');
|
||
return this.walkAtRules(name, callback);
|
||
};
|
||
|
||
_proto.eachComment = function eachComment(callback) {
|
||
warnOnce('Container#eachComment is deprecated. ' + 'Use Container#walkComments instead.');
|
||
return this.walkComments(callback);
|
||
};
|
||
|
||
_createClass(Container, [{
|
||
key: "first",
|
||
get: function get() {
|
||
if (!this.nodes) return undefined;
|
||
return this.nodes[0];
|
||
}
|
||
/**
|
||
* The container’s last child.
|
||
*
|
||
* @type {Node}
|
||
*
|
||
* @example
|
||
* rule.last == rule.nodes[rule.nodes.length - 1];
|
||
*/
|
||
|
||
}, {
|
||
key: "last",
|
||
get: function get() {
|
||
if (!this.nodes) return undefined;
|
||
return this.nodes[this.nodes.length - 1];
|
||
}
|
||
}, {
|
||
key: "semicolon",
|
||
get: function get() {
|
||
warnOnce('Node#semicolon is deprecated. Use Node#raws.semicolon');
|
||
return this.raws.semicolon;
|
||
},
|
||
set: function set(val) {
|
||
warnOnce('Node#semicolon is deprecated. Use Node#raws.semicolon');
|
||
this.raws.semicolon = val;
|
||
}
|
||
}, {
|
||
key: "after",
|
||
get: function get() {
|
||
warnOnce('Node#after is deprecated. Use Node#raws.after');
|
||
return this.raws.after;
|
||
},
|
||
set: function set(val) {
|
||
warnOnce('Node#after is deprecated. Use Node#raws.after');
|
||
this.raws.after = val;
|
||
}
|
||
/**
|
||
* @memberof Container#
|
||
* @member {Node[]} nodes - an array containing the container’s children
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a { color: black }');
|
||
* root.nodes.length //=> 1
|
||
* root.nodes[0].selector //=> 'a'
|
||
* root.nodes[0].nodes[0].prop //=> 'color'
|
||
*/
|
||
|
||
}]);
|
||
|
||
return Container;
|
||
}(Node);
|
||
|
||
/**
|
||
* Represents an at-rule.
|
||
*
|
||
* If it’s followed in the CSS by a {} block, this node will have
|
||
* a nodes property representing its children.
|
||
*
|
||
* @extends Container
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('@charset "UTF-8"; @media print {}');
|
||
*
|
||
* const charset = root.first;
|
||
* charset.type //=> 'atrule'
|
||
* charset.nodes //=> undefined
|
||
*
|
||
* const media = root.last;
|
||
* media.nodes //=> []
|
||
*/
|
||
|
||
var AtRule = /*#__PURE__*/function (_Container) {
|
||
_inheritsLoose(AtRule, _Container);
|
||
|
||
function AtRule(defaults) {
|
||
var _this;
|
||
|
||
_this = _Container.call(this, defaults) || this;
|
||
_this.type = 'atrule';
|
||
return _this;
|
||
}
|
||
|
||
var _proto = AtRule.prototype;
|
||
|
||
_proto.append = function append() {
|
||
var _Container$prototype$;
|
||
|
||
if (!this.nodes) this.nodes = [];
|
||
|
||
for (var _len = arguments.length, children = new Array(_len), _key = 0; _key < _len; _key++) {
|
||
children[_key] = arguments[_key];
|
||
}
|
||
|
||
return (_Container$prototype$ = _Container.prototype.append).call.apply(_Container$prototype$, [this].concat(children));
|
||
};
|
||
|
||
_proto.prepend = function prepend() {
|
||
var _Container$prototype$2;
|
||
|
||
if (!this.nodes) this.nodes = [];
|
||
|
||
for (var _len2 = arguments.length, children = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
||
children[_key2] = arguments[_key2];
|
||
}
|
||
|
||
return (_Container$prototype$2 = _Container.prototype.prepend).call.apply(_Container$prototype$2, [this].concat(children));
|
||
};
|
||
|
||
_createClass(AtRule, [{
|
||
key: "afterName",
|
||
get: function get() {
|
||
warnOnce('AtRule#afterName was deprecated. Use AtRule#raws.afterName');
|
||
return this.raws.afterName;
|
||
},
|
||
set: function set(val) {
|
||
warnOnce('AtRule#afterName was deprecated. Use AtRule#raws.afterName');
|
||
this.raws.afterName = val;
|
||
}
|
||
}, {
|
||
key: "_params",
|
||
get: function get() {
|
||
warnOnce('AtRule#_params was deprecated. Use AtRule#raws.params');
|
||
return this.raws.params;
|
||
},
|
||
set: function set(val) {
|
||
warnOnce('AtRule#_params was deprecated. Use AtRule#raws.params');
|
||
this.raws.params = val;
|
||
}
|
||
/**
|
||
* @memberof AtRule#
|
||
* @member {string} name - the at-rule’s name immediately follows the `@`
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('@media print {}');
|
||
* media.name //=> 'media'
|
||
* const media = root.first;
|
||
*/
|
||
|
||
/**
|
||
* @memberof AtRule#
|
||
* @member {string} params - the at-rule’s parameters, the values
|
||
* that follow the at-rule’s name but precede
|
||
* any {} block
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('@media print, screen {}');
|
||
* const media = root.first;
|
||
* media.params //=> 'print, screen'
|
||
*/
|
||
|
||
/**
|
||
* @memberof AtRule#
|
||
* @member {object} raws - Information to generate byte-to-byte equal
|
||
* node string as it was in the origin input.
|
||
*
|
||
* Every parser saves its own properties,
|
||
* but the default CSS parser uses:
|
||
*
|
||
* * `before`: the space symbols before the node. It also stores `*`
|
||
* and `_` symbols before the declaration (IE hack).
|
||
* * `after`: the space symbols after the last child of the node
|
||
* to the end of the node.
|
||
* * `between`: the symbols between the property and value
|
||
* for declarations, selector and `{` for rules, or last parameter
|
||
* and `{` for at-rules.
|
||
* * `semicolon`: contains true if the last child has
|
||
* an (optional) semicolon.
|
||
* * `afterName`: the space between the at-rule name and its parameters.
|
||
*
|
||
* PostCSS cleans at-rule parameters from comments and extra spaces,
|
||
* but it stores origin content in raws properties.
|
||
* As such, if you don’t change a declaration’s value,
|
||
* PostCSS will use the raw value with comments.
|
||
*
|
||
* @example
|
||
* const root = postcss.parse(' @media\nprint {\n}')
|
||
* root.first.first.raws //=> { before: ' ',
|
||
* // between: ' ',
|
||
* // afterName: '\n',
|
||
* // after: '\n' }
|
||
*/
|
||
|
||
}]);
|
||
|
||
return AtRule;
|
||
}(Container);
|
||
|
||
//
|
||
|
||
/**
|
||
* Contains helpers for safely splitting lists of CSS values,
|
||
* preserving parentheses and quotes.
|
||
*
|
||
* @example
|
||
* const list = postcss.list;
|
||
*
|
||
* @namespace list
|
||
*/
|
||
var list = {
|
||
split: function split(string, separators, last) {
|
||
var array = [];
|
||
var current = '';
|
||
var split = false;
|
||
var func = 0;
|
||
var quote = false;
|
||
var escape = false;
|
||
|
||
for (var i = 0; i < string.length; i++) {
|
||
var letter = string[i];
|
||
|
||
if (quote) {
|
||
if (escape) {
|
||
escape = false;
|
||
} else if (letter === '\\') {
|
||
escape = true;
|
||
} else if (letter === quote) {
|
||
quote = false;
|
||
}
|
||
} else if (letter === '"' || letter === "'") {
|
||
quote = letter;
|
||
} else if (letter === '(') {
|
||
func += 1;
|
||
} else if (letter === ')') {
|
||
if (func > 0) func -= 1;
|
||
} else if (func === 0) {
|
||
if (separators.indexOf(letter) !== -1) split = true;
|
||
}
|
||
|
||
if (split) {
|
||
if (current !== '') array.push(current.trim());
|
||
current = '';
|
||
split = false;
|
||
} else {
|
||
current += letter;
|
||
}
|
||
}
|
||
|
||
if (last || current !== '') array.push(current.trim());
|
||
return array;
|
||
},
|
||
|
||
/**
|
||
* Safely splits space-separated values (such as those for `background`,
|
||
* `border-radius`, and other shorthand properties).
|
||
*
|
||
* @param {string} string - space-separated values
|
||
*
|
||
* @return {string[]} splitted values
|
||
*
|
||
* @example
|
||
* postcss.list.space('1px calc(10% + 1px)') //=> ['1px', 'calc(10% + 1px)']
|
||
*/
|
||
space: function space(string) {
|
||
var spaces = [' ', '\n', '\t'];
|
||
return list.split(string, spaces);
|
||
},
|
||
|
||
/**
|
||
* Safely splits comma-separated values (such as those for `transition-*`
|
||
* and `background` properties).
|
||
*
|
||
* @param {string} string - comma-separated values
|
||
*
|
||
* @return {string[]} splitted values
|
||
*
|
||
* @example
|
||
* postcss.list.comma('black, linear-gradient(white, black)')
|
||
* //=> ['black', 'linear-gradient(white, black)']
|
||
*/
|
||
comma: function comma(string) {
|
||
var comma = ',';
|
||
return list.split(string, [comma], true);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Represents a CSS rule: a selector followed by a declaration block.
|
||
*
|
||
* @extends Container
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a{}');
|
||
* const rule = root.first;
|
||
* rule.type //=> 'rule'
|
||
* rule.toString() //=> 'a{}'
|
||
*/
|
||
|
||
var Rule = /*#__PURE__*/function (_Container) {
|
||
_inheritsLoose(Rule, _Container);
|
||
|
||
function Rule(defaults) {
|
||
var _this;
|
||
|
||
_this = _Container.call(this, defaults) || this;
|
||
_this.type = 'rule';
|
||
if (!_this.nodes) _this.nodes = [];
|
||
return _this;
|
||
}
|
||
/**
|
||
* An array containing the rule’s individual selectors.
|
||
* Groups of selectors are split at commas.
|
||
*
|
||
* @type {string[]}
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a, b { }');
|
||
* const rule = root.first;
|
||
*
|
||
* rule.selector //=> 'a, b'
|
||
* rule.selectors //=> ['a', 'b']
|
||
*
|
||
* rule.selectors = ['a', 'strong'];
|
||
* rule.selector //=> 'a, strong'
|
||
*/
|
||
|
||
|
||
_createClass(Rule, [{
|
||
key: "selectors",
|
||
get: function get() {
|
||
return list.comma(this.selector);
|
||
},
|
||
set: function set(values) {
|
||
var match = this.selector ? this.selector.match(/,\s*/) : null;
|
||
var sep = match ? match[0] : "," + this.raw('between', 'beforeOpen');
|
||
this.selector = values.join(sep);
|
||
}
|
||
}, {
|
||
key: "_selector",
|
||
get: function get() {
|
||
warnOnce('Rule#_selector is deprecated. Use Rule#raws.selector');
|
||
return this.raws.selector;
|
||
},
|
||
set: function set(val) {
|
||
warnOnce('Rule#_selector is deprecated. Use Rule#raws.selector');
|
||
this.raws.selector = val;
|
||
}
|
||
/**
|
||
* @memberof Rule#
|
||
* @member {string} selector - the rule’s full selector represented
|
||
* as a string
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a, b { }');
|
||
* const rule = root.first;
|
||
* rule.selector //=> 'a, b'
|
||
*/
|
||
|
||
/**
|
||
* @memberof Rule#
|
||
* @member {object} raws - Information to generate byte-to-byte equal
|
||
* node string as it was in the origin input.
|
||
*
|
||
* Every parser saves its own properties,
|
||
* but the default CSS parser uses:
|
||
*
|
||
* * `before`: the space symbols before the node. It also stores `*`
|
||
* and `_` symbols before the declaration (IE hack).
|
||
* * `after`: the space symbols after the last child of the node
|
||
* to the end of the node.
|
||
* * `between`: the symbols between the property and value
|
||
* for declarations, selector and `{` for rules, or last parameter
|
||
* and `{` for at-rules.
|
||
* * `semicolon`: contains true if the last child has
|
||
* an (optional) semicolon.
|
||
*
|
||
* PostCSS cleans selectors from comments and extra spaces,
|
||
* but it stores origin content in raws properties.
|
||
* As such, if you don’t change a declaration’s value,
|
||
* PostCSS will use the raw value with comments.
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a {\n color:black\n}')
|
||
* root.first.first.raws //=> { before: '', between: ' ', after: '\n' }
|
||
*/
|
||
|
||
}]);
|
||
|
||
return Rule;
|
||
}(Container);
|
||
|
||
//
|
||
|
||
/**
|
||
* Represents a plugin’s warning. It can be created using {@link Node#warn}.
|
||
*
|
||
* @example
|
||
* if ( decl.important ) {
|
||
* decl.warn(result, 'Avoid !important', { word: '!important' });
|
||
* }
|
||
*/
|
||
var Warning = /*#__PURE__*/function () {
|
||
/**
|
||
* @param {string} text - warning message
|
||
* @param {Object} [opts] - warning options
|
||
* @param {Node} opts.node - CSS node that caused the warning
|
||
* @param {string} opts.word - word in CSS source that caused the warning
|
||
* @param {number} opts.index - index in CSS node string that caused
|
||
* the warning
|
||
* @param {string} opts.plugin - name of the plugin that created
|
||
* this warning. {@link Result#warn} fills
|
||
* this property automatically.
|
||
*/
|
||
function Warning(text, opts) {
|
||
if (opts === void 0) {
|
||
opts = {};
|
||
}
|
||
|
||
/**
|
||
* @member {string} - Type to filter warnings from
|
||
* {@link Result#messages}. Always equal
|
||
* to `"warning"`.
|
||
*
|
||
* @example
|
||
* const nonWarning = result.messages.filter(i => i.type !== 'warning')
|
||
*/
|
||
this.type = 'warning';
|
||
/**
|
||
* @member {string} - The warning message.
|
||
*
|
||
* @example
|
||
* warning.text //=> 'Try to avoid !important'
|
||
*/
|
||
|
||
this.text = text;
|
||
|
||
if (opts.node && opts.node.source) {
|
||
var pos = opts.node.positionBy(opts);
|
||
/**
|
||
* @member {number} - Line in the input file
|
||
* with this warning’s source
|
||
*
|
||
* @example
|
||
* warning.line //=> 5
|
||
*/
|
||
|
||
this.line = pos.line;
|
||
/**
|
||
* @member {number} - Column in the input file
|
||
* with this warning’s source.
|
||
*
|
||
* @example
|
||
* warning.column //=> 6
|
||
*/
|
||
|
||
this.column = pos.column;
|
||
}
|
||
|
||
for (var opt in opts) {
|
||
this[opt] = opts[opt];
|
||
}
|
||
}
|
||
/**
|
||
* Returns a warning position and message.
|
||
*
|
||
* @example
|
||
* warning.toString() //=> 'postcss-lint:a.css:10:14: Avoid !important'
|
||
*
|
||
* @return {string} warning position and message
|
||
*/
|
||
|
||
|
||
var _proto = Warning.prototype;
|
||
|
||
_proto.toString = function toString() {
|
||
if (this.node) {
|
||
return this.node.error(this.text, {
|
||
plugin: this.plugin,
|
||
index: this.index,
|
||
word: this.word
|
||
}).message;
|
||
} else if (this.plugin) {
|
||
return this.plugin + ": " + this.text;
|
||
} else {
|
||
return this.text;
|
||
}
|
||
}
|
||
/**
|
||
* @memberof Warning#
|
||
* @member {string} plugin - The name of the plugin that created
|
||
* it will fill this property automatically.
|
||
* this warning. When you call {@link Node#warn}
|
||
*
|
||
* @example
|
||
* warning.plugin //=> 'postcss-important'
|
||
*/
|
||
|
||
/**
|
||
* @memberof Warning#
|
||
* @member {Node} node - Contains the CSS node that caused the warning.
|
||
*
|
||
* @example
|
||
* warning.node.toString() //=> 'color: white !important'
|
||
*/
|
||
;
|
||
|
||
return Warning;
|
||
}();
|
||
|
||
/**
|
||
* @typedef {object} Message
|
||
* @property {string} type - message type
|
||
* @property {string} plugin - source PostCSS plugin name
|
||
*/
|
||
|
||
/**
|
||
* Provides the result of the PostCSS transformations.
|
||
*
|
||
* A Result instance is returned by {@link LazyResult#then}
|
||
* or {@link Root#toResult} methods.
|
||
*
|
||
* @example
|
||
* postcss([cssnext]).process(css).then(function (result) {
|
||
* console.log(result.css);
|
||
* });
|
||
*
|
||
* @example
|
||
* var result2 = postcss.parse(css).toResult();
|
||
*/
|
||
|
||
var Result = /*#__PURE__*/function () {
|
||
/**
|
||
* @param {Processor} processor - processor used for this transformation.
|
||
* @param {Root} root - Root node after all transformations.
|
||
* @param {processOptions} opts - options from the {@link Processor#process}
|
||
* or {@link Root#toResult}
|
||
*/
|
||
function Result(processor, root, opts) {
|
||
/**
|
||
* @member {Processor} - The Processor instance used
|
||
* for this transformation.
|
||
*
|
||
* @example
|
||
* for ( let plugin of result.processor.plugins) {
|
||
* if ( plugin.postcssPlugin === 'postcss-bad' ) {
|
||
* throw 'postcss-good is incompatible with postcss-bad';
|
||
* }
|
||
* });
|
||
*/
|
||
this.processor = processor;
|
||
/**
|
||
* @member {Message[]} - Contains messages from plugins
|
||
* (e.g., warnings or custom messages).
|
||
* Each message should have type
|
||
* and plugin properties.
|
||
*
|
||
* @example
|
||
* postcss.plugin('postcss-min-browser', () => {
|
||
* return (root, result) => {
|
||
* var browsers = detectMinBrowsersByCanIUse(root);
|
||
* result.messages.push({
|
||
* type: 'min-browser',
|
||
* plugin: 'postcss-min-browser',
|
||
* browsers: browsers
|
||
* });
|
||
* };
|
||
* });
|
||
*/
|
||
|
||
this.messages = [];
|
||
/**
|
||
* @member {Root} - Root node after all transformations.
|
||
*
|
||
* @example
|
||
* root.toResult().root == root;
|
||
*/
|
||
|
||
this.root = root;
|
||
/**
|
||
* @member {processOptions} - Options from the {@link Processor#process}
|
||
* or {@link Root#toResult} call
|
||
* that produced this Result instance.
|
||
*
|
||
* @example
|
||
* root.toResult(opts).opts == opts;
|
||
*/
|
||
|
||
this.opts = opts;
|
||
/**
|
||
* @member {string} - A CSS string representing of {@link Result#root}.
|
||
*
|
||
* @example
|
||
* postcss.parse('a{}').toResult().css //=> "a{}"
|
||
*/
|
||
|
||
this.css = undefined;
|
||
/**
|
||
* @member {SourceMapGenerator} - An instance of `SourceMapGenerator`
|
||
* class from the `source-map` library,
|
||
* representing changes
|
||
* to the {@link Result#root} instance.
|
||
*
|
||
* @example
|
||
* result.map.toJSON() //=> { version: 3, file: 'a.css', … }
|
||
*
|
||
* @example
|
||
* if ( result.map ) {
|
||
* fs.writeFileSync(result.opts.to + '.map', result.map.toString());
|
||
* }
|
||
*/
|
||
|
||
this.map = undefined;
|
||
}
|
||
/**
|
||
* Returns for @{link Result#css} content.
|
||
*
|
||
* @example
|
||
* result + '' === result.css
|
||
*
|
||
* @return {string} string representing of {@link Result#root}
|
||
*/
|
||
|
||
|
||
var _proto = Result.prototype;
|
||
|
||
_proto.toString = function toString() {
|
||
return this.css;
|
||
}
|
||
/**
|
||
* Creates an instance of {@link Warning} and adds it
|
||
* to {@link Result#messages}.
|
||
*
|
||
* @param {string} text - warning message
|
||
* @param {Object} [opts] - warning options
|
||
* @param {Node} opts.node - CSS node that caused the warning
|
||
* @param {string} opts.word - word in CSS source that caused the warning
|
||
* @param {number} opts.index - index in CSS node string that caused
|
||
* the warning
|
||
* @param {string} opts.plugin - name of the plugin that created
|
||
* this warning. {@link Result#warn} fills
|
||
* this property automatically.
|
||
*
|
||
* @return {Warning} created warning
|
||
*/
|
||
;
|
||
|
||
_proto.warn = function warn(text, opts) {
|
||
if (opts === void 0) {
|
||
opts = {};
|
||
}
|
||
|
||
if (!opts.plugin) {
|
||
if (this.lastPlugin && this.lastPlugin.postcssPlugin) {
|
||
opts.plugin = this.lastPlugin.postcssPlugin;
|
||
}
|
||
}
|
||
|
||
var warning = new Warning(text, opts);
|
||
this.messages.push(warning);
|
||
return warning;
|
||
}
|
||
/**
|
||
* Returns warnings from plugins. Filters {@link Warning} instances
|
||
* from {@link Result#messages}.
|
||
*
|
||
* @example
|
||
* result.warnings().forEach(warn => {
|
||
* console.warn(warn.toString());
|
||
* });
|
||
*
|
||
* @return {Warning[]} warnings from plugins
|
||
*/
|
||
;
|
||
|
||
_proto.warnings = function warnings() {
|
||
return this.messages.filter(function (i) {
|
||
return i.type === 'warning';
|
||
});
|
||
}
|
||
/**
|
||
* An alias for the {@link Result#css} property.
|
||
* Use it with syntaxes that generate non-CSS output.
|
||
* @type {string}
|
||
*
|
||
* @example
|
||
* result.css === result.content;
|
||
*/
|
||
;
|
||
|
||
_createClass(Result, [{
|
||
key: "content",
|
||
get: function get() {
|
||
return this.css;
|
||
}
|
||
}]);
|
||
|
||
return Result;
|
||
}();
|
||
|
||
function isPromise(obj) {
|
||
return typeof obj === 'object' && typeof obj.then === 'function';
|
||
}
|
||
/**
|
||
* @callback onFulfilled
|
||
* @param {Result} result
|
||
*/
|
||
|
||
/**
|
||
* @callback onRejected
|
||
* @param {Error} error
|
||
*/
|
||
|
||
/**
|
||
* A Promise proxy for the result of PostCSS transformations.
|
||
*
|
||
* A `LazyResult` instance is returned by {@link Processor#process}.
|
||
*
|
||
* @example
|
||
* const lazy = postcss([cssnext]).process(css);
|
||
*/
|
||
|
||
|
||
var LazyResult = /*#__PURE__*/function () {
|
||
function LazyResult(processor, css, opts) {
|
||
this.stringified = false;
|
||
this.processed = false;
|
||
var root;
|
||
|
||
if (typeof css === 'object' && css.type === 'root') {
|
||
root = css;
|
||
} else if (css instanceof LazyResult || css instanceof Result) {
|
||
root = css.root;
|
||
|
||
if (css.map) {
|
||
if (typeof opts.map === 'undefined') opts.map = {};
|
||
if (!opts.map.inline) opts.map.inline = false;
|
||
opts.map.prev = css.map;
|
||
}
|
||
} else {
|
||
var parser = parse;
|
||
if (opts.syntax) parser = opts.syntax.parse;
|
||
if (opts.parser) parser = opts.parser;
|
||
if (parser.parse) parser = parser.parse;
|
||
|
||
try {
|
||
root = parser(css, opts);
|
||
} catch (error) {
|
||
this.error = error;
|
||
}
|
||
}
|
||
|
||
this.result = new Result(processor, root, opts);
|
||
}
|
||
/**
|
||
* Returns a {@link Processor} instance, which will be used
|
||
* for CSS transformations.
|
||
* @type {Processor}
|
||
*/
|
||
|
||
|
||
var _proto = LazyResult.prototype;
|
||
|
||
/**
|
||
* Processes input CSS through synchronous plugins
|
||
* and calls {@link Result#warnings()}.
|
||
*
|
||
* @return {Warning[]} warnings from plugins
|
||
*/
|
||
_proto.warnings = function warnings() {
|
||
return this.sync().warnings();
|
||
}
|
||
/**
|
||
* Alias for the {@link LazyResult#css} property.
|
||
*
|
||
* @example
|
||
* lazy + '' === lazy.css;
|
||
*
|
||
* @return {string} output CSS
|
||
*/
|
||
;
|
||
|
||
_proto.toString = function toString() {
|
||
return this.css;
|
||
}
|
||
/**
|
||
* Processes input CSS through synchronous and asynchronous plugins
|
||
* and calls `onFulfilled` with a Result instance. If a plugin throws
|
||
* an error, the `onRejected` callback will be executed.
|
||
*
|
||
* It implements standard Promise API.
|
||
*
|
||
* @param {onFulfilled} onFulfilled - callback will be executed
|
||
* when all plugins will finish work
|
||
* @param {onRejected} onRejected - callback will be execited on any error
|
||
*
|
||
* @return {Promise} Promise API to make queue
|
||
*
|
||
* @example
|
||
* postcss([cssnext]).process(css).then(result => {
|
||
* console.log(result.css);
|
||
* });
|
||
*/
|
||
;
|
||
|
||
_proto.then = function then(onFulfilled, onRejected) {
|
||
return this.async().then(onFulfilled, onRejected);
|
||
}
|
||
/**
|
||
* Processes input CSS through synchronous and asynchronous plugins
|
||
* and calls onRejected for each error thrown in any plugin.
|
||
*
|
||
* It implements standard Promise API.
|
||
*
|
||
* @param {onRejected} onRejected - callback will be execited on any error
|
||
*
|
||
* @return {Promise} Promise API to make queue
|
||
*
|
||
* @example
|
||
* postcss([cssnext]).process(css).then(result => {
|
||
* console.log(result.css);
|
||
* }).catch(error => {
|
||
* console.error(error);
|
||
* });
|
||
*/
|
||
;
|
||
|
||
_proto["catch"] = function _catch(onRejected) {
|
||
return this.async()["catch"](onRejected);
|
||
};
|
||
|
||
_proto.handleError = function handleError(error, plugin) {
|
||
try {
|
||
this.error = error;
|
||
|
||
if (error.name === 'CssSyntaxError' && !error.plugin) {
|
||
error.plugin = plugin.postcssPlugin;
|
||
error.setMessage();
|
||
} else if (plugin.postcssVersion) {
|
||
var pluginName = plugin.postcssPlugin;
|
||
var pluginVer = plugin.postcssVersion;
|
||
var runtimeVer = this.result.processor.version;
|
||
var a = pluginVer.split('.');
|
||
var b = runtimeVer.split('.');
|
||
|
||
if (a[0] !== b[0] || parseInt(a[1]) > parseInt(b[1])) {
|
||
warnOnce("" + ('Your current PostCSS version ' + 'is ') + runtimeVer + ", but " + pluginName + " " + ("uses " + pluginVer + ". Perhaps this is ") + "the source of the error below.");
|
||
}
|
||
}
|
||
} catch (err) {
|
||
if (console && console.error) console.error(err);
|
||
}
|
||
};
|
||
|
||
_proto.asyncTick = function asyncTick(resolve, reject) {
|
||
var _this = this;
|
||
|
||
if (this.plugin >= this.processor.plugins.length) {
|
||
this.processed = true;
|
||
return resolve();
|
||
}
|
||
|
||
try {
|
||
var plugin = this.processor.plugins[this.plugin];
|
||
var promise = this.run(plugin);
|
||
this.plugin += 1;
|
||
|
||
if (isPromise(promise)) {
|
||
promise.then(function () {
|
||
_this.asyncTick(resolve, reject);
|
||
})["catch"](function (error) {
|
||
_this.handleError(error, plugin);
|
||
|
||
_this.processed = true;
|
||
reject(error);
|
||
});
|
||
} else {
|
||
this.asyncTick(resolve, reject);
|
||
}
|
||
} catch (error) {
|
||
this.processed = true;
|
||
reject(error);
|
||
}
|
||
};
|
||
|
||
_proto.async = function async() {
|
||
var _this2 = this;
|
||
|
||
if (this.processed) {
|
||
return new Promise(function (resolve, reject) {
|
||
if (_this2.error) {
|
||
reject(_this2.error);
|
||
} else {
|
||
resolve(_this2.stringify());
|
||
}
|
||
});
|
||
}
|
||
|
||
if (this.processing) {
|
||
return this.processing;
|
||
}
|
||
|
||
this.processing = new Promise(function (resolve, reject) {
|
||
if (_this2.error) return reject(_this2.error);
|
||
_this2.plugin = 0;
|
||
|
||
_this2.asyncTick(resolve, reject);
|
||
}).then(function () {
|
||
_this2.processed = true;
|
||
return _this2.stringify();
|
||
});
|
||
return this.processing;
|
||
};
|
||
|
||
_proto.sync = function sync() {
|
||
var _this3 = this;
|
||
|
||
if (this.processed) return this.result;
|
||
this.processed = true;
|
||
|
||
if (this.processing) {
|
||
throw new Error('Use process(css).then(cb) to work with async plugins');
|
||
}
|
||
|
||
if (this.error) throw this.error;
|
||
this.result.processor.plugins.forEach(function (plugin) {
|
||
var promise = _this3.run(plugin);
|
||
|
||
if (isPromise(promise)) {
|
||
throw new Error('Use process(css).then(cb) to work with async plugins');
|
||
}
|
||
});
|
||
return this.result;
|
||
};
|
||
|
||
_proto.run = function run(plugin) {
|
||
this.result.lastPlugin = plugin;
|
||
|
||
try {
|
||
return plugin(this.result.root, this.result);
|
||
} catch (error) {
|
||
this.handleError(error, plugin);
|
||
throw error;
|
||
}
|
||
};
|
||
|
||
_proto.stringify = function stringify$1() {
|
||
if (this.stringified) return this.result;
|
||
this.stringified = true;
|
||
this.sync();
|
||
var opts = this.result.opts;
|
||
var str = stringify;
|
||
if (opts.syntax) str = opts.syntax.stringify;
|
||
if (opts.stringifier) str = opts.stringifier;
|
||
if (str.stringify) str = str.stringify;
|
||
var result = '';
|
||
str(this.root, function (i) {
|
||
result += i;
|
||
});
|
||
this.result.css = result;
|
||
return this.result;
|
||
};
|
||
|
||
_createClass(LazyResult, [{
|
||
key: "processor",
|
||
get: function get() {
|
||
return this.result.processor;
|
||
}
|
||
/**
|
||
* Options from the {@link Processor#process} call.
|
||
* @type {processOptions}
|
||
*/
|
||
|
||
}, {
|
||
key: "opts",
|
||
get: function get() {
|
||
return this.result.opts;
|
||
}
|
||
/**
|
||
* Processes input CSS through synchronous plugins, converts `Root`
|
||
* to a CSS string and returns {@link Result#css}.
|
||
*
|
||
* This property will only work with synchronous plugins.
|
||
* If the processor contains any asynchronous plugins
|
||
* it will throw an error. This is why this method is only
|
||
* for debug purpose, you should always use {@link LazyResult#then}.
|
||
*
|
||
* @type {string}
|
||
* @see Result#css
|
||
*/
|
||
|
||
}, {
|
||
key: "css",
|
||
get: function get() {
|
||
return this.stringify().css;
|
||
}
|
||
/**
|
||
* An alias for the `css` property. Use it with syntaxes
|
||
* that generate non-CSS output.
|
||
*
|
||
* This property will only work with synchronous plugins.
|
||
* If the processor contains any asynchronous plugins
|
||
* it will throw an error. This is why this method is only
|
||
* for debug purpose, you should always use {@link LazyResult#then}.
|
||
*
|
||
* @type {string}
|
||
* @see Result#content
|
||
*/
|
||
|
||
}, {
|
||
key: "content",
|
||
get: function get() {
|
||
return this.stringify().content;
|
||
}
|
||
/**
|
||
* Processes input CSS through synchronous plugins
|
||
* and returns {@link Result#map}.
|
||
*
|
||
* This property will only work with synchronous plugins.
|
||
* If the processor contains any asynchronous plugins
|
||
* it will throw an error. This is why this method is only
|
||
* for debug purpose, you should always use {@link LazyResult#then}.
|
||
*
|
||
* @type {SourceMapGenerator}
|
||
* @see Result#map
|
||
*/
|
||
|
||
}, {
|
||
key: "map",
|
||
get: function get() {
|
||
return this.stringify().map;
|
||
}
|
||
/**
|
||
* Processes input CSS through synchronous plugins
|
||
* and returns {@link Result#root}.
|
||
*
|
||
* This property will only work with synchronous plugins. If the processor
|
||
* contains any asynchronous plugins it will throw an error.
|
||
*
|
||
* This is why this method is only for debug purpose,
|
||
* you should always use {@link LazyResult#then}.
|
||
*
|
||
* @type {Root}
|
||
* @see Result#root
|
||
*/
|
||
|
||
}, {
|
||
key: "root",
|
||
get: function get() {
|
||
return this.sync().root;
|
||
}
|
||
/**
|
||
* Processes input CSS through synchronous plugins
|
||
* and returns {@link Result#messages}.
|
||
*
|
||
* This property will only work with synchronous plugins. If the processor
|
||
* contains any asynchronous plugins it will throw an error.
|
||
*
|
||
* This is why this method is only for debug purpose,
|
||
* you should always use {@link LazyResult#then}.
|
||
*
|
||
* @type {Message[]}
|
||
* @see Result#messages
|
||
*/
|
||
|
||
}, {
|
||
key: "messages",
|
||
get: function get() {
|
||
return this.sync().messages;
|
||
}
|
||
}]);
|
||
|
||
return LazyResult;
|
||
}();
|
||
|
||
//
|
||
/**
|
||
* @callback builder
|
||
* @param {string} part - part of generated CSS connected to this node
|
||
* @param {Node} node - AST node
|
||
* @param {"start"|"end"} [type] - node’s part type
|
||
*/
|
||
|
||
/**
|
||
* @callback parser
|
||
*
|
||
* @param {string|toString} css - string with input CSS or any object
|
||
* with toString() method, like a Buffer
|
||
* @param {processOptions} [opts] - options with only `from` and `map` keys
|
||
*
|
||
* @return {Root} PostCSS AST
|
||
*/
|
||
|
||
/**
|
||
* @callback stringifier
|
||
*
|
||
* @param {Node} node - start node for stringifing. Usually {@link Root}.
|
||
* @param {builder} builder - function to concatenate CSS from node’s parts
|
||
* or generate string and source map
|
||
*
|
||
* @return {void}
|
||
*/
|
||
|
||
/**
|
||
* @typedef {object} syntax
|
||
* @property {parser} parse - function to generate AST by string
|
||
* @property {stringifier} stringify - function to generate string by AST
|
||
*/
|
||
|
||
/**
|
||
* @typedef {object} toString
|
||
* @property {function} toString
|
||
*/
|
||
|
||
/**
|
||
* @callback pluginFunction
|
||
* @param {Root} root - parsed input CSS
|
||
* @param {Result} result - result to set warnings or check other plugins
|
||
*/
|
||
|
||
/**
|
||
* @typedef {object} Plugin
|
||
* @property {function} postcss - PostCSS plugin function
|
||
*/
|
||
|
||
/**
|
||
* @typedef {object} processOptions
|
||
* @property {string} from - the path of the CSS source file.
|
||
* You should always set `from`,
|
||
* because it is used in source map
|
||
* generation and syntax error messages.
|
||
* @property {string} to - the path where you’ll put the output
|
||
* CSS file. You should always set `to`
|
||
* to generate correct source maps.
|
||
* @property {parser} parser - function to generate AST by string
|
||
* @property {stringifier} stringifier - class to generate string by AST
|
||
* @property {syntax} syntax - object with `parse` and `stringify`
|
||
* @property {object} map - source map options
|
||
* @property {boolean} map.inline - does source map should
|
||
* be embedded in the output
|
||
* CSS as a base64-encoded
|
||
* comment
|
||
* @property {string|object|false|function} map.prev - source map content
|
||
* from a previous
|
||
* processing step
|
||
* (for example, Sass).
|
||
* PostCSS will try to find
|
||
* previous map
|
||
* automatically, so you
|
||
* could disable it by
|
||
* `false` value.
|
||
* @property {boolean} map.sourcesContent - does PostCSS should set
|
||
* the origin content to map
|
||
* @property {string|false} map.annotation - does PostCSS should set
|
||
* annotation comment to map
|
||
* @property {string} map.from - override `from` in map’s
|
||
* `sources`
|
||
*/
|
||
|
||
/**
|
||
* Contains plugins to process CSS. Create one `Processor` instance,
|
||
* initialize its plugins, and then use that instance on numerous CSS files.
|
||
*
|
||
* @example
|
||
* const processor = postcss([autoprefixer, precss]);
|
||
* processor.process(css1).then(result => console.log(result.css));
|
||
* processor.process(css2).then(result => console.log(result.css));
|
||
*/
|
||
|
||
var Processor = /*#__PURE__*/function () {
|
||
/**
|
||
* @param {Array.<Plugin|pluginFunction>|Processor} plugins - PostCSS
|
||
* plugins. See {@link Processor#use} for plugin format.
|
||
*/
|
||
function Processor(plugins) {
|
||
if (plugins === void 0) {
|
||
plugins = [];
|
||
}
|
||
|
||
/**
|
||
* @member {string} - Current PostCSS version.
|
||
*
|
||
* @example
|
||
* if ( result.processor.version.split('.')[0] !== '5' ) {
|
||
* throw new Error('This plugin works only with PostCSS 5');
|
||
* }
|
||
*/
|
||
this.version = '5.2.0';
|
||
/**
|
||
* @member {pluginFunction[]} - Plugins added to this processor.
|
||
*
|
||
* @example
|
||
* const processor = postcss([autoprefixer, precss]);
|
||
* processor.plugins.length //=> 2
|
||
*/
|
||
|
||
this.plugins = this.normalize(plugins);
|
||
}
|
||
/**
|
||
* Adds a plugin to be used as a CSS processor.
|
||
*
|
||
* PostCSS plugin can be in 4 formats:
|
||
* * A plugin created by {@link postcss.plugin} method.
|
||
* * A function. PostCSS will pass the function a @{link Root}
|
||
* as the first argument and current {@link Result} instance
|
||
* as the second.
|
||
* * An object with a `postcss` method. PostCSS will use that method
|
||
* as described in #2.
|
||
* * Another {@link Processor} instance. PostCSS will copy plugins
|
||
* from that instance into this one.
|
||
*
|
||
* Plugins can also be added by passing them as arguments when creating
|
||
* a `postcss` instance (see [`postcss(plugins)`]).
|
||
*
|
||
* Asynchronous plugins should return a `Promise` instance.
|
||
*
|
||
* @param {Plugin|pluginFunction|Processor} plugin - PostCSS plugin
|
||
* or {@link Processor}
|
||
* with plugins
|
||
*
|
||
* @example
|
||
* const processor = postcss()
|
||
* .use(autoprefixer)
|
||
* .use(precss);
|
||
*
|
||
* @return {Processes} current processor to make methods chain
|
||
*/
|
||
|
||
|
||
var _proto = Processor.prototype;
|
||
|
||
_proto.use = function use(plugin) {
|
||
this.plugins = this.plugins.concat(this.normalize([plugin]));
|
||
return this;
|
||
}
|
||
/**
|
||
* Parses source CSS and returns a {@link LazyResult} Promise proxy.
|
||
* Because some plugins can be asynchronous it doesn’t make
|
||
* any transformations. Transformations will be applied
|
||
* in the {@link LazyResult} methods.
|
||
*
|
||
* @param {string|toString|Result} css - String with input CSS or
|
||
* any object with a `toString()`
|
||
* method, like a Buffer.
|
||
* Optionally, send a {@link Result}
|
||
* instance and the processor will
|
||
* take the {@link Root} from it.
|
||
* @param {processOptions} [opts] - options
|
||
*
|
||
* @return {LazyResult} Promise proxy
|
||
*
|
||
* @example
|
||
* processor.process(css, { from: 'a.css', to: 'a.out.css' })
|
||
* .then(result => {
|
||
* console.log(result.css);
|
||
* });
|
||
*/
|
||
;
|
||
|
||
_proto.process = function process(css, opts) {
|
||
if (opts === void 0) {
|
||
opts = {};
|
||
}
|
||
|
||
return new LazyResult(this, css, opts);
|
||
};
|
||
|
||
_proto.normalize = function normalize(plugins) {
|
||
var normalized = [];
|
||
plugins.forEach(function (i) {
|
||
if (i.postcss) i = i.postcss;
|
||
|
||
if (typeof i === 'object' && Array.isArray(i.plugins)) {
|
||
normalized = normalized.concat(i.plugins);
|
||
} else if (typeof i === 'function') {
|
||
normalized.push(i);
|
||
} else {
|
||
throw new Error(i + " is not a PostCSS plugin");
|
||
}
|
||
});
|
||
return normalized;
|
||
};
|
||
|
||
return Processor;
|
||
}();
|
||
|
||
/**
|
||
* Represents a CSS file and contains all its parsed nodes.
|
||
*
|
||
* @extends Container
|
||
*
|
||
* @example
|
||
* const root = postcss.parse('a{color:black} b{z-index:2}');
|
||
* root.type //=> 'root'
|
||
* root.nodes.length //=> 2
|
||
*/
|
||
|
||
var Root = /*#__PURE__*/function (_Container) {
|
||
_inheritsLoose(Root, _Container);
|
||
|
||
function Root(defaults) {
|
||
var _this;
|
||
|
||
_this = _Container.call(this, defaults) || this;
|
||
_this.type = 'root';
|
||
if (!_this.nodes) _this.nodes = [];
|
||
return _this;
|
||
}
|
||
|
||
var _proto = Root.prototype;
|
||
|
||
_proto.removeChild = function removeChild(child) {
|
||
child = this.index(child);
|
||
|
||
if (child === 0 && this.nodes.length > 1) {
|
||
this.nodes[1].raws.before = this.nodes[child].raws.before;
|
||
}
|
||
|
||
return _Container.prototype.removeChild.call(this, child);
|
||
};
|
||
|
||
_proto.normalize = function normalize(child, sample, type) {
|
||
var nodes = _Container.prototype.normalize.call(this, child);
|
||
|
||
if (sample) {
|
||
if (type === 'prepend') {
|
||
if (this.nodes.length > 1) {
|
||
sample.raws.before = this.nodes[1].raws.before;
|
||
} else {
|
||
delete sample.raws.before;
|
||
}
|
||
} else if (this.first !== sample) {
|
||
nodes.forEach(function (node) {
|
||
node.raws.before = sample.raws.before;
|
||
});
|
||
}
|
||
}
|
||
|
||
return nodes;
|
||
}
|
||
/**
|
||
* Returns a {@link Result} instance representing the root’s CSS.
|
||
*
|
||
* @param {processOptions} [opts] - options with only `to` and `map` keys
|
||
*
|
||
* @return {Result} result with current root’s CSS
|
||
*
|
||
* @example
|
||
* const root1 = postcss.parse(css1, { from: 'a.css' });
|
||
* const root2 = postcss.parse(css2, { from: 'b.css' });
|
||
* root1.append(root2);
|
||
* const result = root1.toResult({ to: 'all.css', map: true });
|
||
*/
|
||
;
|
||
|
||
_proto.toResult = function toResult(opts) {
|
||
if (opts === void 0) {
|
||
opts = {};
|
||
}
|
||
|
||
var lazy = new LazyResult(new Processor(), this, opts);
|
||
return lazy.stringify();
|
||
};
|
||
|
||
_proto.remove = function remove(child) {
|
||
warnOnce('Root#remove is deprecated. Use Root#removeChild');
|
||
this.removeChild(child);
|
||
};
|
||
|
||
_proto.prevMap = function prevMap() {
|
||
warnOnce('Root#prevMap is deprecated. Use Root#source.input.map');
|
||
return this.source.input.map;
|
||
}
|
||
/**
|
||
* @memberof Root#
|
||
* @member {object} raws - Information to generate byte-to-byte equal
|
||
* node string as it was in the origin input.
|
||
*
|
||
* Every parser saves its own properties,
|
||
* but the default CSS parser uses:
|
||
*
|
||
* * `after`: the space symbols after the last child to the end of file.
|
||
* * `semicolon`: is the last child has an (optional) semicolon.
|
||
*
|
||
* @example
|
||
* postcss.parse('a {}\n').raws //=> { after: '\n' }
|
||
* postcss.parse('a {}').raws //=> { after: '' }
|
||
*/
|
||
;
|
||
|
||
return Root;
|
||
}(Container);
|
||
|
||
var sequence = 0;
|
||
/**
|
||
* @typedef {object} filePosition
|
||
* @property {string} file - path to file
|
||
* @property {number} line - source line in file
|
||
* @property {number} column - source column in file
|
||
*/
|
||
|
||
/**
|
||
* Represents the source CSS.
|
||
*
|
||
* @example
|
||
* const root = postcss.parse(css, { from: file });
|
||
* const input = root.source.input;
|
||
*/
|
||
|
||
var Input = /*#__PURE__*/function () {
|
||
/**
|
||
* @param {string} css - input CSS source
|
||
* @param {object} [opts] - {@link Processor#process} options
|
||
*/
|
||
function Input(css, opts) {
|
||
if (opts === void 0) {
|
||
opts = {};
|
||
}
|
||
|
||
/**
|
||
* @member {string} - input CSS source
|
||
*
|
||
* @example
|
||
* const input = postcss.parse('a{}', { from: file }).input;
|
||
* input.css //=> "a{}";
|
||
*/
|
||
this.css = css.toString();
|
||
|
||
if (this.css[0] === "\uFEFF" || this.css[0] === "\uFFFE") {
|
||
this.css = this.css.slice(1);
|
||
}
|
||
|
||
if (opts.from) {
|
||
if (/^\w+:\/\//.test(opts.from)) {
|
||
/**
|
||
* @member {string} - The absolute path to the CSS source file
|
||
* defined with the `from` option.
|
||
*
|
||
* @example
|
||
* const root = postcss.parse(css, { from: 'a.css' });
|
||
* root.source.input.file //=> '/home/ai/a.css'
|
||
*/
|
||
this.file = opts.from;
|
||
} else {
|
||
this.file = path.resolve(opts.from);
|
||
}
|
||
}
|
||
/*
|
||
let map = new PreviousMap(this.css, opts);
|
||
if ( map.text ) {
|
||
/!**
|
||
* @member {PreviousMap} - The input source map passed from
|
||
* a compilation step before PostCSS
|
||
* (for example, from Sass compiler).
|
||
*
|
||
* @example
|
||
* root.source.input.map.consumer().sources //=> ['a.sass']
|
||
*!/
|
||
this.map = map;
|
||
let file = map.consumer().file;
|
||
if ( !this.file && file ) this.file = this.mapResolve(file);
|
||
}
|
||
*/
|
||
|
||
|
||
if (!this.file) {
|
||
sequence += 1;
|
||
/**
|
||
* @member {string} - The unique ID of the CSS source. It will be
|
||
* created if `from` option is not provided
|
||
* (because PostCSS does not know the file path).
|
||
*
|
||
* @example
|
||
* const root = postcss.parse(css);
|
||
* root.source.input.file //=> undefined
|
||
* root.source.input.id //=> "<input css 1>"
|
||
*/
|
||
|
||
this.id = "<input css " + sequence + ">";
|
||
}
|
||
|
||
if (this.map) this.map.file = this.from;
|
||
}
|
||
|
||
var _proto = Input.prototype;
|
||
|
||
_proto.error = function error(message, line, column, opts) {
|
||
if (opts === void 0) {
|
||
opts = {};
|
||
}
|
||
|
||
var result;
|
||
var origin = this.origin(line, column);
|
||
|
||
if (origin) {
|
||
result = new CssSyntaxError(message, origin.line, origin.column, origin.source, origin.file, opts.plugin);
|
||
} else {
|
||
result = new CssSyntaxError(message, line, column, this.css, this.file, opts.plugin);
|
||
}
|
||
|
||
result.input = {
|
||
line: line,
|
||
column: column,
|
||
source: this.css
|
||
};
|
||
if (this.file) result.input.file = this.file;
|
||
return result;
|
||
}
|
||
/**
|
||
* Reads the input source map and returns a symbol position
|
||
* in the input source (e.g., in a Sass file that was compiled
|
||
* to CSS before being passed to PostCSS).
|
||
*
|
||
* @param {number} line - line in input CSS
|
||
* @param {number} column - column in input CSS
|
||
*
|
||
* @return {filePosition} position in input source
|
||
*
|
||
* @example
|
||
* root.source.input.origin(1, 1) //=> { file: 'a.css', line: 3, column: 1 }
|
||
*/
|
||
;
|
||
|
||
_proto.origin = function origin(line, column) {
|
||
if (!this.map) return false;
|
||
var consumer = this.map.consumer();
|
||
var from = consumer.originalPositionFor({
|
||
line: line,
|
||
column: column
|
||
});
|
||
if (!from.source) return false;
|
||
var result = {
|
||
file: this.mapResolve(from.source),
|
||
line: from.line,
|
||
column: from.column
|
||
};
|
||
var source = consumer.sourceContentFor(from.source);
|
||
if (source) result.source = source;
|
||
return result;
|
||
};
|
||
|
||
_proto.mapResolve = function mapResolve(file) {
|
||
if (/^\w+:\/\//.test(file)) {
|
||
return file;
|
||
} else {
|
||
return path.resolve(this.map.consumer().sourceRoot || '.', file);
|
||
}
|
||
}
|
||
/**
|
||
* The CSS source identifier. Contains {@link Input#file} if the user
|
||
* set the `from` option, or {@link Input#id} if they did not.
|
||
* @type {string}
|
||
*
|
||
* @example
|
||
* const root = postcss.parse(css, { from: 'a.css' });
|
||
* root.source.input.from //=> "/home/ai/a.css"
|
||
*
|
||
* const root = postcss.parse(css);
|
||
* root.source.input.from //=> "<input css 1>"
|
||
*/
|
||
;
|
||
|
||
_createClass(Input, [{
|
||
key: "from",
|
||
get: function get() {
|
||
return this.file || this.id;
|
||
}
|
||
}]);
|
||
|
||
return Input;
|
||
}();
|
||
|
||
var SafeParser = /*#__PURE__*/function (_Parser) {
|
||
_inheritsLoose(SafeParser, _Parser);
|
||
|
||
function SafeParser() {
|
||
return _Parser.apply(this, arguments) || this;
|
||
}
|
||
|
||
var _proto = SafeParser.prototype;
|
||
|
||
_proto.tokenize = function tokenize$1() {
|
||
this.tokens = tokenize(this.input, {
|
||
ignoreErrors: true
|
||
});
|
||
};
|
||
|
||
_proto.comment = function comment(token) {
|
||
var node = new Comment();
|
||
this.init(node, token[2], token[3]);
|
||
node.source.end = {
|
||
line: token[4],
|
||
column: token[5]
|
||
};
|
||
var text = token[1].slice(2);
|
||
if (text.slice(-2) === '*/') text = text.slice(0, -2);
|
||
|
||
if (/^\s*$/.test(text)) {
|
||
node.text = '';
|
||
node.raws.left = text;
|
||
node.raws.right = '';
|
||
} else {
|
||
var match = text.match(/^(\s*)([^]*[^\s])(\s*)$/);
|
||
node.text = match[2];
|
||
node.raws.left = match[1];
|
||
node.raws.right = match[3];
|
||
}
|
||
};
|
||
|
||
_proto.unclosedBracket = function unclosedBracket() {};
|
||
|
||
_proto.unknownWord = function unknownWord(start) {
|
||
var buffer = this.tokens.slice(start, this.pos + 1);
|
||
this.spaces += buffer.map(function (i) {
|
||
return i[1];
|
||
}).join('');
|
||
};
|
||
|
||
_proto.unexpectedClose = function unexpectedClose() {
|
||
this.current.raws.after += '}';
|
||
};
|
||
|
||
_proto.doubleColon = function doubleColon() {};
|
||
|
||
_proto.unnamedAtrule = function unnamedAtrule(node) {
|
||
node.name = '';
|
||
};
|
||
|
||
_proto.precheckMissedSemicolon = function precheckMissedSemicolon(tokens) {
|
||
var colon = this.colon(tokens);
|
||
if (colon === false) return;
|
||
var split;
|
||
|
||
for (split = colon - 1; split >= 0; split--) {
|
||
if (tokens[split][0] === 'word') break;
|
||
}
|
||
|
||
for (split -= 1; split >= 0; split--) {
|
||
if (tokens[split][0] !== 'space') {
|
||
split += 1;
|
||
break;
|
||
}
|
||
}
|
||
|
||
var other = tokens.splice(split, tokens.length - split);
|
||
this.decl(other);
|
||
};
|
||
|
||
_proto.checkMissedSemicolon = function checkMissedSemicolon() {};
|
||
|
||
_proto.endFile = function endFile() {
|
||
if (this.current.nodes && this.current.nodes.length) {
|
||
this.current.raws.semicolon = this.semicolon;
|
||
}
|
||
|
||
this.current.raws.after = (this.current.raws.after || '') + this.spaces;
|
||
|
||
while (this.current.parent) {
|
||
this.current = this.current.parent;
|
||
this.current.raws.after = '';
|
||
}
|
||
};
|
||
|
||
return SafeParser;
|
||
}(Parser);
|
||
|
||
//
|
||
function safeParse(css, opts) {
|
||
var input = new Input(css, opts);
|
||
var parser = new SafeParser(input);
|
||
parser.tokenize();
|
||
parser.loop();
|
||
return parser.root;
|
||
}
|
||
|
||
//
|
||
var generated = {};
|
||
/*
|
||
InlineStyle takes arbitrary CSS and generates a flat object
|
||
*/
|
||
|
||
var _InlineStyle = (function (styleSheet) {
|
||
var InlineStyle = /*#__PURE__*/function () {
|
||
function InlineStyle(rules) {
|
||
this.rules = rules;
|
||
}
|
||
|
||
var _proto = InlineStyle.prototype;
|
||
|
||
_proto.generateStyleObject = function generateStyleObject(executionContext) {
|
||
var flatCSS = flatten(this.rules, executionContext).join('');
|
||
var hash = generateComponentId(flatCSS);
|
||
|
||
if (!generated[hash]) {
|
||
var root = safeParse(flatCSS);
|
||
var declPairs = [];
|
||
root.each(function (node) {
|
||
if (node.type === 'decl') {
|
||
declPairs.push([node.prop, node.value]);
|
||
} else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {
|
||
/* eslint-disable no-console */
|
||
console.warn("Node of type " + node.type + " not supported as an inline style");
|
||
}
|
||
}); // RN currently does not support differing values for the corner radii of Image
|
||
// components (but does for View). It is almost impossible to tell whether we'll have
|
||
// support, so we'll just disable multiple values here.
|
||
// https://github.com/styled-components/css-to-react-native/issues/11
|
||
|
||
var styleObject = transformDeclPairs(declPairs, ['borderRadius', 'borderWidth', 'borderColor', 'borderStyle']);
|
||
var styles = styleSheet.create({
|
||
generated: styleObject
|
||
});
|
||
generated[hash] = styles.generated;
|
||
}
|
||
|
||
return generated[hash];
|
||
};
|
||
|
||
return InlineStyle;
|
||
}();
|
||
|
||
return InlineStyle;
|
||
});
|
||
|
||
/* eslint-disable */
|
||
|
||
/**
|
||
mixin-deep; https://github.com/jonschlinkert/mixin-deep
|
||
Inlined such that it will be consistently transpiled to an IE-compatible syntax.
|
||
|
||
The MIT License (MIT)
|
||
|
||
Copyright (c) 2014-present, Jon Schlinkert.
|
||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||
of this software and associated documentation files (the "Software"), to deal
|
||
in the Software without restriction, including without limitation the rights
|
||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||
copies of the Software, and to permit persons to whom the Software is
|
||
furnished to do so, subject to the following conditions:
|
||
|
||
The above copyright notice and this permission notice shall be included in
|
||
all copies or substantial portions of the Software.
|
||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||
THE SOFTWARE.
|
||
*/
|
||
var isObject = function isObject(val) {
|
||
return typeof val === 'function' || typeof val === 'object' && val !== null && !Array.isArray(val);
|
||
};
|
||
|
||
var isValidKey = function isValidKey(key) {
|
||
return key !== '__proto__' && key !== 'constructor' && key !== 'prototype';
|
||
};
|
||
|
||
function mixin(target, val, key) {
|
||
var obj = target[key];
|
||
|
||
if (isObject(val) && isObject(obj)) {
|
||
mixinDeep(obj, val);
|
||
} else {
|
||
target[key] = val;
|
||
}
|
||
}
|
||
|
||
function mixinDeep(target) {
|
||
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||
rest[_key - 1] = arguments[_key];
|
||
}
|
||
|
||
for (var _i = 0, _rest = rest; _i < _rest.length; _i++) {
|
||
var obj = _rest[_i];
|
||
|
||
if (isObject(obj)) {
|
||
for (var key in obj) {
|
||
if (isValidKey(key)) {
|
||
mixin(target, obj[key], key);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
return target;
|
||
}
|
||
|
||
//
|
||
var determineTheme = (function (props, providedTheme, defaultProps) {
|
||
if (defaultProps === void 0) {
|
||
defaultProps = EMPTY_OBJECT;
|
||
}
|
||
|
||
return props.theme !== defaultProps.theme && props.theme || providedTheme || defaultProps.theme;
|
||
});
|
||
|
||
//
|
||
function isTag(target) {
|
||
return typeof target === 'string' && (process.env.NODE_ENV !== 'production' ? target.charAt(0) === target.charAt(0).toLowerCase() : true);
|
||
}
|
||
|
||
//
|
||
function generateDisplayName(target) {
|
||
return isTag(target) ? "styled." + target : "Styled(" + getComponentName(target) + ")";
|
||
}
|
||
|
||
var ThemeContext = React.createContext();
|
||
var ThemeConsumer = ThemeContext.Consumer;
|
||
|
||
function mergeTheme(theme, outerTheme) {
|
||
if (!theme) {
|
||
return throwStyledComponentsError(14);
|
||
}
|
||
|
||
if (isFunction(theme)) {
|
||
var mergedTheme = theme(outerTheme);
|
||
|
||
if (process.env.NODE_ENV !== 'production' && (mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')) {
|
||
return throwStyledComponentsError(7);
|
||
}
|
||
|
||
return mergedTheme;
|
||
}
|
||
|
||
if (Array.isArray(theme) || typeof theme !== 'object') {
|
||
return throwStyledComponentsError(8);
|
||
}
|
||
|
||
return outerTheme ? _extends({}, outerTheme, {}, theme) : theme;
|
||
}
|
||
/**
|
||
* Provide a theme to an entire react component tree via context
|
||
*/
|
||
|
||
|
||
function ThemeProvider(props) {
|
||
var outerTheme = useContext(ThemeContext);
|
||
var themeContext = useMemo(function () {
|
||
return mergeTheme(props.theme, outerTheme);
|
||
}, [props.theme, outerTheme]);
|
||
|
||
if (!props.children) {
|
||
return null;
|
||
}
|
||
|
||
return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
|
||
value: themeContext
|
||
}, props.children);
|
||
}
|
||
|
||
// if the user makes use of ThemeProvider or StyleSheetManager things will break.
|
||
// Validator defaults to true if not in HTML/DOM env
|
||
|
||
var validAttr = function validAttr() {
|
||
return true;
|
||
};
|
||
|
||
var StyledNativeComponent = /*#__PURE__*/function (_Component) {
|
||
_inheritsLoose(StyledNativeComponent, _Component);
|
||
|
||
function StyledNativeComponent() {
|
||
var _this;
|
||
|
||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
||
args[_key] = arguments[_key];
|
||
}
|
||
|
||
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
||
_this.attrs = {};
|
||
return _this;
|
||
}
|
||
|
||
var _proto = StyledNativeComponent.prototype;
|
||
|
||
_proto.render = function render() {
|
||
var _this2 = this;
|
||
|
||
return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
|
||
var _this2$props = _this2.props,
|
||
transientAsProp = _this2$props.$as,
|
||
renderAs = _this2$props.as,
|
||
forwardedComponent = _this2$props.forwardedComponent,
|
||
forwardedAs = _this2$props.forwardedAs,
|
||
forwardedRef = _this2$props.forwardedRef,
|
||
testID = _this2$props.testID,
|
||
_this2$props$style = _this2$props.style,
|
||
style = _this2$props$style === void 0 ? [] : _this2$props$style,
|
||
props = _objectWithoutPropertiesLoose(_this2$props, ["$as", "as", "forwardedComponent", "forwardedAs", "forwardedRef", "testID", "style"]);
|
||
|
||
var defaultProps = forwardedComponent.defaultProps,
|
||
target = forwardedComponent.target,
|
||
shouldForwardProp = forwardedComponent.shouldForwardProp;
|
||
var elementToBeRendered = _this2.attrs.$as || _this2.attrs.as || transientAsProp || renderAs || target;
|
||
|
||
var generatedStyles = _this2.generateAndInjectStyles(determineTheme(_this2.props, theme, defaultProps) || EMPTY_OBJECT, _this2.props);
|
||
|
||
var isTargetTag = isTag(elementToBeRendered);
|
||
var computedProps = _this2.attrs !== props ? _extends({}, props, {}, _this2.attrs) : props;
|
||
var propFilterFn = shouldForwardProp || isTargetTag && validAttr;
|
||
var propsForElement = {};
|
||
var key;
|
||
|
||
for (key in computedProps) {
|
||
if (key[0] === '$' || key === 'as') continue;else if (key === 'forwardedAs') {
|
||
propsForElement.as = props[key];
|
||
} else if (!propFilterFn || propFilterFn(key, validAttr)) {
|
||
// Don't pass through filtered tags through to native elements
|
||
propsForElement[key] = computedProps[key];
|
||
}
|
||
}
|
||
|
||
propsForElement.style = typeof style === 'function' ? function (state) {
|
||
return [generatedStyles].concat(style(state));
|
||
} : [generatedStyles].concat(style);
|
||
propsForElement.testID = testID || propsForElement.testID;
|
||
if (forwardedRef) propsForElement.ref = forwardedRef;
|
||
if (forwardedAs) propsForElement.as = forwardedAs;
|
||
return createElement(elementToBeRendered, propsForElement);
|
||
});
|
||
};
|
||
|
||
_proto.buildExecutionContext = function buildExecutionContext(theme, props, attrs) {
|
||
var _this3 = this;
|
||
|
||
var context = _extends({}, props, {
|
||
theme: theme
|
||
});
|
||
|
||
if (!attrs.length) return context;
|
||
this.attrs = {};
|
||
attrs.forEach(function (attrDef) {
|
||
var resolvedAttrDef = attrDef;
|
||
var attr;
|
||
var key;
|
||
|
||
if (isFunction(resolvedAttrDef)) {
|
||
resolvedAttrDef = resolvedAttrDef(context);
|
||
}
|
||
/* eslint-disable guard-for-in */
|
||
|
||
|
||
for (key in resolvedAttrDef) {
|
||
attr = resolvedAttrDef[key];
|
||
_this3.attrs[key] = attr;
|
||
context[key] = attr;
|
||
}
|
||
/* eslint-enable */
|
||
|
||
});
|
||
return context;
|
||
};
|
||
|
||
_proto.generateAndInjectStyles = function generateAndInjectStyles(theme, props) {
|
||
var inlineStyle = props.forwardedComponent.inlineStyle;
|
||
var executionContext = this.buildExecutionContext(theme, props, props.forwardedComponent.attrs);
|
||
return inlineStyle.generateStyleObject(executionContext);
|
||
};
|
||
|
||
_proto.setNativeProps = function setNativeProps(nativeProps) {
|
||
if (this.root !== undefined) {
|
||
// $FlowFixMe
|
||
this.root.setNativeProps(nativeProps);
|
||
} else if (process.env.NODE_ENV !== 'production') {
|
||
// eslint-disable-next-line no-console
|
||
console.warn('setNativeProps was called on a Styled Component wrapping a stateless functional component.');
|
||
}
|
||
};
|
||
|
||
return StyledNativeComponent;
|
||
}(Component);
|
||
|
||
var _StyledNativeComponent = (function (InlineStyle) {
|
||
var createStyledNativeComponent = function createStyledNativeComponent(target, options, rules) {
|
||
var _options$attrs = options.attrs,
|
||
attrs = _options$attrs === void 0 ? EMPTY_ARRAY : _options$attrs,
|
||
_options$displayName = options.displayName,
|
||
displayName = _options$displayName === void 0 ? generateDisplayName(target) : _options$displayName,
|
||
_options$ParentCompon = options.ParentComponent,
|
||
ParentComponent = _options$ParentCompon === void 0 ? StyledNativeComponent : _options$ParentCompon;
|
||
var isClass = !isTag(target);
|
||
var isTargetStyledComp = isStyledComponent(target); // $FlowFixMe
|
||
|
||
var WrappedStyledNativeComponent = React.forwardRef(function (props, ref) {
|
||
return /*#__PURE__*/React.createElement(ParentComponent, _extends({}, props, {
|
||
forwardedComponent: WrappedStyledNativeComponent,
|
||
forwardedRef: ref
|
||
}));
|
||
});
|
||
var finalAttrs = // $FlowFixMe
|
||
isTargetStyledComp && target.attrs ? Array.prototype.concat(target.attrs, attrs).filter(Boolean) : attrs; // eslint-disable-next-line prefer-destructuring
|
||
|
||
var shouldForwardProp = options.shouldForwardProp; // $FlowFixMe
|
||
|
||
if (isTargetStyledComp && target.shouldForwardProp) {
|
||
if (shouldForwardProp) {
|
||
// compose nested shouldForwardProp calls
|
||
shouldForwardProp = function shouldForwardProp(prop, filterFn, elementToBeCreated) {
|
||
return (// $FlowFixMe
|
||
target.shouldForwardProp(prop, filterFn, elementToBeCreated) && options.shouldForwardProp(prop, filterFn, elementToBeCreated)
|
||
);
|
||
};
|
||
} else {
|
||
// eslint-disable-next-line prefer-destructuring
|
||
shouldForwardProp = target.shouldForwardProp;
|
||
}
|
||
}
|
||
/**
|
||
* forwardRef creates a new interim component, which we'll take advantage of
|
||
* instead of extending ParentComponent to create _another_ interim class
|
||
*/
|
||
// $FlowFixMe
|
||
|
||
|
||
WrappedStyledNativeComponent.attrs = finalAttrs;
|
||
WrappedStyledNativeComponent.displayName = displayName; // $FlowFixMe
|
||
|
||
WrappedStyledNativeComponent.shouldForwardProp = shouldForwardProp; // $FlowFixMe
|
||
|
||
WrappedStyledNativeComponent.inlineStyle = new InlineStyle( // $FlowFixMe
|
||
isTargetStyledComp ? target.inlineStyle.rules.concat(rules) : rules); // $FlowFixMe
|
||
|
||
WrappedStyledNativeComponent.styledComponentId = 'StyledNativeComponent'; // $FlowFixMe
|
||
|
||
WrappedStyledNativeComponent.target = isTargetStyledComp ? // $FlowFixMe
|
||
target.target : target; // $FlowFixMe
|
||
|
||
WrappedStyledNativeComponent.withComponent = function withComponent(tag) {
|
||
var _ = options.displayName,
|
||
__ = options.componentId,
|
||
optionsToCopy = _objectWithoutPropertiesLoose(options, ["displayName", "componentId"]);
|
||
|
||
var newOptions = _extends({}, optionsToCopy, {
|
||
attrs: finalAttrs,
|
||
ParentComponent: ParentComponent
|
||
});
|
||
|
||
return createStyledNativeComponent(tag, newOptions, rules);
|
||
}; // $FlowFixMe
|
||
|
||
|
||
Object.defineProperty(WrappedStyledNativeComponent, 'defaultProps', {
|
||
get: function get() {
|
||
return this._foldedDefaultProps;
|
||
},
|
||
set: function set(obj) {
|
||
// $FlowFixMe
|
||
this._foldedDefaultProps = isTargetStyledComp ? mixinDeep({}, target.defaultProps, obj) : obj;
|
||
}
|
||
});
|
||
|
||
if (isClass) {
|
||
hoist(WrappedStyledNativeComponent, target, {
|
||
// all SC-specific things should not be hoisted
|
||
attrs: true,
|
||
displayName: true,
|
||
shouldForwardProp: true,
|
||
inlineStyle: true,
|
||
styledComponentId: true,
|
||
target: true,
|
||
withComponent: true
|
||
});
|
||
}
|
||
|
||
return WrappedStyledNativeComponent;
|
||
};
|
||
|
||
return createStyledNativeComponent;
|
||
});
|
||
|
||
//
|
||
var interleave = (function (strings, interpolations) {
|
||
var result = [strings[0]];
|
||
|
||
for (var i = 0, len = interpolations.length; i < len; i += 1) {
|
||
result.push(interpolations[i], strings[i + 1]);
|
||
}
|
||
|
||
return result;
|
||
});
|
||
|
||
//
|
||
/**
|
||
* Used when flattening object styles to determine if we should
|
||
* expand an array of styles.
|
||
*/
|
||
|
||
var addTag = function addTag(arg) {
|
||
if (Array.isArray(arg)) {
|
||
// eslint-disable-next-line no-param-reassign
|
||
arg.isCss = true;
|
||
}
|
||
|
||
return arg;
|
||
};
|
||
|
||
function css(styles) {
|
||
for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||
interpolations[_key - 1] = arguments[_key];
|
||
}
|
||
|
||
if (isFunction(styles) || isPlainObject(styles)) {
|
||
// $FlowFixMe
|
||
return addTag(flatten(interleave(EMPTY_ARRAY, [styles].concat(interpolations))));
|
||
}
|
||
|
||
if (interpolations.length === 0 && styles.length === 1 && typeof styles[0] === 'string') {
|
||
// $FlowFixMe
|
||
return styles;
|
||
} // $FlowFixMe
|
||
|
||
|
||
return addTag(flatten(interleave(styles, interpolations)));
|
||
}
|
||
|
||
function constructWithOptions(componentConstructor, tag, options) {
|
||
if (options === void 0) {
|
||
options = EMPTY_OBJECT;
|
||
}
|
||
|
||
if (!isValidElementType(tag)) {
|
||
return throwStyledComponentsError(1, String(tag));
|
||
}
|
||
/* This is callable directly as a template function */
|
||
// $FlowFixMe: Not typed to avoid destructuring arguments
|
||
|
||
|
||
var templateFunction = function templateFunction() {
|
||
return componentConstructor(tag, options, css.apply(void 0, arguments));
|
||
};
|
||
/* If config methods are called, wrap up a new template function and merge options */
|
||
|
||
|
||
templateFunction.withConfig = function (config) {
|
||
return constructWithOptions(componentConstructor, tag, _extends({}, options, {}, config));
|
||
};
|
||
/* Modify/inject new props at runtime */
|
||
|
||
|
||
templateFunction.attrs = function (attrs) {
|
||
return constructWithOptions(componentConstructor, tag, _extends({}, options, {
|
||
attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean)
|
||
}));
|
||
};
|
||
|
||
return templateFunction;
|
||
}
|
||
|
||
// export default <Config: { theme?: any }, Instance>(
|
||
// Component: AbstractComponent<Config, Instance>
|
||
// ): AbstractComponent<$Diff<Config, { theme?: any }> & { theme?: any }, Instance>
|
||
//
|
||
// but the old build system tooling doesn't support the syntax
|
||
|
||
var withTheme = (function (Component) {
|
||
// $FlowFixMe This should be React.forwardRef<Config, Instance>
|
||
var WithTheme = React.forwardRef(function (props, ref) {
|
||
var theme = useContext(ThemeContext); // $FlowFixMe defaultProps isn't declared so it can be inferrable
|
||
|
||
var defaultProps = Component.defaultProps;
|
||
var themeProp = determineTheme(props, theme, defaultProps);
|
||
|
||
if (process.env.NODE_ENV !== 'production' && themeProp === undefined) {
|
||
// eslint-disable-next-line no-console
|
||
console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"" + getComponentName(Component) + "\"");
|
||
}
|
||
|
||
return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
|
||
theme: themeProp,
|
||
ref: ref
|
||
}));
|
||
});
|
||
hoist(WithTheme, Component);
|
||
WithTheme.displayName = "WithTheme(" + getComponentName(Component) + ")";
|
||
return WithTheme;
|
||
});
|
||
|
||
//
|
||
|
||
var useTheme = function useTheme() {
|
||
return useContext(ThemeContext);
|
||
};
|
||
|
||
//
|
||
|
||
var reactNative = require('react-native');
|
||
|
||
var InlineStyle = _InlineStyle(reactNative.StyleSheet);
|
||
|
||
var StyledNativeComponent$1 = _StyledNativeComponent(InlineStyle);
|
||
|
||
var styled = function styled(tag) {
|
||
return constructWithOptions(StyledNativeComponent$1, tag);
|
||
};
|
||
/* React native lazy-requires each of these modules for some reason, so let's
|
||
* assume it's for a good reason and not eagerly load them all */
|
||
|
||
|
||
var aliases = "ActivityIndicator ActivityIndicatorIOS ART Button DatePickerIOS DrawerLayoutAndroid\n Image ImageBackground ImageEditor ImageStore KeyboardAvoidingView ListView MapView Modal NavigatorIOS\n Picker PickerIOS ProgressBarAndroid ProgressViewIOS ScrollView SegmentedControlIOS Slider\n SliderIOS SnapshotViewIOS Switch RecyclerViewBackedScrollView RefreshControl SafeAreaView StatusBar\n SwipeableListView SwitchAndroid SwitchIOS TabBarIOS Text TextInput ToastAndroid ToolbarAndroid\n Touchable TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback\n View ViewPagerAndroid WebView FlatList SectionList VirtualizedList Pressable";
|
||
/* Define a getter for each alias which simply gets the reactNative component
|
||
* and passes it to styled */
|
||
|
||
aliases.split(/\s+/m).forEach(function (alias) {
|
||
return Object.defineProperty(styled, alias, {
|
||
enumerable: true,
|
||
configurable: false,
|
||
get: function get() {
|
||
return styled(reactNative[alias]);
|
||
}
|
||
});
|
||
});
|
||
|
||
export default styled;
|
||
export { ThemeConsumer, ThemeContext, ThemeProvider, css, isStyledComponent, useTheme, withTheme };
|
||
//# sourceMappingURL=styled-components.native.esm.js.map
|