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'