fix: added custom title for CSS output files (#1985)

openedx · Aug 4, 2024 · 63d06b6 · 63d06b6
1 parent fcf84d0
commit 63d06b6
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/scss/core/css/utility-classes.css b/scss/core/css/utility-classes.css
@@ -1,3 +1,9 @@
+/**
+ * IMPORTANT: This file is the result of assembling design tokens
+ * Do not edit directly
+ * Generated on Tue, 31 Jan 2023 09:38:46 GMT
+ */
+
 .bg-dark {
   background-color: #273F2FFF !important;
 }

diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css
@@ -1,3 +1,9 @@
+/**
+ * IMPORTANT: This file is the result of assembling design tokens
+ * Do not edit directly
+ * Generated on Tue, 31 Jan 2023 09:38:46 GMT
+ */
+
 :root {
   --pgn-theme-interval: 8%;
   --pgn-other-tooltip-opacity: 1;

diff --git a/tokens/build-tokens.js b/tokens/build-tokens.js
@@ -15,6 +15,12 @@ const source = tokensSource ? [tokensSource] : [];
 
 const config = {
   include: [path.resolve(__dirname, 'src/**/*.json')],
+  fileHeader: {
+    customFileHeader: (defaultMessage) => [
+      'IMPORTANT: This file is the result of assembling design tokens',
+      ...defaultMessage,
+    ],
+  },
   source,
   platforms: {
     css: {
@@ -39,7 +45,7 @@ const config = {
       ],
       transforms: StyleDictionary.transformGroup.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
       options: {
-        showFileHeader: false,
+        fileHeader: 'customFileHeader',
       },
     },
   },

diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
@@ -91,7 +91,7 @@ StyleDictionary.registerFormat({
  */
 StyleDictionary.registerFormat({
   name: 'css/custom-variables',
-  formatter({ dictionary, options }) {
+  formatter({ dictionary, options, file }) {
     const variables = dictionary.allTokens.sort(sortByReference(dictionary)).map(token => {
       let { value } = token;
       const outputReferencesForToken = token.original.outputReferences === false ? false : options.outputReferences;
@@ -106,7 +106,7 @@ StyleDictionary.registerFormat({
       return `  --${token.name}: ${value};`;
     }).join('\n');
 
-    return `:root {\n${variables}\n}\n`;
+    return `${fileHeader({ file })}:root {\n${variables}\n}\n`;
   },
 });
 
@@ -119,7 +119,7 @@ StyleDictionary.registerFormat({
  */
 StyleDictionary.registerFormat({
   name: 'css/utility-classes',
-  formatter({ dictionary }) {
+  formatter({ dictionary, file }) {
     const { utilities } = dictionary.properties;
 
     if (!utilities) {
@@ -144,7 +144,7 @@ StyleDictionary.registerFormat({
       }
     });
 
-    return utilityClasses;
+    return fileHeader({ file }) + utilityClasses;
   },
 });