Add custom and accessible outlines

__fixtures__/interactivity.js

@@ -14,6 +14,8 @@ tw`cursor-not-allowed`
 
 // https://tailwindcss.com/docs/outline
 tw`outline-none`
+tw`outline-white`
+tw`outline-black`
 
 // https://tailwindcss.com/docs/pointer-events
 tw`pointer-events-none`

__snapshots__/plugin.test.js.snap

@@ -7434,6 +7434,8 @@ tw\`cursor-not-allowed\`
 
 // https://tailwindcss.com/docs/outline
 tw\`outline-none\`
+tw\`outline-white\`
+tw\`outline-black\`
 
 // https://tailwindcss.com/docs/pointer-events
 tw\`pointer-events-none\`
@@ -7481,7 +7483,16 @@ tw\`select-auto\`
 }) // https://tailwindcss.com/docs/outline
 
 ;({
-  outline: 0,
+  outline: '2px solid transparent',
+  outlineOffset: '2px',
+})
+;({
+  outline: '2px dotted white',
+  outlineOffset: '2px',
+})
+;({
+  outline: '2px dotted black',
+  outlineOffset: '2px',
 }) // https://tailwindcss.com/docs/pointer-events
 
 ;({

package.json

@@ -60,7 +60,7 @@
     "dset": "^2.0.1",
     "lodash.merge": "^4.6.2",
     "string-similarity": "^4.0.1",
-    "tailwindcss": "^1.8.8",
+    "tailwindcss": "^1.9.1",
     "timsort": "^0.3.0"
   },
   "peerDependencies": {

src/config/dynamicStyles.js

@@ -357,6 +357,8 @@ export default {
   cursor: { prop: 'cursor', config: 'cursor' },
 
   // https://tailwindcss.com/docs/outline
+  outline: { plugin: 'outline' },
+
   // https://tailwindcss.com/docs/pointer-events
   // https://tailwindcss.com/docs/resize
   // https://tailwindcss.com/docs/user-select

src/config/staticStyles.js

@@ -581,10 +581,8 @@ export default {
   'appearance-none': { output: { appearance: 'none' } },
 
   // https://tailwindcss.com/docs/cursor
-  // See dynamicStyles.js
-
   // https://tailwindcss.com/docs/outline
-  'outline-none': { output: { outline: 0 } },
+  // See dynamicStyles.js
 
   // https://tailwindcss.com/docs/pointer-events
   'pointer-events-none': {

src/plugins/index.js

@@ -1,9 +1,10 @@
 export { default as animation } from './animation'
-export { default as placeholder } from './placeholder'
-export { default as container } from './container'
-export { default as gradient } from './gradient'
+export { default as bg } from './bg'
 export { default as border } from './border'
+export { default as container } from './container'
 export { default as divide } from './divide'
+export { default as gradient } from './gradient'
+export { default as outline } from './outline'
+export { default as placeholder } from './placeholder'
 export { default as space } from './space'
 export { default as text } from './text'
-export { default as bg } from './bg'

src/plugins/outline.js

@@ -0,0 +1,24 @@
+export default properties => {
+  const {
+    theme,
+    match,
+    getConfigValue,
+    errors: { errorSuggestions },
+    pieces: { important },
+  } = properties
+
+  const classValue = match(/(?<=(outline)-)([^]*)/)
+  const configValue = config => getConfigValue(theme(config), classValue)
+
+  const value = configValue('outline')
+  if (!value) {
+    errorSuggestions({ config: ['outline'] })
+  }
+
+  const [outline, outlineOffset = 0] = Array.isArray(value) ? value : [value]
+
+  return {
+    outline: `${outline}${important}`,
+    ...(outlineOffset && { outlineOffset: `${outlineOffset}${important}` }),
+  }
+}

src/suggestions.js

@@ -23,9 +23,18 @@ const getCustomSuggestions = className => {
 const flattenObject = (object, prefix = '') =>
   Object.keys(object).reduce((result, k) => {
     const pre = prefix.length > 0 ? prefix + '-' : ''
-    if (typeof object[k] === 'object')
-      Object.assign(result, flattenObject(object[k], pre + k))
-    else result[pre + k] = object[k]
+
+    const value = object[k]
+    const fullKey = pre + k
+
+    if (Array.isArray(value)) {
+      result[fullKey] = value
+    } else if (typeof value !== 'object') {
+      Object.assign(result, flattenObject(value, fullKey))
+    } else {
+      result[fullKey] = value
+    }
+
     return result
   }, {})