diff --git a/app/css/openmrs-owa-orderentry.scss b/app/css/openmrs-owa-orderentry.scss index 87e447f7..62b37deb 100644 --- a/app/css/openmrs-owa-orderentry.scss +++ b/app/css/openmrs-owa-orderentry.scss @@ -7,7 +7,6 @@ * graphic logo is a trademark of OpenMRS Inc. */ - @import '~@openmrs/style-referenceapplication/lib/referenceapplication.css'; body { font-family: "OpenSans", Arial, sans-serif; diff --git a/app/js/openmrs-owa-orderentry.jsx b/app/js/openmrs-owa-orderentry.jsx index bbb815d9..dfc70291 100644 --- a/app/js/openmrs-owa-orderentry.jsx +++ b/app/js/openmrs-owa-orderentry.jsx @@ -11,6 +11,8 @@ import { render } from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Provider } from 'react-redux'; import 'babel-polyfill'; +import '@openmrs/style-referenceapplication/lib/referenceapplication.css'; +import '../css/openmrs-owa-orderentry.scss'; import createStore from './redux-store'; import routes from './routes'; diff --git a/app/js/reducers/labOrders/labConceptsReducer.js b/app/js/reducers/labOrders/labConceptsReducer.js index 9b54749c..3abac922 100644 --- a/app/js/reducers/labOrders/labConceptsReducer.js +++ b/app/js/reducers/labOrders/labConceptsReducer.js @@ -8,7 +8,7 @@ import initialState from '../initialState'; const removeDuplicateTests = (tests) => { const uniqueTestIds = Array.from(new Set(tests.map(test => test.uuid))); - const uniqueTests = []; + const uniqueTests = []; tests.forEach((test) => { const testIndex = uniqueTestIds.indexOf(test.uuid); if (testIndex !== -1) { diff --git a/package.json b/package.json index 7b8601c1..b4196475 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ }, "devDependencies": { "archiver": "^1.0.0", + "autoprefixer": "^6.7.7", "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-eslint": "^8.2.2", @@ -56,7 +57,7 @@ "chai": "^4.1.2", "codecov": "^3.0.0", "copy-webpack-plugin": "^4.0.1", - "css-loader": "^0.23.1", + "css-loader": "0.28.7", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", "enzyme-to-json": "^3.3.3", @@ -66,10 +67,9 @@ "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-react": "^7.8.2", "expect": "^23.0.0-alpha.0", - "extract-text-webpack-plugin": "^1.0.1", - "file-loader": "^0.8.5", + "file-loader": "^1.1.5", "html-loader": "^0.4.3", - "html-webpack-plugin": "^2.24.1", + "html-webpack-plugin": "2.30.1", "identity-obj-proxy": "^3.0.0", "jasmine-core": "^2.6.4", "jest": "^22.4.2", @@ -87,6 +87,14 @@ "node-sass": "^4.8.3", "nyc": "^11.6.0", "on-build-webpack": "^0.1.0", + "postcss-cssnext": "^2.11.0", + "postcss-each": "^0.10.0", + "postcss-import": "^10.0.0", + "postcss-loader": "^2.0.6", + "postcss-mixins": "^6.0.0", + "postcss-nesting": "^4.0.1", + "postcss-reporter": "^4.0.0", + "postcss-scss": "0.4.1", "raw-loader": "^0.5.1", "react-dom": "^16.2.0", "redux-logger": "^3.0.6", @@ -95,17 +103,17 @@ "sass-loader": "^6.0.7", "style-loader": "^0.13.2", "url-loader": "^0.5.7", - "webpack": "^1.15.0", + "webpack": "^3.8.1", "yargs": "^4.3.1" }, "scripts": { "coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js", "clean": "rimraf dist && rimraf coverage*", - "build": "npm run clean && webpack --progress --colors --mode=production --target=web", - "build:dev": "npm run clean && webpack --progress --colors --mode=dev --target=web", + "build": " npm run clean && NODE_ENV=\"production\" webpack --progress --colors", + "build:dev": "npm run clean && NODE_ENV=\"development\" webpack --progress --colors", "build:prod": "npm run test && npm run build", - "build:deploy": "webpack --progress --colors --mode=deploy --target=web", - "watch": "webpack --progress --colors --watch --mode=deploy --target=web", + "build:deploy": "NODE_ENV=\"deploy\" webpack --progress --colors --target=web", + "watch": "NODE_ENV=\"development\" webpack --progress --colors --watch --cache=false", "test": "npm run lint && jest -u --coverage --maxWorkers=4", "test:debug": "karma start", "lint": "node_modules/.bin/eslint . --ext .js,.jsx" diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..1dc10d04 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,12 @@ +module.exports = { + plugins: { + 'postcss-import': { + root: __dirname, + }, + 'postcss-mixins': {}, + 'postcss-each': {}, + 'postcss-cssnext': {} + }, + }; + + \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 3c379856..38bb6aba 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -11,21 +11,19 @@ const webpack = require('webpack'); const path = require('path'); const fs = require('fs'); -const env = require('yargs').argv.mode; const target = require('yargs').argv.target; const targetPort = require('yargs').argv.targetPort; const UglifyPlugin = webpack.optimize.UglifyJsPlugin; const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; -const DedupePlugin = webpack.optimize.DedupePlugin; - const HtmlWebpackPlugin = require('html-webpack-plugin'); const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const WebpackOnBuildPlugin = require('on-build-webpack'); +const autoprefixer = require('autoprefixer'); -const nodeModulesDir = path.resolve(__dirname, '../node_modules'); +const env = process.env.NODE_ENV; const THIS_APP_ID = 'openmrs-owa-orderentry'; @@ -36,10 +34,6 @@ let outputFile = `.bundle`; let vendorOutputFile; let outputPath; -var configJson; -let appEntryPoint; -let localOwaFolder; - let devtool; var getConfig = function () { @@ -75,6 +69,42 @@ var resolveBrowserSyncTarget = function () { }; var browserSyncTarget = resolveBrowserSyncTarget(); +const rules = [ + { + test: /\.jsx?$/, + loader: 'babel-loader', + exclude: /node_modules/, + query: { + presets: ['env', 'react'], + cacheDirectory: true, + plugins: ['transform-class-properties', 'transform-object-rest-spread'] + } +}, { + test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/, + loader: 'url-loader' +}, { + test: /\.s?css$/, + include: [/node_modules/], + use: [ + 'style-loader', + 'css-loader' + ] +}, { + test: /\.html$/, + loader: 'html-loader' +}, { + test: /\.s?css$/, + exclude: [/node_modules/], + use: [ + 'style-loader?sourceMap', + { + loader: 'css-loader', + }, + 'postcss-loader', + 'sass-loader?sourcemap&sourceMapContents&outputStyle=expanded' + ] +}]; + /** Minify for production */ if (env === 'production') { @@ -91,7 +121,6 @@ if (env === 'production') { warnings: false } })); - plugins.push(new DedupePlugin()); outputFile = `${outputFile}.min.[chunkhash].js`; vendorOutputFile = "vendor.bundle.[chunkhash].js"; outputPath = `${__dirname}/dist/`; @@ -114,25 +143,27 @@ if (env === 'production') { archive.directory(`${outputPath}`, ''); archive.finalize(); - })) - -} else if (env === 'deploy') { + })); +} +if (env === 'deploy') { outputFile = `${outputFile}.js`; vendorOutputFile = "vendor.bundle.js"; outputPath = `${config.LOCAL_OWA_FOLDER}${config.LOCAL_OWA_FOLDER.slice(-1) != '/' ? '/' : ''}${THIS_APP_ID}`; devtool = 'source-map'; +} -} else if (env === 'dev') { - outputFile = `${outputFile}.js`; - vendorOutputFile = "vendor.bundle.js"; - outputPath = `${__dirname}/dist/`; - devtool = 'source-map'; +if (env === 'development') { + outputFile = `${outputFile}.js`; + vendorOutputFile = "vendor.bundle.js"; + outputPath = `${__dirname}/dist/`; + devtool = 'eval-source-map'; } plugins.push(new BrowserSyncPlugin({ proxy: { target: browserSyncTarget - } + }, + reload: true })); plugins.push(new CommonsChunkPlugin({ @@ -154,22 +185,33 @@ plugins.push(new CopyWebpackPlugin([{ to: 'img/omrs-button.png' }])); +plugins.push(new webpack.ProvidePlugin({ + React: 'react', +})); + +plugins.push(new webpack.LoaderOptionsPlugin({ + options: { + postcss: [ + autoprefixer({ + browsers: ['last 3 version', 'ie >= 11'] + }) + ] + } +})); +console.log('outputPath', outputPath); var webpackConfig = { - quiet: false, entry: { app: `${__dirname}/app/js/openmrs-owa-orderentry`, css: `${__dirname}/app/css/openmrs-owa-orderentry.scss`, vendor: [ - - - - 'react' - - , 'redux', 'redux-promise-middleware', 'redux-thunk', 'react-redux' - - + 'react', + 'redux', + 'redux-promise-middleware', + 'redux-thunk', + 'react-redux', + 'redux-saga' ] }, devtool: devtool, @@ -178,33 +220,13 @@ var webpackConfig = { path: outputPath, filename: '[name]' + outputFile, }, + target: 'web', module: { - loaders: [{ - test: /\.jsx?$/, - loader: 'babel-loader', - exclude: /node_modules/, - query: { - presets: ['env', 'react'], - cacheDirectory: true, - plugins: ['transform-class-properties', 'transform-object-rest-spread'] - } - }, { - test: /\.css$/, - loader: 'style-loader!css-loader' - }, { - test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/, - loader: 'url' - }, { - test: /\.html$/, - loader: 'html' - }, { - test: /\.scss$/, - loaders: ["style-loader", "css-loader", "sass-loader"] - }], + rules }, resolve: { - root: path.resolve('./src'), - extensions: ['', '.js', '.jsx'], + modules: [path.resolve(__dirname), 'node_modules'], + extensions: ['.js', '.jsx', '.css', '.scss'], }, plugins, externals: nodeModules,