UNPKG

styled-components

Version:

CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.

3 lines (2 loc) 14 kB
import e from"css-to-react-native";import{parse as t}from"postcss";import{__spreadArray as n,__assign as r}from"tslib";import o from"@emotion/unitless";import a,{createElement as s}from"react";var i=Object.freeze([]),c=Object.freeze({}),u="production"!==process.env.NODE_ENV?{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",18:"ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"}:{};function l(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e[0],r=[],o=1,a=e.length;o<a;o+=1)r.push(e[o]);return r.forEach(function(e){n=n.replace(/%[a-z]/,e)}),n}function p(e){for(var t=[],r=1;r<arguments.length;r++)t[r-1]=arguments[r];return"production"===process.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(e," for more information.").concat(t.length>0?" Args: ".concat(t.join(", ")):"")):new Error(l.apply(void 0,n([u[e]],t,!1)).trim())}function d(e,t){return null==t||"boolean"==typeof t||""===t?"":"number"!=typeof t||0===t||e in o||e.startsWith("--")?String(t).trim():"".concat(t,"px")}function f(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}var y=function(e){return e>="A"&&e<="Z"};function h(e){for(var t="",n=0;n<e.length;n++){var r=e[n];if(1===n&&"-"===r&&"-"===e[0])return e;y(r)?t+="-"+r.toLowerCase():t+=r}return t.startsWith("ms-")?"-"+t:t}function m(e){return"function"==typeof e}var v=Symbol.for("sc-keyframes");function g(e){return"object"==typeof e&&null!==e&&v in e}function S(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function w(e){return"object"==typeof e&&"styledComponentId"in e}var E=function(e){return null==e||!1===e||""===e},b=function(e){var t=[];for(var r in e){var o=e[r];e.hasOwnProperty(r)&&!E(o)&&(Array.isArray(o)&&o.isCss||m(o)?t.push("".concat(h(r),":"),o,";"):S(o)?t.push.apply(t,n(n(["".concat(r," {")],b(o),!1),["}"],!1)):t.push("".concat(h(r),": ").concat(d(r,o),";")))}return t};function P(e,t,n,r,o){if(void 0===o&&(o=[]),"string"==typeof e)return e&&o.push(e),o;if(E(e))return o;if(w(e))return o.push(".".concat(e.styledComponentId)),o;if(m(e)){if(!m(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return o.push(e),o;var a=e(t);return"production"===process.env.NODE_ENV||"object"!=typeof a||Array.isArray(a)||g(a)||S(a)||null===a||console.error("".concat(f(e)," 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.")),P(a,t,n,r,o)}var s;if(g(e))return n?(e.inject(n,r),o.push(e.getName(r))):o.push(e),o;if(S(e)){for(var i=b(e),c=0;c<i.length;c++)o.push(i[c]);return o}if(!Array.isArray(e))return o.push(e.toString()),o;for(c=0;c<e.length;c++)P(e[c],t,n,r,o);return o}function A(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n}var _=function(e){return Object.assign(e,{isCss:!0})};function C(e){for(var t=[],r=1;r<arguments.length;r++)t[r-1]=arguments[r];if(m(e)||S(e))return _(P(A(i,n([e],t,!0))));var o=e;return 0===t.length&&1===o.length&&"string"==typeof o[0]?P(o):_(P(A(o,t)))}function D(e,t,o){if(void 0===o&&(o=c),!t)throw p(1,t);var a=function(r){for(var a=[],s=1;s<arguments.length;s++)a[s-1]=arguments[s];return e(t,o,C.apply(void 0,n([r],a,!1)))};return a.attrs=function(n){return D(e,t,r(r({},o),{attrs:Array.prototype.concat(o.attrs,n).filter(Boolean)}))},a.withConfig=function(n){return D(e,t,r(r({},o),n))},a}"undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process),Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV);var N,O=a.createContext(void 0),T=O.Consumer;function j(){var e=a.useContext(O);if(!e)throw p(18);return e}function I(e){var t=a.useContext(O),n=a.useMemo(function(){return function(e,t){if(!e)throw p(14);if(m(e)){var n=e(t);if("production"!==process.env.NODE_ENV&&(null===n||Array.isArray(n)||"object"!=typeof n))throw p(7);return n}if(Array.isArray(e)||"object"!=typeof e)throw p(8);return t?r(r({},t),e):e}(e.theme,t)},[e.theme,t]);return e.children?a.createElement(O.Provider,{value:n},e.children):null}function V(e,t,n){return void 0===n&&(n=c),e.theme!==n.theme&&e.theme||t||n.theme}var x="function"==typeof Symbol&&Symbol.for,B=x?Symbol.for("react.memo"):60115,L=x?Symbol.for("react.forward_ref"):60112,$={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},R={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},k={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},F=((N={})[L]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},N[B]=k,N);function Y(e){return("type"in(t=e)&&t.type.$$typeof)===B?k:"$$typeof"in e?F[e.$$typeof]:$;var t}var M=Object.defineProperty,W=Object.getOwnPropertyNames,q=Object.getOwnPropertySymbols,z=Object.getOwnPropertyDescriptor,H=Object.getPrototypeOf,G=Object.prototype;function K(e,t,n){if("string"!=typeof t){if(G){var r=H(t);r&&r!==G&&K(e,r,n)}var o=W(t);q&&(o=o.concat(q(t)));for(var a=Y(e),s=Y(t),i=0;i<o.length;++i){var c=o[i];if(!(c in R||n&&n[c]||s&&c in s||a&&c in a)){var u=z(t,c);try{M(e,c,u)}catch(e){}}}}return e}function U(e){var t=a.forwardRef(function(t,n){var o=V(t,a.useContext(O),e.defaultProps);return"production"!==process.env.NODE_ENV&&void 0===o&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "'.concat(f(e),'"')),a.createElement(e,r(r({},t),{theme:o,ref:n}))});return t.displayName="WithTheme(".concat(f(e),")"),K(t,e)}var Z=/(a)(d)/gi,J=function(e){return String.fromCharCode(e+(e>25?39:97))};function Q(e,t){return e.join(t||"")}var X=["fit-content","min-content","max-content"],ee={};function te(e,t,n){if(void 0===n&&(n=!1),!n&&!S(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var r=0;r<t.length;r++)e[r]=te(e[r],t[r]);else if(S(t))for(var r in t)e[r]=te(e[r],t[r]);return e}var ne,re,oe=require("react-native"),ae=(ne=oe.StyleSheet,re=function(){function n(e){this.rules=e}return n.prototype.generateStyleObject=function(n){var r=Q(P(this.rules,n)),o=function(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=J(t%52)+n;return(J(t%52)+n).replace(Z,"$1-$2")}(function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e}(5381,r)>>>0);if(!ee[o]){var a=void 0;try{a=t(r)}catch(e){return"production"!==process.env.NODE_ENV&&console.warn("[styled-components/native] Failed to parse CSS: ".concat(e instanceof Error?e.message:e)),ee[o]={},ee[o]}var s=[];a.each(function(e){if("decl"===e.type){if(X.includes(e.value))return void("production"!==process.env.NODE_ENV&&console.warn('[styled-components/native] The value "'.concat(e.value,'" for property "').concat(e.prop,'" is not supported in React Native and will be ignored.')));s.push([e.prop,e.value])}else"production"!==process.env.NODE_ENV&&"comment"!==e.type&&console.warn("Node of type ".concat(e.type," not supported as an inline style"))});var i=e(s,["borderWidth","borderColor"]),c=ne.create({generated:i});ee[o]=c.generated}return ee[o]},n}(),function(e,t,n){var o=w(e),u=e,l=t.displayName,p=void 0===l?function(e){return function(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}(e)?"styled.".concat(e):"Styled(".concat(f(e),")")}(e):l,d=t.attrs,y=void 0===d?i:d,h=o&&u.attrs?u.attrs.concat(y).filter(Boolean):y,v=t.shouldForwardProp;if(o&&u.shouldForwardProp){var g=u.shouldForwardProp;if(t.shouldForwardProp){var S=t.shouldForwardProp;v=function(e,t){return g(e,t)&&S(e,t)}}else v=g}var E=function(e,t){return function(e,t,n){var o=e.attrs,i=e.inlineStyle,u=e.defaultProps,l=e.shouldForwardProp,p=e.target,d=a.useContext?a.useContext(O):void 0,f=function(e,t,n){void 0===e&&(e=c);var o=r(r({},t),{theme:e}),a={};return n.forEach(function(e){var t,n=m(e)?e(o):e;for(t in n)o[t]=a[t]=n[t]}),[o,a]}(V(t,d,u)||c,t,o),y=f[1],h=i.generateStyleObject(f[0]),v=n,g=y.as||t.as||p,S=y!==t?r(r({},t),y):t,w={};for(var E in S)"$"!==E[0]&&"as"!==E&&("forwardedAs"===E?w.as=S[E]:l&&!l(E,g)||(w[E]=S[E]));return w.style=a.useMemo?a.useMemo(function(){return m(t.style)?function(e){return[h].concat(t.style(e))}:t.style?[h].concat(t.style):h},[t.style,h]):m(t.style)?function(e){return[h].concat(t.style(e))}:t.style?[h].concat(t.style):h,n&&(w.ref=v),s(g,w)}(b,e,t)};E.displayName=p;var b=a.forwardRef(E);return b.attrs=h,b.inlineStyle=new re(o?u.inlineStyle.rules.concat(n):n),b.displayName=p,b.shouldForwardProp=v,b.styledComponentId=!0,b.target=o?u.target:e,Object.defineProperty(b,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=o?function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];for(var r=0,o=t;r<o.length;r++)te(e,o[r],!0);return e}({},u.defaultProps,e):e}}),K(b,e,{attrs:!0,inlineStyle:!0,displayName:!0,shouldForwardProp:!0,target:!0}),b}),se=function(e){return D(ae,e)};["ActivityIndicator","Button","DatePickerIOS","DrawerLayoutAndroid","FlatList","Image","ImageBackground","KeyboardAvoidingView","Modal","Pressable","ProgressBarAndroid","ProgressViewIOS","RefreshControl","SafeAreaView","ScrollView","SectionList","Slider","Switch","Text","TextInput","TouchableHighlight","TouchableOpacity","View","VirtualizedList"].forEach(function(e){return Object.defineProperty(se,e,{enumerable:!0,configurable:!1,get:function(){if(e in oe&&oe[e])return se(oe[e]);throw new Error("".concat(e," is not available in the currently-installed version of react-native"))}})});var ie=function(n){var r=Q(P(n)),o=t(r),a=[];o.each(function(e){"decl"===e.type?a.push([e.prop,e.value]):"production"!==process.env.NODE_ENV&&"comment"!==e.type&&console.warn("Node of type ".concat(e.type," not supported as an inline style"))});var s=e(a,["borderWidth","borderColor"]);return oe.StyleSheet.create({style:s}).style};export{T as ThemeConsumer,O as ThemeContext,I as ThemeProvider,C as css,se as default,w as isStyledComponent,se as styled,ie as toStyleSheet,j as useTheme,U as withTheme}; //# sourceMappingURL=styled-components.native.esm.js.map