[MINOR] CSS-Modules + CSS-Next to be supported on the archetype by default (#5)

* CSS-Modules + CSS-Next to be supported on the archetype by default

* extend archetype functionality so that it also has support for stylus, by default archetype supports css-modules + css-next

* ternary condition to check for false

* support legacy use-case of stylus

* linter fix

* clean up file exists check with glob

Author: ananavati

README.md

@@ -47,7 +47,7 @@ gulp, webpack, demo, electrode component archetype, live-reload
    create src/styles/product-card.styl
    create src/index.js
    create demo/demo.jsx
-   create demo/demo.styl
+   create demo/demo.css
    create demo/examples/product-card.example
    create test/client/.eslintrc
    create test/client/components/product-card.spec.jsx
@@ -118,10 +118,12 @@ This archetype assumes an architecture as follows:
 ```
 demo/
   demo.jsx
-  demo.styl
+  demo.css
 src
   components/
     *.jsx
+  styles/
+    *.css
   index.js
 test
   client/
@@ -137,15 +139,10 @@ package.json
 
 ## CSS Modules + CSS next
 
-By default, this archetype assumes you are using Stylus and `.styl` files containing Global CSS. If you want to use `CSS-Modules + CSS-Next`, you need opt-in and use `.css` files. This archetype does not support using Stylus and `CSS-Modules + CSS-Next` together. You can opt-in to `CSS-Modules + CSS-Next` by adding a config section to your project's package.json and setting the necessary `env` variable to true:
+By default, this archetype assumes you are using CSS-Modules + CSS-Next, you need
+to opt-in to stylus support by adding a `*.styl` to your *project's* `demo/demo.styl` & `src/styles/*.styl`
 
-```
-"config": {
-  "electrode_archetype_react_component_webpack_css_modules": "true"
-}
-```
-
-Once enabled, you can import css files in your components and reference class names via the exported object `src/components/<%= componentPath %>.js`:
+Import css files in your components and reference class names via the exported object `src/components/<%= componentPath %>.js`:
 
 ```javascript
 import React from "react";
@@ -175,7 +172,7 @@ Add following styling to `src/styles/<%= componentPath %>.css`
 }
 
 .someStyle {
-  composes: baseComponent;
+  composes: baseStyle;
   font-size: 18px;
 }
 ```

config/webpack/partial/css.js

@@ -1,5 +1,8 @@
 "use strict";
 
+const Path = require("path");
+const glob = require("glob");
+
 const archDevRequire = require("electrode-archetype-react-component-dev/require");
 const mergeWebpackConfig = archDevRequire("webpack-partial").default;
 const atImport = archDevRequire("postcss-import");
@@ -8,9 +11,32 @@ const styleLoader = archDevRequire.resolve("style-loader");
 const cssLoader = archDevRequire.resolve("css-loader");
 const postcssLoader = archDevRequire.resolve("postcss-loader");
 
-const cssModuleSupport = process.env.npm_package_config_electrode_archetype_react_component_webpack_css_modules === "true" ? // eslint-disable-line max-len
-  "?modules!" + postcssLoader :
-  "";
+/**
+ * [cssModuleSupport By default, this archetype assumes you are using CSS-Modules + CSS-Next]
+ *
+ * Stylus is also supported for which the following cases can occur.
+ *
+ * case 1: *only* demo.css exists => CSS-Modules + CSS-Next
+ * case 2: *only* demo.styl exists => stylus
+ * case 3: *both* demo.css & demo.styl exists => CSS-Modules + CSS-Next takes priority
+ *          with a warning message
+ * case 4: *none* demo.css & demo.styl exists => CSS-Modules + CSS-Next takes priority
+ */
+
+const cssNextExists = (glob.sync(Path.join(process.cwd() + "/demo/*.css")).length > 0);
+const stylusExists = (glob.sync(Path.join(process.cwd() + "/demo/*.styl")).length > 0);
+
+// By default, this archetype assumes you are using CSS-Modules + CSS-Next
+let cssModuleSupport = "?modules!" + postcssLoader;
+
+if (stylusExists && !cssNextExists) {
+  cssModuleSupport = "";
+} else if (stylusExists && cssNextExists) {
+  /* eslint-disable no-console */
+  console.log(`**** you have demo.css & demo.styl please delete *.styl
+    and upgrade to using *.css for CSS-Modules + CSS-Next support ****`);
+  /* eslint-enable no-console */
+}
 
 module.exports = () => (config) => mergeWebpackConfig(config, {
   module: {

config/webpack/webpack.config.demo.dev.js

@@ -36,7 +36,8 @@ module.exports = {
       // Allow root import of `src/FOO` from ROOT/src.
       src: path.join(process.cwd(), "src"),
       "local-component-demo": path.join(process.cwd() + "/demo/demo.jsx"),
-      "local-demo-styl": path.join(process.cwd() + "/demo/demo.styl")
+      // By default, this archetype assumes you are using CSS-Modules + CSS-Next
+      "local-demo-css": path.join(process.cwd() + "/demo/demo")
     }
   }),
   resolveLoader: base.resolveLoader,

demo-server/client-routes.js

@@ -10,6 +10,6 @@ var createRoutes = require("./create-routes");
 var Demo = require("local-component-demo").default;
 
 // Also aliased for same reason as above
-require("local-demo-styl");
+require("local-demo-css");
 
 module.exports = createRoutes(Demo);

dev/README.md

@@ -46,7 +46,7 @@ gulp, webpack, demo, electrode component archetype, live-reload
     create src/styles/product-card.styl
     create src/index.js
     create demo/demo.jsx
-    create demo/demo.styl
+    create demo/demo.css
     create demo/index.jsx
     create demo/examples/product-card.example
     create test/client/.eslintrc
@@ -118,10 +118,12 @@ This archetype assumes an architecture as follows:
 ```
 demo/
   demo.jsx
-  demo.styl
+  demo.css
 src
   components/
     *.jsx
+  styles/
+    *.css
   index.js
 test
   client/
@@ -137,15 +139,8 @@ package.json
 
 ## CSS Modules
 
-By default, this archetype assumes your Stylus files contain Global CSS. If you are using CSS Modules, you need
-to opt-in to CSS Modules support by adding a `config` section to your *project's* `package.json` and setting the
-necessary env variable to `true`:
-
-```
-"config": {
-  "electrode_archetype_react_component_webpack_css_modules": "true"
-}
-```
+By default, this archetype assumes you are using CSS-Modules + CSS-Next, you need
+to opt-in to stylus support by adding a `*.styl` to your *project's* `demo/demo.styl` & `src/styles/*.styl`
 
 ## Gotchas
 

dev/package.json

@@ -16,10 +16,6 @@
   },
   "scripts": {},
   "dependencies": {
-    "electrode-check-dependencies": "^1.0.2",
-    "electrode-demo-index": "^1.0.0",
-    "electrode-docgen": "^1.0.0",
-    "electrode-gulp-helper": "^1.0.0",
     "babel-cli": "^6.6.5",
     "babel-core": "^6.7.2",
     "babel-eslint": "^5.0.0",
@@ -40,14 +36,18 @@
     "component-playground": "^1.0.1",
     "config": "^1.19.0",
     "css-loader": "^0.23.1",
+    "electrode-check-dependencies": "^1.0.2",
+    "electrode-demo-index": "^1.0.0",
+    "electrode-docgen": "^1.0.0",
+    "electrode-gulp-helper": "^1.0.0",
     "enzyme": "^2.3.0",
     "eslint": "^1.7.0",
     "eslint-config-defaults": "^9.0.0",
     "eslint-plugin-filenames": "^0.1.2",
     "eslint-plugin-react": "^3.6.3",
     "file-loader": "^0.8.4",
     "fs-extra": "^0.26.4",
-    "glob": "^7.0.0",
+    "glob": "^7.0.6",
     "history": "^1.13.1",
     "isparta-loader": "^2.0.0",
     "istanbul": "^0.3.18",
@@ -71,8 +71,8 @@
     "mocha": "^2.4.5",
     "nodemon": "^1.8.1",
     "phantomjs": "^1.9.18",
-    "postcss-import": "^8.1.2",
     "postcss-cssnext": "^2.7.0",
+    "postcss-import": "^8.1.2",
     "postcss-loader": "^0.8.2",
     "raw-loader": "^0.5.1",
     "react": "^15.2.0",