diff --git a/README.md b/README.md index 40ba4fb..5699b1b 100755 --- a/README.md +++ b/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 diff --git a/index.js b/index.js index 940fd19..141c7fe 100755 --- a/index.js +++ b/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); + } }; };