diff --git a/src/index.js b/src/index.js index b370b86..8e1de48 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import plugin from 'tailwindcss/plugin' import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette' +import {msoBorderColors} from './msoColors.js' const tailwindCssMsoPlugin = plugin.withOptions( function (options = {}) { @@ -617,6 +618,132 @@ const tailwindCssMsoPlugin = plugin.withOptions( respectImportant, } ) + + // mso-border colors + matchUtilities( + { + 'mso-border-alt': value => ({ + 'mso-border-alt': value + }), + 'mso-border-between': value => ({ + 'mso-border-between': value + }), + 'mso-border-bottom-alt': value => ({ + 'mso-border-bottom-alt': value + }), + 'mso-border-left-alt': value => ({ + 'mso-border-left-alt': value + }), + 'mso-border-right-alt': value => ({ + 'mso-border-right-alt': value + }), + 'mso-border-top-alt': value => ({ + 'mso-border-top-alt': value + }), + }, + { + values: { + ...msoBorderColors, + ...flattenColorPalette(theme('colors')), + + }, + respectImportant, + } + ) + + // mso-border widths + matchUtilities( + { + 'mso-border-between-width': value => ({ + 'mso-border-between-width': value + }), + 'mso-border-width-alt': value => ({ + 'mso-border-width-alt': value + }), + 'mso-border-bottom-width-alt': value => ({ + 'mso-border-bottom-width-alt': value + }), + 'mso-border-left-width-alt': value => ({ + 'mso-border-left-width-alt': value + }), + 'mso-border-right-width-alt': value => ({ + 'mso-border-right-width-alt': value + }), + 'mso-border-top-width-alt': value => ({ + 'mso-border-top-width-alt': value + }), + }, + { + values: { + medium: 'medium', + thick: 'thick', + thin: 'thin', + ...theme('spacing'), + }, + respectImportant, + } + ) + + // mso-border-*-source + matchUtilities( + { + 'mso-border-bottom-source': value => ({ + 'mso-border-bottom-source': value + }), + 'mso-border-left-source': value => ({ + 'mso-border-left-source': value + }), + 'mso-border-right-source': value => ({ + 'mso-border-right-source': value + }), + 'mso-border-top-source': value => ({ + 'mso-border-top-source': value + }), + }, + { + values: { + auto: 'auto', + background: 'background', + foreground: 'foreground', + + }, + respectImportant, + } + ) + + // mso-border-shadow + matchUtilities( + { + 'mso-border-shadow': value => ({ + 'mso-border-shadow': value + }), + }, + { + values: { + no: 'no', + yes: 'yes', + + }, + respectImportant, + } + ) + + // mso-border-effect + matchUtilities( + { + 'mso-border-effect': value => ({ + 'mso-border-effect': value + }), + }, + { + values: { + '3d': '3d', + box: 'box', + + }, + respectImportant, + } + ) } } ) diff --git a/src/index.test.js b/src/index.test.js index 8b4c26a..91a0685 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -898,3 +898,261 @@ test('mso-element-frame-{v|h}space', () => { `) }) }) + +test('mso-border colors', () => { + const config = { + content: [{ + raw: String.raw` +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ ` + }], + } + + return run(config).then(result => { + expect(result.css).toMatchCss(String.raw` + .mso-border-alt-\[\#ffcc00\] { + mso-border-alt: #ffcc00 + } + .mso-border-alt-auto { + mso-border-alt: auto + } + .mso-border-alt-red-200 { + mso-border-alt: #fecaca + } + + .mso-border-between-\[\#ffcc00\] { + mso-border-between: #ffcc00 + } + .mso-border-between-auto { + mso-border-between: auto + } + .mso-border-between-red-200 { + mso-border-between: #fecaca + } + + .mso-border-bottom-alt-\[\#ffcc00\] { + mso-border-bottom-alt: #ffcc00 + } + .mso-border-bottom-alt-auto { + mso-border-bottom-alt: auto + } + .mso-border-bottom-alt-red-200 { + mso-border-bottom-alt: #fecaca + } + + .mso-border-left-alt-\[\#ffcc00\] { + mso-border-left-alt: #ffcc00 + } + .mso-border-left-alt-auto { + mso-border-left-alt: auto + } + .mso-border-left-alt-red-200 { + mso-border-left-alt: #fecaca + } + + .mso-border-right-alt-\[\#ffcc00\] { + mso-border-right-alt: #ffcc00 + } + .mso-border-right-alt-auto { + mso-border-right-alt: auto + } + .mso-border-right-alt-red-200 { + mso-border-right-alt: #fecaca + } + + .mso-border-top-alt-\[\#ffcc00\] { + mso-border-top-alt: #ffcc00 + } + .mso-border-top-alt-auto { + mso-border-top-alt: auto + } + .mso-border-top-alt-red-200 { + mso-border-top-alt: #fecaca + } + `) + }) +}) + +test('mso-border widths', () => { + const config = { + content: [{ + raw: String.raw` +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ ` + }], + } + + return run(config).then(result => { + expect(result.css).toMatchCss(String.raw` + .mso-border-between-width-20 { + mso-border-between-width: 5rem + } + .mso-border-between-width-\[10px\] { + mso-border-between-width: 10px + } + .mso-border-between-width-thin { + mso-border-between-width: thin + } + + .mso-border-bottom-width-alt-20 { + mso-border-bottom-width-alt: 5rem + } + .mso-border-bottom-width-alt-\[10px\] { + mso-border-bottom-width-alt: 10px + } + .mso-border-bottom-width-alt-thin { + mso-border-bottom-width-alt: thin + } + + .mso-border-left-width-alt-20 { + mso-border-left-width-alt: 5rem + } + .mso-border-left-width-alt-\[10px\] { + mso-border-left-width-alt: 10px + } + .mso-border-left-width-alt-thin { + mso-border-left-width-alt: thin + } + + .mso-border-right-width-alt-20 { + mso-border-right-width-alt: 5rem + } + .mso-border-right-width-alt-\[10px\] { + mso-border-right-width-alt: 10px + } + .mso-border-right-width-alt-thin { + mso-border-right-width-alt: thin + } + + .mso-border-top-width-alt-20 { + mso-border-top-width-alt: 5rem + } + .mso-border-top-width-alt-\[10px\] { + mso-border-top-width-alt: 10px + } + .mso-border-top-width-alt-thin { + mso-border-top-width-alt: thin + } + + .mso-border-width-alt-20 { + mso-border-width-alt: 5rem + } + .mso-border-width-alt-\[10px\] { + mso-border-width-alt: 10px + } + .mso-border-width-alt-thin { + mso-border-width-alt: thin + } + `) + }) +}) + +test('mso-border-{bottom|left|right|top}-source', () => { + const config = { + content: [{ + raw: String.raw` +
+
+
+
+ ` + }], + } + + return run(config).then(result => { + expect(result.css).toMatchCss(String.raw` + .mso-border-bottom-source-auto { + mso-border-bottom-source: auto + } + .mso-border-left-source-auto { + mso-border-left-source: auto + } + .mso-border-right-source-auto { + mso-border-right-source: auto + } + .mso-border-top-source-auto { + mso-border-top-source: auto + } + `) + }) +}) + +test('mso-border-shadow', () => { + const config = { + content: [{ + raw: String.raw` +
+ ` + }], + } + + return run(config).then(result => { + expect(result.css).toMatchCss(String.raw` + .mso-border-shadow-no { + mso-border-shadow: no + } + `) + }) +}) + +test('mso-border-effect', () => { + const config = { + content: [{ + raw: String.raw` +
+ ` + }], + } + + return run(config).then(result => { + expect(result.css).toMatchCss(String.raw` + .mso-border-effect-3d { + mso-border-effect: 3d + } + `) + }) +}) diff --git a/src/msoColors.js b/src/msoColors.js new file mode 100644 index 0000000..6d125e8 --- /dev/null +++ b/src/msoColors.js @@ -0,0 +1,212 @@ +/* eslint-disable */ +export const msoBorderColors = { + 'auto': 'auto', + 'windowtext': 'windowtext', + 'apples': 'apples', + 'arched-scallops': 'arched-scallops', + 'baby-pacifier': 'baby-pacifier', + 'baby-rattle': 'baby-rattle', + 'balloons-3-colors': 'balloons-3-colors', + 'balloons-hot-air': 'balloons-hot-air', + 'basic-black-dashes': 'basic-black-dashes', + 'basic-black-dots': 'basic-black-dots', + 'basic-black-squares': 'basic-black-squares', + 'basic-thin-lines': 'basic-thin-lines', + 'basic-white-dashes': 'basic-white-dashes', + 'basic-white-dots': 'basic-white-dots', + 'basic-white-squares': 'basic-white-squares', + 'basic-wide-inline': 'basic-wide-inline', + 'basic-wide-midline': 'basic-wide-midline', + 'basic-wide-outline': 'basic-wide-outline', + 'bats': 'bats', + 'birds': 'birds', + 'birds-flight': 'birds-flight', + 'cabins': 'cabins', + 'cake-slice': 'cake-slice', + 'candy-corn': 'candy-corn', + 'celtic-knotwork': 'celtic-knotwork', + 'certificate-banner': 'certificate-banner', + 'chain-link': 'chain-link', + 'champagne-bottle': 'champagne-bottle', + 'checked-bar-black': 'checked-bar-black', + 'checked-bar-color': 'checked-bar-color', + 'checkered': 'checkered', + 'christmas-tree': 'christmas-tree', + 'circles-lines': 'circles-lines', + 'circles-rectangles': 'circles-rectangles', + 'classical-wave': 'classical-wave', + 'clocks': 'clocks', + '': '', + 'compass': 'compass', + 'confetti': 'confetti', + 'confetti-grays': 'confetti-grays', + 'confetti-outline': 'confetti-outline', + 'confetti-streamers': 'confetti-streamers', + 'confetti-white': 'confetti-white', + 'corner-triangles': 'corner-triangles', + 'coupon-cutout-dashes': 'coupon-cutout-dashes', + 'coupon-cutout-dots': 'coupon-cutout-dots', + 'crazy-maze': 'crazy-maze', + 'creatures-butterfly': 'creatures-butterfly', + 'creatures-fish': 'creatures-fish', + 'creatures-insects': 'creatures-insects', + 'creatures-lady-bug': 'creatures-lady-bug', + 'cross-stitch': 'cross-stitch', + 'cup': 'cup', + 'dash-dot-stroked': 'dash-dot-stroked', + 'dashed': 'dashed', + 'dash-large-gap': 'dash-large-gap', + 'dash-small-gap': 'dash-small-gap', + 'deco-arch': 'deco-arch', + 'deco-arch-color': 'deco-arch-color', + 'deco-blocks': 'deco-blocks', + 'diamonds-gray': 'diamonds-gray', + 'dot-dash': 'dot-dash', + 'dot-dash-slanted': 'dot-dash-slanted', + 'dot-dot-dash': 'dot-dot-dash', + 'dotted': 'dotted', + 'double': 'double', + 'double-d': 'double-d', + 'double-diamonds': 'double-diamonds', + 'double-wave': 'double-wave', + 'earth-1': 'earth-1', + 'earth-2': 'earth-2', + 'eclipsing-squares-1': 'eclipsing-squares-1', + 'eclipsing-squares-2': 'eclipsing-squares-2', + 'eggs-black': 'eggs-black', + 'emboss-3d': 'emboss-3d', + 'engrave-3d': 'engrave-3d', + 'fans': 'fans', + 'film': 'film', + 'firecrackers': 'firecrackers', + 'flowers-block-print': 'flowers-block-print', + 'flowers-daisies': 'flowers-daisies', + 'flowers-modern-1': 'flowers-modern-1', + 'flowers-modern-2': 'flowers-modern-2', + 'flowers-pansy': 'flowers-pansy', + 'flowers-red-rose': 'flowers-red-rose', + 'flowers-roses': 'flowers-roses', + 'flowers-teacup': 'flowers-teacup', + 'flowers-tiny': 'flowers-tiny', + 'gems': 'gems', + 'gingerbread-man': 'gingerbread-man', + 'gradient': 'gradient', + 'groove': 'groove', + 'hairline': 'hairline', + 'handmade-1': 'handmade-1', + 'handmade-2': 'handmade-2', + 'heart-balloon': 'heart-balloon', + 'heart-gray': 'heart-gray', + 'hearts': 'hearts', + 'heebie-jeebies': 'heebie-jeebies', + 'holly': 'holly', + 'house-funky': 'house-funky', + 'hypnotic': 'hypnotic', + 'ice-cream-cones': 'ice-cream-cones', + 'inset': 'inset', + '': '', + 'light-bulb': 'light-bulb', + 'lightning-1': 'lightning-1', + 'lightning-2': 'lightning-2', + 'maple-leaf': 'maple-leaf', + 'maple-muffins': 'maple-muffins', + 'map-pins': 'map-pins', + 'marquee': 'marquee', + 'marquee-toothed': 'marquee-toothed', + 'medium': 'medium', + 'moons': 'moons', + 'mosaic': 'mosaic', + 'music-notes': 'music-notes', + 'none': 'none', + 'northwest': 'northwest', + 'outset': 'outset', + 'ovals': 'ovals', + 'packages': 'packages', + 'palms-black': 'palms-black', + 'palms-color': 'palms-color', + 'paper-clips': 'paper-clips', + 'papyrus': 'papyrus', + 'party-favor': 'party-favor', + 'party-glass': 'party-glass', + 'pencils': 'pencils', + 'people': 'people', + 'people-hats': 'people-hats', + 'people-waving': 'people-waving', + 'poinsettias': 'poinsettias', + 'postage-stamp': 'postage-stamp', + 'pumpkin-1': 'pumpkin-1', + 'push-pin-note-1': 'push-pin-note-1', + 'push-pin-note-2': 'push-pin-note-2', + 'pyramids': 'pyramids', + 'pyramids-above': 'pyramids-above', + 'quadrants': 'quadrants', + 'ridge': 'ridge', + 'rings': 'rings', + 'safari': 'safari', + 'sawtooth': 'sawtooth', + 'sawtooth-gray': 'sawtooth-gray', + 'scared-cat': 'scared-cat', + 'seattle': 'seattle', + 'shadowed-squares': 'shadowed-squares', + 'sharks-teeth': 'sharks-teeth', + 'shorebird-tracks': 'shorebird-tracks', + 'short-dash': 'short-dash', + 'skyrocket': 'skyrocket', + 'snowflake-fancy': 'snowflake-fancy', + 'snowflakes': 'snowflakes', + 'solid': 'solid', + 'solid-thick': 'solid-thick', + 'sombrero': 'sombrero', + 'southwest': 'southwest', + 'stars': 'stars', + 'stars-3d': 'stars-3d', + 'stars-black': 'stars-black', + 'stars-shadowed': 'stars-shadowed', + 'stars-top': 'stars-top', + 'sun': 'sun', + 'swirligig': 'swirligig', + 'thick': 'thick', + 'thick-thin-large-gap': 'thick-thin-large-gap', + 'thick-thin-medium-gap': 'thick-thin-medium-gap', + 'thick-thin-small-gap': 'thick-thin-small-gap', + 'thick-thin-thick-small-gap': 'thick-thin-thick-small-gap', + 'thin': 'thin', + 'thin-thick-large-gap': 'thin-thick-large-gap', + 'thin-thick-medium-gap': 'thin-thick-medium-gap', + 'thin-thick-small-gap': 'thin-thick-small-gap', + 'thin-thick-thin-large-gap': 'thin-thick-thin-large-gap', + 'thin-thick-thin-medium-gap': 'thin-thick-thin-medium-gap', + 'thin-thick-thin-small-gap': 'thin-thick-thin-small-gap', + 'three-d-emboss': 'three-d-emboss', + 'three-d-engrave': 'three-d-engrave', + 'torn-paper': 'torn-paper', + 'torn-paper-black': 'torn-paper-black', + 'trees': 'trees', + 'triangle-party': 'triangle-party', + 'triangles': 'triangles', + 'tribal-1': 'tribal-1', + 'tribal-2': 'tribal-2', + 'tribal-3': 'tribal-3', + 'tribal-4': 'tribal-4', + 'tribal-5': 'tribal-5', + 'tribal-6': 'tribal-6', + 'triple': 'triple', + 'twisted-lines-1': 'twisted-lines-1', + 'twisted-lines-2': 'twisted-lines-2', + 'vine': 'vine', + 'wave': 'wave', + 'waveline': 'waveline', + 'weaving-angles': 'weaving-angles', + 'weaving-braid': 'weaving-braid', + 'weaving-ribbon': 'weaving-ribbon', + 'weaving-strips': 'weaving-strips', + 'white-flowers': 'white-flowers', + 'windowtext': 'windowtext', + 'woodwork': 'woodwork', + 'x-illusions': 'x-illusions', + 'zany-triangles': 'zany-triangles', + 'zig-zag': 'zig-zag', + 'zig-zag-stitch': 'zig-zag-stitch' +} + +msoBorderColors