How to use linaria - 10 common examples

replaceHeadComponents,
  getPostBodyComponents,
  replacePostBodyComponents,
}) => {
  let styles = []
  const headComponents = getHeadComponents().filter(({ type, props }) => {
    if (type === 'style' && LINARIA_STYLESHEET_RULE.test(props['data-href'])) {
      styles.push({
        href: props['data-href'],
        text: props.dangerouslySetInnerHTML.__html,
      })
      return false
    }
    return true
  })
  const { critical } = collect(
    bodyHTML,
    styles.map(style => style.text).join('')
  )
  // Attach critical CSS into bottom of head
  replaceHeadComponents([
    ...headComponents,
    <style data-linaria-critical="{pathname}">,
  ])
  // Attach other and critical into bottom of body
  // This also includes critical css because of cache hit
  replacePostBodyComponents([
    ...getPostBodyComponents(),</style>

// @flow

import {styled} from 'linaria/react'

export const SettingsGroup = styled.div`
  --settings-row-padding: 15px;

  background-color: #f7f7f7;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  grid-column: 3 / span 1;
  grid-row: 3 / span 3;

  @media (max-width: 699px) {
    grid-column: 1 / span 1;
    grid-row: 3 / span 7;
  }
`

export const Label = styled.label`
  display: grid;

/* @flow */

import { styled } from 'linaria/react';

const Layout = styled.div`
  display: flex;
  height: 100%;
  flex-direction: column;

  @media (min-width: 640px) {
    flex-direction: row;
  }
`;

export default Layout;

font-size: inherit;
    background-color: transparent;
    border: 0;
  }
`;

const PropItem = styled.div`
  margin: 8px 0;

  & > code {
    font-size: inherit;
    white-space: normal;
  }
`;

const RestPropsLabel = styled.a`
  display: block;
  margin: 24px 0 8px 0;
`;

const REACT_STATIC_METHODS = ['getDerivedStateFromProps'];

const ANNOTATION_OPTIONAL = '@optional';
const ANNOTATION_INTERNAL = '@internal';
const ANNOTATION_EXTENDS = '@extends';

const getTypeName = (type: TypeAnnotation) => type.raw || type.name || '';

const hasAnnotation = (item: any, annotation: string) =>
  // eslint-disable-next-line no-nested-ternary
  item.description
    ? item.description.startsWith(annotation)

/* @flow */

import * as React from 'react';
import { styled } from 'linaria/react';

type Props = {
  filepath: string,
  github?: string,
};

const EditButtonContainer = styled.a`
  display: block;
  position: absolute;
  top: 0;
  right: 48px;
  padding: 30px;
  z-index: 10;
  color: inherit;

  &:focus,
  &:hover,
  &:active {
    color: inherit;
  }

  @media (min-width: 640px) {
    padding: 32px;

height: 48px;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
  }
`;

const Links = styled.ul`
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: center;
`;

const LinkItem = styled.a`
  display: block;
  font-size: 1.2em;
  font-weight: 700;
  padding: 24px 16px;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
  transition: 200ms;

  &:hover {
    color: inherit;
  }

  @supports (-webkit-background-clip: text) {
    background-image: ${constants.gradient};
    /* stylelint-disable-next-line property-no-vendor-prefix */

function evaluate(babel, path, state) {
  let result = evaluateSimple(path)
  if (result.confident) {
    return {
      value: compileRule(result.value),
      dependencies: [],
    }
  }

  try {
    result = evaluateComplex(
      path,
      babel.types,
      state.file.opts.filename,
      text => {
        return babel.transformSync(text, {
          babelrc: false,
          filename: state.file.opts.filename,
          plugins: [
            // Include this plugin to avoid extra config when using { module: false } for webpack
            '@babel/plugin-transform-modules-commonjs',
            '@babel/plugin-proposal-export-namespace-from',
            // We don't support dynamic imports when evaluating, but don't wanna syntax error
            // This will replace dynamic imports with an object that does nothing
            // eslint-disable-next-line no-undef
            require.resolve('linaria/lib/babel/dynamic-import-noop'),
          ],

/* @flow */

import * as React from 'react';
import { styled } from 'linaria/react';

const Container = styled.main`
  flex: 1;

  @media (min-width: 640px) {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
`;

const Inner = styled.div`
  padding: 64px 24px 24px;

  @media (min-width: 640px) {
    padding: 64px;
  }

if (!link) {
			console.error(idFrom, preparedLink)
			throw new Error('Cannot build a link for a reflection without an Id')
		}

		const { name: linkName, href } = link
		const linkNames = (name || linkName).split('/').filter(Boolean)
		const isPath = linkNames.length > 1

		const relativeHref = normalizePath(settings, href)

		return (
			<a href="{relativeHref}" id="{link.anchor}">
				{typeof this.props.children === 'function'
					? this.props.children(link)
					: this.props.children ||
					  linkNames.map((name, i) =&gt; {
							return (
								<span>
									{name}
									{i !== linkNames.length - 1 ? '/' : ''}
								</span></a>

import React from 'react'
import Head from 'next/head'
import { styled } from 'linaria/react'

const Box = styled.div`
  margin-top: 40px;
  margin-left: 40px;
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: spin 2s linear infinite;

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }