css variables theming using fe-brary

Author: albertstill

packages/react-scripts/config/webpack.config.dev.js

@@ -16,6 +16,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const feBrary = require('@domain-group/fe-brary');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
@@ -29,6 +30,22 @@ const publicUrl = '';
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
 
+const themeVar = process.env.FE_BRARY_THEME || 'domain';
+const theme = feBrary.themeVariables[themeVar];
+
+if (!theme) {
+ throw new Error(
+ `Unrecognised \`FE_BRARY_THEME\` env var \`${process.env
+ .FE_BRARY_THEME}\` - must be one of ${JSON.stringify(feBrary.themes)}`
+ );
+}
+
+const postcssCustomPropertiesVariables = Object.values(
+ theme
+).reduce((acc, cssVars) => {
+ return Object.assign(acc, cssVars);
+}, {});
+
 const postCSSLoaderOptions = {
  ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
  plugins: loader => [
@@ -47,6 +64,9 @@ const postCSSLoaderOptions = {
  autoprefixer: {
  flexbox: 'no-2009',
  },
+ customProperties: {
+ variables: postcssCustomPropertiesVariables,
+ },
  },
  }),
  ],

packages/react-scripts/scripts/init.js

@@ -145,6 +145,7 @@ module.exports = function(
  );
  }
  devDepArgs.push('@domain-group/fe-co-demo');
+ devDepArgs.push('@domain-group/fe-brary');
 
  const proc = spawn.sync(command, devDepArgs, { stdio: 'inherit' });
  if (proc.status !== 0) {

packages/react-scripts/template/demo/legacy.scss

@@ -1,3 +1,4 @@
+@import '@domain-group/fe-brary/fe-brary-theme-domain';
 @import '@domain-group/fe-co-demo/lib/scss/fe-co-demo';
 
 html,

packages/react-scripts/template/src/components/example/index.css

@@ -23,8 +23,8 @@
 .heading {
  composes: shared;
  font-size: 30px;
- background-color: rgb(14, 168, 0);
- color: white;
+ background-color: var(--brandGreen);
+ color: var(--white);
  text-align: center;
  flex-grow: 1;
 }

packages/react-scripts/template/src/components/example/index.jsx

@@ -9,7 +9,7 @@ export default function Example({ isTwoColumn }) {
  ? ` ${styles.isTwoColumn}`
  : ''}`}>
  <h1 className={styles.heading}>
- <code className={styles.code}>fe-co-foobar</code>
+ fe-co-foobar
  </h1>
  <div className={styles.content}>
  <img src={logo} className={styles.appLogo} alt="logo" />