Refetch CSS bodies missing from the HAR#150
Merged
Merged
Conversation
Custom properties are resolved by stylelint's no-unknown-custom-properties rule only against definitions present in the linted CSS. When a stylesheet that defines custom properties is served from cache, returns 304 Not Modified, or is recorded with an empty body, its HAR entry has no content and was silently dropped. Every var() referencing those properties in the stylesheets that *were* captured was then falsely reported as "Unknown custom property". Detect bodyless CSS entries (by mime type or .css URL) and refetch their content over HTTP before linting. Failures (network error, timeout, non-OK, empty body) are ignored so a single unreachable file never fails the test.
The refetch logic uses fetch, AbortController, setTimeout and clearTimeout. The flat eslint config lists allowed globals explicitly, so add these four to stop no-undef from failing CI lint.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Test 27 (
TEST_LINT_CSS) concatenates all CSS from the HAR and lints it with stylelint. Theno-unknown-custom-propertiesrule resolvesvar(--x)only against custom-property definitions present in the linted CSS.When a stylesheet that defines custom properties is served from cache, returns
304 Not Modified, or is recorded with an empty body, its HAR entry has noresponse.content.text/sizeand is dropped inharAnalyzer.js. Everyvar()referencing those properties in the stylesheets that were captured is then falsely reported as "Unknown custom property" →CSS, Disallow unknown custom properties (fel).Surfaced as a false positive on https://tillvaxtverket.se:
filterable-list.css/dark-mode.cssconsume--lp-*design tokens defined invariables.css; when the defining files come back bodyless, all those references look undefined.Fix
Detect bodyless CSS entries (by mime type or
.cssURL) and refetch their content over HTTP before linting. Refetches run in parallel with a 10s timeout each; failures (network error, timeout, non-OK, empty body) are ignored so a single unreachable file never fails the whole test.Verification
Built a HAR from the real tillvaxtverket.se CSS with the definition files served bodyless (
304/ size0) and ran the actualHarAnalyzer:no-unknown-custom-propertiesissuesWhen every stylesheet has a body, output is unchanged.
Known limitation
Custom properties defined purely at runtime via JS (
el.style.setProperty('--x', …)) still can't be resolved by static linting — out of scope here.