@cosmic-design/style

Cosmic Design Styles

Exports

Export Cnofig

/** package.json */
{
    "exports": {
        "./*": "./dist/*",                      /** compiled css **/
        "./common": "./src/common"              /** souce code css **/
    },
}

Export Files

.
├── dist
│   ├── utilities.css       # Tool CSS
│   ├── button.module.css   # Component CSS, including default & prefab style
│   ├── global.css          # Global CSS = Tool CSS + CSS Variables
├── src
│   ├── common
│   │    ├── theme.css      # CSS Variables

How to Use

ESM/TS 环境开发

以下内容为组件代码库引用 @cosmic-design/style 的方式

• 全局样式
  • 如无需自定义设计变量，直接重新导出 @cosmic-design/style/global.css
  • 如需要自定义设计变量，自行合并 设计变量文件 + @cosmic-design/style/utilities.css = new-global.css
• 组件样式
  • ESM/TS import style "@cosmic-design/style/button.module.css";;
  • 编译时 exclude 组件样式为 button.css（单独编译） / component.css (打包编译）

import style from '@cosmic-design/style/button.modules.css';

const ButtonTemplate = `<div class="${style.button} cos-sm"></div>`

使用组件样式

以下内容为组件/业务代码库，如何使用工具样式/组件样式

• 工具样式：直接使用即可，可查阅 utilities.css 或 windiCSS（文档后续给出）
• 组件预制样式：可以使用衍生样式来改变组件外观，如

<!-- 使用组件的变体修饰 -->
<button class="cos-lg" >大号按钮</button>
<!-- 使用组件的变体修饰 -->
<button class="cos-rounded" >放行按钮</button>
<!-- 使用组件的预制修饰 -->
<button class="cos-dashed" >描边按钮</button>

衍生外观的实现位于 component/Button/button-dashed.module.less 中，编译时打包到 dist/button.module.css 中。

其他

CSS Module 配置

目前在 vite.config.js 中对 CSS Module 编译进行了基本配置

{
     modules: {
        scopeBehaviour: 'local',            // 默认配置， 全局样式需要加 :global() 来避免className编译
        localsConvention: 'camelCase',      // js的产出中增加驼峰变量名，以便于 style.buttonPrefix 方式引用
        generateScopedName: "cos-[local]"   // className 编译规则， 目前cos-前缀在这里统一添加
    }
}