花一个月时间为 vue3 重制了 vue-styled-components

前言

styled-components 在 React 是一个超级热门的 css in js 工具库。其实 styled-components 也有 Vue 版本（vue-styled-components），可惜的是只支持 Vue2，并且该项目已有几年没有更新，作者大概率不会发布 Vue3 版本了。

因此我决定重制一个支持 Vue3 版本的 vue-styled-components，该项目前前后后大概花费了一个月的业余时间，基本实现了 styled-components 的大部分核心功能，不过可能存在部分场景考虑不全面的问题，这个需要拜托广大朋友测试检验一下了，因为不是照搬 原styled-components 的 api，大部分是自己重新实现了的。

大家觉得可以的话点点star支持下😄

项目地址：https://github.com/v-vibe/vue-styled-components

✨特性

✅ 样式化 Vue 组件或样式化组件

✅ 添加默认属性

✅ 传递属性

✅ 支持主题化

✅ 生成关键帧

✅ 生成 CSS 混合

✅ 创建全局样式

✅ 添加或覆盖Attrs

✅ 支持 CSS 嵌套。（仅支持 web: https://drafts.csswg.org/css-nesting/#nesting）

📦安装

npm i @vvibe/vue-styled-components

yarn add @vvibe/vue-styled-components

pnpm i @vvibe/vue-styled-components

🔨使用

样式化组件

<script setup lang="ts">

import { styled } from '@vvibe/vue-styled-components';
import OtherComponent from './VueComponent.vue';

  


const StyledDiv = styled('div')`
    width: 100px;
    height: 100px;
    background-color: #ccc;
    color: #000;
`;

const StyledStyledDiv = styled(StyledDiv)`
    width: 100px;
    height: 100px;
    background-color: #000;
    color: #fff;
`;

const StyledOtherComponent = styled(OtherComponent)`
    width: 100px;
    height: 100px;
    background-color: red;
    color: #fff;
`;

</script>

<template>
    <StyledDiv>Styled Div</StyledDiv>
    <StyledStyledDiv>Styled Styled Div</StyledStyledDiv>
    <StyledOtherComponent>Styled Other Vue Component</StyledOtherComponent>
</template>

Attributes 设置

<script setup lang="ts">

import { styled } from '@vvibe/vue-styled-components';
 
const StyledDiv = styled.div.attrs({
    class: 'styled-div'
})`
    width: 100px;
    height: 100px;
    background-color: #ccc;
    color: #000;
`;
</script>

<template>
    <StyledDiv>Styled Div</StyledDiv>
    <!-- <div class="styled-div">Styled Div</div> -->
</template>

通过 Props 动态控制样式

<script setup lang="ts">

import { styled } from '@vvibe/vue-styled-components';

const StyledDiv = styled('div', {
    color: '#fff'
})`
    width: 100px;
    height: 100px;
    background-color: #ccc;
    color: ${(props) => props.color};
`;
</script>

<template>
    <StyledDiv>Styled Div</StyledDiv>
</template>

主题

<script setup lang="ts">

import { styled, ThemeProvider } from '@vvibe/vue-styled-components';

const StyledDiv = styled.div`
    width: 100px;
    height: 100px;
    background-color: #ccc;
    color: ${(props) => props.theme.color};
`;
</script>

<template>
    <ThemeProvider :theme="{ color: '#fff' }">
        <StyledDiv>Styled Div</StyledDiv>
    </ThemeProvider>
</template>

生成 keyframes

您可以使用 keyframes 函数来定义关键帧动画，然后使用 keyframes 的返回值将其应用于样式化组件。

<script setup lang="ts">

import { styled, keyframes } from '@vvibe/vue-styled-components';

const rotate = keyframes`
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
`;

const translate = keyframes`
    0 {
        transform: translateX(0);
    }
    50% {
        transform: translateX(250%);
    }
    60% {
        transform: rotate(360deg);
    }
`;

const StyledBaseDiv = styled.div`
    display: inline-block;
    width: 100px;
    height: 100px;
`;  

const StyledRotateDiv = styled(StyledBaseDiv)`
    background-color: skyblue;
    animation: ${rotate} 2s linear infinite;
`;
  
const StyledTranslateDiv = styled(StyledBaseDiv)`
    margin-left: 10px;
    background-color: darkred;
    animation: ${translate} 2s ease infinite alternate;
`;
</script>

<template>
    <StyledRotateDiv />
    <StyledTranslateDiv />
</template>

Create Global Style

一个用于创建全局样式的函数。

<script setup>

import { createGlobalStyle } from '@vvibe/vue-styled-components';

const GlobalStyle = createGlobalStyle`
    body {
        color: ${(props) => props.color};
    }
`;
</script>

<template>
    <GlobalStyle color="white" />
</template>

Generate CSS Mixin

一个用于从带有插值的模板字符串生成 CSS 的函数。

<script setup lang="ts">

import { styled, css } from '@vvibe/vue-styled-components';
  
const mixin = css`
    color: red;
    background-color: blue;
`;

const DivWithStyles = styled('div')`
    ${mixin}
`;
</script>

<template>
    <DivWithStyles>Div with mixin</DivWithStyles>
</template>

添加或覆盖 Attributes

一个向 ComponentInstance or HTMLElements 添加或覆盖 Attributes 的函数.

<script setup lang="ts">

import { withAttrs } from '@vvibe/vue-styled-components';

const DivWithAttrs = withAttrs('div', {
    class: 'div-with-attrs'
});

const DivWithAttrs2 = withAttrs(DivWithAttrs, {
    class: 'div-with-attrs-2'
});
</script>

<template>
    <DivWithAttrs>Div with attrs</DivWithAttrs>
    <DivWithAttrs2>Div with attrs 2</DivWithAttrs2>
</template>
<style scope>
.div-with-attrs {
    color: red;
}

.div-with-attrs-2 {
    color: blue;
}
</style>

更多细节请查看 官方文档