@shapeshift-labs/frontier-lang-css 0.1.11 → 0.1.12

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, `var()` fallback references, animation/keyframe links, font-face links, URL asset references, 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, carries source-bound dependency graph evidence into the merge result, 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. Cascade-sensitive source-shape changes still block by default, but a host can attach a `css-source-bound-cascade-runtime-proof` / `css-cascade-runtime-proof` that is bound to the exact source path, reason, side, shape key, and base/worker/head/output source hashes to admit that specific change.
+`sourceMap.mappings` links emitted rule blocks back to Frontier Lang semantic node ids. `createCssSemanticMergeEvidence` records selectors, specificity, declarations, custom properties, `var()` fallback references, animation/keyframe links, font-face links, URL asset references, 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, carries source-bound dependency graph evidence into the merge result, blocks parallel edits whose CSS shorthand expansions overlap a longhand or sub-shorthand, 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. Cascade-sensitive source-shape changes still block by default, but a host can attach a `css-source-bound-cascade-runtime-proof` / `css-cascade-runtime-proof` that is bound to the exact source path, reason, side, shape key, and base/worker/head/output source hashes to admit that specific change.
 
 ## Support Boundary
 
 - Ready evidence: style rules, selectors, specificity, declarations, source-bound dependency graph hashes for custom properties, `var()` fallbacks, animations/keyframes, font faces, and URL assets, 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-bound cascade runtime proofs, 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; source-shape/cascade-sensitive edits only when an exact source-bound cascade runtime 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.
+- Safe merge: independent declarations with non-overlapping cascade keys and non-overlapping shorthand expansion sets; unchanged statement-form at-rules preserved in canonical output; existing scoped declaration edits when scoped cascade graph proof is supplied; source-shape/cascade-sensitive edits only when an exact source-bound cascade runtime 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, shorthand value expansion/equivalence beyond known affected-property overlap checks, 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: dependency graph evidence is an admission/review signal only; `autoMergeClaim`, `semanticEquivalenceClaim`, and `browserRenderEquivalenceClaim` remain false. `browserCascadeEquivalenceClaim` is only true on a safe-merge result when a source-bound cascade runtime proof admits the specific cascade-sensitive source-shape change.

package/dist/postcss-parser-evidence.js

@@ -1,7 +1,7 @@
 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 ShorthandProperties = new Set(['all', 'animation', 'background', 'border', 'border-block', 'border-block-color', 'border-block-end', 'border-block-start', 'border-block-style', 'border-block-width', 'border-bottom', 'border-color', 'border-image', 'border-inline', 'border-inline-color', 'border-inline-end', 'border-inline-start', 'border-inline-style', 'border-inline-width', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'columns', 'flex', 'font', 'gap', 'grid', 'grid-area', 'grid-column', 'grid-row', 'inset', 'inset-block', 'inset-inline', 'list-style', 'margin', 'margin-block', 'margin-inline', 'offset', 'outline', 'overflow', 'overscroll-behavior', 'padding', 'padding-block', 'padding-inline', 'place-content', 'place-items', 'place-self', 'scroll-margin', 'scroll-margin-block', 'scroll-margin-inline', 'scroll-padding', 'scroll-padding-block', 'scroll-padding-inline', 'text-decoration', 'transition']);
 const RuntimeAtRules = new Set(['keyframes', 'font-face', 'page', 'property']);
 const ScopeAtRules = new Set(['media', 'supports', 'container', 'layer', 'scope']);
 

package/dist/semantic-merge-shorthand.js

@@ -1,16 +1,147 @@
 function shorthandGroupForProperty(property) {
-  if (ShorthandGroups.has(property)) return property;
-  for (const [group, longhands] of ShorthandGroups) if (longhands.includes(property)) return group;
+  const normalized = normalizeProperty(property);
+  if (!normalized) return undefined;
+  if (ShorthandExpansionKeys.has(normalized)) return normalized;
+  for (const [group, keys] of ShorthandExpansionKeys) if (keys.has(normalized)) return group;
   return undefined;
 }
 
-const ShorthandGroups = new Map([
-  ['background', ['background-attachment', 'background-clip', 'background-color', 'background-image', 'background-origin', 'background-position', 'background-repeat', 'background-size']],
-  ['border', ['border-color', 'border-style', 'border-width', 'border-top', 'border-right', 'border-bottom', 'border-left']],
-  ['font', ['font-family', 'font-size', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'line-height']],
-  ['list-style', ['list-style-image', 'list-style-position', 'list-style-type']],
-  ['margin', ['margin-top', 'margin-right', 'margin-bottom', 'margin-left']],
-  ['padding', ['padding-top', 'padding-right', 'padding-bottom', 'padding-left']]
-]);
+function declarationsOverlapByCssProperty(leftProperty, rightProperty) {
+  const left = normalizeProperty(leftProperty);
+  const right = normalizeProperty(rightProperty);
+  if (!left || !right) return false;
+  if (left === right) return true;
+  if (left.startsWith('--') || right.startsWith('--')) return false;
+  const leftKeys = affectedPropertyKeys(left);
+  const rightKeys = affectedPropertyKeys(right);
+  if (leftKeys.has(AllStandardProperties)) return !allPropertyExcluded(right);
+  if (rightKeys.has(AllStandardProperties)) return !allPropertyExcluded(left);
+  for (const key of leftKeys) if (rightKeys.has(key)) return true;
+  return false;
+}
+
+function affectedPropertyKeys(property) {
+  return ShorthandExpansionKeys.get(property) ?? new Set([property]);
+}
+
+function normalizeProperty(property) {
+  return String(property ?? '').trim().toLowerCase();
+}
+
+function allPropertyExcluded(property) {
+  return property.startsWith('--') || property === 'direction' || property === 'unicode-bidi';
+}
+
+const AllStandardProperties = '*';
+
+const ShorthandExpansionKeys = new Map(Object.entries({
+  all: [AllStandardProperties],
+  animation: ['animation-composition', 'animation-delay', 'animation-direction', 'animation-duration', 'animation-fill-mode', 'animation-iteration-count', 'animation-name', 'animation-play-state', 'animation-range-end', 'animation-range-start', 'animation-timeline', 'animation-timing-function'],
+  background: ['background-attachment', 'background-blend-mode', 'background-clip', 'background-color', 'background-image', 'background-origin', 'background-position', 'background-repeat', 'background-size'],
+  border: [
+    ...edgeKeys('border', ['width', 'style', 'color']),
+    'border-width',
+    'border-style',
+    'border-color',
+    'border-top',
+    'border-right',
+    'border-bottom',
+    'border-left'
+  ],
+  'border-block': [...logicalEdgeKeys('border-block', ['width', 'style', 'color']), 'border-block-width', 'border-block-style', 'border-block-color', 'border-block-start', 'border-block-end'],
+  'border-block-color': logicalEdgeKeys('border-block', ['color']),
+  'border-block-end': propertyTuple('border-block-end', ['width', 'style', 'color']),
+  'border-block-end-color': ['border-block-end-color'],
+  'border-block-end-style': ['border-block-end-style'],
+  'border-block-end-width': ['border-block-end-width'],
+  'border-block-start': propertyTuple('border-block-start', ['width', 'style', 'color']),
+  'border-block-start-color': ['border-block-start-color'],
+  'border-block-start-style': ['border-block-start-style'],
+  'border-block-start-width': ['border-block-start-width'],
+  'border-block-style': logicalEdgeKeys('border-block', ['style']),
+  'border-block-width': logicalEdgeKeys('border-block', ['width']),
+  'border-bottom': propertyTuple('border-bottom', ['width', 'style', 'color']),
+  'border-bottom-color': ['border-bottom-color'],
+  'border-bottom-left-radius': ['border-bottom-left-radius'],
+  'border-bottom-right-radius': ['border-bottom-right-radius'],
+  'border-bottom-style': ['border-bottom-style'],
+  'border-bottom-width': ['border-bottom-width'],
+  'border-color': edgeKeys('border', ['color']),
+  'border-image': ['border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset', 'border-image-repeat'],
+  'border-inline': [...logicalEdgeKeys('border-inline', ['width', 'style', 'color']), 'border-inline-width', 'border-inline-style', 'border-inline-color', 'border-inline-start', 'border-inline-end'],
+  'border-inline-color': logicalEdgeKeys('border-inline', ['color']),
+  'border-inline-end': propertyTuple('border-inline-end', ['width', 'style', 'color']),
+  'border-inline-end-color': ['border-inline-end-color'],
+  'border-inline-end-style': ['border-inline-end-style'],
+  'border-inline-end-width': ['border-inline-end-width'],
+  'border-inline-start': propertyTuple('border-inline-start', ['width', 'style', 'color']),
+  'border-inline-start-color': ['border-inline-start-color'],
+  'border-inline-start-style': ['border-inline-start-style'],
+  'border-inline-start-width': ['border-inline-start-width'],
+  'border-inline-style': logicalEdgeKeys('border-inline', ['style']),
+  'border-inline-width': logicalEdgeKeys('border-inline', ['width']),
+  'border-left': propertyTuple('border-left', ['width', 'style', 'color']),
+  'border-left-color': ['border-left-color'],
+  'border-left-style': ['border-left-style'],
+  'border-left-width': ['border-left-width'],
+  'border-radius': ['border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
+  'border-right': propertyTuple('border-right', ['width', 'style', 'color']),
+  'border-right-color': ['border-right-color'],
+  'border-right-style': ['border-right-style'],
+  'border-right-width': ['border-right-width'],
+  'border-style': edgeKeys('border', ['style']),
+  'border-top': propertyTuple('border-top', ['width', 'style', 'color']),
+  'border-top-color': ['border-top-color'],
+  'border-top-left-radius': ['border-top-left-radius'],
+  'border-top-right-radius': ['border-top-right-radius'],
+  'border-top-style': ['border-top-style'],
+  'border-top-width': ['border-top-width'],
+  'border-width': edgeKeys('border', ['width']),
+  columns: ['column-width', 'column-count'],
+  flex: ['flex-grow', 'flex-shrink', 'flex-basis'],
+  font: ['font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'line-height'],
+  gap: ['row-gap', 'column-gap'],
+  grid: ['grid-template-rows', 'grid-template-columns', 'grid-template-areas', 'grid-auto-rows', 'grid-auto-columns', 'grid-auto-flow'],
+  'grid-area': ['grid-row-start', 'grid-column-start', 'grid-row-end', 'grid-column-end'],
+  'grid-column': ['grid-column-start', 'grid-column-end'],
+  'grid-row': ['grid-row-start', 'grid-row-end'],
+  inset: ['top', 'right', 'bottom', 'left'],
+  'inset-block': ['inset-block-start', 'inset-block-end'],
+  'inset-inline': ['inset-inline-start', 'inset-inline-end'],
+  'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],
+  margin: ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
+  'margin-block': ['margin-block-start', 'margin-block-end'],
+  'margin-inline': ['margin-inline-start', 'margin-inline-end'],
+  offset: ['offset-anchor', 'offset-distance', 'offset-path', 'offset-position', 'offset-rotate'],
+  outline: ['outline-color', 'outline-style', 'outline-width'],
+  overflow: ['overflow-x', 'overflow-y'],
+  'overscroll-behavior': ['overscroll-behavior-x', 'overscroll-behavior-y'],
+  padding: ['padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
+  'padding-block': ['padding-block-start', 'padding-block-end'],
+  'padding-inline': ['padding-inline-start', 'padding-inline-end'],
+  'place-content': ['align-content', 'justify-content'],
+  'place-items': ['align-items', 'justify-items'],
+  'place-self': ['align-self', 'justify-self'],
+  'scroll-margin': ['scroll-margin-top', 'scroll-margin-right', 'scroll-margin-bottom', 'scroll-margin-left'],
+  'scroll-margin-block': ['scroll-margin-block-start', 'scroll-margin-block-end'],
+  'scroll-margin-inline': ['scroll-margin-inline-start', 'scroll-margin-inline-end'],
+  'scroll-padding': ['scroll-padding-top', 'scroll-padding-right', 'scroll-padding-bottom', 'scroll-padding-left'],
+  'scroll-padding-block': ['scroll-padding-block-start', 'scroll-padding-block-end'],
+  'scroll-padding-inline': ['scroll-padding-inline-start', 'scroll-padding-inline-end'],
+  'text-decoration': ['text-decoration-line', 'text-decoration-color', 'text-decoration-style', 'text-decoration-thickness'],
+  transition: ['transition-behavior', 'transition-delay', 'transition-duration', 'transition-property', 'transition-timing-function']
+}).map(([property, keys]) => [property, new Set(keys)]));
+
+function edgeKeys(prefix, attributes) {
+  return ['top', 'right', 'bottom', 'left'].flatMap((edge) => attributes.map((attribute) => `${prefix}-${edge}-${attribute}`));
+}
+
+function logicalEdgeKeys(prefix, attributes) {
+  return ['start', 'end'].flatMap((edge) => attributes.map((attribute) => `${prefix}-${edge}-${attribute}`));
+}
+
+function propertyTuple(prefix, attributes) {
+  return attributes.map((attribute) => `${prefix}-${attribute}`);
+}
 
-export { shorthandGroupForProperty };
+export { declarationsOverlapByCssProperty, shorthandGroupForProperty };

package/dist/semantic-merge.js

@@ -2,7 +2,7 @@ import { cssModuleContractChanges, cssModuleContractConflicts, sheetOptions, uns
 import { admitCascadeRuntimeProofs } from './semantic-merge-cascade-runtime.js';
 import { mergeCssDependencyGraphEvidence } from './dependency-graph.js';
 import { mergeSelectorTargetEvidence, planSelectorTargetRebase } from './semantic-merge-selector-targets.js';
-import { shorthandGroupForProperty } from './semantic-merge-shorthand.js';
+import { declarationsOverlapByCssProperty, shorthandGroupForProperty } from './semantic-merge-shorthand.js';
 
 function safeMergeCssSource(input = {}, context = {}) {
   const parseSheet = context.parseCssSemanticSheet;
@@ -197,9 +197,7 @@ function hasRelatedExistingDeclaration(entry, indexes) {
 
 function declarationsOverlapByShorthandGroup(left, right) {
   if (!left || !right || left.ruleKey !== right.ruleKey) return false;
-  const leftGroup = shorthandGroupForProperty(left.property);
-  const rightGroup = shorthandGroupForProperty(right.property);
-  return Boolean(leftGroup && rightGroup && leftGroup === rightGroup);
+  return declarationsOverlapByCssProperty(left.property, right.property);
 }
 
 function applyDeclarationChanges(index, changes) {

package/package.json

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