diff --git a/lib/index.js b/lib/index.js index 0b9028c..b666f87 100644 --- a/lib/index.js +++ b/lib/index.js @@ -2,8 +2,10 @@ const padding = require("./padding"); const margin = require("./margin"); +const prose = require("./prose"); module.exports = function (opts) { padding(opts); margin(opts); + prose(opts); }; diff --git a/lib/prose.js b/lib/prose.js new file mode 100644 index 0000000..a44ae49 --- /dev/null +++ b/lib/prose.js @@ -0,0 +1,26 @@ +"use strict"; + +module.exports = function ({ addUtilities, config, variants, theme }) { + let replaceProps = function (ulProps) { + const typographyCssArray = ulProps.css; + const typographyCss = typographyCssArray[0]; + let ulPropsForRtl = typographyCss.ul; + ulPropsForRtl.paddingRight = ulPropsForRtl.paddingLeft; + ulPropsForRtl.paddingLeft = "unset"; + + return ulPropsForRtl; + }; + + const typographyProps = theme("typography"); + const screenSizes = ["sm", "base", "lg", "xl", "2xl"]; + + const cssValues = new Map(); + screenSizes.forEach((val) => { + const vName = `[dir=rtl] .prose-${val} :where(ul):not(:where([class~=\"not-prose\"] *))`; + cssValues.set(vName, replaceProps(typographyProps[val])); + }); + + cssValues.forEach((value, key) => { + addUtilities({ [key]: value }); + }); +};