├── example ├── public │ ├── robot.txt │ ├── favicon.ico │ ├── logo192.png │ ├── manifest.json │ └── index.html ├── README.md ├── src │ ├── styles.css │ └── Index.re ├── .gitignore ├── .spin ├── .gitattributes ├── bsconfig.json ├── LICENSE ├── CONTRIBUTING.md ├── package.json └── config │ └── webpack.config.js ├── .gitignore ├── .editorconfig ├── .gitattributes ├── bsconfig.json ├── LICENSE ├── package.json ├── README.md ├── src └── ReactReveal.re └── assets └── logo.svg /example/public/robot.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rescriptbr/bs-react-reveal/HEAD/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rescriptbr/bs-react-reveal/HEAD/example/public/logo192.png -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # example 2 | 3 | A short, but powerful statement about your project 4 | 5 | ## Contributing 6 | 7 | Take a look at our [Contributing Guide](CONTRIBUTING.md). 8 | -------------------------------------------------------------------------------- /example/src/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: 'Poppins', sans-serif; 3 | } 4 | 5 | html, body, #root { 6 | background: #010719; 7 | color: #ffdd65; 8 | padding: 12px; 9 | } 10 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Normal npm stuff 2 | npm-debug.log 3 | /node_modules/ 4 | /.cache/ 5 | /dist/ 6 | /build/ 7 | 8 | # Bucklescript stuff 9 | /lib 10 | /types 11 | .merlin 12 | .bsb.lock 13 | *.bs.js 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Normal npm stuff 2 | npm-debug.log 3 | /node_modules/ 4 | /.cache/ 5 | /dist/ 6 | /build/ 7 | 8 | # Bucklescript stuff 9 | /lib 10 | /types 11 | .merlin 12 | .bsb.lock 13 | *.bs.js 14 | _esy/ 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 2 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /example/.spin: -------------------------------------------------------------------------------- 1 | (Source bs-react) 2 | (Cfg_str project_name example) 3 | (Cfg_str project_slug example) 4 | (Cfg_str project_description"A short, but powerful statement about your project") 5 | (Cfg_str css_framework None) 6 | (Cfg_str ci_cd None) 7 | (Cfg_str author_name vscodefy) -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.css linguist-detectable=false 2 | *.html linguist-detectable=false 3 | *.js linguist-detectable=false 4 | *.ts linguist-detectable=false 5 | *.c linguist-detectable=false 6 | *.cpp linguist-detectable=false 7 | *.re linguist-language=Reason 8 | *.rei linguist-language=Reason 9 | -------------------------------------------------------------------------------- /example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "example", 3 | "name": "example", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | } 15 | ], 16 | "start_url": ".", 17 | "display": "standalone", 18 | "theme_color": "#000000", 19 | "background_color": "#ffffff" 20 | } -------------------------------------------------------------------------------- /bsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@reasonbr/bs-react-reveal", 3 | "version": "0.0.5", 4 | "reason": { 5 | "react-jsx": 3 6 | }, 7 | "sources": [ 8 | { 9 | "dir" : "src", 10 | "subdirs" : true 11 | } 12 | ], 13 | "package-specs": { 14 | "module": "commonjs", 15 | "in-source": true 16 | }, 17 | "suffix": ".bs.js", 18 | "bs-dependencies": ["reason-react"], 19 | "bs-dev-dependencies": [], 20 | "warnings": { 21 | "error" : "+5" 22 | }, 23 | "refmt": 3 24 | } 25 | -------------------------------------------------------------------------------- /example/.gitattributes: -------------------------------------------------------------------------------- 1 | # Supresses the lock folder from the diffs 2 | yarn.lock linguist-generated=true 3 | package-lock.json linguist-generated=true 4 | 5 | # Tell github that .re and .rei files are Reason 6 | *.re linguist-language=Reason 7 | *.rei linguist-language=Reason 8 | 9 | # Disable syntax detection for .spin 10 | .spin linguist-language=Text 11 | 12 | # Declare shell files to have LF endings on checkout 13 | # On Windows, the default git setting for `core.autocrlf` 14 | # means that when checking out code, LF endings get converted 15 | # to CRLF. This causes problems for shell scripts, as bash 16 | # gets choked up on the extra `\r` character. 17 | * text eol=lf 18 | -------------------------------------------------------------------------------- /example/bsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "reason": { 4 | "react-jsx": 3 5 | }, 6 | "sources": [ 7 | { 8 | "dir": "src", 9 | "subdirs": true 10 | } 11 | ], 12 | "package-specs": [ 13 | { 14 | "module": "commonjs", 15 | "in-source": true 16 | } 17 | ], 18 | "suffix": ".bs.js", 19 | "namespace": true, 20 | "bs-dependencies": [ 21 | "reason-react", 22 | "@reasonbr/bs-react-reveal" 23 | ], 24 | "bs-dev-dependencies": [], 25 | "ppx-flags": [], 26 | "refmt": 3, 27 | "warnings": { 28 | "error": "+5" 29 | }, 30 | "bsc-flags": [ 31 | "-bs-super-errors", 32 | "-bs-no-version-header", 33 | "-open Belt" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | example 18 | 19 | 20 | 21 | 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Sander 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /example/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 vscodefy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@reasonbr/bs-react-reveal", 3 | "version": "0.0.2", 4 | "author": "Marcos Oliveira ", 5 | "description": "ReasonML bindings for ReactReveal", 6 | "main": "src/ReactReveal.re", 7 | "license": "MIT", 8 | "keywords": [ 9 | "react", 10 | "reveal", 11 | "react-reveal", 12 | "bs-react-reveal", 13 | "react-reveal-reasonml", 14 | "reasonml", 15 | "reason-bindings", 16 | "react-reveal-bindings" 17 | ], 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/reasonbr/bs-react-reveal" 21 | }, 22 | "homepage": "https://github.com/reasonbr/bs-react-reveal", 23 | "files": [ 24 | "src/", 25 | "bsconfig.json" 26 | ], 27 | "scripts": { 28 | "clean": "bsb -clean-world", 29 | "build": "bsb -make-world", 30 | "watch": "bsb -make-world -w", 31 | "test": "jest" 32 | }, 33 | "devDependencies": { 34 | "@glennsl/bs-jest": "0.5.1", 35 | "bs-platform": "8.1.1", 36 | "jest": "26.0.1", 37 | "reason-react": "0.9.1" 38 | }, 39 | "peerDependencies": { 40 | "reason-react": "0.9.1" 41 | }, 42 | "dependencies": { 43 | "react-reveal": "1.2.2" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /example/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Setup your development environment 4 | 5 | All the dependencies can be install via your favorite package manager: 6 | 7 | ```bash 8 | yarn install 9 | # Or 10 | npm install 11 | ``` 12 | 13 | That's it! You're up and running, you can start the project with: 14 | 15 | ```bash 16 | yarn start 17 | # Or 18 | npm run start 19 | ``` 20 | 21 | ### Running Tests 22 | 23 | This project uses Jest as a test framework. You can run the tests of the project with: 24 | 25 | ```bash 26 | yarn test 27 | # Or 28 | npm run test 29 | ``` 30 | 31 | ### Creating production builds 32 | 33 | To create a production build of the application, you can run: 34 | 35 | ```bash 36 | yarn build 37 | # Or 38 | npm run build 39 | ``` 40 | 41 | This will output the compiled files in `build/`. 42 | 43 | ### Repository Structure 44 | 45 | The following snippet describes example's repository structure. 46 | 47 | ```text 48 | . 49 | ├── config/ 50 | | Configuration files used to build the project, such as the webpack configuration. 51 | │ 52 | ├── public/ 53 | | Static assets that you want to include when serving your application. 54 | │ The content of this folder will get copied to the production build. 55 | │ 56 | ├── src/ 57 | | Source code of the project application. 58 | │ 59 | ├── tests/ 60 | | Unit tests of the project. 61 | │ 62 | ├── LICENSE 63 | │ 64 | ├── package.json 65 | │ 66 | └── README.md 67 | ``` 68 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.1.0", 4 | "description": "A short, but powerful statement about your project", 5 | "author": "vscodefy", 6 | "license": "MIT", 7 | "homepage": "https://github.com//example", 8 | "bugs": { 9 | "url": "https://github.com//example/issues" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com//example.git" 14 | }, 15 | "keywords": [ 16 | "BuckleScript", 17 | "Reason", 18 | "ReasonReact" 19 | ], 20 | "dependencies": { 21 | "react": "^16.12.0", 22 | "react-dom": "^16.12.0", 23 | "react-reveal": "^1.2.2", 24 | "reason-react": ">=0.7.0" 25 | }, 26 | "devDependencies": { 27 | "@reasonbr/bs-react-reveal": "0.0.1", 28 | "bs-platform": "^8.1.1", 29 | "bs-webapi": "^0.15.6", 30 | "concurrently": "^5.0.2", 31 | "css-loader": "^3.4.2", 32 | "html-webpack-plugin": "^3.2.0", 33 | "mini-css-extract-plugin": "^0.9.0", 34 | "optimize-css-assets-webpack-plugin": "^5.0.3", 35 | "style-loader": "^1.1.2", 36 | "terser-webpack-plugin": "^2.3.2", 37 | "webpack": "^4.41.5", 38 | "webpack-cli": "^3.3.10", 39 | "webpack-dev-server": "^3.10.1" 40 | }, 41 | "scripts": { 42 | "build": "bsb -make-world && NODE_ENV=production webpack --config config/webpack.config.js && cp -n public/* build/ | true", 43 | "start": "concurrently -c --kill-others 'yarn start:bsb' 'yarn start:webpack'", 44 | "start:bsb": "bsb -make-world -w", 45 | "start:webpack": "webpack-dev-server --config config/webpack.config.js --open", 46 | "clean": "bsb -clean-world", 47 | "format": "bsrefmt --in-place */**/*.re */*.re" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /example/src/Index.re: -------------------------------------------------------------------------------- 1 | open ReactReveal; 2 | 3 | [@bs.val] 4 | external import: string => unit = "require"; 5 | 6 | import("./styles.css"); 7 | 8 | module Divider = { 9 | [@react.component] 10 | let make = () =>


; 11 | }; 12 | 13 | module App { 14 | [@react.component] 15 | let make = () => { 16 | <> 17 |

"Fade"->React.string

 18 | 19 |

"Flip"->React.string

 20 | 21 |

"Rotate"->React.string

 22 | 23 |

"Zoom"->React.string

 24 | 25 |

"Bounce"->React.string

 26 | 27 |

"Slide"->React.string

 28 | 29 |

"Roll"->React.string

 30 | 31 |

"LightSpeed"->React.string

 32 | 33 |

"Jump"->React.string

 34 | 35 |

"Flash"->React.string

 36 | 37 |

"HeadShake"->React.string

 38 | 39 |

"Jello"->React.string

 40 | 41 |

"Pulse"->React.string

 42 | 43 |

"RubberBand"->React.string

 44 | 45 |

"Shake"->React.string

 46 | 47 |

"Spin"->React.string

 48 | 49 |

"Swing"->React.string

 50 | 51 |

"Tada"->React.string

 52 | 53 |

"Wobble"->React.string

 54 | 55 | 56 | } 57 | }; 58 | 59 | ReactDOMRe.renderToElementWithId(, "root"); 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | 4 |

5 |

6 | Installation • 7 | Basic usage • 8 | Supported features 9 |

10 |
11 |
12 | 13 | ## Installation 14 | 15 | ```sh 16 | yarn add @reasonbr/bs-react-reveal react-reveal 17 | ``` 18 | Add the package to the `bsconfig.json` 19 | ```json 20 | { 21 | "bs-dependencies": [ 22 | "@reasonbr/bs-react-reveal" 23 | ] 24 | } 25 | ``` 26 | 27 | ## Usage 28 | 29 | ```reason 30 | open ReactReveal; 31 | 32 | [@react.component] 33 | let make = () => { 34 | 35 |

{React.string("Fade animation...")

36 | 37 | } 38 | ``` 39 | ## Status 40 | This is project is still `WIP`, but you can use all the components provided by [react-reveal](https://www.react-reveal.com/) with the almost all props. 41 | ### Supported features 42 | - Components: 43 | - `Reveal`: ⚠️ - Not yet `[WIP]` 44 | - `Fade`: ✅ 45 | - `Flip`: ✅ 46 | - `Rotate`: ✅ 47 | - `Zoom`: ✅ 48 | - `Bounce`: ✅ 49 | - `Slide`: ✅ 50 | - `Roll`: ✅ 51 | - `LightSpeed`: ✅ 52 | - `Jump`: ✅ 53 | - `Flash`: ✅ 54 | - `HeadShake`: ✅ 55 | - `Jello`: ✅ 56 | - `Pulse`: ✅ 57 | - `RubberBand`: ✅ 58 | - `Shake`: ✅ 59 | - `Spin`: ✅ 60 | - `Swing`: ✅ 61 | - `Tada`: ✅ 62 | - `Wobble`: ✅ 63 | - Component props: 64 | - `duration`: ✅ 65 | - `delay`: ✅ 66 | - `left`: ✅ 67 | - `right`: ✅ 68 | - `top`: ✅ 69 | - `bottom`: ✅ 70 | - `count`: ✅ 71 | - `forever`: ✅ 72 | - `mirror`: ✅ 73 | - `opposite`: ✅ 74 | - `distance`: ✅ 75 | - `spy`: ✅ ⚠️ - Only int values for now `[WIP]` 76 | - `when`: ✅ ⚠️ - Only bool values for now `[WIP]` 77 | - `in`: ✅ - ⚠️ Only bool values for now `[WIP]` 78 | - `appear`: ✅ 79 | - `enter`: ✅ 80 | - `exit`: ✅ 81 | - `timeout`: ✅ 82 | - `mountOnEnter`: ✅ 83 | - `unmountOnExit`: ✅ 84 | - `force`: ✅ 85 | - `refProp`: ⚠️ - Not yet `[WIP]` 86 | - `innerRef`: ⚠️ - Not yet `[WIP]` 87 | - `cascade`: ✅ 88 | - `collapse`: ✅ 89 | - `fraction`: ✅ 90 | - `ssrFadeout`: ✅ 91 | - `ssrReveal`: ✅ 92 | - `wait`: ✅ 93 | - `onReveal`: ✅ 94 | - `HOC's`: ⚠️ - Not yet `[WIP]` 95 | - `Custom effects`: ⚠️ - Not yet `[WIP]` 96 | 97 | ## Docs 98 | Check the official [react-reveal](https://www.react-reveal.com/docs/) documentation. 99 | -------------------------------------------------------------------------------- /example/config/webpack.config.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const TerserPlugin = require('terser-webpack-plugin') 5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 6 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') 7 | 8 | const appDirectory = fs.realpathSync(process.cwd()) 9 | const paths = { 10 | appPublic: path.resolve(appDirectory, 'public'), 11 | appBuild: path.resolve(appDirectory, 'build'), 12 | appPublic: path.resolve(appDirectory, 'public'), 13 | appHtml: path.resolve(appDirectory, 'public/index.html'), 14 | appIndexJs: path.resolve(appDirectory, 'src/Index.bs'), 15 | appConfig: path.resolve(appDirectory, 'config/'), 16 | appSrc: path.resolve(appDirectory, 'src'), 17 | appNodeModules: path.resolve(appDirectory, 'node_modules'), 18 | } 19 | 20 | const isEnvProduction = process.env.NODE_ENV === 'production' 21 | const isEnvDevelopment = !isEnvProduction 22 | 23 | // This is the production and development configuration. 24 | // It is focused on developer experience, fast rebuilds, and a minimal bundle. 25 | module.exports = { 26 | mode: isEnvProduction ? 'production' : 'development', 27 | // Stop compilation early in production 28 | bail: isEnvProduction, 29 | devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map', 30 | entry: paths.appIndexJs, 31 | output: { 32 | // There will be one main bundle, and one file per asynchronous chunk. 33 | // In development, it does not produce real files. 34 | filename: isEnvProduction 35 | ? 'static/js/[name].[contenthash:8].js' 36 | : 'static/js/bundle.js', 37 | // TODO: remove this when upgrading to webpack 5 38 | futureEmitAssets: true, 39 | // There are also additional JS chunk files if you use code splitting. 40 | chunkFilename: isEnvProduction 41 | ? 'static/js/[name].[contenthash:8].chunk.js' 42 | : 'static/js/[name].chunk.js', 43 | // The build folder. 44 | path: isEnvProduction ? paths.appBuild : undefined, 45 | // Add /* filename */ comments to generated require()s in the output. 46 | pathinfo: isEnvDevelopment, 47 | publicPath: '/', 48 | }, 49 | optimization: { 50 | minimize: isEnvProduction, 51 | // Automatically split vendor and commons 52 | // https://twitter.com/wSokra/status/969633336732905474 53 | // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366 54 | splitChunks: { 55 | chunks: 'all', 56 | // name: false, 57 | }, 58 | // Keep the runtime chunk separated to enable long term caching 59 | // https://twitter.com/wSokra/status/969679223278505985 60 | // https://github.com/facebook/create-react-app/issues/5358 61 | runtimeChunk: { 62 | name: entrypoint => `runtime-${entrypoint.name}`, 63 | }, 64 | minimizer: [ 65 | // This is only used in production mode 66 | new TerserPlugin({ 67 | terserOptions: { 68 | parse: { 69 | // We want terser to parse ecma 8 code. However, we don't want it 70 | // to apply any minification steps that turns valid ecma 5 code 71 | // into invalid ecma 5 code. This is why the 'compress' and 'output' 72 | // sections only apply transformations that are ecma 5 safe 73 | // https://github.com/facebook/create-react-app/pull/4234 74 | ecma: 8, 75 | }, 76 | compress: { 77 | ecma: 5, 78 | warnings: false, 79 | // Disabled because of an issue with Uglify breaking seemingly valid code: 80 | // https://github.com/facebook/create-react-app/issues/2376 81 | // Pending further investigation: 82 | // https://github.com/mishoo/UglifyJS2/issues/2011 83 | comparisons: false, 84 | // Disabled because of an issue with Terser breaking valid code: 85 | // https://github.com/facebook/create-react-app/issues/5250 86 | // Pending further investigation: 87 | // https://github.com/terser-js/terser/issues/120 88 | inline: 2, 89 | }, 90 | mangle: { 91 | safari10: true, 92 | }, 93 | output: { 94 | ecma: 5, 95 | comments: false, 96 | // Turned on because emoji and regex is not minified properly using default 97 | // https://github.com/facebook/create-react-app/issues/2488 98 | ascii_only: true, 99 | }, 100 | }, 101 | sourceMap: true, 102 | }), 103 | // This is only used in production mode 104 | new OptimizeCSSAssetsPlugin({ 105 | cssProcessorOptions: { 106 | map: { 107 | // `inline: false` forces the sourcemap to be output into a 108 | // separate file 109 | inline: false, 110 | // `annotation: true` appends the sourceMappingURL to the end of 111 | // the css file, helping the browser find the sourcemap 112 | annotation: true, 113 | } 114 | }, 115 | }), 116 | ] 117 | }, 118 | module: { 119 | rules: [ 120 | { 121 | test: /\.css$/, 122 | use: [ 123 | isEnvDevelopment && 'style-loader', 124 | isEnvProduction && { 125 | loader: MiniCssExtractPlugin.loader, 126 | }, 127 | { 128 | loader: 'css-loader', 129 | options: { 130 | importLoaders: 1, 131 | sourceMap: isEnvProduction, 132 | }, 133 | }, 134 | ].filter(Boolean) 135 | } 136 | ] 137 | }, 138 | plugins: [ 139 | // Generates an `index.html` file with the