feat: added CSS custom media query transformer (openedx#2068)

* feat: added CSS custom media query transformer

* refactor: refactoring after review

* refactor: refactoring after review

scss/core/core.scss

@@ -1,4 +1,5 @@
 @import "css/variables";
+@import "css/custom-media-breakpoints";
 @import "functions";
 @import "variables";
 @import "~bootstrap/scss/mixins";

scss/core/css/custom-media-breakpoints.css

@@ -0,0 +1,12 @@
+/**
+ * IMPORTANT: This file is the result of assembling design tokens
+ * Do not edit directly
+ * Generated on Fri, 24 Feb 2023 11:38:50 GMT
+ */
+
+@custom-media --pgn-size-breakpoint-xs (max-width: 0); 
+@custom-media --pgn-size-breakpoint-sm (max-width: 576px); 
+@custom-media --pgn-size-breakpoint-md (max-width: 768px); 
+@custom-media --pgn-size-breakpoint-lg (max-width: 992px); 
+@custom-media --pgn-size-breakpoint-xl (max-width: 1200px); 
+@custom-media --pgn-size-breakpoint-xxl (max-width: 1400px); 

tokens/build-tokens.js

@@ -42,6 +42,13 @@ const config = {
             outputReferences: true,
           },
         },
+        {
+          format: 'css/custom-media-breakpoints',
+          destination: 'custom-media-breakpoints.css',
+          options: {
+            outputReferences: true,
+          },
+        },
       ],
       transforms: StyleDictionary.transformGroup.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
       options: {

tokens/style-dictionary.js

@@ -154,4 +154,24 @@ StyleDictionary.registerFormat({
   },
 });
 
+/**
+ * Formatter to generate CSS custom media queries for responsive breakpoints.
+ * Gets input about existing tokens of the 'size' category,
+ * 'breakpoints' subcategory, and generates a CSS custom media queries.
+ */
+StyleDictionary.registerFormat({
+  name: 'css/custom-media-breakpoints',
+  formatter({ dictionary, file }) {
+    const { size: { breakpoint } } = dictionary.properties;
+
+    let customMediaVariables = '';
+
+    Object.values(breakpoint).forEach(item => {
+      customMediaVariables += `@custom-media --${item.name} (max-width: ${item.value}); \n`;
+    });
+
+    return fileHeader({ file }) + customMediaVariables;
+  },
+});
+
 module.exports = StyleDictionary;