Skip to content

Commit

Permalink
[minor] Update archetype app styles (#703)
Browse files Browse the repository at this point in the history 
* Update archetype app styles

* polish code

* Optimize code, remove if else
  • Loading branch information
@didi0613 @jchip
didi0613 authored and jchip committed Feb 2, 2018
1 parent 7b0f493 commit 397e5db
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 65 deletions.
1 change: 1 addition & 0 deletions packages/electrode-archetype-react-app-dev/config/archetype.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const webpackConfigSpec = {
devPort: { env: "WEBPACK_DEV_PORT", default: 2992 },
testPort: { env: "WEBPACK_TEST_PORT", default: 3001 },
https: { env: "WEBPACK_DEV_HTTPS", default: false },
cssModuleSupport: { env: "CSS_MODULE_SUPPORT", default: undefined },
cssModuleStylusSupport: { env: "CSS_MODULE_STYLUS_SUPPORT", default: false },
enableBabelPolyfill: { env: "ENABLE_BABEL_POLYFILL", default: false },
enableNodeSourcePlugin: { env: "ENABLE_NODESOURCE_PLUGIN", default: false },
Expand Down
134 changes: 74 additions & 60 deletions packages/electrode-archetype-react-app-dev/config/webpack/partial/extract-style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,82 +16,96 @@ const cssLoader = require.resolve("css-loader");
const styleLoader = require.resolve("style-loader");
const stylusLoader = require.resolve("stylus-relative-loader");
const postcssLoader = require.resolve("postcss-loader");
const sassLoader = require.resolve("sass-loader");

const AppMode = archetype.AppMode;

/**
* [cssModuleSupport By default, this archetype assumes you are using CSS-Modules + CSS-Next]
/*
* cssModuleSupport: false
* case 1: *only* *.css => normal CSS
* case 2: *only* *.styl exists => Stylus
* case 3: *only* *.scss exists => SASS
*
* Stylus is also supported for which the following cases can occur.
*
* case 1: *only* *.css exists => CSS-Modules + CSS-Next
* case 2: *only* *.styl exists => stylus
* case 3: *both* *.css & *.styl exists => CSS-Modules + CSS-Next takes priority
* with a warning message
* case 4: *none* *.css & *.styl exists => CSS-Modules + CSS-Next takes priority
* case 5: *cssModuleStylusSupport* config is true => Use both Stylus and CSS Modules
* cssModulesSupport: true
* case 1: *only* *.css => CSS-Modules + CSS-Next
* case 2: *only* *.styl => normal CSS => CSS-Modules + CSS-Next
* case 3: *only* *.scss => normal CSS => CSS-Modules + CSS-Next
*/

const cssNextExists = glob.sync(Path.resolve(AppMode.src.client, "**", "*.css")).length > 0;
let cssModuleSupport = archetype.webpack.cssModuleSupport;
const cssModuleStylusSupport = archetype.webpack.cssModuleStylusSupport;
const AppMode = archetype.AppMode;

const cssLoaderOptions =
"?modules&localIdentName=[name]__[local]___[hash:base64:5]&-autoprefixer";
const cssQuery = `${cssLoader}!${postcssLoader}`;
const stylusQuery = `${cssLoader}?-autoprefixer!${stylusLoader}`;
const scssQuery = `${cssQuery}!${sassLoader}`;
const cssModuleQuery = `${cssLoader}${cssLoaderOptions}!${postcssLoader}`;
const cssStylusQuery = `${cssLoader}${cssLoaderOptions}!${postcssLoader}!${stylusLoader}`;
const cssScssQuery = `${cssLoader}${cssLoaderOptions}!${postcssLoader}!${sassLoader}`;

const rules = [];

const cssExists = glob.sync(Path.resolve(AppMode.src.client, "**", "*.css")).length > 0;
const stylusExists = glob.sync(Path.resolve(AppMode.src.client, "**", "*.styl")).length > 0;
const scssExists = glob.sync(Path.resolve(AppMode.src.client, "**", "*.scss")).length > 0;

// By default, this archetype assumes you are using CSS-Modules + CSS-Next
const cssModuleSupport = !stylusExists && cssNextExists;
/*
* cssModuleSupport default to undefined
*
* when cssModuleSupport not specified:
* *only* *.css, cssModuleSupport sets to true
* *only* *.styl, cssModuleSupport sets to false
* *only* *.scss, cssModuleSupport sets to false
*/
if (cssModuleSupport === undefined) {
cssModuleSupport = cssExists && !stylusExists && !scssExists;
}

module.exports = function() {
const cssModuleStylusSupport = archetype.webpack.cssModuleStylusSupport;
const stylusQuery = `${cssLoader}?-autoprefixer!${stylusLoader}`;
const cssLoaderOptions =
"?modules&localIdentName=[name]__[local]___[hash:base64:5]&-autoprefixer";
const cssQuery = `${cssLoader}${cssLoaderOptions}!${postcssLoader}`;
const cssStylusQuery = `${cssLoader}${cssLoaderOptions}!${postcssLoader}!${stylusLoader}`;
//
// Removing ExtratTextPlugin cause stylus to fail
// Disable it for now until figure out why and the fix.
//
// const hmr = process.env.HMR === "true";
const hmr = false;

// By default, this archetype assumes you are using CSS-Modules + CSS-Next
const extractLoader = hmr
? `${styleLoader}!${cssQuery}`
: ExtractTextPlugin.extract({ fallback: styleLoader, use: cssQuery, publicPath: "" });
const rules = [
rules.push(
{
_name: "extract-css",
_name: `extract-css${cssModuleSupport ? "-modules" : ""}`,
test: /\.css$/,
loader: extractLoader
loader: ExtractTextPlugin.extract({
fallback: styleLoader,
use: cssModuleSupport ? cssModuleQuery : cssQuery,
publicPath: ""
})
},
{
_name: `extract${cssModuleSupport ? "-css" : ""}-scss`,
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: styleLoader,
use: cssModuleSupport ? cssScssQuery : scssQuery,
publicPath: ""
})
},
{
_name: `extract${cssModuleSupport ? "-css" : ""}-stylus`,
test: /\.styl$/,
use: ExtractTextPlugin.extract({
fallback: styleLoader,
use: cssModuleSupport ? cssStylusQuery : stylusQuery,
publicPath: ""
})
}
];
);

/*
*** cssModuleStylusSupport flag is about to deprecate. ***
* If you want to enable stylus with CSS-Modules + CSS-Next,
* Please use stylus as your style and enable cssModuleSupport flag instead.
*/
if (cssModuleStylusSupport) {
rules.push({
_name: "extract-css-stylus",
test: /\.styl$/,
use: ExtractTextPlugin.extract({ fallback: styleLoader, use: cssStylusQuery, publicPath: "" })
});
} else if (!cssModuleSupport) {
rules.push({
_name: "extract-stylus",
test: /\.styl$/,
use: hmr
? `${styleLoader}!${stylusQuery}`
: ExtractTextPlugin.extract({ fallback: styleLoader, use: stylusQuery, publicPath: "" })
});
}

if (cssModuleSupport) {
rules.push({
_name: "postcss",
test: /\.scss$/,
use: [
{
loader: "postcss-loader",
options: {
browsers: ["last 2 versions", "ie >= 9", "> 5%"]
}
}
]
use: ExtractTextPlugin.extract({
fallback: styleLoader,
use: cssStylusQuery,
publicPath: ""
})
});
}

Expand Down
12 changes: 7 additions & 5 deletions packages/electrode-archetype-react-app-dev/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
"chai-shallowly": "^1.0.0",
"clean-css": "^3.4.21",
"convert-source-map": "^1.5.0",
"css-loader": "^0.26.1",
"css-loader": "^0.28.9",
"css-split-webpack-plugin": "^0.2.0",
"electrode-bundle-analyzer": "^1.0.0",
"electrode-cdn-file-loader": "^1.0.0",
Expand All @@ -63,7 +63,7 @@
"isomorphic-loader": "^1.0.0",
"isparta": "^4.0.0",
"istanbul": "^0.4.5",
"json-loader": "^0.5.3",
"json-loader": "^0.5.7",
"jsonfile": "^2.2.2",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.1.1",
Expand All @@ -84,6 +84,7 @@
"lodash": "^4.13.1",
"mkdirp": "^0.5.1",
"mocha": "^4.0.0",
"node-sass": "^4.7.2",
"nodemon": "^1.8.1",
"offline-plugin": "^4.6.1",
"optimize-css-assets-webpack-plugin": "^3.2.0",
Expand All @@ -100,15 +101,16 @@
"react-test-renderer": "^16.1.1",
"require-at": "^1.0.0",
"rimraf": "^2.4.0",
"sass-loader": "^6.0.6",
"sinon": "^4.0.0",
"sinon-chai": "^2.14.0",
"style-loader": "^0.13.1",
"style-loader": "^0.20.1",
"stylus": "^0.54.5",
"stylus-relative-loader": "^3.0.0",
"stylus-relative-loader": "^3.4.0",
"sw-precache": "^5.0.0",
"sw-toolbox": "^3.4.0",
"uglify-js": "^3.0.26",
"url-loader": "^0.5.6",
"url-loader": "^0.6.2",
"web-app-manifest-loader": "^0.1.1",
"webpack": "^3.6.0",
"webpack-config-composer": "^1.0.2",
Expand Down

0 comments on commit 397e5db

Please sign in to comment.