From 8f87c9cfd9d908afbb39fcf49ee83c9311c7e489 Mon Sep 17 00:00:00 2001 From: Dmitriy Date: Fri, 9 Dec 2022 19:33:08 +0300 Subject: [PATCH 1/3] Add support of custom units without -- --- package.json | 80 +++++++++++++++++++----------------- postcss-custom-units.cjs | 17 ++++++-- postcss-custom-units.js | 17 ++++++-- postcss-custom-units.test.js | 35 ++++++++++++++++ 4 files changed, 103 insertions(+), 46 deletions(-) create mode 100644 postcss-custom-units.test.js diff --git a/package.json b/package.json index 8cc7001..0fa8b11 100644 --- a/package.json +++ b/package.json @@ -1,43 +1,47 @@ { - "name": "@csstools/custom-units", - "description": "Use Custom Units in CSS", - "type": "module", - "version": "0.1.1", - "license": "CC0-1.0", - "main": "postcss-custom-units.js", - "types": "./postcss-custom-units.d.ts", - "exports": { - ".": { - "import": "./postcss-custom-units.js", - "require": "./postcss-custom-units.cjs", - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units": { - "import": "./postcss-custom-units.js", - "require": "./postcss-custom-units.cjs", - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units.js": { - "import": "./postcss-custom-units.js", - "require": "./postcss-custom-units.cjs", - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units.d": { - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units.d.ts": { - "types": "./postcss-custom-units.d.ts" - } + "name": "@csstools/custom-units", + "description": "Use Custom Units in CSS", + "type": "module", + "version": "0.1.1", + "license": "CC0-1.0", + "main": "postcss-custom-units.js", + "types": "./postcss-custom-units.d.ts", + "scripts": { + "test": "jest" + }, + "exports": { + ".": { + "import": "./postcss-custom-units.js", + "require": "./postcss-custom-units.cjs", + "types": "./postcss-custom-units.d.ts" }, - "files": [ - "postcss-custom-units.cjs", - "postcss-custom-units.d.ts", - "postcss-custom-units.js" - ], - "devDependencies": { - "postcss": "^8.4.14" + "./postcss-custom-units": { + "import": "./postcss-custom-units.js", + "require": "./postcss-custom-units.cjs", + "types": "./postcss-custom-units.d.ts" }, - "dependencies": { - "postcss-value-parser": "^4.2.0" + "./postcss-custom-units.js": { + "import": "./postcss-custom-units.js", + "require": "./postcss-custom-units.cjs", + "types": "./postcss-custom-units.d.ts" + }, + "./postcss-custom-units.d": { + "types": "./postcss-custom-units.d.ts" + }, + "./postcss-custom-units.d.ts": { + "types": "./postcss-custom-units.d.ts" } + }, + "files": [ + "postcss-custom-units.cjs", + "postcss-custom-units.d.ts", + "postcss-custom-units.js" + ], + "devDependencies": { + "jest": "^29.3.1", + "postcss": "^8.4.14" + }, + "dependencies": { + "postcss-value-parser": "^4.2.0" + } } 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); + } + `); + }); +}); From 8323b8e132d855a9e3cc82b2d0d27e4599564f48 Mon Sep 17 00:00:00 2001 From: Dmitriy Date: Fri, 9 Dec 2022 19:33:59 +0300 Subject: [PATCH 2/3] Fix package.json --- package.json | 56 ++++++++++++++++++++++++++-------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 0fa8b11..b281cd7 100644 --- a/package.json +++ b/package.json @@ -7,41 +7,41 @@ "main": "postcss-custom-units.js", "types": "./postcss-custom-units.d.ts", "scripts": { - "test": "jest" + "test": "jest" }, "exports": { - ".": { - "import": "./postcss-custom-units.js", - "require": "./postcss-custom-units.cjs", - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units": { - "import": "./postcss-custom-units.js", - "require": "./postcss-custom-units.cjs", - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units.js": { - "import": "./postcss-custom-units.js", - "require": "./postcss-custom-units.cjs", - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units.d": { - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units.d.ts": { - "types": "./postcss-custom-units.d.ts" - } + ".": { + "import": "./postcss-custom-units.js", + "require": "./postcss-custom-units.cjs", + "types": "./postcss-custom-units.d.ts" + }, + "./postcss-custom-units": { + "import": "./postcss-custom-units.js", + "require": "./postcss-custom-units.cjs", + "types": "./postcss-custom-units.d.ts" + }, + "./postcss-custom-units.js": { + "import": "./postcss-custom-units.js", + "require": "./postcss-custom-units.cjs", + "types": "./postcss-custom-units.d.ts" + }, + "./postcss-custom-units.d": { + "types": "./postcss-custom-units.d.ts" + }, + "./postcss-custom-units.d.ts": { + "types": "./postcss-custom-units.d.ts" + } }, "files": [ - "postcss-custom-units.cjs", - "postcss-custom-units.d.ts", - "postcss-custom-units.js" + "postcss-custom-units.cjs", + "postcss-custom-units.d.ts", + "postcss-custom-units.js" ], "devDependencies": { - "jest": "^29.3.1", - "postcss": "^8.4.14" + "jest": "^29.3.1", + "postcss": "^8.4.14" }, "dependencies": { - "postcss-value-parser": "^4.2.0" + "postcss-value-parser": "^4.2.0" } } From 277910e71e837cdd1d152dae571d137699b50e2d Mon Sep 17 00:00:00 2001 From: Dmitriy Date: Fri, 9 Dec 2022 19:46:23 +0300 Subject: [PATCH 3/3] Another package.json fix --- package.json | 90 ++++++++++++++++++++++++++-------------------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index b281cd7..9835849 100644 --- a/package.json +++ b/package.json @@ -1,47 +1,47 @@ { - "name": "@csstools/custom-units", - "description": "Use Custom Units in CSS", - "type": "module", - "version": "0.1.1", - "license": "CC0-1.0", - "main": "postcss-custom-units.js", - "types": "./postcss-custom-units.d.ts", - "scripts": { - "test": "jest" - }, - "exports": { - ".": { - "import": "./postcss-custom-units.js", - "require": "./postcss-custom-units.cjs", - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units": { - "import": "./postcss-custom-units.js", - "require": "./postcss-custom-units.cjs", - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units.js": { - "import": "./postcss-custom-units.js", - "require": "./postcss-custom-units.cjs", - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units.d": { - "types": "./postcss-custom-units.d.ts" - }, - "./postcss-custom-units.d.ts": { - "types": "./postcss-custom-units.d.ts" - } - }, - "files": [ - "postcss-custom-units.cjs", - "postcss-custom-units.d.ts", - "postcss-custom-units.js" - ], - "devDependencies": { - "jest": "^29.3.1", - "postcss": "^8.4.14" - }, - "dependencies": { - "postcss-value-parser": "^4.2.0" - } + "name": "@csstools/custom-units", + "description": "Use Custom Units in CSS", + "type": "module", + "version": "0.1.1", + "license": "CC0-1.0", + "main": "postcss-custom-units.js", + "types": "./postcss-custom-units.d.ts", + "scripts": { + "test": "jest" + }, + "exports": { + ".": { + "import": "./postcss-custom-units.js", + "require": "./postcss-custom-units.cjs", + "types": "./postcss-custom-units.d.ts" + }, + "./postcss-custom-units": { + "import": "./postcss-custom-units.js", + "require": "./postcss-custom-units.cjs", + "types": "./postcss-custom-units.d.ts" + }, + "./postcss-custom-units.js": { + "import": "./postcss-custom-units.js", + "require": "./postcss-custom-units.cjs", + "types": "./postcss-custom-units.d.ts" + }, + "./postcss-custom-units.d": { + "types": "./postcss-custom-units.d.ts" + }, + "./postcss-custom-units.d.ts": { + "types": "./postcss-custom-units.d.ts" + } + }, + "files": [ + "postcss-custom-units.cjs", + "postcss-custom-units.d.ts", + "postcss-custom-units.js" + ], + "devDependencies": { + "jest": "^29.3.1", + "postcss": "^8.4.14" + }, + "dependencies": { + "postcss-value-parser": "^4.2.0" + } }