| 116 | |
| 117 | // common function to get style loaders |
| 118 | const getStyleLoaders = (cssOptions, preProcessor) => { |
| 119 | const loaders = [ |
| 120 | isEnvDevelopment && require.resolve('style-loader'), |
| 121 | isEnvProduction && { |
| 122 | loader: MiniCssExtractPlugin.loader, |
| 123 | // css is located in `static/css`, use '../../' to locate index.html folder |
| 124 | // in production `paths.publicUrlOrPath` can be a relative path |
| 125 | options: paths.publicUrlOrPath.startsWith('.') |
| 126 | ? { publicPath: '../../' } |
| 127 | : {}, |
| 128 | }, |
| 129 | { |
| 130 | loader: require.resolve('css-loader'), |
| 131 | options: cssOptions, |
| 132 | }, |
| 133 | { |
| 134 | // Options for PostCSS as we reference these options twice |
| 135 | // Adds vendor prefixing based on your specified browser support in |
| 136 | // package.json |
| 137 | loader: require.resolve('postcss-loader'), |
| 138 | options: { |
| 139 | postcssOptions: { |
| 140 | // Necessary for external CSS imports to work |
| 141 | // https://github.com/facebook/create-react-app/issues/2677 |
| 142 | ident: 'postcss', |
| 143 | config: false, |
| 144 | plugins: !useTailwind |
| 145 | ? [ |
| 146 | 'postcss-flexbugs-fixes', |
| 147 | [ |
| 148 | 'postcss-preset-env', |
| 149 | { |
| 150 | autoprefixer: { |
| 151 | flexbox: 'no-2009', |
| 152 | }, |
| 153 | stage: 3, |
| 154 | }, |
| 155 | ], |
| 156 | // Adds PostCSS Normalize as the reset css with default options, |
| 157 | // so that it honors browserslist config in package.json |
| 158 | // which in turn let's users customize the target behavior as per their needs. |
| 159 | 'postcss-normalize', |
| 160 | ] |
| 161 | : [ |
| 162 | 'tailwindcss', |
| 163 | 'postcss-flexbugs-fixes', |
| 164 | [ |
| 165 | 'postcss-preset-env', |
| 166 | { |
| 167 | autoprefixer: { |
| 168 | flexbox: 'no-2009', |
| 169 | }, |
| 170 | stage: 3, |
| 171 | }, |
| 172 | ], |
| 173 | ], |
| 174 | }, |
| 175 | sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, |