Migrate postcss-px-to-rem with twind

[sondh0127]

I'm using tailwindcss and postcss-px-to-rem.

I wonder how to migrate it to twind

'use strict'

const objectAssign = require('object-assign')

const defaults = {
	unitToConvert: 'px',
	widthOfDesignLayout: 1920,
	unitPrecision: 5,
	selectorBlackList: [],
	minPixelValue: 1,
	mediaQuery: false,
}

module.exports = function (options) {
	const opts = objectAssign({}, defaults, options)
	const pxReplace = createPxReplace(
		opts.widthOfDesignLayout,
		opts.minPixelValue,
		opts.unitPrecision,
	)
	// excluding regex trick: http://www.rexegg.com/regex-best-trick.html
	// Not anything inside double quotes
	// Not anything inside single quotes
	// Not anything inside url()
	// Any digit followed by px
	// !singlequotes|!doublequotes|!url()|pixelunit
	const pxRegex = new RegExp(
		'"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)' + opts.unitToConvert,
		'ig',
	)

	return {
		postcssPlugin: 'postcss-px-to-rem',
		Once(css) {
			css.walkDecls(function (decl, i) {
				// This should be the fastest test and will remove most declarations
				if (!decl.value.includes(opts.unitToConvert)) return

				if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector))
					return

				decl.value = decl.value.replace(
					pxRegex,
					createPxReplace(
						opts.widthOfDesignLayout,
						opts.minPixelValue,
						opts.unitPrecision,
					),
				)
			})

			if (opts.mediaQuery) {
				css.walkAtRules('media', function (rule) {
					if (!rule.params.includes(opts.unitToConvert)) return
					rule.params = rule.params.replace(pxRegex, pxReplace)
				})
			}
		},
	}
}

function createPxReplace(widthOfDesignLayout, minPixelValue, unitPrecision) {
	return function (m, $1) {
		if (!$1) return m
		const pixels = parseFloat($1)
		if (pixels <= minPixelValue) return m
		// because 1 rem is 10 percent of viewportSize in
		// https://github.com/QuellingBlade/lib-flexible-for-dashboard,
		// here multiply 10 to match
		return toFixed((pixels / widthOfDesignLayout) * 100, unitPrecision) + 'rem'
	}
}

function toFixed(number, precision) {
	const multiplier = Math.pow(10, precision + 1)
	const wholeNumber = Math.floor(number * multiplier)
	return (Math.round(wholeNumber / 10) * 10) / multiplier
}

function blacklistedSelector(blacklist, selector) {
	if (typeof selector !== 'string') return
	return blacklist.some(function (regex) {
		if (typeof regex === 'string') return selector.includes(regex)
		return selector.match(regex)
	})
}

module.exports.postcss = true

postcss.config.js

module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
		cssnano: {},
		'./postcss-px-to-rem': {
			unitToConvert: 'px',
			widthOfDesignLayout: 1920, // (Number) The width of the viewport.
			unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
			selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
			minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
			mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
		},
	},
}

[sastan]

I think that maybe possible using the prefix option:

import { setup, autoprefix as prefix } from 'twind'
// Or if you do not want to prefix properties
// import { setup, noprefix as prefix } from 'twind'

const pxToRem = (value) => {
  // Your implementation here
  return value
}

setup({
  // prefix: (property: string, value: string, important?: boolean) => string
  prefix: (property, value, important) => prefix(property, pxToRem(value), important),
})

[sondh0127]

Thanks. You are awesome! I only need to return the value to make it work.

function pxToRem(value) {
  if (!value.includes(opts.unitToConvert)) return value

  if (blacklistedSelector(opts.selectorBlackList, parent.selector)) return value
  value = value.replace(
    pxRegex,
    createPxReplace(opts.widthOfDesignLayout, opts.minPixelValue, opts.unitPrecision),
  )
  return value
}

[sastan]

Yes. You'll need to return the modified value. Sorry forgot that in the example.