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