#Properties Polyfill

By using Eufemia properties, like color names and typography properties, instead of defining colors and typography directly as hard coded values, you make your code much more readable and future proof in terms of refactoring and new enhancements. Maintainability is important. But it fits also better in thinking of the Living system terms.

But as long as we have to support legacy browsers like Internet Explorer we have to deal with a fallback or polyfill.

#Post CSS

Use postcss-preset-env. Example webpack loader config:

{
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    plugins: () => [
      postcssPresetEnv({
        stage: 0,
        preserve: true,
        browsers: ['last 2 versions', 'explorer >= 11'],
        importFrom: [require.resolve('@dnb/eufemia/style/dnb-ui-properties.css')]
      })
    ]
  }
},

Notes: Use preserve: true so we get the calc from vars calc(var() + var()), to get processed for IE later with postcss-calc if this is needed.

#Post CSS and Create React App

Here's an example CRA Codesandbox with postcss config and omit of file hashing.

#SASS (SCSS) / LESS

Use the Post CSS method.

#CSS-in-JS

For CSS-in-JS you can use css-vars-ponyfill.

In your application root:

// import the polyfill (Ponyfill)
import cssVars from 'css-vars-ponyfill'

// run the polyfill
cssVars()

But on large applications, the polyfill lacks in stability, therefore we made and recommend using the approach by using the Stylis Plugin method. Se examples below.

#CSS Properties (variables)

You can also import all the main properties as a JavaScript Object:

import properties from '@dnb/eufemia/style/properties'
// properties gives you { '--color-sea-green': '#007272', ... }

#Styled Components

Is supported from v5 of styled-components and above.

import stylisPlugin from '@dnb/eufemia/style/stylis'
import { StyleSheetManager } from 'styled-components'

render(
  <StyleSheetManager stylisPlugins={[stylisPlugin]}>
    <MyApp />
  </StyleSheetManager>
)

#Add custom properties:

import { withProperties } from '@dnb/eufemia/style/stylis'
import { StyleSheetManager } from 'styled-components'

const stylisPlugin = withProperties({
  '--custom-property': 'CSS value',
})

render(
  <StyleSheetManager stylisPlugins={[stylisPlugin]}>
    <MyApp />
  </StyleSheetManager>
)

#Emotion

import stylisPlugin from '@dnb/eufemia/style/stylis'
import { CacheProvider } from '@emotion/react'
import createEmotionCache from '@emotion/cache'

const emotionCache = createEmotionCache({
  key: 'my-prefix-key',
  stylisPlugins: [stylisPlugin],
})

render(
  <CacheProvider value={emotionCache}>
    <MyApp />
  </CacheProvider>
)