Skip to content

Commit

Permalink
fix: outputReferenceFallbacks for css/variables formatter (#1113)
Browse files Browse the repository at this point in the history 
- outputReferenceFallbacks options are passed through to the
createPropertyFormatter function, which was previously not the case

Signed-off-by: Tobias Kuppens Groot <tkuppensgroo@uos.de>
Co-authored-by: Joren Broekema <joren.broekema@gmail.com>
  • Loading branch information
@tkgroot @jorenbroekema
tkgroot and jorenbroekema committed Mar 11, 2024
1 parent d008c67 commit 72f020d
Show file tree
Hide file tree
Showing 5 changed files with 213 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/four-fireants-try.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'style-dictionary': patch
---

Pass outputReferencesFallback option to the relevant utilities, so the option actually works.
176 changes: 176 additions & 0 deletions __integration__/__snapshots__/css.test.snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,3 +529,179 @@ snapshots["integration css css/variables with selector should match snapshot"] =
`;
/* end snapshot integration css css/variables with selector should match snapshot */

snapshots["integration css css/variables with referenceFallbacks should match snapshot"] =
`/**
* Do not edit directly
* Generated on Sat, 01 Jan 2000 00:00:00 GMT
*/
:root {
--size-padding-xl: 1rem;
--size-padding-large: 1rem;
--size-padding-medium: 1rem;
--size-padding-small: 0.5rem;
--size-font-xl: 2.25rem;
--size-font-large: 1.5rem;
--size-font-medium: 1rem;
--size-font-small: 0.75rem;
--size-border-radius-large: 30rem;
--color-core-yellow-1100: #2d1a05;
--color-core-yellow-1000: #542a00;
--color-core-yellow-900: #944c0c;
--color-core-yellow-800: #ba7506;
--color-core-yellow-700: #dd9903;
--color-core-yellow-600: #ffbc00;
--color-core-yellow-500: #ffcd1c;
--color-core-yellow-400: #ffd943;
--color-core-yellow-300: #ffe16e;
--color-core-yellow-200: #ffe99a;
--color-core-yellow-100: #fdefcd;
--color-core-yellow-0: #fff8e2;
--color-core-neutral-1100: #040404;
--color-core-neutral-1000: #162020;
--color-core-neutral-900: #273333;
--color-core-neutral-800: #364141;
--color-core-neutral-700: #515e5f;
--color-core-neutral-600: #6e797a;
--color-core-neutral-500: #929a9b;
--color-core-neutral-400: #b0b6b7;
--color-core-neutral-300: #c8cccc;
--color-core-neutral-200: #dee1e1;
--color-core-neutral-100: #f3f4f4;
--color-core-neutral-0: #ffffff;
--color-core-orange-1100: #2d130e;
--color-core-orange-1000: #601700;
--color-core-orange-900: #962c0b;
--color-core-orange-800: #ce5511;
--color-core-orange-700: #ed7024;
--color-core-orange-600: #f57d33;
--color-core-orange-500: #fc8943;
--color-core-orange-400: #ff9c5d;
--color-core-orange-300: #ffb180;
--color-core-orange-200: #ffc6a4;
--color-core-orange-100: #fcdccc;
--color-core-orange-0: #ffede3;
--color-core-red-1100: #2b1111;
--color-core-red-1000: #6d1313;
--color-core-red-900: #992222;
--color-core-red-800: #c63434;
--color-core-red-700: #db3e3e;
--color-core-red-600: #ed4c42;
--color-core-red-500: #f76054;
--color-core-red-400: #ff7f6e;
--color-core-red-300: #ff9c8f;
--color-core-red-200: #ffb8b1;
--color-core-red-100: #ffd5d2;
--color-core-red-0: #ffeae9;
--color-core-pink-1100: #2b1721;
--color-core-pink-1000: #561231;
--color-core-pink-900: #931847;
--color-core-pink-800: #b22f5b;
--color-core-pink-700: #ce3665;
--color-core-pink-600: #e0447c;
--color-core-pink-500: #ef588b;
--color-core-pink-400: #ff76ae;
--color-core-pink-300: #ff95c1;
--color-core-pink-200: #ffb5d5;
--color-core-pink-100: #fcdbeb;
--color-core-pink-0: #ffe9f3;
--color-core-magenta-1100: #29192d;
--color-core-magenta-1000: #451551;
--color-core-magenta-900: #6c2277;
--color-core-magenta-800: #8f3896;
--color-core-magenta-700: #ac44a8;
--color-core-magenta-600: #c44eb9;
--color-core-magenta-500: #db61db;
--color-core-magenta-400: #f282f5;
--color-core-magenta-300: #edadf2;
--color-core-magenta-200: #f4c4f7;
--color-core-magenta-100: #f9e3fc;
--color-core-magenta-0: #fef0ff;
--color-core-purple-1100: #1d1d38;
--color-core-purple-1000: #2d246b;
--color-core-purple-900: #483a9c;
--color-core-purple-800: #5e4eba;
--color-core-purple-700: #6f5ed3;
--color-core-purple-600: #816fea;
--color-core-purple-500: #9180f4;
--color-core-purple-400: #a193f2;
--color-core-purple-300: #c1c1f7;
--color-core-purple-200: #d8d7f9;
--color-core-purple-100: #eaeaf9;
--color-core-purple-0: #f2f2f9;
--color-core-blue-1100: #002138;
--color-core-blue-1000: #0a3960;
--color-core-blue-900: #0c5689;
--color-core-blue-800: #116daa;
--color-core-blue-700: #2079c3;
--color-core-blue-600: #2b87d3;
--color-core-blue-500: #3896e3;
--color-core-blue-400: #56adf5;
--color-core-blue-300: #a1d2f8;
--color-core-blue-200: #c7e4f9;
--color-core-blue-100: #dcf2ff;
--color-core-blue-0: #e9f8ff;
--color-core-aqua-1100: #002838;
--color-core-aqua-1000: #083d4f;
--color-core-aqua-900: #035e73;
--color-core-aqua-800: #0f6e84;
--color-core-aqua-700: #0b8599;
--color-core-aqua-600: #0797ae;
--color-core-aqua-500: #17b8ce;
--color-core-aqua-400: #33d6e2;
--color-core-aqua-300: #76e5e2;
--color-core-aqua-200: #a5f2f2;
--color-core-aqua-100: #c5f9f9;
--color-core-aqua-0: #d9fcfb;
--color-core-teal-1100: #002528;
--color-core-teal-1000: #083f3f;
--color-core-teal-900: #026661;
--color-core-teal-800: #067c7c;
--color-core-teal-700: #0b968f;
--color-core-teal-600: #00a99c;
--color-core-teal-500: #08c4b2;
--color-core-teal-400: #24e0c5;
--color-core-teal-300: #7dead5;
--color-core-teal-200: #b3f2e6;
--color-core-teal-100: #cdf7ef;
--color-core-teal-0: #e5f9f5;
--color-core-green-1100: #002b20;
--color-core-green-1000: #08422f;
--color-core-green-900: #006b40;
--color-core-green-800: #008b46;
--color-core-green-700: #0ca750;
--color-core-green-600: #2bb656;
--color-core-green-500: #59cb59;
--color-core-green-400: #75dd66;
--color-core-green-300: #98e58e;
--color-core-green-200: #c2f2bd;
--color-core-green-100: #d7f4d7;
--color-core-green-0: #ebf9eb;
--breakpoint-sm: 768px;
--breakpoint-xs: 304px;
--color-font-success: var(--color-core-green-1000, #08422f);
--color-font-warning: var(--color-core-orange-1000, #601700);
--color-font-danger: var(--color-core-red-1000, #6d1313);
--color-font-tertiary: var(--color-core-neutral-800, #364141);
--color-font-secondary: var(--color-core-neutral-900, #273333);
--color-font-primary: var(--color-core-neutral-1100, #040404);
--color-brand-secondary: var(--color-core-purple-700, #6f5ed3);
--color-brand-primary: var(--color-core-aqua-700, #0b8599);
--color-border-primary: var(--color-core-neutral-300, #c8cccc);
--color-background-info: var(--color-core-blue-0, #e9f8ff);
--color-background-success: var(--color-core-green-0, #ebf9eb);
--color-background-warning: var(--color-core-orange-0, #ffede3);
--color-background-danger: var(--color-core-red-0, #ffeae9);
--color-background-tertiary: var(--color-core-neutral-200, #dee1e1);
--color-background-secondary: var(--color-core-neutral-100, #f3f4f4);
--color-background-primary: var(--color-core-neutral-0, #ffffff);
--breakpoint-md: calc(var(--breakpoint-xs, 304px) / var(--breakpoint-sm, 768px));
--color-font-interactive-disabled: var(--color-font-tertiary, #364141);
--color-font-interactive-active: var(--color-brand-secondary, #6f5ed3);
--color-font-interactive-hover: var(--color-brand-primary, #0b8599);
--color-font-interactive: var(--color-brand-primary, #0b8599);
--color-background-disabled: var(--color-background-tertiary, #dee1e1);
}
`;
/* end snapshot integration css css/variables with referenceFallbacks should match snapshot */

20 changes: 20 additions & 0 deletions __integration__/css.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,14 @@ describe('integration', async () => {
{
destination: 'variablesWithReferences.css',
format: 'css/variables',
options: {
outputReferences: true,
outputReferenceFallbacks: false,
},
},
{
destination: 'variablesWithReferenceFallbacks.css',
format: 'css/variables',
options: {
outputReferences: true,
outputReferenceFallbacks: true,
Expand Down Expand Up @@ -84,6 +92,18 @@ describe('integration', async () => {
});
});

describe(`with referenceFallbacks`, async () => {
it(`should match snapshot`, async () => {
const output = fs.readFileSync(
resolve(`${buildPath}variablesWithReferenceFallbacks.css`),
{
encoding: 'UTF-8',
},
);
await expect(output).to.matchSnapshot();
});
});

describe(`with selector`, async () => {
it(`should match snapshot`, async () => {
const output = fs.readFileSync(resolve(`${buildPath}variablesWithSelector.css`), {
Expand Down
3 changes: 3 additions & 0 deletions lib/common/formatHelpers/formattedVariables.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const defaultFormatting = {
* @param {String} options.format - What type of variables to output. Options are: css, sass, less, and stylus
* @param {Dictionary} options.dictionary - The dictionary object that gets passed to the formatter method.
* @param {Boolean} [options.outputReferences] - Whether or not to output references
* @param {Boolean} [options.outputReferenceFallbacks] - Whether or not to output a faLLback value for output references
* @param {Formatting} [options.formatting] - Custom formatting properties that define parts of a declaration line in code. This will get passed to `formatHelpers.createPropertyFormatter` and used for the `lineSeparator` between lines of code.
* @param {Boolean} [options.themeable] [false] - Whether tokens should default to being themeable.
* @param {boolean} [options.usesDtcg] [false] - Whether DTCG token syntax should be uses.
Expand All @@ -56,6 +57,7 @@ export default function formattedVariables({
format,
dictionary,
outputReferences = false,
outputReferenceFallbacks,
formatting = {},
themeable = false,
usesDtcg = false,
Expand Down Expand Up @@ -85,6 +87,7 @@ export default function formattedVariables({
.map(
createPropertyFormatter({
outputReferences,
outputReferenceFallbacks,
dictionary,
format,
formatting,
Expand Down
11 changes: 9 additions & 2 deletions lib/common/formats.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ const formats = {
* @typedef {Object} cssVariablesOpts
* @property {Boolean} [cssVariablesOpts.showFileHeader=true] - Whether or not to include a comment that has the build date
* @property {Boolean} [cssVariablesOpts.outputReferences=false] - Whether or not to keep [references](/#/formats?id=references-in-output-files) (a -> b -> c) in the output.
* @property {Boolean} [cssVariablesOpts.outputReferenceFallbacks=false] - Whether or not to add a fallback value for the output reference.
* @property {string} [cssVariablesOpts.selector] - Override the root css selector
* @param {FormatOpts & { options?: cssVariablesOpts}} options
* @example
Expand All @@ -83,12 +84,18 @@ const formats = {
*/
'css/variables': async function ({ dictionary, options = {}, file }) {
const selector = options.selector ? options.selector : `:root`;
const { outputReferences, usesDtcg } = options;
const { outputReferences, outputReferenceFallbacks, usesDtcg } = options;
const header = await fileHeader({ file });
return (
header +
`${selector} {\n` +
formattedVariables({ format: 'css', dictionary, outputReferences, usesDtcg }) +
formattedVariables({
format: 'css',
dictionary,
outputReferences,
outputReferenceFallbacks,
usesDtcg,
}) +
`\n}\n`
);
},
Expand Down

0 comments on commit 72f020d

Please sign in to comment.