The Styling of Electrode Component Archetype

Published in

Walmart Global Tech Blog

4 min readMay 18, 2018

WalmartLabs Electrode Component Archetype is a npm module that encapsulates boilerplates for centrally managing configurations, workflows and dependencies of Electrode Components. If you are not familiar with Electrode Archetype, please read Joel Chen’s article here before you continue below.

A crucial part of the Component Archetype is Styling, which is one of the parts that we have always wanted to improve. “How to configure different styles in Electrode component”, “What styles do the archetype support”, “Can we have multiple styles in one Electrode component” are frequently asked questions from our developers. In this article, I will explain how does the style work in the Electrode Component Archetype.

Layout of the style files

Let’s first take a look at the layout of the component style files:

electrode-component
    demo-app
        src/client/styles
    packages
        [component]
            demo/demo.[css|styl|scss]
            src/styles

demo-app/src/client/styles: style files for the demo-app; used for demoing components.
packages/[component]/demo: demo folder is the connection between demo-app and packages/[component]. It is the only source for the demo-app to get the packages/[component] styles. demo-app will only reference on demo folder, not on src/styles.
packages/[component]/src/styles: style files for the component.

What styles can you have?

Component Archetype supports a variety of styles, such as pure CSS, CSS-Modules + CSS-Next, Stylus and SCSS, and their combinations. It supports different styles based on different flags and style types.

How are the styles bundled inside Archetype?

In the Component Archetype, we use webpack to put all the assets (including Javascript, style files etc) in a dependency graph. Then we can use require() on our local static assets.
In order to bundle the static resources beyond JavaScript, you can use webpack loaders to compile/transform the style files. Loaders are node-based utilities built for webpack to compile/transform a given type of resources which can be bundled into javascript modules. Here are the webpack styles loaders we use to compile the styles:

css-loader: collects CSS from all the css files and put them into a string.
style-loader: takes the output string generated by the above css-loader and put it inside the <style> tags in the index.html file.
postcss-loader offers various plugins to transform CSS with JavaScript.
stylus-relative-loader is created by @WalmartLabs, a stylus loader for fixed relative imports.
sass-loader is a Sass loader. Compiles Sass to CSS.

Component Archetype loads the style loaders based on the file type and the cssModuleSupport flag.
Without cssModuleSupport specified or has a value of false, style loaders will default to the following:

{      
  test: /\.css$/,      
  use: ${cssLoader}!${postcssLoader}    
},    
{     
  test: /\.scss$/,     
  use: `${cssQuery}!${sassLoader}`    
},    
{      
  test: /\.styl$/,      
  use: `${cssLoader}!${stylusLoader}`
}

With cssModuleSupport: true, all class names and animation names will be scoped locally by CSS-Modules and CSS-Next. Style loaders will be loaded as follows:

const cssLoaderOptions = "?modules&localIdentName=[name]__[local]___[hash:base64:5]&-autoprefixer";{      
  test: /\.css$/,      
  use: ${cssLoader}${cssLoaderOptions}!${postcssLoader}    
},    
{     
  test: /\.scss$/,     
  use: `${cssQuery}${cssLoaderOptions}!${sassLoader}`    
},    
{      
  test: /\.styl$/,      
  use: `${cssLoader}${cssLoaderOptions}!${stylusLoader}`
}

How to specify the desired styles?

You can extend or customize the configurations in your Electrode Components. In order to load the corresponding style loaders, for example CSS-Modules + CSS-Next, you need to specify the flag cssModuleSupport:true inapp/archetype/config (Note: Check the flags customization here).

The Component Archetype will look for customized configs from the project and merge them into the current webpack configurations. Below are the available flags you can choose for your component:

cssModuleSupport: A flag to enable css-modules + css-next support. (Default: undefined)
[Deprecated Warning] This is not a recommended setup. cssModulesStylusSupport: A flag to enable stylus support with CSS modules. (Default: false)

Style use cases

Without specifying flags, the following are the default cases for the styles:

If you are using *.css as your style type, it will use CSS-Modules + CSS-Next
If you are using *.styl as your style type, it will use Stylus
If you are using *.scss as your style type, it will use SCSS

Here is how you can customize your styles:

To use pure CSS (Doesn’t support CSS-Modules + CSS-Next), set cssModuleSupport to false.
To use Stylus along with CSS-Modules + CSS-Next, set cssModuleSupport to true.
To use SCSS along with CSS-Modules + CSS-Next, set cssModuleSupport to true.