1. @webref/css
CSS definitions of the web platform
@webref/css
Package: @webref/css
Created by: w3c
Last modified: Fri, 03 May 2024 06:12:39 GMT
Version: 6.12.10
License: MIT
Downloads: 7,830
Repository: https://github.com/w3c/webref

Install

npm install @webref/css
yarn add @webref/css

CSS definitions of the web platform

This package contains CSS property definitions scraped from the latest versions of web platform specifications in webref, with fixes applied to ensure (almost) all CSS value definitions can be parsed with CSSTree.

API

The async listAll() method resolves with an object where the keys are spec shortnames, and the values are the data for that spec. Example:

 const css = require('@webref/css');

const parsedFiles = await css.listAll();
for (const [shortname, data] of Object.entries(parsedFiles)) {
  // do something with the json object
}

CSS fragments that appear in the objects, in other words the contents of the properties[].value, properties[].newValues, atrules[].value, atrules[].descriptors[].value, selectors[].value and values[].value properties can be parsed with the CSSTree Value Definition Syntax parser. Example:

 const css = require('@webref/css');
const { definitionSyntax } = require('css-tree');

const parsedFiles = await css.listAll();
for (const [shortname, data] of Object.entries(parsedFiles)) {
  for (const property of data.properties) {
    if (property.value) {
      try {
        const ast = definitionSyntax.parse(property.value);
        // do something with the ast
      }
      catch {
        // one of the few value definitions that cannot yet be parsed by CSSTree
      }
    }
  }
}

Guarantees

The following guarantees are provided by this package:

  • All values in CSS files can be parsed by the version of CSSTree used in peerDependencies in package.json.
  • No duplicate definitions of CSS properties provided that CSS extracts of delta specs are not taken into account (such extracts end with -n.json, where n is a level number).
  • CSS extracts contain a base definition of all CSS properties that get extended by other CSS property definitions (those for which newValues is set).
  • All entries in CSS files that do not extend a base definition link back to their actual definition in the spec. In other words, all entries under properties[], properties[].values[], selectors[], atrules[] and values[] have an href key that contains an absolute URL with fragment, except properties that that have a newValues key, at-rules that neither have a prose nor a value key, and definitions of a delta spec that completely override a definition in a previous level.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code