DEV Community: Thomas Cullen

Building a CSS-in-JS library from scratch

Thomas Cullen — Mon, 12 Apr 2021 09:28:25 +0000

CSS-in-JS libraries are popping up all over the place at the moment. They are a really powerful way to style apps but how do they actually work?. In this post we are going to build our own CSS-in-JS library.

Before we dig in it is worth saying that if you are looking for a CSS-in-JS solution, you should probably use one of the existing libraries out there rather then building your own as they are well tested, more performant and have more functionality. This is purely a learning exercise! Let's dive in.

We are going to create a simple css-in-js library that follows the 'styled' API made popular by styled-components. We will only focus on basic functionality so we won't be looking at things like server side rendering or browser prefixing. Most CSS-in-JS libraries work by taking style definitions, generating class names for them and injecting them inside of a style tag in the document head. So let's start by creating this style tag.

const style = document.createElement("style");
document.head.appendChild(style);

We can now attach any CSS rules we want to this style tag using the CSSStyleSheet insertRule method. We can also make use of the cssRules method to ensure we are always adding the rule to the end of the list by providing the list length as the index we want to insert the rule at.

style.sheet.insertRule(".red { color: red; }", style.sheet.cssRules.length);

You can read more about the CSSStyleSheet interface here.

Next thing we need is a function that will take a CSS rule, generate a className, insert a new rule into our style tag and return the generated class name for us to use in our components. For our use case, we can simply use the index to create a unique class name instead of doing any kind of hashing like most libraries do.

function css(styles) {
  const index = style.sheet.cssRules.length;
  const className = `css-${index}`;
  const rule = `.${className} { ${styles} }`;
  style.sheet.insertRule(rule, index);
  return className;
}

Now we can use our css function to generate class names that we can provide to our components.

function Example() {
  const className = css("color: red;");
  return <div className={className}>This is an example</div>;
}

That's great and all but it's far from the API that we want to have. We want to be able to define components using the popular "styled" API like this.

const Example = styled("div")`
  color: red;
`;

In order to achieve this we need to take a quick detour to explore tagged template literals. First we need to know what a template literal is. A template literal is a type of string that allows you to interpolate values inside of them.

const color = "red";
const rule = `color: ${color};`;

A tagged template literal is a special way of parsing a template literal with a function. This function will be called with an array of all of the string parts as well as any variables provided.

function greet(strings, ...args) {
  console.log("strings: ", strings);
  console.log("args: ", args);
}

const name = "Thomas";
greet`My name is ${name}!`;
// strings: ["My name is", "!"]
// args: ["Thomas"]

Now that we know a template literal can be tagged with a function, we can revisit out css-in-js implementation to achieve the API we want. We need to create a styled function that takes the type of dom element we want to render and returns a function that we can then use as a tagged template literal to create our react component. Let's keep things simple to start with and just take the styles that we pass in as is so that we can focus on getting the API we want.

function styled(tag) {
  return function styledTemplate(rules) {
    return function Component(props) {
      // remember that tagged template literals give us the string parts as an
      // array so for now we just pass the first element of the array which will
      // be the entire CSS rule because we aren't passing any variables.
      const className = css(rules[0]);
      return React.createElement(tag, { className, ...props });
    };
  };
}

😦 I know, that's a lot of functions returning functions. Let's walk through it. The styled function returns the styledTemplate function. The styledTemplate function is similar to our greet function from earlier. We call it as a tagged template literal. This then returns the react component which we can render. So with all of this in place we can do do the following.

const Header = styled("h1")`
  font-size: 24px;
  font-weight: 600;
`

<Header>This is a header</Header>

So this is finally starting to look like the styled-components API we wanted. But what about things like adapting styles based on component props? Let's say we wanted our Header component to change color based on a color prop as well as allowing the background-color to be customized with a bg prop. For that we need to revisit how we are treating the tagged template literal. Remember how our greet function was given a second array of all of the variables passed into the template literal? Well we can also pass functions into the template literal, which we can then call will our component props at render time. 🤯. Let's create a new function that will process the string literal parts and any functions we provide it into a single CSS rule.

function resolveRule(parts, args, props) {
  return parts.reduce((output, part, index) => {
    if (index === rules.length - 1) {
      return output + part;
    }
    return output + part + args[index](props);
  });
}

With this function we only have one thing left to do which is to update our styled function to make use of it.

function styled(tag) {
  return function styledTemplate(rules, ...args) {
    return function Component(props) {
      const resolved = resolveRule(rules, args, props);
      const className = css(resolved);
      return React.createElement(tag, { className, ...props });
    };
  };
}

And there we have it! Our very own CSS-in-JS library.

const Header = styled("h1")`
  font-size: 24px;
  font-weight: 600;
  color: ${(props) => props.color || "black"};
  background-color: ${(props) => props.bg || "transparent"};
`;

Build a react-router clone from scratch

Thomas Cullen — Wed, 10 Mar 2021 12:38:17 +0000

React router is a package that I use in almost all of my projects. Not too long
ago, Michael Jackson tweeted this. This made me curious as to how difficult it would be to rebuild react router from scratch.

Before we dig into this I want to clarify that if you need a router in your project you should just use react router. It has a lot more features, handles a lot more edge cases and is incredibly well tested. This is purely a learning exercise.

In this post we are going to build a simplified version of react-router that is based on the newer v6 API's.

At the heart of react router is another package called 'history'. This package is responsible for managing the router history. For this post we are only concerned about creating a router for the web and so we are going to bake this directly into our react components. The first thing we are going to need is a root Router component and a context for our other components to consume. Let's start with the context.

Our router is going to be much more simplified than react router in that we aren't going to provide support for location state, hashes and other cases that react router provides. Our router context is going to provide 2 keys; location and push:

location is simply a string of the current path.
push is a function which can be called to change the current path.

And with that we can create our basic router context.

const RouterContext = React.createContext({
  location: "",
  push: () => {},
});

This context is useless without rendering a provider. We are going to do that inside of our main Router component. The responsibility of this component is to provide information about the current route and provide ways to manipulate it. We are going to store the current location path in react state. This way when we update the location our component will re-render. We also need to provide the push function to our context which will simply update the browser location and update our location state. Finally we also listen for the window 'popstate' event to update our location when using the browser navigation buttons.

function Router({ children }) {
  const [location, setLocation] = React.useState(window.location.pathname);

  const handlePush = useCallback(
    (newLocation) => {
      window.history.pushState({}, "", newLocation);
      setLocation(newLocation);
    },
    []
  );

  const handleHashChange = useCallback(() => {
    setLocation(window.location.pathname);
  }, []);

  useEffect(() => {
    window.addEventListener("popstate", handleHashChange);
    return () => window.removeEventListener("popstate", handleHashChange);
  }, [handleHashChange]);

  const value = useMemo(() => {
    return { location, push: handlePush }
  }, [location, handlePush])

  return (
    <RouterContext.Provider value={value}>
      {children}
    </RouterContext.Provider>
  );
}

In order to test our component we are going to need a way to update the current route to check the correct components are rendering. Let's create a Link component for this. Our link component will simply take a to argument of the new path and call our push function from the router context when clicked.

function Link({ to, children }) {
  const { push } = React.useContext(RouterContext);

  function handleClick(e) {
    e.preventDefault();
    push(to);
  }

  return (
    <a href={to} onClick={handleClick}>
      {children}
    </a>
  );
}

Now that we have a way to navigate around, we need a way to actually render some routes! Let's create a Routes and Route component to handle this. Let's start with the Route component because all it needs to do is simply render the children we give it.

function Route({ children }) {
  return children;
}

Next we need our Routes component. Here we need to iterate through the route components and find one that matches the current location. We will also want to render the matched route inside of a route context, so that our route children can access any params that matched in the path. Let's start by creating the functions we need to match the routes. The first thing we need is a function that takes the path prop on a route and converts it into a regex that we can use to match against the current location.

function compilePath(path) {
  const keys = [];

  path = path.replace(/:(\w+)/g, (_, key) => {
    keys.push(key);
    return "([^\\/]+)";
  });

  const source = `^(${path})`;

  const regex = new RegExp(source, "i");
  return { regex, keys };
}

This will also give us an array of any keys that represet any params in the path pattern.

compilePath("/posts/:id");
// => { regex: /^(/posts/([^\/]+))/i, keys: ["id"] }

Next up we need a new function that will iterate through each child route and use the compilePath function to test if it matches the current location, while also extracing any matching params.

function matchRoutes(children, location) {
  const matches = [];

  React.Children.forEach(children, (route) => {
    const { regex, keys } = compilePath(route.props.path);
    const match = location.match(regex);

    if (match) {
      const params = match.slice(2);
      matches.push({
        route: route.props.children,
        params: keys.reduce((collection, param, index) => {
          collection[param] = params[index];
          return collection;
        }, {}),
      });
    }
  });

  return matches[0];
}

Finally we can create a new RouteContext and put together our Routes component. We'll pass the provided children into the matchRoutes function to find a matching route and render it inside of a provider for the route context.

const RouteContext = React.createContext({
  params: {},
});

function Routes({ children }) {
  const { location } = useContext(RouterContext);
  const match = useMemo(() => matchRoutes(children, location), [
    children,
    location,
  ]);

  const value = useMemo(() => {
    return { params: match.params }
  }, [match])

  // if no routes matched then render null
  if (!match) return null;

  return (
    <RouteContext.Provider value={value}>
      {match.route}
    </RouteContext.Provider>
  );
}

At this point we actually have a functioning router, however, we are missing a small but crucial piece. Every good router needs a way to extract parameters from the URL. Thanks to our RouteContext we can easily create a useParams hook that our routes can use to extract this.

function useParams() {
  return useContext(RouteContext).params;
}

And with all of that we have our own basic working version of react router!

function Products() {
  return (
    <>
      <h4>Example Products</h4>
      <ul>
        <li>
          <Link to="/products/1">Product One</Link>
        </li>
        <li>
          <Link to="/products/2">Product Two</Link>
        </li>
      </ul>
    </>
  );
}

function Product() {
  const { id } = useParams();
  return (
    <>
      <h4>Viewing product {id}</h4>
      <Link to="/">Back to all products</Link>
    </>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/products/:id">
          <Product />
        </Route>
        <Route path="/">
          <Products />
        </Route>
      </Routes>
    </Router>
  );
}

DEV Community: Thomas Cullen

Building a CSS-in-JS library from scratch

Further Reading

Build a react-router clone from scratch