WH

Linking Stylesheet in the Template

To use even a basic css library will cause some styles to be applied globally to the entire page, but you wish to localize the styling to just the web component which you are defining.

Importing the third party css library in the static style definition will not bring in the styles.

static styles = css`

// This won't work
@import 'bulma/css/bulma.css';

...
`

Customize the cherry-picked Commit Message

You are working on a branch focusing on a certain feature, but you end up adding in commit messages that are not presentable enough to be applied to your main branch. To fix this problem, you can rebase to squash the commits and then cherry-pick the changes onto the main branch.

Wait for DOM Change before Taking Action

Assume that we have a button which sets up with a click event listener to call upon a toggling of state to display an associated container:

import { LitElement, html } from "lit-element";

class MyElement extends LitElement {

  render() {
    return html`
      <button @click="${this._handleClick}">click</button>
      <div id="container" class=${this.open ? 'expanded' : 'collapsed'}>
        The contents.
      </div>
    `;
  }

  _handleClick() {
    this._toggleContainer();
  }

  //...
}

//...

Share Global Styles on Compile and Runtime

Linaria is able to achieve zero-runtime css-in-js because it compiles the js to css before the local dev server startup, however one might wish to share and modify styles used by Linaria during development.

Since one can't use Linaria when the dev server is running for client css-in-js, the base styles will need to be handed over to another css-in-js library for modification.

HMR with Web Components

Say that you are using HMR in conjunction with web components for your layouts, you would expect a change in the component's JavaScript logic to trigger the HMR code to re-register the component.

However, there isn't a way to redefine a web component once it has already been defined and registered onto the page, an error will be thrown if you tried to redefine the web component again.

Export Value for Comparison

HMR is a convenient tool to have when one wishes to perform updates to a page without fully reloading the whole page. When using Snowpack's HMR, one can compare a variable's value prior to it being changed.

This feature might come in handy when you want to perform resets after a set amount of time has passed for a user session, but there also might be a requirement to restore certain pieces of old information back into a new session. For example, in a privacy-sensitive form area, a notice can come up in area that does not require a full refresh as a top status bar after a time-out period.

Linaria CLI

CSS-in-Js styles are quite modular given their ability to be associated with components, but it is also helpful to have the option to compile some styles ahead of time for a html page to use. This behavior is desired if there are common global styles that referenced by all pages. Having minimum styles on the page in a css file also helps to prevent the flash of unstyled content.

In the following example, Linaria will be shown as the CSS-in-Js of choice since this library supports compilation during build.

Create a new project and install the project dependencies:

npm install snowpack @snowpack/plugin-run-script @linaria/cli @linaria/shaker