forked from mystiq/hydrogen-web
121 lines
4.4 KiB
JavaScript
121 lines
4.4 KiB
JavaScript
/*
|
|
Copyright 2021 The Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
const offColor = require("off-color").offColor;
|
|
const postcss = require("postcss");
|
|
const plugin = require("./css-compile-variables");
|
|
const derive = require("./color").derive;
|
|
|
|
async function run(input, output, opts = {}, assert) {
|
|
let result = await postcss([plugin({ ...opts, derive })]).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 = `
|
|
:root {
|
|
--foo-color: #ff0;
|
|
}
|
|
div {
|
|
background-color: var(--foo-color--lighter-50);
|
|
}`;
|
|
const transformedColor = offColor("#ff0").lighten(0.5);
|
|
const outputCSS =
|
|
inputCSS +
|
|
`
|
|
:root {
|
|
--foo-color--lighter-50: ${transformedColor.hex()};
|
|
}
|
|
`;
|
|
await run( inputCSS, outputCSS, {}, assert);
|
|
},
|
|
|
|
"derived variables work with alias": async (assert) => {
|
|
const inputCSS = `
|
|
:root {
|
|
--icon-color: #fff;
|
|
}
|
|
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 = inputCSS + `:root {
|
|
--icon-color--darker-20: ${colorDarker};
|
|
--my-alias--lighter-15: ${aliasLighter};
|
|
}
|
|
`;
|
|
await run(inputCSS, outputCSS, { }, 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, }));
|
|
},
|
|
|
|
"multiple derived variable in single declaration is parsed correctly": async (assert) => {
|
|
const inputCSS = `
|
|
:root {
|
|
--foo-color: #ff0;
|
|
}
|
|
div {
|
|
background-color: linear-gradient(var(--foo-color--lighter-50), var(--foo-color--darker-20));
|
|
}`;
|
|
const transformedColor1 = offColor("#ff0").lighten(0.5);
|
|
const transformedColor2 = offColor("#ff0").darken(0.2);
|
|
const outputCSS =
|
|
inputCSS +
|
|
`
|
|
:root {
|
|
--foo-color--lighter-50: ${transformedColor1.hex()};
|
|
--foo-color--darker-20: ${transformedColor2.hex()};
|
|
}
|
|
`;
|
|
await run( inputCSS, outputCSS, { }, assert);
|
|
},
|
|
"multiple aliased-derived variable in single declaration is parsed correctly": async (assert) => {
|
|
const inputCSS = `
|
|
:root {
|
|
--foo-color: #ff0;
|
|
}
|
|
div {
|
|
--my-alias: var(--foo-color);
|
|
background-color: linear-gradient(var(--my-alias--lighter-50), var(--my-alias--darker-20));
|
|
}`;
|
|
const transformedColor1 = offColor("#ff0").lighten(0.5);
|
|
const transformedColor2 = offColor("#ff0").darken(0.2);
|
|
const outputCSS =
|
|
inputCSS +
|
|
`
|
|
:root {
|
|
--my-alias--lighter-50: ${transformedColor1.hex()};
|
|
--my-alias--darker-20: ${transformedColor2.hex()};
|
|
}
|
|
`;
|
|
await run( inputCSS, outputCSS, { }, assert);
|
|
}
|
|
};
|
|
};
|