@shapeshift-labs/frontier-lang-css 0.1.4 → 0.1.5

package/README.md

@@ -232,11 +232,11 @@ const merge = safeMergeCssSource({
 });
 ```
 
-`sourceMap.mappings` links emitted rule blocks back to Frontier Lang semantic node ids. `createCssSemanticMergeEvidence` records selectors, specificity, declarations, custom properties, cascade keys, CSS Modules exports, ICSS edges, scoped cascade graph proof hashes, source spans, stable hashes, and fail-closed proof gaps for cascade/render-sensitive CSS surfaces. `safeMergeCssSource` admits independent declaration edits by cascade key, including existing scoped `@media` / `@supports` / `@container` / `@layer` declarations when a scoped cascade graph proof hash is supplied, and for `.module.css` files it classifies exported local classes, `composes`, and ICSS import/export records as explicit merge contracts.
+`sourceMap.mappings` links emitted rule blocks back to Frontier Lang semantic node ids. `createCssSemanticMergeEvidence` records selectors, specificity, declarations, custom properties, cascade keys, statement-form at-rules, CSS Modules exports, ICSS edges, scoped cascade graph proof hashes, source spans, stable hashes, and fail-closed proof gaps for cascade/render-sensitive CSS surfaces. `safeMergeCssSource` admits independent declaration edits by cascade key, including existing scoped `@media` / `@supports` / `@container` / `@layer` declarations when a scoped cascade graph proof hash is supplied, preserves unchanged statement-form at-rules such as `@layer reset, components;`, and for `.module.css` files it classifies exported local classes, `composes`, and ICSS import/export records as explicit merge contracts.
 
 ## Support Boundary
 
-- Ready evidence: style rules, selectors, specificity, declarations, custom properties, CSS Modules local exports, generated class-name map coverage, JS/TS use-site graph hashes, composition graph hashes, ICSS graph hashes, scoped cascade graph hashes, source spans, stable hashes.
-- Safe merge: independent declarations with non-overlapping cascade keys; existing scoped declaration edits when scoped cascade graph proof is supplied; explicit CSS Modules export additions/deletions when generated class-name and JS/TS use-site graph proof is supplied; composition edits when composition graph proof is supplied; ICSS edits when ICSS graph proof is supplied. Output is a canonical CSS render and not a byte/trivia-preserving claim.
-- Review-only gaps: incomplete generated class-name maps, unproved CSS Modules use-site graphs, unproved composition or ICSS graphs, shorthands without longhand expansion, unproved or structurally changed scoped cascade under `@media` / `@supports` / `@container` / `@layer`, `@keyframes`, `@font-face`, `@page`, browser layout and render equivalence.
+- Ready evidence: style rules, selectors, specificity, declarations, custom properties, statement-form at-rules, CSS Modules local exports, generated class-name map coverage, JS/TS use-site graph hashes, composition graph hashes, ICSS graph hashes, scoped cascade graph hashes, source spans, stable hashes.
+- Safe merge: independent declarations with non-overlapping cascade keys; unchanged statement-form at-rules preserved in canonical output; existing scoped declaration edits when scoped cascade graph proof is supplied; explicit CSS Modules export additions/deletions when generated class-name and JS/TS use-site graph proof is supplied; composition edits when composition graph proof is supplied; ICSS edits when ICSS graph proof is supplied. Output is a canonical CSS render and not a byte/trivia-preserving claim.
+- Review-only gaps: incomplete generated class-name maps, unproved CSS Modules use-site graphs, unproved composition or ICSS graphs, shorthands without longhand expansion, statement-form at-rule order/condition changes, one-sided or structurally changed scoped cascade under `@media` / `@supports` / `@container` / `@layer`, `@keyframes`, `@font-face`, `@page`, browser layout and render equivalence.
 - Claims: `autoMergeClaim`, `semanticEquivalenceClaim`, `browserCascadeEquivalenceClaim`, and `browserRenderEquivalenceClaim` remain false.

package/dist/index.d.ts

@@ -125,6 +125,7 @@ export interface CssSemanticRecord {
   readonly atRuleName?: string;
   readonly conditionText?: string;
   readonly scopeKey?: string;
+  readonly statementText?: string;
   readonly scopedCascadeGraphHash?: string;
   readonly sourceSpan: CssSourceSpan;
   readonly sourceHash: string;

package/dist/index.js

@@ -114,6 +114,7 @@ export function safeMergeCssSource(input = {}) {
 
 function parseCssBlocks(sourceText, start, end, scopes, lineStarts, sourceHash, options) {
   const records = [];
+  const blockRanges = [];
   let index = start;
   while (index < end) {
     const open = sourceText.indexOf('{', index);
@@ -121,6 +122,7 @@ function parseCssBlocks(sourceText, start, end, scopes, lineStarts, sourceHash,
     const close = matchingBrace(sourceText, open, end);
     if (close < 0) break;
     const preludeStart = previousBoundary(sourceText, index, open);
+    blockRanges.push([preludeStart, close + 1]);
     const prelude = sourceText.slice(preludeStart, open).replace(/\/\*[\s\S]*?\*\//g, '').trim();
     const body = sourceText.slice(open + 1, close);
     if (prelude.startsWith('@')) {
@@ -132,7 +134,8 @@ function parseCssBlocks(sourceText, start, end, scopes, lineStarts, sourceHash,
     }
     index = close + 1;
   }
-  return records;
+  records.push(...parseAtRuleStatements(sourceText, start, end, scopes, lineStarts, sourceHash, options, blockRanges));
+  return records.sort((left, right) => left.sourceSpan.startOffset - right.sourceSpan.startOffset);
 }
 
 function cssRuleRecord(prelude, body, start, end, lineStarts, sourceHash, scopes, options) {
@@ -184,6 +187,47 @@ function parseAtRule(prelude, start, end, lineStarts, sourceHash, scopes, option
   });
 }
 
+function parseAtRuleStatements(sourceText, start, end, scopes, lineStarts, sourceHash, options, blockRanges) {
+  const records = [];
+  let index = start;
+  while (index < end) {
+    const semicolon = sourceText.indexOf(';', index);
+    if (semicolon < 0 || semicolon >= end) break;
+    const range = blockRanges.find(([rangeStart, rangeEnd]) => semicolon >= rangeStart && semicolon < rangeEnd);
+    if (range) {
+      index = range[1];
+      continue;
+    }
+    const statementStart = previousBoundary(sourceText, index, semicolon);
+    const statementText = sourceText.slice(statementStart, semicolon + 1).replace(/\/\*[\s\S]*?\*\//g, '').trim();
+    if (statementText.startsWith('@') && !statementText.includes('{')) records.push(parseAtRuleStatement(statementText, statementStart, semicolon + 1, lineStarts, sourceHash, scopes, options));
+    index = semicolon + 1;
+  }
+  return records;
+}
+
+function parseAtRuleStatement(statementText, start, end, lineStarts, sourceHash, scopes, options) {
+  const body = statementText.replace(/;$/, '').trim();
+  const match = /^@([A-Za-z-]+)\s*([\s\S]*)$/.exec(body);
+  const atRuleName = match?.[1]?.toLowerCase() ?? 'unknown';
+  const conditionText = match?.[2]?.trim() ?? '';
+  const proofGaps = [];
+  if (atRuleName === 'layer') proofGaps.push(proofGap('css-layer-order-statement-unsupported', 'CSS @layer statement order requires cascade order evidence.'));
+  else proofGaps.push(proofGap(`css-${atRuleName}-statement-equivalence-unproved`, `CSS @${atRuleName} statement semantics require host evidence.`));
+  return compactRecord({
+    kind: 'at-rule-statement',
+    atRuleName,
+    conditionText,
+    statementText,
+    scopes,
+    scopedCascadeGraphHash: ScopeAtRules.has(atRuleName) ? options.scopedCascadeGraphHash : undefined,
+    sourceSpan: sourceSpan(start, end, lineStarts),
+    sourceHash,
+    atRuleHash: hashSemanticValue({ kind: 'frontier.lang.css.atRuleStatement.v1', atRuleName, conditionText, scopes, statementText }),
+    proofGaps
+  });
+}
+
 function parseDeclarations(body) {
   return body
     .replace(/\/\*[\s\S]*?\*\//g, '')
@@ -256,7 +300,7 @@ function positionAt(offset, lineStarts) {
 
 function sourceRef(node, extra = {}) { return { semanticNodeId: node.id, semanticNodeKind: node.kind, semanticNodeName: node.name, ...extra }; }
 function proofGap(code, summary) { return { code, status: 'not-claimed', summary, failClosed: true, semanticEquivalenceClaim: false }; }
-function hashableCssRecord(record) { return { kind: record.kind, selectors: record.selectors, specificity: record.specificity, scopes: record.scopes, atRuleName: record.atRuleName, conditionText: record.conditionText, declarations: record.declarations?.map((item) => ({ property: item.property, value: item.value, important: item.important })), proofGaps: record.proofGaps?.map((gap) => gap.code) }; }
+function hashableCssRecord(record) { return { kind: record.kind, selectors: record.selectors, specificity: record.specificity, scopes: record.scopes, atRuleName: record.atRuleName, conditionText: record.conditionText, statementText: record.statementText, declarations: record.declarations?.map((item) => ({ property: item.property, value: item.value, important: item.important })), proofGaps: record.proofGaps?.map((gap) => gap.code) }; }
 function computeLineStarts(text) { const starts = [0]; for (let index = 0; index < text.length; index += 1) if (text[index] === '\n') starts.push(index + 1); return starts; }
 function cssIdentifier(value) { return String(value ?? 'unknown').replace(/[^A-Za-z0-9_-]/g, '-').replace(/^-+/, '') || 'unknown'; }
 function cssString(value) { return String(value ?? '').replace(/\\/g, '\\\\').replace(/"/g, '\\"'); }

package/dist/semantic-merge-css-modules.js

@@ -150,7 +150,7 @@ function unsupportedSourceShapeChanges(baseSheet, currentSheet, declarationChang
     if (changedDeclarationRuleKeys.has(before?.ruleKey) || changedDeclarationRuleKeys.has(after?.ruleKey)) return [];
     return [{
       side,
-      reasonCode: 'css-source-shape-unsupported',
+      reasonCode: sourceShapeChangeReason(before, after),
       shapeKey: key,
       before: sourceShapeDetails(before),
       after: sourceShapeDetails(after)
@@ -181,6 +181,19 @@ function sourceShapeIndex(sheet, hash) {
         atRuleName: record.atRuleName,
         conditionText: record.conditionText,
         representedByDeclarations: false,
+        unsupportedReasonCode: atRuleUnsupportedReasonCode(record),
+        hash: record.atRuleHash
+      });
+    }
+    if (record.kind === 'at-rule-statement') {
+      const shapeKey = `at-rule-statement:${[...(record.scopes ?? []), record.atRuleName, record.conditionText].join('::')}`;
+      result.set(shapeKey, {
+        kind: 'at-rule-statement',
+        atRuleName: record.atRuleName,
+        conditionText: record.conditionText,
+        statementText: record.statementText,
+        representedByDeclarations: false,
+        unsupportedReasonCode: atRuleStatementUnsupportedReasonCode(record),
         hash: record.atRuleHash
       });
     }
@@ -195,7 +208,15 @@ function conflict(id, sourcePath, code, reasonCode, details = {}) {
 
 function sameContractChange(left, right) { return (left.after?.hash ?? '') === (right.after?.hash ?? '') && left.kind === right.kind; }
 function contractChangeDetails(change) { return { kind: change.kind, contractKind: (change.after ?? change.before)?.contractKind, name: (change.after ?? change.before)?.name, hash: change.after?.hash }; }
-function sourceShapeDetails(shape) { return shape ? { kind: shape.kind, selectors: shape.selectors, atRuleName: shape.atRuleName, conditionText: shape.conditionText, representedByDeclarations: shape.representedByDeclarations } : undefined; }
+function sourceShapeDetails(shape) { return shape ? { kind: shape.kind, selectors: shape.selectors, atRuleName: shape.atRuleName, conditionText: shape.conditionText, statementText: shape.statementText, representedByDeclarations: shape.representedByDeclarations } : undefined; }
+function sourceShapeChangeReason(before, after) {
+  if (!before && after?.kind === 'at-rule') return 'css-atrule-new-scope-unsupported';
+  if (before?.kind === 'at-rule' || after?.kind === 'at-rule') return after?.unsupportedReasonCode ?? before?.unsupportedReasonCode ?? 'css-atrule-condition-edit-unsupported';
+  if (before?.kind === 'at-rule-statement' || after?.kind === 'at-rule-statement') return after?.unsupportedReasonCode ?? before?.unsupportedReasonCode ?? 'css-atrule-statement-unsupported';
+  return 'css-source-shape-unsupported';
+}
+function atRuleUnsupportedReasonCode(record) { return record.atRuleName === 'layer' ? 'css-layer-name-edit-unsupported' : 'css-atrule-condition-edit-unsupported'; }
+function atRuleStatementUnsupportedReasonCode(record) { return record.atRuleName === 'layer' ? 'css-layer-order-statement-unsupported' : 'css-atrule-statement-unsupported'; }
 function ruleIdentityKey(record) { return [...(record.scopes ?? []), record.selectors.join(',')].join('::'); }
 function unique(values) { return [...new Set(values.filter(Boolean))]; }
 function uniqueProofGaps(values) {

package/dist/semantic-merge.js

@@ -10,8 +10,6 @@ function safeMergeCssSource(input = {}, context = {}) {
   const head = input.headSourceText ?? base;
   if (typeof base !== 'string' || typeof worker !== 'string' || typeof head !== 'string') return blocked(id, sourcePath, 'css-source-text-missing');
   if (worker === head) return merged(id, sourcePath, worker, 'worker-head-identical', hash);
-  if (worker === base) return merged(id, sourcePath, head, 'worker-unchanged', hash);
-  if (head === base) return merged(id, sourcePath, worker, 'head-unchanged', hash);
   const sheets = {
     base: parseSheet(base, sheetOptions(input, 'base', sourcePath)),
     worker: parseSheet(worker, sheetOptions(input, 'worker', sourcePath)),
@@ -47,7 +45,17 @@ function safeMergeCssSource(input = {}, context = {}) {
 function declarationIndex(sheet) {
   const declarations = new Map();
   const order = [];
+  const statements = [];
   for (const record of sheet.records) {
+    if (record.kind === 'at-rule-statement') {
+      statements.push({
+        key: record.atRuleHash,
+        scopes: record.scopes ?? [],
+        statementText: record.statementText,
+        atRuleName: record.atRuleName,
+        conditionText: record.conditionText
+      });
+    }
     if (record.kind !== 'rule') continue;
     const ruleKey = ruleIdentityKey(record);
     for (const declaration of record.declarations ?? []) {
@@ -66,7 +74,7 @@ function declarationIndex(sheet) {
       order.push(entry.key);
     }
   }
-  return { declarations, order: unique(order) };
+  return { declarations, order: unique(order), statements };
 }
 
 function changedDeclarations(baseIndex, currentIndex, side) {
@@ -143,7 +151,7 @@ function applyDeclarationChanges(index, changes) {
       if (!order.includes(change.key)) order.push(change.key);
     }
   }
-  return { declarations, order: order.filter((key) => declarations.has(key)) };
+  return { declarations, order: order.filter((key) => declarations.has(key)), statements: index.statements ?? [] };
 }
 
 function renderDeclarationIndex(index) {
@@ -154,12 +162,27 @@ function renderDeclarationIndex(index) {
     groups.set(declaration.ruleKey, [...(groups.get(declaration.ruleKey) ?? []), declaration]);
   }
   const chunks = [];
+  for (const statement of index.statements ?? []) renderAtRuleStatement(chunks, statement);
   for (const declarations of groups.values()) {
     renderDeclarationGroup(chunks, declarations);
   }
   return `${chunks.join('\n').trimEnd()}\n`;
 }
 
+function renderAtRuleStatement(chunks, statement) {
+  let indent = 0;
+  for (const scope of statement.scopes ?? []) {
+    chunks.push(`${spaces(indent)}${scope} {`);
+    indent += 2;
+  }
+  chunks.push(`${spaces(indent)}${statement.statementText}`);
+  for (let index = (statement.scopes ?? []).length - 1; index >= 0; index -= 1) {
+    indent -= 2;
+    chunks.push(`${spaces(indent)}}`);
+  }
+  chunks.push('');
+}
+
 function renderDeclarationGroup(chunks, declarations) {
   const first = declarations[0];
   let indent = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shapeshift-labs/frontier-lang-css",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "CSS semantic merge evidence and projection adapter for Frontier Lang semantic source documents.",
   "type": "module",
   "main": "./dist/index.js",