Skip to content

Create logic to publish two versions of @webref/css #1572

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 10, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .github/workflows/curate.yml
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,11 @@ jobs:
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

- name: Prepare a pre-release PR for the @webref/css6 package if needed
run: node tools/prepare-release.js css6
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

- name: Prepare a pre-release PR for the @webref/elements package if needed
run: node tools/prepare-release.js elements
env:
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ config.json
node_modules/
packages/css/*.json
!packages/css/package.json
packages/css6/*.json
!packages/css6/package.json
packages/elements/*.json
!packages/elements/package.json
packages/events/*.json
Expand Down
16 changes: 14 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ The `curated` branch contains **curated extracts**. Curated extracts are generat

Additionally, subsets of the curated content get manually reviewed and published as **NPM [packages](https://github.com/w3c/webref/tree/main/packages)** on a weekly basis:
- [`@webref/idl`](https://www.npmjs.com/package/@webref/idl) contains a [curated](packages/idl#guarantees) version of the [`ed/idl`](ed/idl) folder.
- [`@webref/css`](https://www.npmjs.com/package/@webref/css) contains a [curated](packages/css#guarantees) version of the [`ed/css`](ed/css) folder.
- [`@webref/css`](https://www.npmjs.com/package/@webref/css) contains a [consolidated and curated](packages/css#guarantees) version of the [`ed/css`](ed/css) folder.
- [`@webref/elements`](https://www.npmjs.com/package/@webref/elements) contains a [curated](packages/elements#guarantees) version of the [`ed/elements`](ed/elements) folder.
- [`@webref/events`](https://www.npmjs.com/package/@webref/events) contains a [curated](packages/events#guarantees) version of the [`ed/events`](ed/events) folder.
- [`@webref/events`](https://www.npmjs.com/package/@webref/events) contains a [consolidated and curated](packages/events#guarantees) version of the [`ed/events`](ed/events) folder.

**Important:** The curated extracts only contain data for specifications that are in [good standing](https://github.com/w3c/browser-specs/#standing) (to keep the number of manually-maintained patches minimal and manageable). The NPM packages only contain curated extracts of specifications that are in good standing and that [target web browsers](https://github.com/w3c/browser-specs/#categories).

Expand Down Expand Up @@ -69,6 +69,16 @@ Data curation brings the following guarantees.

### CSS extracts

**Important:** Starting with `@webref/css` version 7, the package contains the consolidated `ed/css.json` file, and no longer contains CSS extracts per spec. See the [changelog](packages/css/CHANGELOG.md) for "How to upgrade" considerations.

The consolidated `ed/css.json` file, released in the `@webref/css` package, comes with the following guarantees:

- All syntax values (the `value` keys) can be parsed by the version of [CSSTree](https://github.com/csstree/csstree) set in `peerDependencies` in `package.json`.
- Feature names (the `name` keys) are unique per type provided that the `for` key is also taken into account for functions and types.
- All features have an `href` key that targets the CSS spec that defines the feature. When the feature is extended across CSS specs, this URL targets the base definition.

The consolidated file is generated from curated extracts in the `ed/css` folder. These extracts, released in the `@webref/css` package until version 7, come with the following guarantees:

- All values in CSS files can be parsed by the version of [CSSTree](https://github.com/csstree/csstree) used in `peerDependencies` in `package.json`.
- No duplicate definitions of entries in CSS files provided that CSS extracts of [delta specs](https://github.com/w3c/browser-specs/#seriescomposition) are not taken into account (such extracts end with `-n.json`, where `n` is a level number). The term "entries" includes CSS properties, at-rules, selectors, types and functions. Please note that specs may still extend entries defined elsewhere (to define new values for CSS properties, or new selectors for at-rules).
- CSS extracts contain a base definition of all CSS properties that get extended by other CSS property definitions (those for which `newValues` is set).
Expand All @@ -81,6 +91,8 @@ Data curation brings the following guarantees.

### Events extracts

The consolidated `ed/events.json` file, released in the `@webref/events` package, comes with the following guarantees:

- All events have a `type` attribute that match the name of the event
- All events have a `interface` attribute to describe the interface used by the Event. The Web IDL interface exists in the latest version of the [`@webref/idl` package](https://www.npmjs.com/package/@webref/idl) at the time the `@webref/events` package is released, and represents an actual interface (i.e. not a mixin).
- All events have a `targets` attribute with a non-empty list of target interfaces on which the event may fire. All Web IDL interfaces in the list exist in the latest version of the [`@webref/idl` package](https://www.npmjs.com/package/@webref/idl) at the time the `@webref/events` package is released, and represent an actual interface (i.e. not a mixin).
Expand Down
18 changes: 18 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@octokit/plugin-throttling": "^11.0.1",
"@octokit/rest": "22.0.0",
"@webref/css": "file:packages/css",
"@webref/css6": "file:packages/css6",
"@webref/elements": "file:packages/elements",
"@webref/events": "file:packages/events",
"@webref/idl": "file:packages/idl",
Expand Down
17 changes: 17 additions & 0 deletions packages/css/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,23 @@ Webref adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html),
applied to data. A new major version is released whenever a breaking change is
made to the data structure.

## v7.0.0 - 2025-06

CSS extracts are now consolidated into a single file.

### Breaking changes

- A single consolidated `css.json` file replaces CSS extracts per spec.

### How to upgrade

In version 6, `listAll()` resolved with an object where the keys were spec shortnames, and the values mostly matched the structure of the consolidated object that the function now returns. On top of the consolidation itself, main differences are:
- Functions and types were merged in a `values` category in version 6, they now appear in separate `functions` and `types` categories.
- Functions and types that were scoped to another CSS feature appeared nested under that CSS feature in version 6. They now appear directly under `functions` and `types` with a `for` key that contains the name of the scoping feature.
- The shortname of the spec (or specs) that defines a feature is no longer readily available (but note the `href` key targets the defining spec). If you need the specs' shortnames, please [raise an issue](https://github.com/w3c/webref/issues) to describe your use case.
- The consolidation removes duplicates, merging extended definitions into a single feature. The definition from the latest spec level is used when a feature is defined in more than one level. If you need the definition from earlier levels, please [raise an issue](https://github.com/w3c/webref/issues) to describe your needs!
- Some of the possible values that a CSS feature could take appeared nested under that feature definition in a `values` key in version 6. Such values are no longer reported in the new version: they were confusing in any case because they did not cover the whole range of values that a feature could take, and could contain values that were not atomic keyword values. Values could be re-introduced when CSS specs are more systematic about them. In the meantime, you will need to parse the feature's syntax (the `value` key) to extract keyword values.


## v6.0.0 - 2022-11-28

Expand Down
59 changes: 37 additions & 22 deletions packages/css/README.md
Original file line number Diff line number Diff line change
@@ -1,46 +1,61 @@
# CSS definitions of the web platform

This package contains CSS property definitions scraped from the latest versions of web platform specifications in [webref](https://github.com/w3c/webref), with fixes applied to ensure ([almost](#guarantees)) all CSS value definitions can be parsed with [CSSTree](https://github.com/csstree/csstree).
This package contains a consolidated list of CSS features defined across specs, scraped from the latest versions of web platform specifications in [webref](https://github.com/w3c/webref). Fixes are applied to ensure that [guarantees](#guarantees) hold, including the ability to parse syntaxes associated with CSS features with [CSSTree](https://github.com/csstree/csstree).

**Important:** If you're migrating from version 6, see the [changelog](CHANGELOG.md) for "How to upgrade" considerations.

# 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:
The async `listAll()` method resolves with an object that contains lists of features grouped by feature type: `atrules`, `functions`, `properties`, `selectors` and `types`. Example:

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

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

for (const feature of functions) {
// do something with the object that describes the CSS function
}
```

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](https://github.com/csstree/csstree/blob/master/docs/definition-syntax.md#value-definition-syntax). Example:
Each CSS feature is described by:
- a `name` key that contains the name of the feature
- an `href` key that contains the URL (with a fragment) of the CSS spec that defines the feature

Many CSS features also have a `value` key that describes the syntax of the feature, as defined in the spec. This syntax can be parsed with the [CSSTree Value Definition Syntax parser](https://github.com/csstree/csstree/blob/master/docs/definition-syntax.md#value-definition-syntax). Example:

```js
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
}
}
const { properties } = await css.listAll();
for (const property of properties) {
if (!property.value) {
continue;
}
const ast = definitionSyntax.parse(property.value);
// do something with the abstract syntax tree
}
```

Additional keys may be set depending on the type of the CSS feature. For example:

- At-rules have a `descriptors` key that contains the list of descriptors defined for the given at-rule.
- Functions and types that are scoped to a property or other feature have a `for` key that contains the name of the scoping property or other feature.
- Properties have a `styleDeclaration` key that contains the list of IDL attribute names that the property generates. A number of other keys may be set to describe the property's initial value, animation type and other parameters.

Additional notes:
- Type names are enclosed in `<>`. For example: `<frequency-percentage>`.
- When a feature is defined across different levels in the same spec series, the definition from the latest level is used.
- When a property is extended with new values in different specs, `href` links to the base definition and `value` is the union (using `|`) of the syntaxes of the base and extended definitions.
- When new descriptors are defined for an at-rule in different specs, `descriptors` contains the merged list of known descriptors.
- When specs define the syntax of an at-rule in terms of `<declaration-list>` or `<declaration-rule-list>`, the `value` key contains an "expanded" syntax that leverages the syntax of the at-rule's descriptors.

# Guarantees

The following guarantees are provided by this package:
- All values in CSS files can be parsed by the version of [CSSTree](https://github.com/csstree/csstree) used in `peerDependencies` in `package.json`.
- No duplicate definitions of entries in CSS files provided that CSS extracts of [delta specs](https://github.com/w3c/browser-specs/#seriescomposition) are not taken into account (such extracts end with `-n.json`, where `n` is a level number). The term "entries" includes CSS properties, at-rules, selectors, types and functions. Please note that specs may still extend entries defined elsewhere (to define new values for CSS properties, or new selectors for at-rules).
- 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](https://github.com/w3c/browser-specs/#seriescomposition) that completely override a definition in a previous level.
- All syntax values (the `value` keys) can be parsed by the version of [CSSTree](https://github.com/csstree/csstree) set in `peerDependencies` in `package.json`.
- Feature names (the `name` keys) are unique per type provided that the `for` key is also taken into account for functions and types.
- All features have an `href` key that targets the CSS spec that defines the feature. When the feature is extended across CSS specs, this URL targets the base definition.

*Note:* there is no guarantee that functions, properties and types referenced by other constructs actually exist. The grammar is known to be incomplete.
11 changes: 2 additions & 9 deletions packages/css/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,8 @@ const fs = require('fs').promises;
const path = require('path');

async function listAll({folder = __dirname} = {}) {
const all = {};
const files = await fs.readdir(folder);
for (const f of files) {
if (f.endsWith('.json') && f !== 'package.json') {
const text = await fs.readFile(path.join(folder, f), 'utf8');
all[path.basename(f, '.json')] = JSON.parse(text);
}
}
return all;
const json = await fs.readFile(path.join(folder, 'css.json'), 'utf8');
return JSON.parse(json);
}

module.exports = {listAll};
2 changes: 1 addition & 1 deletion packages/css/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@webref/css",
"description": "CSS definitions of the web platform",
"version": "6.23.1",
"version": "7.0.0-alpha",
"repository": {
"type": "git",
"url": "https://github.com/w3c/webref.git"
Expand Down
66 changes: 66 additions & 0 deletions packages/css6/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
# Changelog

This file documents breaking changes introduced in major releases of the
`@webref/css` NPM package.

Webref adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html),
applied to data. A new major version is released whenever a breaking change is
made to the data structure.


## v6.0.0 - 2022-11-28

Major re-write of CSS extracts listed in the package, following the release
of [Reffy v11.0.0](https://github.com/w3c/reffy/blob/main/CHANGELOG.md#v1100---2022-11-28)

### Breaking changes

- Arrays are now used throughout instead of indexed objects.
- Function names are no longer enclosed in `<` and `>` because they are not
defined in specs with these characters (as opposed to types). Beware though,
references to functions in value syntax do use enclosing `<` and `>` characters.
- The property `valuespaces` at the root level is now named `values`. An array
is used there as well. The `values` property lists both `function` and `type`
definitions that are not namespaced to anything in particular (it used to also
contain namespaced definitions).

### Added

- Selectors are now reported under a `selectors` property at the root level.
- Possible values that some definition may take are now reported under a
`values` property directly within the definition.
- Functions and types that are namespaced to some other definition are included
in the list of `values` of that definition.
- Anomalies detected in the spec are now reported under a `warnings` property at
the root of the extract. Four types of anomalies are reported:
1. **Missing definition**: when a production rule was found but when the spec
does not include a corresponding `<dfn>` (or when that `<dfn>` does not have a
`data-dfn-type` attribute that identifies a CSS construct)
2. **Duplicate definition**: when the spec defines the same term twice.
3. **Unmergeable definition**: when the spec defines the same property twice
and both definitions cannot be merged.
4. **Dangling value**: when the spec defines a CSS "value" definition
(`value`, `function` or `type`) for something and that something cannot be
found in the spec
- To distinguish between `function`, `type` and `value` definitions listed in a
`values` property, definitions that appear in a `values` property have a `type`
property.

### Additional notes

- Only namespaced values associated with a definition are listed under its
`values` property. Non-namespaced values are not. For instance, `<quote>` is not
listed as a value of the `<content-list>` type, even though its value syntax
references it. This is to avoid duplicating constructs in the extracts.
- Values are only listed under the deepest definition to which they apply. For
instance, `open-quote` is only listed as a value of `<quote>` but neither as a
value of the `<content-list>` type that references `<quote>` nor as a value of
the `content` property that references `<content-list>`. This is also to avoid
duplicating constructs in the extracts.
- Some of the extracts contain things that may look weird at first, but that is
"by design". For instance, [CSS Will
change](https://drafts.csswg.org/css-will-change-1/) defines a
[`<custom-ident>`](https://drafts.csswg.org/css-will-change-1/#valdef-will-change-custom-ident)
`value` construct whose actual value is the `<custom-ident>` `type` construct
defined in CSS Values. Having both a namespaced `value` and a non-namespaced
`<type>` is somewhat common in CSS specs.
Loading