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

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

@@ -36,6 +36,20 @@ export interface CssSourceSpan {
   readonly endColumn: number;
 }
 
+export interface CssParserDiagnostic {
+  readonly reason?: string;
+  readonly line?: number;
+  readonly column?: number;
+  readonly input?: string;
+  readonly [key: string]: unknown;
+}
+
+export interface CssParserEvidence {
+  readonly name: 'postcss' | string;
+  readonly sourceCodeLocationInfo: boolean;
+  readonly parseErrors: readonly CssParserDiagnostic[];
+}
+
 export interface CssSourceRef {
   readonly semanticNodeId: string;
   readonly semanticNodeKind?: string;
@@ -109,6 +123,8 @@ export interface CssSemanticDeclaration {
   readonly value: string;
   readonly important: boolean;
   readonly valueHash: string;
+  readonly sourceSpan?: CssSourceSpan;
+  readonly rawTextHash?: string;
   readonly ordinal: number;
   readonly cascadeKey: string;
   readonly declarationHash: string;
@@ -125,9 +141,12 @@ export interface CssSemanticRecord {
   readonly atRuleName?: string;
   readonly conditionText?: string;
   readonly scopeKey?: string;
+  readonly statementText?: string;
   readonly scopedCascadeGraphHash?: string;
   readonly sourceSpan: CssSourceSpan;
   readonly sourceHash: string;
+  readonly parser?: 'postcss' | string;
+  readonly rawTextHash?: string;
   readonly ruleHash?: string;
   readonly atRuleHash?: string;
   readonly proofGaps?: readonly CssSemanticProofGap[];
@@ -199,6 +218,7 @@ export interface CssSemanticSheet {
   readonly sheetHash: string;
   readonly summary: Readonly<Record<string, number>>;
   readonly proofGaps: readonly CssSemanticProofGap[];
+  readonly parser: CssParserEvidence;
 }
 
 export interface CssSemanticMergeEvidence {

package/dist/index.js

@@ -1,5 +1,6 @@
 import { hashSemanticValue } from '@shapeshift-labs/frontier-lang-kernel';
 import { createCssModuleEvidence } from './css-modules.js';
+import { parsePostcssSemanticRecords } from './postcss-parser-evidence.js';
 import { safeMergeCssSource as safeMergeCssSourceImpl } from './semantic-merge.js';
 
 const ShorthandProperties = new Set(['all', 'animation', 'background', 'border', 'border-block', 'border-color', 'border-image', 'border-inline', 'border-radius', 'border-style', 'border-width', 'columns', 'flex', 'font', 'gap', 'grid', 'grid-area', 'grid-column', 'grid-row', 'inset', 'list-style', 'margin', 'offset', 'outline', 'overflow', 'padding', 'place-content', 'place-items', 'place-self', 'text-decoration', 'transition']);
@@ -57,11 +58,12 @@ export function emitCssWithSourceMap(document, options = {}) {
 }
 
 export function parseCssSemanticSheet(sourceText, options = {}) {
-  const lineStarts = computeLineStarts(sourceText);
   const sourceHash = options.sourceHash ?? hashSemanticValue({ kind: 'frontier.lang.css.source.v1', sourceText });
-  const records = parseCssBlocks(sourceText, 0, sourceText.length, [], lineStarts, sourceHash, options);
+  const parsed = parsePostcssSemanticRecords(sourceText, sourceHash, options);
+  const records = parsed.records;
   const cssModules = createCssModuleEvidence(records, options, sourceHash);
   const proofGaps = [
+    ...parsed.proofGaps,
     ...records.flatMap((record) => record.proofGaps ?? []),
     ...(cssModules?.proofGaps ?? [])
   ];
@@ -81,9 +83,11 @@ export function parseCssSemanticSheet(sourceText, options = {}) {
       cssModuleCompositions: cssModules?.compositions.length ?? 0,
       icssImports: cssModules?.icssImports.length ?? 0,
       icssExports: cssModules?.icssExports.length ?? 0,
-      proofGaps: proofGaps.length
+      proofGaps: proofGaps.length,
+      parseErrors: parsed.parser.parseErrors.length
     },
-    proofGaps
+    proofGaps,
+    parser: parsed.parser
   };
 }
 
@@ -114,6 +118,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 +126,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 +138,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 +191,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 +304,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/postcss-parser-evidence.js

@@ -0,0 +1,151 @@
+import { hashSemanticValue } from '@shapeshift-labs/frontier-lang-kernel';
+import postcss from 'postcss';
+
+const ShorthandProperties = new Set(['all', 'animation', 'background', 'border', 'border-block', 'border-color', 'border-image', 'border-inline', 'border-radius', 'border-style', 'border-width', 'columns', 'flex', 'font', 'gap', 'grid', 'grid-area', 'grid-column', 'grid-row', 'inset', 'list-style', 'margin', 'offset', 'outline', 'overflow', 'padding', 'place-content', 'place-items', 'place-self', 'text-decoration', 'transition']);
+const RuntimeAtRules = new Set(['keyframes', 'font-face', 'page', 'property']);
+const ScopeAtRules = new Set(['media', 'supports', 'container', 'layer', 'scope']);
+
+function parsePostcssSemanticRecords(sourceText, sourceHash, options) {
+  try {
+    const root = postcss.parse(sourceText, { from: options.sourcePath });
+    const records = postcssContainerRecords(root.nodes ?? [], [], sourceHash, options);
+    return { records, proofGaps: [], parser: { name: 'postcss', sourceCodeLocationInfo: true, parseErrors: [] } };
+  } catch (error) {
+    const reason = error?.reason ?? error?.message ?? 'CSS parser failed';
+    return {
+      records: [],
+      proofGaps: [proofGap('css-parser-error', `CSS parser rejected source: ${reason}`)],
+      parser: {
+        name: 'postcss',
+        sourceCodeLocationInfo: true,
+        parseErrors: [compactRecord({ reason, line: error?.line, column: error?.column, input: error?.input?.file })]
+      }
+    };
+  }
+}
+
+function postcssContainerRecords(nodes, scopes, sourceHash, options) {
+  const records = [];
+  for (const node of nodes) {
+    if (node.type === 'rule') records.push(postcssRuleRecord(node, scopes, sourceHash, options));
+    else if (node.type === 'atrule') {
+      records.push(postcssAtRuleRecord(node, scopes, sourceHash, options));
+      if (ScopeAtRules.has(String(node.name).toLowerCase()) && node.nodes?.length) {
+        records.push(...postcssContainerRecords(node.nodes, [...scopes, postcssAtRuleScopeKey(node)], sourceHash, options));
+      }
+    }
+  }
+  return records.sort((left, right) => left.sourceSpan.startOffset - right.sourceSpan.startOffset);
+}
+
+function postcssRuleRecord(node, scopes, sourceHash, options) {
+  const selectors = String(node.selector ?? '').split(',').map((selector) => selector.trim()).filter(Boolean);
+  const declarations = (node.nodes ?? []).filter((child) => child.type === 'decl').map(postcssDeclaration);
+  const nestedChildren = (node.nodes ?? []).filter((child) => child.type !== 'decl' && child.type !== 'comment');
+  const proofGaps = [
+    ...declarations.filter((declaration) => ShorthandProperties.has(declaration.property)).map((declaration) => proofGap('css-shorthand-expansion-unproved', `CSS shorthand ${declaration.property} needs longhand expansion evidence.`)),
+    ...scopes.length && !options.scopedCascadeGraphHash ? [proofGap('css-scoped-cascade-equivalence-unproved', 'Scoped cascade equivalence requires browser/style evidence.')] : [],
+    ...nestedChildren.length ? [proofGap('css-nesting-semantic-unproved', 'CSS nested rule semantics require nesting expansion evidence.')] : []
+  ];
+  return compactRecord({
+    kind: 'rule',
+    selectors,
+    selectorHash: hashSemanticValue({ kind: 'frontier.lang.css.selectors.v2.postcss', selectors }),
+    specificity: selectors.map(selectorSpecificity),
+    scopes,
+    declarations: declarations.map((declaration, ordinal) => ({
+      ...declaration,
+      ordinal,
+      cascadeKey: [...scopes, selectors.join(','), declaration.property].join('::'),
+      declarationHash: hashSemanticValue({ kind: 'frontier.lang.css.declaration.v2.postcss', scopes, selectors, property: declaration.property, rawProperty: declaration.rawProperty, value: declaration.value, important: declaration.important })
+    })),
+    customProperties: declarations.filter((declaration) => declaration.property.startsWith('--')).map((declaration) => declaration.property),
+    scopedCascadeGraphHash: scopes.length ? options.scopedCascadeGraphHash : undefined,
+    sourceSpan: sourceSpanFromPostcss(node.source, options.sourcePath),
+    sourceHash,
+    rawTextHash: hashSemanticValue({ kind: 'frontier.lang.css.rawRuleText.v1', text: node.toString() }),
+    ruleHash: hashSemanticValue({ kind: 'frontier.lang.css.rule.v2.postcss', selectors, scopes, declarations, nestedChildren: nestedChildren.map((child) => child.type) }),
+    parser: 'postcss',
+    proofGaps: proofGaps.length ? proofGaps : undefined
+  });
+}
+
+function postcssDeclaration(node) {
+  const property = String(node.prop ?? '').toLowerCase();
+  const value = String(node.value ?? '').trim();
+  return {
+    property,
+    rawProperty: node.raws?.prop?.raw ?? node.prop,
+    value,
+    important: node.important === true,
+    valueHash: hashSemanticValue({ kind: 'frontier.lang.css.value.v2.postcss', value }),
+    sourceSpan: sourceSpanFromPostcss(node.source, node.source?.input?.file),
+    rawTextHash: hashSemanticValue({ kind: 'frontier.lang.css.rawDeclarationText.v1', text: node.toString() })
+  };
+}
+
+function postcssAtRuleRecord(node, scopes, sourceHash, options) {
+  const atRuleName = String(node.name ?? 'unknown').toLowerCase();
+  const conditionText = String(node.params ?? '').trim();
+  const rawText = rawPostcssText(node);
+  const proofGaps = [];
+  if (RuntimeAtRules.has(atRuleName)) proofGaps.push(proofGap(`css-${atRuleName}-runtime-equivalence-unproved`, `CSS @${atRuleName} semantics require browser evidence.`));
+  if (ScopeAtRules.has(atRuleName) && !options.scopedCascadeGraphHash) proofGaps.push(proofGap(`css-${atRuleName}-cascade-scope-unproved`, `CSS @${atRuleName} scoped cascade requires condition evaluation evidence.`));
+  if (!node.nodes?.length && atRuleName === 'layer') proofGaps.push(proofGap('css-layer-order-statement-unsupported', 'CSS @layer statement order requires cascade order evidence.'));
+  else if (!node.nodes?.length) proofGaps.push(proofGap(`css-${atRuleName}-statement-equivalence-unproved`, `CSS @${atRuleName} statement semantics require host evidence.`));
+  const kind = node.nodes?.length ? 'at-rule' : 'at-rule-statement';
+  return compactRecord({
+    kind,
+    atRuleName,
+    conditionText,
+    statementText: kind === 'at-rule-statement' ? rawText : undefined,
+    scopeKey: postcssAtRuleScopeKey(node),
+    scopes,
+    scopedCascadeGraphHash: ScopeAtRules.has(atRuleName) ? options.scopedCascadeGraphHash : undefined,
+    sourceSpan: sourceSpanFromPostcss(node.source, options.sourcePath),
+    sourceHash,
+    rawTextHash: hashSemanticValue({ kind: 'frontier.lang.css.rawAtRuleText.v1', text: rawText }),
+    atRuleHash: hashSemanticValue({ kind: 'frontier.lang.css.atRule.v2.postcss', atRuleName, conditionText, scopes, statementText: kind === 'at-rule-statement' ? rawText : undefined }),
+    parser: 'postcss',
+    proofGaps: proofGaps.length ? proofGaps : undefined
+  });
+}
+
+function postcssAtRuleScopeKey(node) {
+  return `@${String(node.name ?? 'unknown').toLowerCase()} ${String(node.params ?? '').trim()}`.trim();
+}
+
+function sourceSpanFromPostcss(source, fallbackPath) {
+  const start = source?.start;
+  const end = source?.end;
+  if (!start || !end) return undefined;
+  return compactRecord({
+    path: fallbackPath,
+    startOffset: start.offset,
+    endOffset: end.offset,
+    startLine: start.line,
+    startColumn: start.column,
+    endLine: end.line,
+    endColumn: end.column
+  });
+}
+
+function rawPostcssText(node) {
+  const css = node.source?.input?.css;
+  const start = node.source?.start?.offset;
+  const end = node.source?.end?.offset;
+  return typeof css === 'string' && Number.isFinite(start) && Number.isFinite(end) ? css.slice(start, end) : node.toString();
+}
+
+function selectorSpecificity(selector) {
+  const withoutStrings = selector.replace(/"[^"]*"|'[^']*'/g, '');
+  const ids = (withoutStrings.match(/#[\w-]+/g) ?? []).length;
+  const classes = (withoutStrings.match(/\.[\w-]+|\[[^\]]+\]|:(?!:)[\w-]+(?:\([^)]*\))?/g) ?? []).length;
+  const elements = (withoutStrings.replace(/#[\w-]+|\.[\w-]+|\[[^\]]+\]|:{1,2}[\w-]+(?:\([^)]*\))?/g, ' ').match(/\b[A-Za-z][\w-]*\b/g) ?? []).length;
+  return [ids, classes, elements];
+}
+
+function proofGap(code, summary) { return { code, status: 'not-claimed', summary, failClosed: true, semanticEquivalenceClaim: false }; }
+function compactRecord(record) { return Object.fromEntries(Object.entries(record).filter(([, value]) => value !== undefined)); }
+
+export { parsePostcssSemanticRecords };

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)),
@@ -24,13 +22,14 @@ function safeMergeCssSource(input = {}, context = {}) {
   };
   const moduleChanges = cssModuleContractChanges(sheets, hash);
   const proofConflicts = proofGapConflicts(id, sourcePath, changed, indexes);
+  const parserConflicts = parserErrorConflicts(id, sourcePath, sheets);
   const overlapConflicts = [
     ...overlapDeclarationConflicts(id, sourcePath, changed.worker, changed.head),
     ...shorthandOverlapConflicts(id, sourcePath, changed.worker, changed.head)
   ];
   const moduleConflicts = cssModuleContractConflicts(id, sourcePath, moduleChanges);
   const sourceShapeConflicts = unsupportedSourceShapeConflicts(id, sourcePath, sheets, changed, hash);
-  const conflicts = [...proofConflicts, ...overlapConflicts, ...moduleConflicts, ...sourceShapeConflicts];
+  const conflicts = [...parserConflicts, ...proofConflicts, ...overlapConflicts, ...moduleConflicts, ...sourceShapeConflicts];
   if (conflicts.length) return blocked(id, sourcePath, 'css-semantic-merge-conflict', conflicts);
   const mergedIndex = applyDeclarationChanges(applyDeclarationChanges(indexes.base, changed.head), changed.worker);
   return merged(id, sourcePath, renderDeclarationIndex(mergedIndex), 'semantic-declaration-merge', hash, {
@@ -47,7 +46,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 +75,7 @@ function declarationIndex(sheet) {
       order.push(entry.key);
     }
   }
-  return { declarations, order: unique(order) };
+  return { declarations, order: unique(order), statements };
 }
 
 function changedDeclarations(baseIndex, currentIndex, side) {
@@ -92,6 +101,12 @@ function proofGapConflicts(id, sourcePath, changed, indexes) {
   });
 }
 
+function parserErrorConflicts(id, sourcePath, sheets) {
+  return Object.entries(sheets).flatMap(([side, sheet]) => (sheet.proofGaps ?? [])
+    .filter((gap) => gap.code === 'css-parser-error')
+    .map((gap) => conflict(id, sourcePath, 'css-parser-error-blocked', gap.code, { side, proofGap: gap })));
+}
+
 function overlapDeclarationConflicts(id, sourcePath, workerChanges, headChanges) {
   const headByKey = new Map(headChanges.map((change) => [change.key, change]));
   return workerChanges.flatMap((workerChange) => {
@@ -143,7 +158,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 +169,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.6",
   "description": "CSS semantic merge evidence and projection adapter for Frontier Lang semantic source documents.",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,7 +53,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@shapeshift-labs/frontier-lang-kernel": "0.3.12"
+    "@shapeshift-labs/frontier-lang-kernel": "0.3.12",
+    "postcss": "^8.5.15"
   },
   "devDependencies": {
     "typescript": "^5.9.3"