styled-components
Version:
Fast, expressive styling for React.
3 lines (2 loc) • 16 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("css-to-react-native");function n(e){return e&&e.__esModule?e:{default:e}}var o=/*#__PURE__*/n(e),r=/*#__PURE__*/n(t);const s=Object.freeze([]),i=Object.freeze({}),a="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 c(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}(a[e],...t).trim())}const l=new WeakSet,u={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 d(e,t){return null==t||"boolean"==typeof t||""===t?"":"number"!=typeof t||0===t||e in u||e.startsWith("--")?String(t).trim():t+"px"}function p(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function f(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 h(e){return"function"==typeof e}const m=Symbol.for("sc-keyframes");function y(e){return"object"==typeof e&&null!==e&&m in e}function g(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function b(e){return"object"==typeof e&&"styledComponentId"in e}const v=e=>null==e||!1===e||""===e,S=Symbol.for("react.client.reference");function w(e){return e.$$typeof===S}function C(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 O(e,t){for(const n in e){const o=e[n];e.hasOwnProperty(n)&&!v(o)&&(Array.isArray(o)&&l.has(o)||h(o)?t.push(f(n)+":",o,";"):g(o)?(t.push(n+" {"),O(o,t),t.push("}")):t.push(f(n)+": "+d(n,o)+";"))}}function P(e,t,n,o,r=[]){if(v(e))return r;const s=typeof e;if("string"===s)return r.push(e),r;if("function"===s){if(w(e))return"production"!==process.env.NODE_ENV&&C(e),r;if(!h(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)||y(s)||g(s)||null===s||console.error(`${p(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.`),P(s,t,n,o,r)}}var i;if(Array.isArray(e)){for(let s=0;s<e.length;s++)P(e[s],t,n,o,r);return r}return b(e)?(r.push(`.${e.styledComponentId}`),r):y(e)?(n?(e.inject(n,o),r.push(e.getName(o))):r.push(e),r):w(e)?("production"!==process.env.NODE_ENV&&C(e),r):g(e)?(O(e,r),r):(r.push(e.toString()),r)}function E(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 A=e=>(l.add(e),e);function j(e,...t){if(h(e)||g(e))return A(P(E(s,[e,...t])));const n=e;return 0===t.length&&1===n.length&&"string"==typeof n[0]?P(n):A(P(E(n,t)))}function N(e,t,n=i){if(!t)throw c(1,t);const o=(o,...r)=>e(t,n,j(o,...r));return o.attrs=o=>N(e,t,Object.assign(Object.assign({},n),{attrs:Array.prototype.concat(n.attrs,o).filter(Boolean)})),o.withConfig=o=>N(e,t,Object.assign(Object.assign({},n),o)),o}var T,x;function _(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!==(x=null!==(T=_("REACT_APP_SC_DISABLE_SPEEDY"))&&void 0!==T?T:_("SC_DISABLE_SPEEDY"))&&void 0!==x?x:"undefined"==typeof process||void 0===process.env||"production"!==process.env.NODE_ENV);const $=o.default.createContext(void 0),D=$.Consumer;function k(e,t,n=i){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},M={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},B={[R]:{$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},[I]:M};function W(e){return("type"in(t=e)&&t.type.$$typeof)===I?M:"$$typeof"in e?B[e.$$typeof]:V;var t}const L=Object.defineProperty,z=Object.getOwnPropertyNames,q=Object.getOwnPropertySymbols,Y=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(q(t)),s=W(e),i=W(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=Y(t,a);try{L(e,a,n)}catch(e){}}}}return e}const K=/(a)(d)/gi,J=e=>String.fromCharCode(e+(e>25?39:97));function Q(e,t){return e.join(t||"")}const X=["fit-content","min-content","max-content"];let Z={};function ee(e,t){const n=function(e){let t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=J(t%52)+n;return(J(t%52)+n).replace(K,"$1-$2")}(((e,t)=>{let n=t.length;for(;n;)e=33*e^t.charCodeAt(--n);return e})(5381,e)>>>0);if(!Z[n]){const o=[];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))X.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.`):o.push([t,n]);const s=r.default(o,["borderWidth","borderColor"]);Z[n]=t.create({generated:s}).generated}return Z[n]}function te(e){return function(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}(e)?`styled.${e}`:`Styled(${p(e)})`}function ne(e,t,n=!1){if(!n&&!g(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(let n=0;n<t.length;n++)e[n]=ne(e[n],t[n]);else if(g(t))for(const n in t)e[n]=ne(e[n],t[n]);return e}const oe=Object.prototype.hasOwnProperty,re=require("react-native");var se;const ie=(se=re.StyleSheet,ce=class{constructor(e){this.rules=e}generateStyleObject(e){return ee(Q(P(this.rules,e)),se)}},(t,n,r)=>{const a=b(t),c=t,{displayName:l=te(t),attrs:u=s}=n,d=a&&c.attrs?c.attrs.concat(u).filter(Boolean):u;let p=n.shouldForwardProp;if(a&&c.shouldForwardProp){const e=c.shouldForwardProp;if(n.shouldForwardProp){const t=n.shouldForwardProp;p=(n,o)=>e(n,o)&&t(n,o)}else p=e}const f=(t,n)=>function(t,n,r){const{attrs:s,inlineStyle:a,defaultProps:c,shouldForwardProp:l,target:u}=t,d=o.default.useContext?o.default.useContext($):void 0,p=k(n,d,c)||i;let f,m;const y=o.default.useRef?o.default.useRef(null):{current:null},g=y.current;if(null!==g&&g[1]===p&&function(e,t,n){const o=e,r=t;let s=0;for(const e in r)if(oe.call(r,e)&&(s++,o[e]!==r[e]))return!1;return s===n}(g[0],n,g[2]))f=g[3],m=g[4];else{f=function(e=i,t,n){const o=Object.assign(Object.assign({},t),{theme:e});for(let e=0;e<n.length;e++){const t=h(n[e])?n[e](Object.assign({},o)):n[e];for(const e in t)o[e]=t[e]}return o}(p,n,s),m=a.generateStyleObject(f);let e=0;for(const t in n)oe.call(n,t)&&e++;y.current=[n,p,e,f,m]}const b=f.as||n.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}(f,b,l);return v.style=o.default.useMemo?o.default.useMemo(()=>h(n.style)?e=>[m].concat(n.style(e)):n.style?[m].concat(n.style):m,[n.style,m]):h(n.style)?e=>[m].concat(n.style(e)):n.style?[m].concat(n.style):m,r&&(v.ref=r),e.createElement(b,v)}(m,t,n);f.displayName=l;let m=o.default.forwardRef(f);return m.attrs=d,m.inlineStyle=new ce(a?c.inlineStyle.rules.concat(r):r),m.displayName=l,m.shouldForwardProp=p,m.styledComponentId=!0,m.target=a?c.target:t,Object.defineProperty(m,"defaultProps",{get(){return this._foldedDefaultProps},set(e){this._foldedDefaultProps=a?function(e,...t){for(const n of t)ne(e,n,!0);return e}({},c.defaultProps,e):e}}),U(m,t,{attrs:!0,inlineStyle:!0,displayName:!0,shouldForwardProp:!0,target:!0}),m}),ae=e=>N(ie,e);var ce;["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(ae,e,{enumerable:!0,configurable:!1,get(){if(e in re&&re[e])return ae(re[e]);throw new Error(`${e} is not available in the currently-installed version of react-native`)}})),exports.ThemeConsumer=D,exports.ThemeContext=$,exports.ThemeProvider=function(e){const t=o.default.useContext($),n=o.default.useMemo(()=>function(e,t){if(!e)throw c(14);if(h(e)){const n=e(t);if("production"!==process.env.NODE_ENV&&(null===n||Array.isArray(n)||"object"!=typeof n))throw c(7);return n}if(Array.isArray(e)||"object"!=typeof e)throw c(8);return t?Object.assign(Object.assign({},t),e):e}(e.theme,t),[e.theme,t]);return e.children?o.default.createElement($.Provider,{value:n},e.children):null},exports.css=j,exports.default=ae,exports.isStyledComponent=b,exports.styled=ae,exports.toStyleSheet=e=>ee(Q(P(e)),re.StyleSheet),exports.useTheme=function(){const e=o.default.useContext($);if(!e)throw c(18);return e},exports.withTheme=function(e){const t=o.default.forwardRef((t,n)=>{const r=k(t,o.default.useContext($),e.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 "${p(e)}"`),o.default.createElement(e,Object.assign(Object.assign({},t),{theme:r,ref:n}))});return t.displayName=`WithTheme(${p(e)})`,U(t,e)};
//# sourceMappingURL=styled-components.native.cjs.js.map