feat: export css variables to a separate file

README.md

@@ -95,10 +95,18 @@ You can easily disable the module by giving it a value of `false`
 
 ```js
 {
+  outputToFile: true; // default: false
+  outputFilePath: './path/to/file.css'; // default: null
   postcssEachVariables: true; // default: false
 }
 ```
 
+### outputToFile
+This option can be set to `true` if you want to extract the `:root {}` variables into a separate file so that they are not apart of the tailwind.css output.
+
+### outputFilePath
+This option is the relative path to the file you wish to write to. By specifiying the path eg. `./dist/css/variables.css`, the plugin will create that file and populate it with the `:root {}` variables.
+
 ### postcssEachVariables
 
 this option will let the plugin generate CSS variables as an array of colors, screens, fonts and text sizes as this example

index.js

@@ -1,3 +1,5 @@
+const fs = require('fs');
+
 module.exports = function(customVariableName, opts) {
   return ({ addComponents, config }) => {
     const varModules = {
@@ -94,7 +96,20 @@ module.exports = function(customVariableName, opts) {
     let root = {
       ':root': rootArray
     };
-    addComponents(root);
+
+    if (options.outputToFile && options.outputFilePath) {
+      const cssVariables = Object.entries(rootArray);
+      let outputString = ":root {\n";
+      cssVariables.forEach((variable) => outputString += `\t${variable[0]}: ${variable[1]};\n`);
+      outputString += "}\n";
+
+      fs.writeFile(options.outputFilePath, outputString, (err) => {
+        if (err) throw err;
+        console.log(`Created file: ${options.outputFilePath}`);
+      });
+    } else {
+      addComponents(root);
+    }
   };
 };