Skip to main content

Configuration

Structure

Fower provides default config for different platform, the config is a plain JavaScript object, the structure of config is like this:

const config = {
unit: 'px',
prefix: '',
important: false,
theme: {
// theme config
},
plugins: [
// plugin config
],
}

Built-in default config:

unit

The unit for the style like width, height, padding, margin... The default value of unit option is px, you can use rem, em, vh, etc.

prefix

The prefix for the generated css classname, default is empty string.

important

if important option is true, every css rule will attach !important postfix. Default value is false.

theme

The theme option is where you define your design system like color palette, spacing, fonts, border radius, breakpoints.

const config = {
theme: {
breakpoints: {
//
},
colors: {
//
},
spacings: {
//
},
fontSizes: {
//
},
// other theme config...
},
}

Learn more about the theme in the theme section.

Read Config

Fower config is a plain JavaScript object, you can read it from @fower/core.

import { getConfig } from '@fower/core'

const config = getConfig()

console.log('config:', config)
console.log('config.inline:', config.inline)
console.log('config.theme:', config.theme)

Custom Config

You can update Fower config use setConfig() Api from @fower/core.

import { setConfig } from '@fower/core'

setConfig({
unit: 'rem',
})

By default, user config will deepmerge to default config. you can change configure strategy by second param, form example, use replace strategy to replace the whole default config:

import { setConfig } from '@fower/core'

setConfig(
{
unit: 'rem',
},
'replace',
)

Supported strategy:

  • deepmerge, default strategy, it will deepmerge to default config.
  • merge, it will merge to default config, equal to Object.assign.
  • replace, it will replace current config.

Notice

Before you get or set config, you should import platform package at first.

import '@fower/react'
import { getConfig, setConfig } from '@fower/core'