Feature custom units without --

package.json

@@ -6,6 +6,9 @@
 	"license": "CC0-1.0",
 	"main": "postcss-custom-units.js",
 	"types": "./postcss-custom-units.d.ts",
+  	"scripts": {
+	  "test": "jest"
+	},
 	"exports": {
 		".": {
 			"import": "./postcss-custom-units.js",
@@ -35,6 +38,7 @@
 		"postcss-custom-units.js"
 	],
 	"devDependencies": {
+		"jest": "^29.3.1",
 		"postcss": "^8.4.14"
 	},
 	"dependencies": {

postcss-custom-units.cjs

@@ -1,13 +1,15 @@
 const parseValue = require('postcss-value-parser')
 
 /** @type {import('postcss').PluginCreator} */
-const PostCSSPlugin = () => {
+const PostCSSPlugin = ({ units = [] } = {}) => {
+	const matchCustomNumber = getMatchCustomNumber(units);
+
 	return {
 		postcssPlugin: 'postcss-custom-units',
 		Declaration (declaration) {
 			const declarationValue = declaration.value
 
-			if (!declarationValue.includes('--')) return
+			if (!declarationValue.includes('--') && !units.some((unit) => declarationValue.includes(unit))) return
 
 			const declarationAST = parseValue(declarationValue)
 
@@ -18,7 +20,9 @@ const PostCSSPlugin = () => {
 
 				if (!value) return
 
-				const unit = node.value.slice(value.length)
+				let unit = node.value.slice(value.length)
+
+				if (!unit.startsWith('--')) unit = '--' + unit
 
 				Object.assign(node, {
 					type: 'function',
@@ -50,6 +54,11 @@ const PostCSSPlugin = () => {
 
 PostCSSPlugin.postcss = true
 
-const matchCustomNumber = /^[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?(?=--)/
+const getMatchCustomNumber = (units = []) => {
+	const endings = ['--', ...units]
+		.map(ending => `(?:${ending})`)
+
+	return new RegExp(`^[-+]?\\d*\.?\\d+(?:[eE][-+]?\\d+)?(?=${endings.join('|')})`);
+}
 
 module.exports = PostCSSPlugin

postcss-custom-units.js

@@ -1,13 +1,15 @@
 import parseValue from 'postcss-value-parser'
 
 /** @type {import('postcss').PluginCreator} */
-const PostCSSPlugin = () => {
+const PostCSSPlugin = ({ units = [] } = {}) => {
+	const matchCustomNumber = getMatchCustomNumber(units);
+
 	return {
 		postcssPlugin: 'postcss-custom-units',
 		Declaration (declaration) {
 			const declarationValue = declaration.value
 
-			if (!declarationValue.includes('--')) return
+			if (!declarationValue.includes('--') && !units.some((unit) => declarationValue.includes(unit))) return
 
 			const declarationAST = parseValue(declarationValue)
 
@@ -18,7 +20,9 @@ const PostCSSPlugin = () => {
 
 				if (!value) return
 
-				const unit = node.value.slice(value.length)
+				let unit = node.value.slice(value.length)
+
+				if (!unit.startsWith('--')) unit = '--' + unit
 
 				Object.assign(node, {
 					type: 'function',
@@ -50,6 +54,11 @@ const PostCSSPlugin = () => {
 
 PostCSSPlugin.postcss = true
 
-const matchCustomNumber = /^[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?(?=--)/
+const getMatchCustomNumber = (units = []) => {
+	const endings = ['--', ...units]
+		.map(ending => `(?:${ending})`)
+
+	return new RegExp(`^[-+]?\\d*\.?\\d+(?:[eE][-+]?\\d+)?(?=${endings.join('|')})`);
+}
 
 export default PostCSSPlugin

postcss-custom-units.test.js

@@ -0,0 +1,35 @@
+const postcss = require('postcss');
+
+const PostCSSPlugin = require('./postcss-custom-units.cjs');
+
+
+const getResultCss = (css, pluginOptions = {}) =>
+	postcss([PostCSSPlugin(pluginOptions)])
+		.process(css, { from: undefined })
+		.then(({ css }) => css);
+
+describe('PostCSSPlugin', () => {
+	it('Predefined units', async () => {
+		const res = await getResultCss(`
+			.f {
+				width: 200ijk;
+				height: -5fbb;
+				margin: 5--rs;
+				padding: 10px;
+				padding-left: var(--fbb);
+			}
+		`, {
+			units: ['ijk', 'fbb'],
+		});
+
+		expect(res).toBe(`
+			.f {
+				width: max(200 * var(--ijk));
+				height: max(-5 * var(--fbb));
+				margin: max(5 * var(--rs));
+				padding: 10px;
+				padding-left: var(--fbb);
+			}
+		`);
+	});
+});