STYLING.md

Styleguide link

Zuri Master Guide

Styling in Zuri Main

To avoid style clashes use css modules when styling in Zuri Main for example

// IS NOT VALID UNLESS REFERENCING A STYLE MADE AVAILABLE IN THE GLOBAL STYLESHEET
const TestComponent = () => {
  return <div style={`testComponentDiv`}></div>
}
export default TestComponent

// IS VALID
import style from './styles.module.css'

const TestComponent = () => {
  return <div style={`${style.testComponentDiv}`}></div>
}
export default TestComponent

Styling for plugins in Zuri Main

In the webpack.config.js modify to

const { mergeWithRules } = require('webpack-merge')
const singleSpaDefaults = require('webpack-config-single-spa-react')

const mergeRules = {
  plugins: 'replace',
  devServer: {
    static: {
      directory: 'replace'
    }
  },
  module: {
    rules: {
      test: 'match',
      include: 'replace',
      exclude: 'replace',
      use: 'replace'
    }
  }
}

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: 'zuri',
    projectName: '{REPLACE WITH APPLICATION NAME}',
    webpackConfigEnv,
    argv
  })

  return mergeWithRules(mergeRules)(defaultConfig, {
    //   OTHER WEBPACK RULES
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                modules: {
                  localIdentName: '[local]--[hash:base64:5]__[name]'
                }
              }
            }
          ]
        }
      ]
    }
  })
}