From 0d769f9f68d850d098fb824713c956b1f0472817 Mon Sep 17 00:00:00 2001 From: Alain Jacomet Date: Sun, 14 Jan 2018 10:07:16 -0300 Subject: [PATCH 1/2] v0.0.1: SASS, External SW, Package name, Template --- .../config/webpack.config.dev.js | 34 ++++++++++++ .../config/webpack.config.prod.js | 54 +++++++++++++++++++ packages/react-scripts/package.json | 14 ++--- .../template/public/sw-custom.js | 1 + .../template/src/{App.css => App.scss} | 0 packages/react-scripts/template/src/App.tsx | 2 +- .../template/src/{index.css => index.scss} | 0 packages/react-scripts/template/src/index.tsx | 2 +- 8 files changed, 99 insertions(+), 8 deletions(-) create mode 100644 packages/react-scripts/template/public/sw-custom.js rename packages/react-scripts/template/src/{App.css => App.scss} (100%) rename packages/react-scripts/template/src/{index.css => index.scss} (100%) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index d5e6aae24..225f8c671 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -205,6 +205,40 @@ module.exports = { }, ], }, + // SASS Loader + { + test: /\.scss$/, + use: [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ], + flexbox: 'no-2009', + }), + ], + }, + }, + require.resolve('sass-loader') + ], + }, // "file" loader makes sure those assets get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. // In production, they would get copied to the `build` folder. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index d407f480f..d7010fd52 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -239,6 +239,56 @@ module.exports = { ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, + // SASS Loader + { + test: /\.scss$/, + loader: ExtractTextPlugin.extract( + Object.assign( + { + fallback: require.resolve('style-loader'), + use: [ + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ], + flexbox: 'no-2009', + }), + ], + sourceMap: shouldUseSourceMap + }, + }, + { + loader: require.resolve('sass-loader'), + options: { + sourceMap: shouldUseSourceMap + } + } + ], + }, + extractTextPluginOptions + ) + ), + // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. + }, // "file" loader makes sure assets end up in the `build` folder. // When you `import` an asset, you get its filename. // This loader doesn't use a "test" so it will catch all modules @@ -349,6 +399,10 @@ module.exports = { navigateFallbackWhitelist: [/^(?!\/__).*/], // Don't precache sourcemaps (they're large) and build asset manifest: staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/], + // Import custom service worker + importScripts: [ + { filename: publicPath + 'sw-custom.js' } + ] }), // Moment.js is an extremely popular library that bundles large locale files // by default due to how Webpack interprets its code. This is a practical diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index fa61b9108..4e022814d 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,14 +1,14 @@ { - "name": "react-scripts-ts", - "version": "2.8.0", + "name": "flipdish-react-scripts-fork", + "version": "0.0.1", "description": "Configuration and scripts for Create React App.", - "repository": "wmonk/create-react-app", + "repository": "flipdishbytes/flipdish-create-react-app-typescript", "license": "BSD-3-Clause", "engines": { "node": ">=6" }, "bugs": { - "url": "https://github.com/wmonk/create-react-app/issues" + "url": "https://github.com/flipdishbytes/flipdish-create-react-app-typescript" }, "files": [ "bin", @@ -32,21 +32,23 @@ "fs-extra": "3.0.1", "html-webpack-plugin": "2.29.0", "jest": "20.0.4", + "node-sass": "^4.7.2", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.8", "promise": "8.0.1", "raf": "3.4.0", "react-dev-utils": "4.2.1", + "sass-loader": "^6.0.6", + "source-map-loader": "^0.2.1", "style-loader": "0.19.0", + "sw-precache-webpack-plugin": "0.11.4", "ts-jest": "^20.0.7", "ts-loader": "^2.3.7", "tslint": "^5.7.0", "tslint-loader": "^3.5.3", "tslint-react": "^3.2.0", "typescript": "~2.5.3", - "source-map-loader": "^0.2.1", - "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", "webpack": "3.8.1", "webpack-dev-server": "2.9.4", diff --git a/packages/react-scripts/template/public/sw-custom.js b/packages/react-scripts/template/public/sw-custom.js new file mode 100644 index 000000000..b957b67e8 --- /dev/null +++ b/packages/react-scripts/template/public/sw-custom.js @@ -0,0 +1 @@ +console.log('External service worker loaded'); \ No newline at end of file diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/App.scss similarity index 100% rename from packages/react-scripts/template/src/App.css rename to packages/react-scripts/template/src/App.scss diff --git a/packages/react-scripts/template/src/App.tsx b/packages/react-scripts/template/src/App.tsx index 921bb811d..b40418ed6 100644 --- a/packages/react-scripts/template/src/App.tsx +++ b/packages/react-scripts/template/src/App.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import './App.css'; +import './App.scss'; const logo = require('./logo.svg'); diff --git a/packages/react-scripts/template/src/index.css b/packages/react-scripts/template/src/index.scss similarity index 100% rename from packages/react-scripts/template/src/index.css rename to packages/react-scripts/template/src/index.scss diff --git a/packages/react-scripts/template/src/index.tsx b/packages/react-scripts/template/src/index.tsx index 1c66245ab..f9d16a20b 100644 --- a/packages/react-scripts/template/src/index.tsx +++ b/packages/react-scripts/template/src/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; -import './index.css'; +import './index.scss'; ReactDOM.render( , From f90f4ae6a10f19b0d9148f89e2a12dce1ed7d070 Mon Sep 17 00:00:00 2001 From: Alain Jacomet Date: Mon, 15 Jan 2018 13:09:39 -0300 Subject: [PATCH 2/2] Scopes package name --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4e022814d..8fc6b4ecd 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,5 +1,5 @@ { - "name": "flipdish-react-scripts-fork", + "name": "@flipdish/react-scripts-ts", "version": "0.0.1", "description": "Configuration and scripts for Create React App.", "repository": "flipdishbytes/flipdish-create-react-app-typescript",