From a5d46bb40cd7d0ba2451476e1d9277e779da681c Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 7 Mar 2022 13:10:44 +0530 Subject: [PATCH] Move over tests to Hydrogen using impunity --- package.json | 1 + postcss/css-compile-variables.js | 6 +-- postcss/test.js | 66 ++++++++++++++++++++++++++++++++ 3 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 postcss/test.js diff --git a/package.json b/package.json index 041100a5..5ca5b05f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "lint-ts": "eslint src/ -c .ts-eslintrc.js --ext .ts", "lint-ci": "eslint src/", "test": "impunity --entry-point src/platform/web/main.js src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/", + "test:postcss": "impunity --entry-point postcss/test.js ", "start": "vite --port 3000", "build": "vite build", "build:sdk": "./scripts/sdk/build.sh" diff --git a/postcss/css-compile-variables.js b/postcss/css-compile-variables.js index e212ee69..8737067d 100644 --- a/postcss/css-compile-variables.js +++ b/postcss/css-compile-variables.js @@ -1,4 +1,4 @@ -import { offColor } from 'off-color'; +const offColor = require("off-color").offColor; let aliasMap; let resolvedMap; @@ -22,13 +22,13 @@ function resolveDerivedVariable(decl, variables) { switch (operation) { case "darker": { const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable); - const newColorString = new offColor(colorString).darken(argument / 100).hex(); + const newColorString = offColor(colorString).darken(argument / 100).hex(); resolvedMap.set(wholeVariable, newColorString); break; } case "lighter": { const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable); - const newColorString = new offColor(colorString).lighten(argument / 100).hex(); + const newColorString = offColor(colorString).lighten(argument / 100).hex(); resolvedMap.set(wholeVariable, newColorString); break; } diff --git a/postcss/test.js b/postcss/test.js new file mode 100644 index 00000000..104696aa --- /dev/null +++ b/postcss/test.js @@ -0,0 +1,66 @@ +const offColor = require("off-color").offColor; +const postcss = require("postcss"); +const plugin = require("./css-compile-variables"); + +async function run(input, output, opts = {}, assert) { + let result = await postcss([plugin(opts)]).process(input, { from: undefined, }); + assert.strictEqual( + result.css.replaceAll(/\s/g, ""), + output.replaceAll(/\s/g, "") + ); + assert.strictEqual(result.warnings().length, 0); +} + +module.exports.tests = function tests() { + return { + "derived variables are resolved": async (assert) => { + const inputCSS = `div { + background-color: var(--foo-color--lighter-50); + }`; + const transformedColor = offColor("#ff0").lighten(0.5); + const outputCSS = + inputCSS + + ` + :root { + --foo-color: #ff0; + --foo-color--lighter-50: ${transformedColor.hex()}; + } + `; + await run( + inputCSS, + outputCSS, + { variables: { "foo-color": "#ff0" } }, + assert + ); + }, + + "derived variables work with alias": async (assert) => { + const inputCSS = `div { + background: var(--icon-color--darker-20); + --my-alias: var(--icon-color--darker-20); + color: var(--my-alias--lighter-15); + }`; + const colorDarker = offColor("#fff").darken(0.2).hex(); + const aliasLighter = offColor(colorDarker).lighten(0.15).hex(); + const outputCSS = `div { + background: var(--icon-color--darker-20); + --my-alias: var(--icon-color--darker-20); + color: var(--my-alias--lighter-15); + } + :root { + --icon-color: #fff; + --icon-color--darker-20: ${colorDarker}; + --my-alias--lighter-15: ${aliasLighter}; + } + `; + await run(inputCSS, outputCSS, { variables: { "icon-color": "#fff" }, }, assert); + }, + + "derived variable throws if base not present in config": async (assert) => { + const css = `:root { + color: var(--icon-color--darker-20); + }`; + assert.rejects(async () => await postcss([plugin({ variables: {} })]).process(css, { from: undefined, })); + } + }; +};