✨(tokens) css utility classes are now optionnal

Previously, when using the cunningham bin to build tokens, the CSS
file always included utility classes, resulting in duplicated CSS
utility classes on the consumer side if no specific CSS optimizer
is defined ( its local cunningham-tokens.css + the one from the
react package ). Now, this new feature introduces a param named
--utility-classes that must be provided to generate those classes.
This params is henceforth only provided to the bin inside the tokens
package.

packages/tokens/src/bin/Generators/CssGenerator.spec.ts

@@ -45,4 +45,24 @@ describe("CssGenerator", () => {
   it("Runs with --selector options.", async () => {
     await testSelector("--selector");
   });
+  it("Runs with  --utility-classes options.", async () => {
+    const cssTokensFile = path.join(__dirname, Config.tokenFilename + ".css");
+    expect(fs.existsSync(cssTokensFile)).toEqual(false);
+    await run(["", "", "-g", "css", "-s", "html", "--utility-classes"]);
+    expect(fs.existsSync(cssTokensFile)).toEqual(true);
+    expect(fs.readFileSync(cssTokensFile).toString()).toEqual(
+      fs
+        .readFileSync(
+          path.join(
+            __dirname,
+            "..",
+            "tests",
+            "assets",
+            "expected-with-utility-classes-" + Config.tokenFilename + ".css"
+          )
+        )
+        .toString()
+        .replace(":root", "html")
+    );
+  });
 });

packages/tokens/src/bin/Generators/CssGenerator.ts

@@ -12,9 +12,10 @@ export const cssGenerator: Generator = async (tokens, opts) => {
       acc + `\t--${Config.sass.varPrefix}${token}: ${flatTokens[token]};\n`
     );
   }, "");
-  const cssContent = `${opts.selector} {\n${cssVars}} ${generateClasses(
-    tokens
-  )}`;
+  let cssContent = `${opts.selector} {\n${cssVars}}`;
+  if (opts.utilityClasses) {
+    cssContent += ` ${generateClasses(tokens)}`;
+  }
 
   const dest = path.join(opts.path, Config.tokenFilename + ".css");
 

packages/tokens/src/bin/Generators/index.ts

@@ -5,7 +5,7 @@ import { tsGenerator } from "Generators/TsGenerator";
 
 export type Generator = (
   tokens: Tokens,
-  opts: { path: string; selector: string }
+  opts: { path: string; selector: string; utilityClasses?: boolean }
 ) => Promise<void>;
 
 export const Generators: Record<string, Generator> = {

packages/tokens/src/bin/ThemeGenerator.ts

@@ -19,6 +19,7 @@ export const buildTheme = async () => {
       return Generators[generator](tokens, {
         path: options.output ?? workPath(),
         selector: options.selector,
+        utilityClasses: options.utilityClasses,
       });
     })
   );
@@ -48,6 +49,7 @@ export const run = async (args: string[]) => {
       "-o, --output <directory>",
       "Specify the output dir of generated files."
     )
+    .option("--utility-classes", "Generate CSS utility classes.")
     .requiredOption(
       "-g, --generators <generators>",
       "Specify the generators to use.",

packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css

@@ -5,12 +5,4 @@
 	--c--theme--font--weights--medium: 400;
 	--c--theme--font--families--base: Roboto;
 	--c--theme--spacings--s: 1rem;
-} .clr-primary { color: var(--c--theme--colors--primary); }
-.clr-secondary { color: var(--c--theme--colors--secondary); }
-.bg-primary { background-color: var(--c--theme--colors--primary); }
-.bg-secondary { background-color: var(--c--theme--colors--secondary); }
-.fw-medium { font-weight: var(--c--theme--font--weights--medium); }
-.fs-m { font-size: var(--c--theme--font--sizes--m); }
-.f-base { font-family: var(--c--theme--font--families--base); }
-.m-s { margin: var(--c--theme--spacings--s); }.mb-s { margin-bottom: var(--c--theme--spacings--s); }.mt-s { margin-top: var(--c--theme--spacings--s); }.ml-s { margin-left: var(--c--theme--spacings--s); }.mr-s { margin-right: var(--c--theme--spacings--s); }
-.p-s { padding: var(--c--theme--spacings--s); }.pb-s { padding-bottom: var(--c--theme--spacings--s); }.pt-s { padding-top: var(--c--theme--spacings--s); }.pl-s { padding-left: var(--c--theme--spacings--s); }.pr-s { padding-right: var(--c--theme--spacings--s); }
+}

packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css

@@ -5,12 +5,4 @@
 	--c--theme--font--weights--medium: 400;
 	--c--theme--font--families--base: Roboto;
 	--c--theme--spacings--s: 1rem;
-} .clr-primary { color: var(--c--theme--colors--primary); }
-.clr-secondary { color: var(--c--theme--colors--secondary); }
-.bg-primary { background-color: var(--c--theme--colors--primary); }
-.bg-secondary { background-color: var(--c--theme--colors--secondary); }
-.fw-medium { font-weight: var(--c--theme--font--weights--medium); }
-.fs-m { font-size: var(--c--theme--font--sizes--m); }
-.f-base { font-family: var(--c--theme--font--families--base); }
-.m-s { margin: var(--c--theme--spacings--s); }.mb-s { margin-bottom: var(--c--theme--spacings--s); }.mt-s { margin-top: var(--c--theme--spacings--s); }.ml-s { margin-left: var(--c--theme--spacings--s); }.mr-s { margin-right: var(--c--theme--spacings--s); }
-.p-s { padding: var(--c--theme--spacings--s); }.pb-s { padding-bottom: var(--c--theme--spacings--s); }.pt-s { padding-top: var(--c--theme--spacings--s); }.pl-s { padding-left: var(--c--theme--spacings--s); }.pr-s { padding-right: var(--c--theme--spacings--s); }
+}

packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css

@@ -0,0 +1,16 @@
+:root {
+	--c--theme--colors--primary: #055FD2;
+	--c--theme--colors--secondary: #DA0000;
+	--c--theme--font--sizes--m: 1rem;
+	--c--theme--font--weights--medium: 400;
+	--c--theme--font--families--base: Roboto;
+	--c--theme--spacings--s: 1rem;
+} .clr-primary { color: var(--c--theme--colors--primary); }
+.clr-secondary { color: var(--c--theme--colors--secondary); }
+.bg-primary { background-color: var(--c--theme--colors--primary); }
+.bg-secondary { background-color: var(--c--theme--colors--secondary); }
+.fw-medium { font-weight: var(--c--theme--font--weights--medium); }
+.fs-m { font-size: var(--c--theme--font--sizes--m); }
+.f-base { font-family: var(--c--theme--font--families--base); }
+.m-s { margin: var(--c--theme--spacings--s); }.mb-s { margin-bottom: var(--c--theme--spacings--s); }.mt-s { margin-top: var(--c--theme--spacings--s); }.ml-s { margin-left: var(--c--theme--spacings--s); }.mr-s { margin-right: var(--c--theme--spacings--s); }
+.p-s { padding: var(--c--theme--spacings--s); }.pb-s { padding-bottom: var(--c--theme--spacings--s); }.pt-s { padding-top: var(--c--theme--spacings--s); }.pl-s { padding-left: var(--c--theme--spacings--s); }.pr-s { padding-right: var(--c--theme--spacings--s); }