diff --git a/package.json b/package.json index 8cc7001..9835849 100644 --- a/package.json +++ b/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": { diff --git a/postcss-custom-units.cjs b/postcss-custom-units.cjs index e3ec402..1ec28d7 100644 --- a/postcss-custom-units.cjs +++ b/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 diff --git a/postcss-custom-units.js b/postcss-custom-units.js index 6c06cf8..072bbcb 100644 --- a/postcss-custom-units.js +++ b/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 diff --git a/postcss-custom-units.test.js b/postcss-custom-units.test.js new file mode 100644 index 0000000..a69ce5e --- /dev/null +++ b/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); + } + `); + }); +});