styled-components
Version:
Fast, expressive styling for React.
3 lines (2 loc) • 15.7 kB
JavaScript
import e,{createElement as t}from"react";import n from"css-to-react-native";const o=Object.freeze([]),r=Object.freeze({}),s="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. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://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://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\n",18:"Accessing `useTheme` hook outside of a `<ThemeProvider>` element.\n\n```jsx\nimport { useTheme } from 'styled-components';\nexport function StyledCompoent({ children }) {\n const theme = useTheme();\n return <div style={{ width: theme.sizes.full }}>{children}</div>;\n}\n\nimport { StyledComponent } from './StyledComponent';\nimport { theme } from './theme';\nexport function App() {\n return (\n <ThemeProvider theme={theme}>\n <StyledComponent />\n </ThemeProvider>\n );\n}\n```\n\nIf you need access to the theme in an uncertain composition scenario, `React.useContext(ThemeContext)` will not emit an error if there is no `ThemeProvider` ancestor.\n"}:{};function i(e,...t){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#${e} for more information.${t.length>0?` Args: ${t.join(", ")}`:""}`):new Error(function(...e){let t=e[0];const n=[];for(let t=1,o=e.length;t<o;t+=1)n.push(e[t]);return n.forEach(e=>{t=t.replace(/%[a-z]/,e)}),t}(s[e],...t).trim())}const a=new WeakSet,c={animationIterationCount:1,aspectRatio:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexShrink:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,scale:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1};function l(e,t){return null==t||"boolean"==typeof t||""===t?"":"number"!=typeof t||0===t||e in c||e.startsWith("--")?String(t).trim():t+"px"}function u(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function p(e){if(45===e.charCodeAt(0)&&45===e.charCodeAt(1))return e;let t="";for(let n=0;n<e.length;n++){const o=e.charCodeAt(n);t+=o>=65&&o<=90?"-"+String.fromCharCode(o+32):e[n]}return t.startsWith("ms-")?"-"+t:t}function d(e){return"function"==typeof e}const f=Symbol.for("sc-keyframes");function h(e){return"object"==typeof e&&null!==e&&f in e}function m(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function y(e){return"object"==typeof e&&"styledComponentId"in e}const g=e=>null==e||!1===e||""===e,b=Symbol.for("react.client.reference");function v(e){return e.$$typeof===b}function S(e){const t=e.$$id,n=(t&&t.includes("#")?t.split("#").pop():t)||e.name||"unknown";console.warn(`Interpolating a client component (${n}) as a selector is not supported in server components. The component selector pattern requires access to the component's internal class name, which is not available across the server/client boundary. Use a plain CSS class selector instead.`)}function w(e,t){for(const n in e){const o=e[n];e.hasOwnProperty(n)&&!g(o)&&(Array.isArray(o)&&a.has(o)||d(o)?t.push(p(n)+":",o,";"):m(o)?(t.push(n+" {"),w(o,t),t.push("}")):t.push(p(n)+": "+l(n,o)+";"))}}function O(e,t,n,o,r=[]){if(g(e))return r;const s=typeof e;if("string"===s)return r.push(e),r;if("function"===s){if(v(e))return"production"!==process.env.NODE_ENV&&S(e),r;if(!d(i=e)||i.prototype&&i.prototype.isReactComponent||!t)return r.push(e),r;{const s=e(t);return"production"===process.env.NODE_ENV||"object"!=typeof s||Array.isArray(s)||h(s)||m(s)||null===s||console.error(`${u(e)} is not a styled component and cannot be referred to via component selector. See https://styled-components.com/docs/advanced#referring-to-other-components for more details.`),O(s,t,n,o,r)}}var i;if(Array.isArray(e)){for(let s=0;s<e.length;s++)O(e[s],t,n,o,r);return r}return y(e)?(r.push(`.${e.styledComponentId}`),r):h(e)?(n?(e.inject(n,o),r.push(e.getName(o))):r.push(e),r):v(e)?("production"!==process.env.NODE_ENV&&S(e),r):m(e)?(w(e,r),r):(r.push(e.toString()),r)}function C(e,t){const n=[e[0]];for(let o=0,r=t.length;o<r;o+=1)n.push(t[o],e[o+1]);return n}const P=e=>(a.add(e),e);function E(e,...t){if(d(e)||m(e))return P(O(C(o,[e,...t])));const n=e;return 0===t.length&&1===n.length&&"string"==typeof n[0]?O(n):P(O(C(n,t)))}function A(e,t,n=r){if(!t)throw i(1,t);const o=(o,...r)=>e(t,n,E(o,...r));return o.attrs=o=>A(e,t,Object.assign(Object.assign({},n),{attrs:Array.prototype.concat(n.attrs,o).filter(Boolean)})),o.withConfig=o=>A(e,t,Object.assign(Object.assign({},n),o)),o}var j,N;function T(e){if("undefined"!=typeof process&&void 0!==process.env){const t=process.env[e];if(void 0!==t&&""!==t)return"false"!==t}}"undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process),Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:null!==(N=null!==(j=T("REACT_APP_SC_DISABLE_SPEEDY"))&&void 0!==j?j:T("SC_DISABLE_SPEEDY"))&&void 0!==N?N:"undefined"==typeof process||void 0===process.env||"production"!==process.env.NODE_ENV);const $=e.createContext(void 0),D=$.Consumer;function _(){const t=e.useContext($);if(!t)throw i(18);return t}function x(t){const n=e.useContext($),o=e.useMemo(()=>function(e,t){if(!e)throw i(14);if(d(e)){const n=e(t);if("production"!==process.env.NODE_ENV&&(null===n||Array.isArray(n)||"object"!=typeof n))throw i(7);return n}if(Array.isArray(e)||"object"!=typeof e)throw i(8);return t?Object.assign(Object.assign({},t),e):e}(t.theme,n),[t.theme,n]);return t.children?e.createElement($.Provider,{value:o},t.children):null}function k(e,t,n=r){return e.theme!==n.theme&&e.theme||t||n.theme}const I=Symbol.for("react.memo"),R=Symbol.for("react.forward_ref"),V={contextType:!0,defaultProps:!0,displayName:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,propTypes:!0,type:!0},F={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},B={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},W={[R]:{$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},[I]:B};function L(e){return("type"in(t=e)&&t.type.$$typeof)===I?B:"$$typeof"in e?W[e.$$typeof]:V;var t}const M=Object.defineProperty,z=Object.getOwnPropertyNames,Y=Object.getOwnPropertySymbols,q=Object.getOwnPropertyDescriptor,H=Object.getPrototypeOf,G=Object.prototype;function U(e,t,n){if("string"!=typeof t){const o=H(t);o&&o!==G&&U(e,o,n);const r=z(t).concat(Y(t)),s=L(e),i=L(t);for(let o=0;o<r.length;++o){const a=r[o];if(!(a in F||n&&n[a]||i&&a in i||s&&a in s)){const n=q(t,a);try{M(e,a,n)}catch(e){}}}}return e}function K(t){const n=e.forwardRef((n,o)=>{const r=k(n,e.useContext($),t.defaultProps);return"production"!==process.env.NODE_ENV&&void 0===r&&console.warn(`[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "${u(t)}"`),e.createElement(t,Object.assign(Object.assign({},n),{theme:r,ref:o}))});return n.displayName=`WithTheme(${u(t)})`,U(n,t)}const J=/(a)(d)/gi,Q=e=>String.fromCharCode(e+(e>25?39:97));function X(e,t){return e.join(t||"")}const Z=["fit-content","min-content","max-content"];let ee={};function te(e,t){const o=function(e){let t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=Q(t%52)+n;return(Q(t%52)+n).replace(J,"$1-$2")}(((e,t)=>{let n=t.length;for(;n;)e=33*e^t.charCodeAt(--n);return e})(5381,e)>>>0);if(!ee[o]){const r=[];for(const[t,n]of function(e){const t=function(e){if(-1===e.indexOf("/*"))return e;let t="",n=0,o=0;const r=e.length;for(;n<r;){const r=e.charCodeAt(n);if(o){if(92===r){t+=e.substring(n,n+2),n+=2;continue}r===o&&(o=0),t+=e[n],n++}else if(34===r||39===r)o=r,t+=e[n],n++;else if(47===r&&42===e.charCodeAt(n+1)){const t=e.indexOf("*/",n+2);if(-1===t)break;n=t+2}else t+=e[n],n++}return t}(e),n=[],o=t.length;let r=0;for(;r<o;){for(;r<o;){const e=t[r];if(" "===e||"\n"===e||"\r"===e||"\t"===e||";"===e||"}"===e)r++;else{if("{"!==e)break;{let e=1;for(r++;r<o&&e>0;)"{"===t[r]?e++:"}"===t[r]&&e--,r++}}}if(r>=o)break;const e=t.indexOf(":",r);if(-1===e)break;const s=t.substring(r,e).trim();let i=0,a=0,c=e+1;for(;c<o;){const e=t.charCodeAt(c);if(a)92===e?c++:e===a&&(a=0);else if(34===e||39===e)a=e;else if(40===e)i++;else if(41===e)i>0&&i--;else if(59===e&&0===i)break;c++}if(c>=o&&(0!==a||i>0)){"production"!==process.env.NODE_ENV&&console.warn(`[styled-components/native] Invalid CSS in declaration "${s}": `+(a?"unterminated string":"unclosed parenthesis")+". This declaration was dropped.");const n=t.indexOf(";",e+1);r=-1!==n?n+1:o;continue}const l=t.substring(e+1,c).trim();if(s&&l){if("@"===s[0]||-1!==s.indexOf("{")){"production"!==process.env.NODE_ENV&&console.warn(`[styled-components/native] "${s}" is not supported as an inline style and will be ignored. Only CSS declarations (property: value) are supported in React Native.`);let e=0,n=c;for(let n=r;n<c;n++)"{"===t[n]?e++:"}"===t[n]&&e--;for(;n<o&&e>0;)"{"===t[n]?e++:"}"===t[n]&&e--,n++;r=n;continue}n.push([s,l])}r=c+1}return n}(e))Z.includes(n)?"production"!==process.env.NODE_ENV&&console.warn(`[styled-components/native] The value "${n}" for property "${t}" is not supported in React Native and will be ignored.`):r.push([t,n]);const s=n(r,["borderWidth","borderColor"]);ee[o]=t.create({generated:s}).generated}return ee[o]}function ne(e){return function(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}(e)?`styled.${e}`:`Styled(${u(e)})`}function oe(e,t,n=!1){if(!n&&!m(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(let n=0;n<t.length;n++)e[n]=oe(e[n],t[n]);else if(m(t))for(const n in t)e[n]=oe(e[n],t[n]);return e}const re=Object.prototype.hasOwnProperty,se=require("react-native");var ie;const ae=(ie=se.StyleSheet,le=class{constructor(e){this.rules=e}generateStyleObject(e){return te(X(O(this.rules,e)),ie)}},(n,s,i)=>{const a=y(n),c=n,{displayName:l=ne(n),attrs:u=o}=s,p=a&&c.attrs?c.attrs.concat(u).filter(Boolean):u;let f=s.shouldForwardProp;if(a&&c.shouldForwardProp){const e=c.shouldForwardProp;if(s.shouldForwardProp){const t=s.shouldForwardProp;f=(n,o)=>e(n,o)&&t(n,o)}else f=e}const h=(n,o)=>function(n,o,s){const{attrs:i,inlineStyle:a,defaultProps:c,shouldForwardProp:l,target:u}=n,p=e.useContext?e.useContext($):void 0,f=k(o,p,c)||r;let h,m;const y=e.useRef?e.useRef(null):{current:null},g=y.current;if(null!==g&&g[1]===f&&function(e,t,n){const o=e,r=t;let s=0;for(const e in r)if(re.call(r,e)&&(s++,o[e]!==r[e]))return!1;return s===n}(g[0],o,g[2]))h=g[3],m=g[4];else{h=function(e=r,t,n){const o=Object.assign(Object.assign({},t),{theme:e});for(let e=0;e<n.length;e++){const t=d(n[e])?n[e](Object.assign({},o)):n[e];for(const e in t)o[e]=t[e]}return o}(f,o,i),m=a.generateStyleObject(h);let e=0;for(const t in o)re.call(o,t)&&e++;y.current=[o,f,e,h,m]}const b=h.as||o.as||u,v=function(e,t,n){const o={};for(const r in e)"$"!==r[0]&&"as"!==r&&"theme"!==r&&("forwardedAs"===r?o.as=e[r]:n&&!n(r,t)||(o[r]=e[r]));return o}(h,b,l);return v.style=e.useMemo?e.useMemo(()=>d(o.style)?e=>[m].concat(o.style(e)):o.style?[m].concat(o.style):m,[o.style,m]):d(o.style)?e=>[m].concat(o.style(e)):o.style?[m].concat(o.style):m,s&&(v.ref=s),t(b,v)}(m,n,o);h.displayName=l;let m=e.forwardRef(h);return m.attrs=p,m.inlineStyle=new le(a?c.inlineStyle.rules.concat(i):i),m.displayName=l,m.shouldForwardProp=f,m.styledComponentId=!0,m.target=a?c.target:n,Object.defineProperty(m,"defaultProps",{get(){return this._foldedDefaultProps},set(e){this._foldedDefaultProps=a?function(e,...t){for(const n of t)oe(e,n,!0);return e}({},c.defaultProps,e):e}}),U(m,n,{attrs:!0,inlineStyle:!0,displayName:!0,shouldForwardProp:!0,target:!0}),m}),ce=e=>A(ae,e);var le;["ActivityIndicator","Button","FlatList","Image","ImageBackground","InputAccessoryView","KeyboardAvoidingView","Modal","Pressable","RefreshControl","SafeAreaView","ScrollView","SectionList","StatusBar","Switch","Text","TextInput","TouchableHighlight","TouchableNativeFeedback","TouchableOpacity","TouchableWithoutFeedback","View","VirtualizedList"].forEach(e=>Object.defineProperty(ce,e,{enumerable:!0,configurable:!1,get(){if(e in se&&se[e])return ce(se[e]);throw new Error(`${e} is not available in the currently-installed version of react-native`)}}));const ue=e=>te(X(O(e)),se.StyleSheet);export{D as ThemeConsumer,$ as ThemeContext,x as ThemeProvider,E as css,ce as default,y as isStyledComponent,ce as styled,ue as toStyleSheet,_ as useTheme,K as withTheme};
//# sourceMappingURL=styled-components.native.esm.js.map