#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.

#Post CSS

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

{
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    plugins: () => [
      postcssPresetEnv({
        stage: 0,
        preserve: true,
        browsers: ['defaults and supports es6-module'],
        importFrom: [require.resolve('@dnb/eufemia/style/themes/theme-ui/ui-theme-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()

#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', ... }