styled-components#ServerStyleSheet JavaScript Examples

The following examples show how to use styled-components#ServerStyleSheet. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: _document.js    From semana-hacktoberfest with MIT License 6 votes vote down vote up 
static async getInitialProps (ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })
      const initialProps = await Document.getInitialProps(ctx)

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
Example #2
Source File: _document.js    From plataforma-sabia with MIT License 6 votes vote down vote up 
static async getInitialProps(ctx) {
		resetIdCounter();
		const sheet = new ServerStyleSheet();
		const originalRenderPage = ctx.renderPage;

		try {
			ctx.renderPage = () =>
				originalRenderPage({
					enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
				});

			const initialProps = await Document.getInitialProps(ctx);
			return {
				...initialProps,
				styles: (
					<>
						{initialProps.styles}
						{sheet.getStyleElement()}
					</>
				),
			};
		} finally {
			sheet.seal();
		}
	}
Example #3
Source File: index.js    From orangutan-monorepo with MIT License 6 votes vote down vote up 
/**
 *
 *
 * @export
 * @param {Object[]} [elements=[]] elements
 * @param {Object} [theme={}] custom theme
 * @param {Object} [appProps={}]
 * @param {string} [appProps.emphasizedLevel] `unit` or `group`. It will apply blocks with white background to the content of that section level (Not include the heading element).
 * @param {number} [appProps.maxHeadingTagLevel] If it's set to `3`, the heading element will start with html tag `h3`
 * @param {boolean} [appProps.showRecordBullet] show bullet of record or not
 * @returns {string} html string with
 */
export function buildEmbeddedCode(elements = [], theme = {}, appProps = {}) {
  const sheet = new ServerStyleSheet()
  try {
    const html = ReactDOMServer.renderToStaticMarkup(
      sheet.collectStyles(
        <Timeline
          content={buildContent(elements)}
          theme={theme}
          {...appProps}
        />
      )
    )
    const scriptTag = buildInjectStyleScript(sheet.getStyleTags())
    return html + scriptTag
  } catch (err) {
    throw err
  } finally {
    sheet.seal()
  }
}
Example #4
Source File: _document.jsx    From dashpub with Apache License 2.0 6 votes vote down vote up 
static async getInitialProps(ctx) {
        const sheet = new ServerStyleSheet();
        const originalRenderPage = ctx.renderPage;

        try {
            ctx.renderPage = () =>
                originalRenderPage({
                    enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
                });

            const initialProps = await Document.getInitialProps(ctx);
            return {
                ...initialProps,
                styles: (
                    <>
                        {initialProps.styles}
                        {sheet.getStyleElement()}
                    </>
                ),
            };
        } finally {
            sheet.seal();
        }
    }
Example #5
Source File: _document.js    From covid19india-cluster with MIT License 6 votes vote down vote up 
static getInitialProps({ renderPage }) {
    // Step 1: Create an instance of ServerStyleSheet
    const sheet = new ServerStyleSheet()

    // Step 2: Retrieve styles from components in the page
    const page = renderPage(App => props =>
      sheet.collectStyles(<App {...props} />)
    )

    // Step 3: Extract the styles as <style> tags
    const styleTags = sheet.getStyleElement()

    // Step 4: Pass styleTags as a prop
    return { ...page, styleTags }
  }
Example #6
Source File: _document.js    From new_v2ex with MIT License 6 votes vote down vote up 
static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
Example #7
Source File: _document.js    From ipad-cursor with MIT License 6 votes vote down vote up 
static async getInitialProps (ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props}/>)
          })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      }
    } finally {
      sheet.seal()
    }
  }
Example #8
Source File: _document.js    From next-fonts-example with MIT License 6 votes vote down vote up 
static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
    } finally {
      sheet.seal();
    }
  }
Example #9
Source File: _document.js    From elliot-serverless-ecommerce with MIT License 6 votes vote down vote up 
static async getInitialProps(ctx) {
		const pageProps = await super.getInitialProps(ctx);

		const styleSheet = new ServerStyleSheet();
		const originalRenderPage = ctx.renderPage;

		try {
			ctx.renderPage = () =>
				originalRenderPage({
					enhanceApp: App => pageProps =>
						styleSheet.collectStyles(<App {...pageProps} />)
				});

			pageProps.styles = (
				<>
					{pageProps.styles}
					{styleSheet.getStyleElement()}
				</>
			);
		} finally {
			styleSheet.seal();
		}

		return pageProps;
	}
Example #10
Source File: _document.js    From js-code with ISC License 6 votes vote down vote up 
static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
Example #11
Source File: _document.js    From cards with MIT License 6 votes vote down vote up 
static async getInitialProps (ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      }
    } finally {
      sheet.seal()
    }
  }
Example #12
Source File: _document.js    From developer-portal with Apache License 2.0 6 votes vote down vote up 
static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
Example #13
Source File: _document.js    From Next.js-e-commerce-online-store with MIT License 6 votes vote down vote up 
static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
Example #14
Source File: _document.js    From portfolio with MIT License 6 votes vote down vote up 
static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
Example #15
Source File: RenderService.js    From VoltranJS with MIT License 6 votes vote down vote up 
renderHtml = (component, initialState, context) => {
  // eslint-disable-next-line no-param-reassign
  component.id = guid();
  const initialStateWithLocation = { ...initialState, location: context, id: component.id };
  const sheet = new ServerStyleSheet();

  if (isWithoutHTML(context.query)) {
    return PureHtml(component.path, component.name, initialStateWithLocation);
  }

  const children = ReactDOMServer.renderToString(
    sheet.collectStyles(
      <StaticRouter location={component.path} context={context}>
        <ConnectedApp initialState={initialStateWithLocation} location={context} />
      </StaticRouter>
    )
  );

  const styleTags = sheet.getStyleTags();
  const resultPath = `'${component.path}'`;

  return Html({
    resultPath,
    componentName: component.name,
    children,
    styleTags,
    initialState: initialStateWithLocation,
    fullWidth: component.fullWidth,
    isMobileFragment: component.isMobileFragment,
    context
  });
}
Example #16
Source File: _document.js    From website with MIT License 6 votes vote down vote up 
static getInitialProps({ renderPage }) {
    // Step 1: Create an instance of ServerStyleSheet
    const sheet = new ServerStyleSheet();

    // Step 2: Retrieve styles from components in the page
    const page = renderPage(App => props =>
      sheet.collectStyles(<App {...props} />)
    );

    // Step 3: Extract the styles as <style> tags
    const styleTags = sheet.getStyleElement();

    // Step 4: Pass styleTags as a prop
    return { ...page, styleTags };
  }
Example #17
Source File: _document.js    From nextjs-boilerplate with MIT License 6 votes vote down vote up 
static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const renderPage = ctx.renderPage;

    try {
      ctx.renderPage = () => {
        return renderPage({
          enhanceApp: (App) => {
            return (props) => {
              return sheet.collectStyles(<App {...props} />);
            };
          },
        });
      };

      const initialProps = await Document.getInitialProps(ctx);

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
Example #18
Source File: _document.js    From lightning-address with MIT License 6 votes vote down vote up 
static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
Example #19
Source File: _document.js    From apps-ng with Apache License 2.0 6 votes vote down vote up 
static async getInitialProps(ctx) {

    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
Example #20
Source File: _document.js    From website with MIT License 6 votes vote down vote up 
static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
Example #21
Source File: _document.js    From circles-website with GNU Affero General Public License v3.0 6 votes vote down vote up 
static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
Example #22
Source File: ssr.js    From friendbank-markey with MIT License 5 votes vote down vote up 
export default async function ssr(path, ssrHelpers, preRender, cleanup) {
  const [routeMatch, route, PageComponent] = router(path);

  let initialProps = {};
  const getProps = getInitialPropsMap[route];

  if (typeof getProps === 'function') {
    try {
      initialProps = await getProps({
        ...ssrHelpers,
        routeMatch,
      });

      if (initialProps instanceof Error) {
        return initialProps;
      }
    } catch (error) {
      return error;
    }
  }

  const data = {
    ...initialProps,
    routeMatch,
    PageComponent,
  };

  const statsFile = join(process.cwd(), '/public/dist/loadable-stats.json');
  const extractor = new ChunkExtractor({ statsFile });

  const sheet = new ServerStyleSheet();

  let html = null;
  let headElements = null;
  let styleElements = null;
  let scriptElements = null;

  try {
    preRender();

    html = ReactDOMServer.renderToString(
      extractor.collectChunks(
        sheet.collectStyles(<Application {...data} />)
      )
    );

    cleanup();

    styleElements = sheet.getStyleTags();

    const helmet = Helmet.renderStatic();
    headElements = `${helmet.title.toString()}\n${helmet.meta.toString()}`;

    scriptElements = extractor.getScriptTags();
  } catch (error) {
    return error;
  } finally {
    sheet.seal();
  }

  return {
    html,
    styleElements,
    headElements,
    scriptElements,
    initialProps: {
      ...initialProps,
      routeMatch,
    },
  };
}
Example #23
Source File: PartialList.js    From VoltranJS with MIT License 5 votes vote down vote up 
sheet = new ServerStyleSheet()
Example #24
Source File: server.js    From Edlib with GNU General Public License v3.0 4 votes vote down vote up 
renderApp = async (req, res) => {
    const context = {};
    const emotionCache = createEmotionCache();
    const sheet = new ServerStyleSheet();

    const emotionServers = [
        // Every emotion cache used in the app should be provided.
        // Caches for MUI should use "prepend": true.
        // MUI cache should come first.
        emotionCache,
        getTssDefaultEmotionCache({ doReset: true }),
    ].map(createEmotionServer);

    const wwwUrl = `${req.protocol}://${req.get('host')}`;

    const SetupApp = (initialState, promiseList = []) => (
        <CacheProvider value={emotionCache}>
            <ThemeProvider theme={muiTheme}>
                <StaticRouter context={context} location={req.url}>
                    <FetchProvider
                        promiseList={promiseList}
                        initialState={initialState}
                        ssrCookies={res.getCookies()}
                        ssrAddCookiesFromSetCookie={res.addCookiesFromSetCookie}
                    >
                        <ConfigurationProvider
                            apiUrl={wwwUrl.replace('www', 'api')}
                            wwwUrl={wwwUrl}
                            isSSR
                            cookies={req.cookies}
                        >
                            <App />
                        </ConfigurationProvider>
                    </FetchProvider>
                </StaticRouter>
            </ThemeProvider>
        </CacheProvider>
    );

    const maxDepth = 10;
    const getStateFromTree = async (state = {}, depth = 0) => {
        const promiseList = [];
        renderToString(SetupApp(state, promiseList));
        if (promiseList.length !== 0 && depth < maxDepth) {
            await addPromiseListToState(state, promiseList);

            return getStateFromTree(state, depth + 1);
        }

        return { state };
    };

    const { state } = await getStateFromTree();

    const markup = renderToString(sheet.collectStyles(SetupApp(state, [])));
    const helmet = Helmet.renderStatic();

    // Grab the CSS from emotion
    const styleTagsAsStr = emotionServers
        .map(({ extractCriticalToChunks, constructStyleTagsFromChunks }) =>
            constructStyleTagsFromChunks(extractCriticalToChunks(markup))
        )
        .join('');

    // Grab the CSS from styled-components
    const styledComponentsTags = sheet.getStyleTags();

    const html = `<!doctype html>
    <html lang="">
    <head ${helmet.htmlAttributes.toString()}>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${cssLinksFromAssets(assets, 'client')}
        ${styleTagsAsStr}
        ${styledComponentsTags}
        ${helmet.title.toString()}
        ${helmet.meta.toString()}
        ${helmet.link.toString()}
    </head>
    <body ${helmet.bodyAttributes.toString()}>
        <script>
            window.__FETCH_STATE__=${JSON.stringify(state).replace(
                /</g,
                '\\u003c'
            )};
        </script>
        <div id="root">${markup}</div>
        ${jsScriptTagsFromAssets(assets, 'client', 'defer', 'crossorigin')}
    </body>
    </html>`;

    return { context, html };
}