How to use the @xstyled/styled-components.li function in @xstyled/styled-components

Container,
  Card,
  CardHeader,
  CardTitle,
  CardBody,
  CardFooter,
  FadeLink,
} from 'components'
import ProductInfo from './ProductInfo'

const RepositoryList = styled.ul`
  margin: -1 0;
  padding: 0;
`

const RepositoryItem = styled.li`
  margin: 0;
  padding: 1 0;
  list-style-type: none;
`

export function Home() {
  const user = useUser()
  if (!user) {
    return 
  }

  return (

import React from 'react'
import { Link, Route } from 'react-router-dom'
import styled, { css } from '@xstyled/styled-components'
import { up } from '@xstyled/system'

export const TabList = styled.ul`
  padding: 0;
  margin: 0;
  margin-bottom: -1rpx;
  list-style-type: none;
  display: flex;
  font-weight: medium;
  font-size: 14;
`

export const TabItem = styled.li`
  padding: 0;
  margin: 0;
  border-bottom: 1;
  border-color: transparent;
  transition: base;
  transition-property: border-color;

  &[aria-current='true'] {
    border-color: white;
  }
`

export const TabItemLink = styled.a`
  color: white;
  text-decoration: none;
  padding: 2 3;

import {
  Container,
  Card,
  CardHeader,
  CardTitle,
  CardBody,
  CardFooter,
  FadeLink,
} from 'components'

const RepositoryList = styled.ul`
  margin: -1 0;
  padding: 0;
`

const RepositoryItem = styled.li`
  margin: 0;
  padding: 1 0;
  list-style-type: none;
`

export function Home() {
  const user = useUser()
  if (!user)
    return process.env.NODE_ENV === 'production' ? (
      
    ) : null
  if (!user.installations.length && !isUserSyncing(user)) {
    return (
      
        <p>Look like you don't have installed Bundle Analyzer GitHub App.</p>
        <button href="{process.env.GITHUB_APP_URL}"></button>

import React from 'react'
import { Link, Route } from 'react-router-dom'
import styled, { css } from '@xstyled/styled-components'
import { up } from '@xstyled/system'

export const TabList = styled.ul`
  padding: 0;
  margin: 0;
  margin-bottom: -1rpx;
  list-style-type: none;
  display: flex;
  font-weight: medium;
  font-size: 14;
`

export const TabItem = styled.li`
  padding: 0;
  margin: 0;
  border-bottom: 1;
  border-color: transparent;
  transition: base;
  transition-property: border-color;

  &[aria-current='true'] {
    border-color: darker;
  }
`

export const TabItemLink = styled.a`
  color: darker;
  text-decoration: none;
  padding: 2 3;

animation-direction: reverse;

            > svg {
              left: 0;
            }
          }

          ${ProjectImageLink}:hover > svg {
            transform: scale(1.05);
          }
        `
    }
  }}
`

const ProjectTag = styled.li`
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: inline-block;
  font-size: 12;
  color: light400;
  padding: 0 2;

  a {
    transition: base;
    color: lighter;

    > svg {
      font-size: 18;
      vertical-align: middle;
    }