@ithinkdt/core/src/cssr.js

iThinkDT Core

import { CssRender } from 'css-render'
import bem from '@css-render/plugin-bem'

export const cssr = CssRender()

export const CSS_MOUNT_ANCHOR_META_NAME = 'dt-frame-style'

export const CSS_STYLE_PREFIX = 'dt'

const bemPlugin = bem({ blockPrefix: `.${CSS_STYLE_PREFIX}-` })

cssr.use(bemPlugin)

const { c, find, context } = cssr
const { cB, cE, cM } = bemPlugin

export { context, c, find, cB, cE, cM }

export const fullWidth = {
    width: '100%',
}

export const fullHeight = {
    height: '100%',
}

export const fullWH = {
    ...fullWidth,
    ...fullHeight,
}

export const flex = {
    display: 'flex',
}

export const flexDirCol = {
    ...flex,
    flexDirection: 'column',
}

export const flexAlignCenter = {
    ...flex,
    alignItems: 'center',
}

export const flexJustifyCenter = {
    ...flex,
    justifyContent: 'center',
}

export const flexJustifySB = {
    ...flex,
    justifyContent: 'space-between',
}

export const flexCenter = {
    ...flexAlignCenter,
    ...flexJustifyCenter,
}

export const flexGap = (gap) => {
    return { ...flex, gap }
}