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', + '