feat: align outline utility classes (#716)

src/config/base.ts

@@ -900,12 +900,21 @@ export const baseConfig: Config = {
       12: '12',
       // int[1, 9999]
     },
-    outline: {
-      none: ['2px solid transparent', '2px'],
-      // white: ['2px dotted white', '2px'],
-      // black: ['2px dotted black', '2px'],
-    },
     outlineColor: (theme) => theme('colors'),
+    outlineWidth: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    outlineOffset: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
     padding: (theme) => theme('spacing'),
     perspective: (theme) => ({
       ...(theme('spacing') ?? {}),
@@ -1240,11 +1249,11 @@ export const baseConfig: Config = {
     }),
   ],
   handlers: {
-    static : true,
+    static: true,
     time: true,
     color: true,
     opacity: true,
-    number : true,
+    number: true,
     string: true,
     bracket: true,
     hex: true,

src/lib/utilities/static.ts

@@ -34,7 +34,7 @@ export const staticUtilities: StaticUtility = {
   },
 
   // https://windicss.org/utilities/flexbox.html#flex-basis
-  'basis-auto' : {
+  'basis-auto': {
     'utility': {
       'flex-basis': 'auto',
     },
@@ -43,7 +43,7 @@ export const staticUtilities: StaticUtility = {
       'order': 1,
     },
   },
-  'basis-full' : {
+  'basis-full': {
     'utility': {
       'flex-basis': '100%',
     },
@@ -3487,4 +3487,61 @@ export const staticUtilities: StaticUtility = {
       'order': 2,
     },
   },
+
+  // https://windicss.org/utilities/borders/outline.html
+  'outline-none': {
+    'utility': {
+      'outline': '2px solid transparent',
+      'outline-offset': '2px',
+    },
+    'meta': {
+      'group': 'outline',
+      'order': 1,
+    },
+  },
+  'outline': {
+    'utility': {
+      'outline-style': 'solid',
+    },
+    'meta': {
+      'group': 'outline',
+      'order': 2,
+    },
+  },
+  'outline-dashed': {
+    'utility': {
+      'outline-style': 'dashed',
+    },
+    'meta': {
+      'group': 'outline',
+      'order': 3,
+    },
+  },
+  'outline-dotted': {
+    'utility': {
+      'outline-style': 'dotted',
+    },
+    'meta': {
+      'group': 'outline',
+      'order': 4,
+    },
+  },
+  'outline-double': {
+    'utility': {
+      'outline-style': 'double',
+    },
+    'meta': {
+      'group': 'outline',
+      'order': 5,
+    },
+  },
+  'outline-hidden': {
+    'utility': {
+      'outline-style': 'hidden',
+    },
+    'meta': {
+      'group': 'outline',
+      'order': 6,
+    },
+  },
 };

src/plugin/forms/index.ts

@@ -1,12 +1,13 @@
 import plugin from '../index';
 import { colors, baseConfig } from '../../config';
+import { staticUtilities } from '../../lib/utilities/static';
 import svgToDataUri from 'mini-svg-data-uri';
 import type { DefaultTheme } from '../../interfaces';
 
 const defaultTheme = baseConfig.theme as unknown as DefaultTheme;
 const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base;
-const { borderWidth, borderRadius, outline } = defaultTheme;
-const spacing = (num:number) => `${num/4}rem`;
+const { borderWidth, borderRadius } = defaultTheme;
+const spacing = (num: number) => `${num / 4}rem`;
 
 export default plugin(function ({ addBase, theme }) {
   addBase({
@@ -29,7 +30,7 @@ select
 `]: {
       '-webkit-appearance': 'none',
       '-moz-appearance': 'none',
-      appearance: 'none',
+      'appearance': 'none',
       'background-color': '#fff',
       'border-color': theme('colors.gray.500', colors.gray[500]) as string,
       'border-width': borderWidth['DEFAULT'] as string,
@@ -41,8 +42,8 @@ select
       'font-size': baseFontSize,
       'line-height': baseLineHeight,
       '&:focus': {
-        outline: outline.none[0],
-        'outline-offset': outline.none[1],
+        'outline': staticUtilities['outline-none']['utility'][0],
+        'outline-offset': staticUtilities['outline-none']['utility'][1],
         '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
         '--tw-ring-offset-width': '0px',
         '--tw-ring-offset-color': '#fff',
@@ -111,21 +112,21 @@ select
 `]: {
       '-webkit-appearance': 'none',
       '-moz-appearance': 'none',
-      appearance: 'none',
-      padding: '0',
+      'appearance': 'none',
+      'padding': '0',
       '-webkit-print-color-adjust': 'exact',
       'color-adjust': 'exact',
-      display: 'inline-block',
+      'display': 'inline-block',
       'vertical-align': 'middle',
       'background-origin': 'border-box',
       '-webkit-user-select': 'none',
       '-moz-user-select': 'none',
       '-ms-user-select': 'none',
       'user-select': 'none',
       'flex-shrink': '0',
-      height: spacing(4),
-      width: spacing(4),
-      color: theme('colors.blue.600', colors.blue[600]) as string,
+      'height': spacing(4),
+      'width': spacing(4),
+      'color': theme('colors.blue.600', colors.blue[600]) as string,
       'background-color': '#fff',
       'border-color': theme('colors.gray.500', colors.gray[500]) as string,
       'border-width': borderWidth['DEFAULT'] as string,
@@ -143,8 +144,8 @@ select
 [type='checkbox']:focus,
 [type='radio']:focus
     `]: {
-      outline: outline.none[0],
-      'outline-offset': outline.none[1],
+      'outline': staticUtilities['outline-none']['utility'][0],
+      'outline-offset': staticUtilities['outline-none']['utility'][1],
       '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
       '--tw-ring-offset-width': '2px',
       '--tw-ring-offset-color': '#fff',
@@ -208,11 +209,11 @@ select
     },
 
     ['[type=\'file\']']: {
-      background: 'unset',
+      'background': 'unset',
       'border-color': 'inherit',
       'border-width': '0',
       'border-radius': '0',
-      padding: '0',
+      'padding': '0',
       'font-size': 'unset',
       'line-height': 'inherit',
     },

src/utils/completions.ts

@@ -1,6 +1,6 @@
 import type { Processor } from '../lib';
 import { flatColors } from './tools';
-const utilities: { [key:string]: string[]} = {
+const utilities: { [key: string]: string[] } = {
   // Layout
   columns: [
     'columns-${static}',
@@ -422,11 +422,7 @@ const utilities: { [key:string]: string[]} = {
   // Interactivity
   outline: [
     'outline-${static}',
-  ],
-  outlineColor: [
     'outline-${color}',
-    'outline-solid-${color}',
-    'outline-dotted-${color}',
   ],
   // SVG
   fill: [
@@ -512,7 +508,7 @@ const utilities: { [key:string]: string[]} = {
   ],
 };
 
-const negative: { [key:string]: true} = {
+const negative: { [key: string]: true } = {
   inset: true,
   zIndex: true,
   order: true,
@@ -524,22 +520,22 @@ const negative: { [key:string]: true} = {
   skew: true,
 };
 
-export function generateCompletions(processor: Processor): { static: string[], color: string[], dynamic: string[]} {
-  const completions : {
+export function generateCompletions(processor: Processor): { static: string[], color: string[], dynamic: string[] } {
+  const completions: {
     static: string[],
     color: string[],
     dynamic: string[]
   } = { static: [], color: [], dynamic: [] };
-  const colors = flatColors(processor.theme('colors') as {[key:string]:string|{[key:string]:string}});
+  const colors = flatColors(processor.theme('colors') as { [key: string]: string | { [key: string]: string } });
   for (const [config, list] of Object.entries(utilities)) {
     list.forEach(utility => {
       const mark = utility.search(/\$/);
       if (mark === -1) {
         completions.static.push(utility);
       } else {
-        const prefix = utility.slice(0, mark-1);
+        const prefix = utility.slice(0, mark - 1);
         const suffix = utility.slice(mark);
-        switch(suffix) {
+        switch (suffix) {
         case '${static}':
           completions.static = completions.static.concat(Object.keys(processor.theme(config, {}) as any).map(i => i === 'DEFAULT' ? prefix : i.charAt(0) === '-' ? `-${prefix}${i}` : `${prefix}-${i}`));
           break;

test/processor/__snapshots__/attributify.test.ts.yml

@@ -478,8 +478,8 @@ Tools / with animate appearance cursor outline pointer resize select fill stroke
     outline-offset: 2px;
   }
   [outline~="white"] {
-    outline: 2px dotted rgb(255, 255, 255);
-    outline-offset: 2px;
+    --tw-outline-opacity: 1;
+    outline-color: rgba(255, 255, 255, var(--tw-outline-opacity));
   }
   [pointer~="none"] {
     pointer-events: none;

test/processor/__snapshots__/interpret.test.ts.yml

@@ -152,31 +152,6 @@ Tools / interpret important / important / 0: |-
     --tw-text-opacity: 1 !important;
     color: rgba(110, 231, 183, var(--tw-text-opacity)) !important;
   }
-Tools / interpret outline / outline / 0: |-
-  .outline-none {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-  .outline-black {
-    outline: 2px dotted rgb(0, 0, 0);
-    outline-offset: 2px;
-  }
-  .outline-solid-black {
-    outline: 2px solid rgba(0, 0, 0, var(--tw-outline-opacity, 1));
-    outline-offset: 2px;
-  }
-  .outline-dotted-white {
-    outline: 2px dotted rgba(255, 255, 255, var(--tw-outline-opacity, 1));
-    outline-offset: 2px;
-  }
-  .outline-solid-red-200 {
-    outline: 2px solid rgba(254, 202, 202, var(--tw-outline-opacity, 1));
-    outline-offset: 2px;
-  }
-  .outline-dotted-red-200 {
-    outline: 2px dotted rgba(254, 202, 202, var(--tw-outline-opacity, 1));
-    outline-offset: 2px;
-  }
 Tools / interpret screen variants / screen variants / 0: |-
   @media (min-width: 768px) {
     .md\:p-1 {
@@ -381,8 +356,7 @@ Tools / interpret square brackets / square brackets / 0: |-
     opacity: var(--opacity);
   }
   .outline-\[var\(--outline\)\] {
-    outline: 2px dotted rgb(var(--outline));
-    outline-offset: 2px;
+    outline-color: var(--outline);
   }
   .p-\[30em\] {
     padding: 30em;

test/processor/__snapshots__/utilities.test.ts.yml

@@ -1034,9 +1034,9 @@ Tools / more color opacity group utilities / css / 0: |-
   .to-green-500\/50 {
     --tw-gradient-to: rgba(16, 185, 129, 0.5);
   }
-  .outline-solid-green-500\/50 {
-    outline: 2px solid rgba(16, 185, 129, 0.5);
-    outline-offset: 2px;
+  .outline-green-500\/50 {
+    --tw-outline-opacity: 0.5;
+    outline-color: rgba(16, 185, 129, var(--tw-outline-opacity));
   }
   .ring-offset-green-500\/50 {
     --tw-ring-offset-opacity: 50;
@@ -1054,6 +1054,40 @@ Tools / more color opacity group utilities / css / 0: |-
     --tw-text-stroke-opacity: 0.5;
     -webkit-text-stroke-color: rgba(16, 185, 129, var(--tw-text-stroke-opacity));
   }
+Tools / outline width & color & style & offset / css / 0: |-
+  .outline-offset-1 {
+    outline-offset: 1px;
+  }
+  .outline-offset-2 {
+    outline-offset: 2px;
+  }
+  .outline-none {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  .outline-opacity-50 {
+    --tw-outline-opacity: 0.5;
+  }
+  .outline-red-800 {
+    --tw-outline-opacity: 1;
+    outline-color: rgba(153, 27, 27, var(--tw-outline-opacity));
+  }
+  .outline-red-800\/50 {
+    --tw-outline-opacity: 0.5;
+    outline-color: rgba(153, 27, 27, var(--tw-outline-opacity));
+  }
+  .outline {
+    outline-style: solid;
+  }
+  .outline-0 {
+    outline-width: 0px;
+  }
+  .outline-8 {
+    outline-width: 8px;
+  }
+  .outline-dashed {
+    outline-style: dashed;
+  }
 Tools / prespective and perspective origin / css / 0: |-
   .perspect-none {
     -webkit-perspective: none;

test/processor/interpret.test.ts

@@ -118,13 +118,6 @@ describe('Interpretation Mode', () => {
     expect(result.styleSheet.build()).toMatchSnapshot('screen variants');
   });
 
-  // #222
-  it('interpret outline', () => {
-    const result = processor.interpret('outline-black outline-none outline-solid-black outline-dotted-white outline-solid-red-200 outline-dotted-red-200');
-    expect(result.ignored.length).toEqual(0);
-    expect(result.styleSheet.build()).toMatchSnapshot('outline');
-  });
-
   // #234
   it('interpret constructor', () => {
     const result = processor.interpret('constructor');