Created
April 3, 2021 10:30
-
-
Save dsebastien/33294db954431ce357e142df5d078759 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Reusable Webpack config elements | |
* Initial goal: avoid config duplication between the main webpack config and the storybook webpack config | |
*/ | |
const helpers = require("./helpers"); | |
const tailwindJit = require("@tailwindcss/jit"); | |
const autoprefixer = require("autoprefixer"); | |
/** | |
* Plugins | |
*/ | |
const postCssPlugins = [ | |
... | |
/** | |
* Tailwind | |
*/ | |
tailwindJit(helpers.root("tailwind.config.js")), // We use the helper to ensure that the path is always relative to the workspace root, | |
// PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. | |
// Write your CSS rules without vendor prefixes (in fact, forget about them entirely). Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. | |
autoprefixer, | |
]; | |
/** | |
* Tailwind config | |
*/ | |
const tailwindWebpackRule = { | |
test: /\.scss$/, | |
loader: "postcss-loader", | |
options: { | |
// reference: https://github.com/webpack-contrib/postcss-loader | |
postcssOptions: { | |
ident: "postcss", | |
syntax: "postcss-scss", | |
plugins: postCssPlugins, | |
}, | |
}, | |
}; | |
exports.tailwindWebpackRule = tailwindWebpackRule; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment