real-world-css-libraries

v1.0.6

Published

18 days ago

Unminified, real-world, CSS files from open source projects.

0High
0Medium
0Low

thejaredwilcurt

real-world-css-libraries

Corpus of unminified, real-world, CSS files from open source projects.

For use in minification tests and tooling benchmarks.

To see how various CSS Minification Tools perform when minifying these files:

https://www.keithcirkel.co.uk/css-minify-tests/#real-world

Usage

npm i -D real-world-css-libraries

// Import the synchronous function
import getRealWorldCSS from 'real-world-css-libraries';

let libraries = [];
try {
  libraries = getRealWorldCSS();
} catch (error) {
  console.log('Failed to read the CSS files.');
  console.log(error);
}

console.log(libraries);
/*
 * [
 *   {
 *     fileName: '960.gs-v0.0.0.css',
 *     name: '960.gs',
 *     version: 'v0.0.0',
 *     license: 'GPL-3.0 or MIT',
 *     source: '/*\n  960 Grid System ~ Core CSS.\n  Learn more ~ http://9...',
 *     size: 9989,
 *     url: 'https://github.com/nathansmith/960-Grid-System/blob/master/code/css/960.css'
 *   },
 *   {
 *     fileName: 'animate-v4.1.1.css',
 *     name: 'Animate',
 *     version: 'v4.1.1',
 *     license: 'Hippocratic-2.1',
 *     source: '@charset "UTF-8";\n/*!\n * animate.css - https://animate.s...',
 *     size: 95377,
 *     url: 'https://github.com/animate-css/animate.css/blob/main/animate.css'
 *   },
 *   ...
 * ]
 */

// Example: If you only wanted the names of libraries that use MIT License:
const namesOfLibrariesCompatibleWithMITLicense = libraries
  .filter((library) => {
    return library.license.includes('MIT');
  })
  .map((library) => {
    return library.name;
  });
console.log(namesOfLibrariesCompatibleWithMITLicense);
// ['960.gs', '98', 'AdminLTE', ...]

Note: The size is from the original file size on disk. This will be different from source.length. If you are comparing the output of a minifier, for example, by using output.length of it as a string, then to get a more accurate comparison for percentage of size reduction, you should use output.length / source.length instead of output.length / size. Counting the number of characters is different than the actual filesize, because not all characters are 1 byte.

Non-npm usage

If you are using a different programming language/package management system and can't npm i this library, you have some other options:

Download via git
- git clone https://github.com/TheJaredWilcurt/real-world-css-libraries.git
- git clone [email protected]:TheJaredWilcurt/real-world-css-libraries.git
HTTPS download via UNPKG:
- https://app.unpkg.com/real-world-css-libraries
Manually download repo as a ZIP file:
- https://github.com/TheJaredWilcurt/real-world-css-libraries/archive/refs/heads/main.zip

Then you can then use the metadata.json file and loop over the files in the libs folder yourself, for your usage.

Adding a library

Ensure it is part of a public repo that has an open source license
Create a file in the libs folder with the name lowercased and hyphenated, then a -v followed by the version number (if the source is not versioned, use 0.0.0), then .css
The first line of the file must follow this pattern for automation to work:
- [Slash][Asterisk][Space][URL_TO_SOURCE][Space][Asterisk][Slash][New line]
- Example:
  - /* https://github.com/user/repo/tree/main/file.css */
The last line of the CSS file must be a /n (new line character).
If the source does not use MIT license, update the nameLicenseMap in index.js.
Run npm t, this will preview the output and update the list of libraries in the README.md
- If the new library's name needs correcting (like Mycssrepo should be My CSS Repo), update nameMap in index.js and run npm t again.

License

This repo and all original work within is licensed under MIT. However, the files in the libs folder have their own licenses, which can be seen below. I've modified each file to include a single line comment at the top with a link to the original source file, and where needed, ensured there is a single empty return at the end of each file. For simplicity, each of these changes is re-licensed using the exact same original license that was associated with that library. So the (slightly) modified copy of FF-Ultima in /libs/ff-ultima-v4.3.0.css, for example, retains it's original MPL-2.0 license. Effectively all the files in the /lib folder have a "pass-through" license back to their original in the sense that my modifications are intentionally minor and inconsequential and therefor should not require a re-licensing of them, but if in a legal sense these minor changes require re-licensing, they are intentionally re-licensed with a matching license of the original. No other changes were made to these files, as I want to keep them representative to what exists in the real world, bugs and all.

Skipped Libraries

These libraries were explicitly not included because they lack a compatible license. Issues have been created for them to add a license, if they do in the future, they can be included in this repo.

https://github.com/cyanharlow/purecss-francine/issues/63
https://github.com/datguypiko/Firefox-Mod-Blur/issues/238
https://github.com/pattle/simpsons-in-css/issues/3
https://github.com/soulwire/Makisu/pull/23
https://github.com/jackyzha0/sunlit/issues/4
https://github.com/replete/obsidian-minimal-theme-css-snippets/issues/13

Libraries included:

There are 220 files totaling 41.61MB of unminified CSS.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

real-world-css-libraries

Usage

Non-npm usage

Adding a library

License

Skipped Libraries

Libraries included: