Reduce size of Tachyons build file

sage
1

Hi, I take it that the below result means my main.css file is getting somewhat large,
DONE Compiled successfully in 7428ms 21:33:04

                Asset     Size  Chunks                    Chunk Names
      scripts/main.js   7.8 kB       0  [emitted]         main
scripts/customizer.js  3.25 kB       1  [emitted]         customizer
      styles/main.css   300 kB       0  [emitted]  [big]  main
  scripts/main.js.map   8.4 kB       0  [emitted]         main
  styles/main.css.map  1.58 MB       0  [emitted]         main

scripts/customizer.js.map 3.07 kB 1 [emitted] customizer
Done in 9.97s.
[anton@vhost1 sage9]$

Using Tachyons sass which I probably won’t need the whole of. Is there a recommended way to use selected sass files from there or is there a recommended list of best items to use to keep the file size down, for anyone whos has used Tachyons ? Thanks

2

I’m presuming this is a yarn build process, not a yarn build:production, given the presence of .map files.

Without seeing your actual code my presumption is that you’re @extending a lot of classes, which can create bloat if used extensively.

The real culprit here is almost definitely your 1.58MB main.css.map file, which isn’t created when you run yarn build:production, so if that’s the file that’s causing you concern, rest assured it isn’t included in production builds.

1 Like
3

Hi, yes Yarn Build, I just imported the whole sass file into main.scss so it has everything in it which as I’m not building the next Twitter, I probably won’t need! Probably just need to import necessary parts I suppose.

4

Tachyons is better used (and thought of) as a library (or toolkit) than a framework. Because of this, I always use UnCSS with it to remove all the unused styles. Alternatively, like you said, only importing the modules you need is also a good idea.

Personally, I usually choose “none” for my CSS framework when installing Sage and then install Tachyons manually, not as a dependency, as I think it is much better when you use it as a base design system that you can modify. This way you define your own design system (i.e. type scale, colors, spacing scale, etc.) when you first add it your project.

One day, I would love to integrate the in-dev Tachyons generator project with Sage.

1 Like