feat(preset-mini)!: remove default border-styles on border-x utility (#…

…1971) close #1967
unocss · Dec 21, 2022 · 2e305f3 · 2e305f3
1 parent b7a6687
commit 2e305f3
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 35 deletions.
diff --git a/packages/preset-mini/src/_rules/border.ts b/packages/preset-mini/src/_rules/border.ts
@@ -85,14 +85,7 @@ const borderColorResolver = (direction: string) => ([, body]: string[], theme: T
 }
 
 function handlerBorder(m: string[], ctx: RuleContext): CSSEntries | undefined {
-  const borderSizes = handlerBorderSize(m, ctx)
-  const borderStyle = handlerBorderStyle(['', m[1], 'solid'])
-  if (borderSizes && borderStyle) {
-    return [
-      ...borderSizes,
-      ...borderStyle,
-    ]
-  }
+  return handlerBorderSize(m, ctx)
 }
 
 function handlerBorderSize([, a = '', b]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined {

diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap
@@ -184,8 +184,8 @@ exports[`attributify > fixture1 1`] = `
 [rotate-30=\\"\\"]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:30deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 [rotate-60=\\"\\"]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:60deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 [transform=\\"\\"]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-[border~=\\"\\\\32 \\"]{border-width:2px;border-style:solid;}
-[border~=\\"x-1\\"]{border-left-width:1px;border-right-width:1px;border-left-style:solid;border-right-style:solid;}
+[border~=\\"\\\\32 \\"]{border-width:2px;}
+[border~=\\"x-1\\"]{border-left-width:1px;border-right-width:1px;}
 [border~=\\"blue-200\\"]{--un-border-opacity:1;border-color:rgba(191,219,254,var(--un-border-opacity));}
 [border~=\\"rounded-xl\\"]{border-radius:0.75rem;}
 [border~=\\"rounded\\"]{border-radius:0.25rem;}
@@ -296,8 +296,8 @@ exports[`attributify > fixture4 1`] = `
 [rotate-30=\\"\\"]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:30deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 [rotate-60=\\"\\"]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:60deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 [transform=\\"\\"]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-[border~=\\"\\\\32 \\"]{border-width:2px;border-style:solid;}
-[border~=\\"x-1\\"]{border-left-width:1px;border-right-width:1px;border-left-style:solid;border-right-style:solid;}
+[border~=\\"\\\\32 \\"]{border-width:2px;}
+[border~=\\"x-1\\"]{border-left-width:1px;border-right-width:1px;}
 [border~=\\"blue-200\\"]{--un-border-opacity:1;border-color:rgba(191,219,254,var(--un-border-opacity));}
 [border~=\\"rounded-xl\\"]{border-radius:0.75rem;}
 [border~=\\"rounded\\"]{border-radius:0.25rem;}

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -205,18 +205,19 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .stroke-join-clip{stroke-linejoin:miter-clip;}
 .stroke-join-auto{stroke-linejoin:miter;}
 .stroke-none{stroke:none;}
-.b-2{border-width:2px;border-style:solid;}
-.border{border-width:1px;border-style:solid;}
-.border-4{border-width:4px;border-style:solid;}
-.border-x{border-left-width:1px;border-right-width:1px;border-left-style:solid;border-right-style:solid;}
-.border-b{border-bottom-width:1px;border-bottom-style:solid;}
-.border-t-2{border-top-width:2px;border-top-style:solid;}
-.border-inline{border-inline-start-width:1px;border-inline-end-width:1px;border-inline-start-style:solid;border-inline-end-style:solid;}
-.border-be{border-block-end-width:1px;border-block-end-style:solid;}
-.border-bs-2{border-block-start-width:2px;border-block-start-style:solid;}
+.b-2,
+.border-size-2{border-width:2px;}
+.border{border-width:1px;}
+.border-4{border-width:4px;}
+.border-x{border-left-width:1px;border-right-width:1px;}
+.border-b{border-bottom-width:1px;}
+.border-t-2,
+.border-t-size-2{border-top-width:2px;}
+.border-inline{border-inline-start-width:1px;border-inline-end-width:1px;}
+.border-be{border-block-end-width:1px;}
+.border-bs-2{border-block-start-width:2px;}
 .border-size-\\\\$variable,
 .border-width-\\\\$variable{border-width:var(--variable);}
-.border-size-2{border-width:2px;}
 .border-size-none{border-width:0px;}
 .border-size-unset{border-width:unset;}
 .border-width-\\\\[2em\\\\]{border-width:2em;}
@@ -225,7 +226,6 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .border-x-size-2{border-left-width:2px;border-right-width:2px;}
 .border-x-width-3{border-left-width:3px;border-right-width:3px;}
 .border-s-width-\\\\$variable{border-inline-start-width:var(--variable);}
-.border-t-size-2{border-top-width:2px;}
 .border-t-width-3{border-top-width:3px;}
 .b-block-size-\\\\$variable{border-block-start-width:var(--variable);border-block-end-width:var(--variable);}
 .border-\\\\[\\\\#124\\\\]{--un-border-opacity:1;border-color:rgba(17,34,68,var(--un-border-opacity));}

diff --git a/test/__snapshots__/shortcuts.test.ts.snap b/test/__snapshots__/shortcuts.test.ts.snap
@@ -71,7 +71,7 @@ exports[`shortcuts > shortcut of nested pseudo 1`] = `
 .btn3:focus,
 .focus\\\\:btn3:focus:focus,
 .focus\\\\:hover\\\\:btn3:focus:hover:focus,
-.hover\\\\:btn3:focus:hover{border-width:1px;border-style:solid;}
+.hover\\\\:btn3:focus:hover{border-width:1px;}
 .btn3,
 .focus\\\\:btn3:focus,
 .focus\\\\:hover\\\\:btn3:hover:focus,

diff --git a/test/preset-tagify.test.ts b/test/preset-tagify.test.ts
@@ -89,7 +89,7 @@ describe('tagify', () => {
 
     expect((await uno.generate(code, { preflights: false })).css).toMatchInlineSnapshot(`
       "/* layer: default */
-      b{border-width:1px;border-style:solid;}
+      b{border-width:1px;}
       h6{height:1.5rem;}"
     `)
   })

diff --git a/test/transformer-compile-class.test.ts b/test/transformer-compile-class.test.ts
@@ -43,7 +43,7 @@ describe('transformer-compile-class', () => {
     `)
     expect(result.css).toMatchInlineSnapshot(`
       "/* layer: shortcuts */
-      .uno-pe1esh{--un-scale-x:0.05;--un-scale-y:0.05;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));border-width:1px;border-style:solid;--un-border-opacity:1;border-color:rgba(229,231,235,var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;font-weight:700;}
+      .uno-pe1esh{--un-scale-x:0.05;--un-scale-y:0.05;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));border-width:1px;--un-border-opacity:1;border-color:rgba(229,231,235,var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;font-weight:700;}
       .dark .uno-pe1esh:hover{--un-bg-opacity:1;background-color:rgba(34,197,94,var(--un-bg-opacity));}
       .uno-cbgd7b{text-align:center;}
       .uno-s9yxer{font-size:0.875rem;line-height:1.25rem;font-weight:700;}

diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts
@@ -102,7 +102,6 @@ describe('transformer-directives', () => {
         }
         .btn:hover {
           border-width: 1px;
-          border-style: solid;
           --un-bg-opacity: 1;
           background-color: rgba(255, 255, 255, var(--un-bg-opacity));
         }
@@ -121,7 +120,6 @@ describe('transformer-directives', () => {
         }
         .btn:focus {
           border-width: 1px;
-          border-style: solid;
         }
         .btn:hover {
           --un-bg-opacity: 1;
@@ -161,7 +159,6 @@ describe('transformer-directives', () => {
         }
         input:focus {
           border-width: 1px;
-          border-style: solid;
         }
         "
       `)
@@ -181,7 +178,6 @@ describe('transformer-directives', () => {
         .btn:focus,
         .box:focus {
           border-width: 1px;
-          border-style: solid;
         }
         "
       `)
@@ -199,7 +195,6 @@ describe('transformer-directives', () => {
         }
         .btn.box:focus {
           border-width: 1px;
-          border-style: solid;
         }
         "
       `)
@@ -223,7 +218,6 @@ describe('transformer-directives', () => {
         }
         .btn:hover {
           border-width: 1px;
-          border-style: solid;
         }
         .btn:hover {
           --un-bg-opacity: 1;
@@ -283,7 +277,6 @@ describe('transformer-directives', () => {
           ul {
             li {
               border-width: 1px;
-              border-style: solid;
             }
           }
           a {
@@ -367,12 +360,10 @@ describe('transformer-directives', () => {
       .toMatchInlineSnapshot(`
         "nav {
           border-width: 1px;
-          border-style: solid;
 
           ul {
             li {
               border-width: 1px;
-              border-style: solid;
             }
           }
           a {