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

花一个月时间为 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>

更多细节请查看 官方文档