mirror of
https://github.com/status-im/consul.git
synced 2025-01-09 21:35:52 +00:00
9eab715149
* ui: Move all our icons to use CSS custom properties The good thing about SASS vars is, if you don't use them they get removed from the final build. Whereas with CSS we have no tree-shaking to get rid of unused CSS custom properties. We can mostly work around this and for some things like colors its no big deal if we have some hex-codes in the build that we don't use as hex-codes are relatively small. We've been slowly but surely moving all of our colors (and other things) to use CSS custom properties instead of SASS vars now that we have them available. This commit makes use of the 'tree-shaking' abilities of @extend to ensure that we only compile in the icons that we use. This commit is mostly churn-less as we already use @extend for the majority of our icons, so generally there is zero change here for working on the UI, but I did spot one single place where we were using SASS vars instead of @extend. This now uses the new form (second commit) Interestingly this reduces our CSS payload by ~2kb to ~53kb (around 25kb of that is these icons)
Consul UI Monorepo
This monorepo contains multiple projects, the UI for Consul and addons and packages used by the UI.
This top-level repository provides limited common tasks, such as installation and commit assistance. However, most tasks must be executed from within a subproject, e.g. running or testing.
Table of Contents generated with DocToc
Prerequisites
You will need the following things properly installed on your computer.
- Git
- Node.js
- Yarn installed globally
- Google Chrome
- Firefox
Installation
git clone https://github.com/hashicorp/consul.gitthis repositorycd uiyarn
Yarn Commands
List of available project commands. yarn run <command-name>
| Command | Description |
|---|---|
| doc:toc | Re-builds the ToC for this README. |
| compliance:licenses | Checks that all dependencies have OSS-compatible licenses. |
Contributing
Building ToC
To autogenerate a ToC (table of contents) for this README,
run yarn doc:toc. Please update the ToC whenever editing the structure
of README.