Update background-clip and gradient-text utilities for consistency and remove deprecated properties

1aron · 1aron · commit 5ba72cfc1536 · 2025-06-27T06:43:40.000+08:00
diff --git a/internal b/internal
@@ -1 +1 @@
-Subproject commit ec8c754b8eef1e8e87a9d4315e03617f42e622a9
+Subproject commit 88d68657e16ce4912e5f9f3a27d1575a4daf8de1
diff --git a/packages/core/src/config/rules.ts b/packages/core/src/config/rules.ts
@@ -340,7 +340,7 @@ const rules = {
         values: ['underline', 'overline', 'line-through'],
         unit: 'rem',
         type: SyntaxRuleType.NativeShorthand,
-        namespaces: ['color.text'],
+        namespaces: ['color', 'color.text'],
         declarations: ['-webkit-text-decoration', 'text-decoration']
     },
     'text-underline-offset': {
@@ -1011,8 +1011,7 @@ const rules = {
     },
     'background-clip': {
         key: 'bg-clip',
-        type: SyntaxRuleType.Native,
-        declarations: ['-webkit-background-clip', 'background-clip']
+        type: SyntaxRuleType.Native
     },
     'background-origin': {
         key: 'bg-origin',
diff --git a/packages/core/src/config/utilities.ts b/packages/core/src/config/utilities.ts
@@ -94,10 +94,10 @@ const utilities = {
     'transform-fill': { 'transform-box': 'fill-box' },
     'transform-stroke': { 'transform-box': 'stroke-box' },
     'transform-view': { 'transform-box': 'view-box' },
-    'bg-clip-content': { '-webkit-background-clip': 'content-box', 'background-clip': 'content-box' },
-    'bg-clip-padding': { '-webkit-background-clip': 'padding-box', 'background-clip': 'padding-box' },
-    'bg-clip-border': { '-webkit-background-clip': 'border-box', 'background-clip': 'border-box' },
-    'bg-clip-text': { '-webkit-background-clip': 'text', 'background-clip': 'text' },
+    'bg-clip-content': { 'background-clip': 'content-box' },
+    'bg-clip-padding': { 'background-clip': 'padding-box' },
+    'bg-clip-border': { 'background-clip': 'border-box' },
+    'bg-clip-text': { 'background-clip': 'text' },
     'bg-origin-content': { 'background-origin': 'content-box' },
     'bg-origin-padding': { 'background-origin': 'padding-box' },
     'bg-origin-border': { 'background-origin': 'border-box' },
@@ -134,7 +134,7 @@ const utilities = {
     'wrap-break-word': { 'overflow-wrap': 'break-word' },
     'wrap-anywhere': { 'overflow-wrap': 'anywhere' },
     'wrap-normal': { 'overflow-wrap': 'normal' },
-    'gradient-text': { '-webkit-text-fill-color': 'transparent', '-webkit-background-clip': 'text', 'background-clip': 'text' },
+    'gradient-text': { '-webkit-text-fill-color': 'transparent', 'background-clip': 'text' },
     'fit': { 'width': 'fit-content', 'height': 'fit-content' },
     'font-antialiased': { '-webkit-font-smoothing': 'antialiased', '-moz-osx-font-smoothing': 'grayscale' },
     'font-subpixel-antialiased': { '-webkit-font-smoothing': 'auto', '-moz-osx-font-smoothing': 'auto' },
diff --git a/packages/core/tests/rules/background-clip.test.ts b/packages/core/tests/rules/background-clip.test.ts
@@ -2,5 +2,5 @@ import { it, test, expect } from 'vitest'
 import { createCSS } from '../../src'
 
 it.concurrent('background clip', () => {
-    expect(createCSS().create('bg-clip:text')?.text).toContain('-webkit-background-clip:text;background-clip:text')
+    expect(createCSS().create('bg-clip:text')?.text).toContain('background-clip:text')
 })
diff --git a/packages/core/tests/rules/background.test.ts b/packages/core/tests/rules/background.test.ts
@@ -8,7 +8,7 @@ test.concurrent('background', () => {
     expect(createCSS().create('bg:black:hover@md&landscape')?.text).toBe('@media (width>=64rem) and (orientation:landscape){.bg\\:black\\:hover\\@md\\&landscape:hover{background-color:oklch(0% 0 none)}}')
     expect(createCSS().create('bg:transparent')?.text).toContain('background-color:transparent')
     expect(createCSS().create('bg:current')?.text).toContain('background-color:currentColor')
-    expect(createCSS().create('bg-clip-border')?.text).toContain('-webkit-background-clip:border-box;background-clip:border-box')
+    expect(createCSS().create('bg-clip-border')?.text).toContain('background-clip:border-box')
     expect(createCSS().create('bg:url(\'#test\')')?.text).toContain('background-image:url(\'#test\')')
     expect(createCSS().create('bg:black|url(\'/images/wallpaper.jpg\')|no-repeat|top|left/cover')?.text).toContain('background:oklch(0% 0 none) url(\'/images/wallpaper.jpg\') no-repeat top left/cover')
     expect(createCSS().create('gradient(45deg,#f3ec78,#af4261)')?.text).toContain('background-image:linear-gradient(45deg,#f3ec78,#af4261)')
diff --git a/packages/core/tests/semantics.test.ts b/packages/core/tests/semantics.test.ts
@@ -5,7 +5,7 @@ import { expectLayers } from './test'
 
 test.concurrent('utilities', () => {
     expect(createCSS(config).create('show')?.text).toBe('.show{display:block}')
-    expect(createCSS().create('gradient-text')?.text).toBe('.gradient-text{-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}')
+    expect(createCSS().create('gradient-text')?.text).toBe('.gradient-text{-webkit-text-fill-color:transparent;background-clip:text}')
 
     expectLayers(
         {
diff --git a/packages/validator/src/validate-css.ts b/packages/validator/src/validate-css.ts
@@ -94,7 +94,6 @@ export function validateAtrulePrelude(atrule: string, prelude: any) {
             { details: error.message, message: 'Invalid value for `@' + atrule + '` prelude' }
         }))
     }
-
     return errors
 }
 
@@ -134,11 +133,14 @@ export function validateDeclaration(property: string, value: any) {
             property
         }))
     } else if (error = isTargetError(lexer.matchProperty(property, value).error)) {
-        errors.push(Object.assign(error, {
-            property,
-            ...error.rawMessage === 'Mismatch' &&
-            { details: error.message, message: 'Invalid value for `' + property + '` property' }
-        }))
+        // TODO: https://github.com/master-co/css/issues/405
+        if (!error.css?.includes('min(') && !error.css?.includes('max(') && !error.css?.includes('clamp(')) {
+            errors.push(Object.assign(error, {
+                property,
+                ...error.rawMessage === 'Mismatch' &&
+                { details: error.message, message: 'Invalid value for `' + property + '` property' }
+            }))
+        }
     }
 
     return errors
diff --git a/packages/validator/tests/css.test.ts b/packages/validator/tests/css.test.ts
@@ -3,4 +3,8 @@ import validateCSS from '../src/validate-css'
 
 it('selector', () => {
     expect(validateCSS('.foo:fuck { font-size: 1rem }')).toEqual([])
+})
+
+it('min fn', ()=> {
+    expect(validateCSS('.foo { width: min(50vw, 200px) }')).toEqual([])
 })
diff --git a/site/app/[locale]/guide/spacing/components/Overview.tsx b/site/app/[locale]/guide/spacing/components/Overview.tsx
@@ -23,7 +23,7 @@ export default () => {
                                         <td>{value / 16}rem</td>
                                         <td>
                                             <div className='inline-flex bg:stripe-pink outline:1|lighter outline-offset:-1 v:middle w:fit' style={{ gap: value / 16 + 'rem' }}>
-                                                {Array.from({ length: 14 - index }, (_, index) => <div className='inline-block bg:base size:1.5em'></div>)}
+                                                {Array.from({ length: 14 - index }, (_, index) => <div key={index} className='inline-block size:1.5em bg:base'></div>)}
                                             </div>
                                         </td>
                                     </tr>
diff --git a/site/app/[locale]/play/Play.tsx b/site/app/[locale]/play/Play.tsx
@@ -519,7 +519,7 @@ export default function Play(props: any) {
     const width = useMemo(() => (!layout || layout === '2') ? '50%' : '100%', [layout])
     const height = useMemo(() => (!layout || layout === '2') ? '100%' : '50%', [layout])
     return (
-        <div className="abs flex full flex-col">
+        <div className="abs flex flex-col full">
             <Header fixed={false}>
                 <HeaderContent>
                     <Link href={'/'}>
@@ -737,7 +737,7 @@ export default function Play(props: any) {
                             srcDoc={previewHTML}
                         />
                         <div className={clsx('flex flex-col h:full', { 'hidden!': preview !== 'css' })}>
-                            <div className='flex bb:1|lightest flex:0|0|auto px:5x px:10x@sm align-items:center font:12 h:48 justify-content:space-between'>
+                            <div className='flex bb:1|lightest flex:0|0|auto px:5x align-items:center font:12 h:48 justify-content:space-between px:10x@sm'>
                                 <div>Generated CSS</div>
                                 <div className="fg:light">{generatedCSSSize}</div>
                             </div>
diff --git a/site/app/[locale]/reference/animation-play-state/components/Basic.tsx b/site/app/[locale]/reference/animation-play-state/components/Basic.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @master/css/class-validation */
 import Code from 'internal/components/Code'
 import BasicDemo from './BasicDemo'
 
diff --git a/site/styles/btn.ts b/site/styles/btn.ts
@@ -3,7 +3,7 @@ import type { Config } from '@master/css'
 export default {
     components: {
         btn: {
-            '': 'justify-center items-center inline-flex font:semibold outline-offset:-1',
+            '': 'inline-flex items-center justify-center font:semibold outline-offset:-1',
             'xs': 'r:4 px:2x font:12 h:6x',
             'sm': 'r:6 px:3x font:12 h:8x',
             'md': 'r:6 px:4x font:14 h:10x',

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import { expectLayers } from './test'`
`5`	`5`
`6`	`6`	`test.concurrent('utilities', () => {`
`7`	`7`	`expect(createCSS(config).create('show')?.text).toBe('.show{display:block}')`
`8`		`- expect(createCSS().create('gradient-text')?.text).toBe('.gradient-text{-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}')`
	`8`	`+ expect(createCSS().create('gradient-text')?.text).toBe('.gradient-text{-webkit-text-fill-color:transparent;background-clip:text}')`
`9`	`9`
`10`	`10`	`expectLayers(`
`11`	`11`	`{`