Re-structure archetype app styles

archetype-app-styles-restructure.md

Re-structure archetype app styles

Issues & Features Requested

• When users trying to load css styles from dependencies, css always got encapsulated because we preset css modules + css next as default
• sass/scss support

Current Rules for CSS Styles

• [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 *.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

Proposed Rules for CSS Styles

• [CSS By default, this archetype assumes you are using CSS]
• Sass & Stylus is also supported for which the following cases can occur.
• case 1: only *.css exists => css (default)
• case 2: only cssModulesSupport flag enabled => css modules + css next
• case 3: only .styl exists => stylus
• case 4: only .sass exists => sass

Loaders (Verified on basic apps)

css only (default):

const rules = [{
    _name: "extract-css",
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
}]

css module + css next only (Flag: cssModuleSupport):

const extractLoader = hmr
    ? `${styleLoader}!${cssQuery}`
    : ExtractTextPlugin.extract({ fallback: styleLoader, use: cssQuery, publicPath: "" });

const rules = [{
    _name: "extract-css",
    test: /\.css$/,
    loader: extractLoader
 }];

scss only

Spend sometime on making this work. The error I previously met is:

Register plugins failed { SyntaxError: /Users/s0d00px/test-app/src/client/styles/custom.scss
: Unexpected token (1:0)
> 1 | .container {
    | ^
  2 |   max-width: 800px;
  3 |   width: 80%;
  4 |   margin-left: auto;
...

Though Webpack allows requiring static assets on the client side, babel, which compiles the server code, fails to do so as on the server side Node's require understands only JS files. This means that server side rendering is not possible with the default Webpack and babel. Here is a similar issue: webpack/webpack#1754

Below is the solution I have:

Add to server/index.js

require('babel-core/register')({
  presets: ['es2015', 'react']
});
require.extensions['.scss'] = () => {
  return;
};
require.extensions['.css'] = () => {
  return;
};
require.extensions['.styl'] = () => {
  return;
};

loader installation

$npm install sass-loader node-sass

webpack loader config

const sassLoader = require.resolve("sass-loader”);
module: { 
      rules: [{
      _name: “scss",
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract({
        fallback: styleLoader,
        use: [
          cssLoader,
          {
            loader: postcssLoader,
            options: {
              browsers: ["last 2 versions", "ie >= 9", "> 5%"]
            }
          },
          sassLoader
        ]
      })
    }]

stylus only

Spend sometime on making this work. The error I got similar to above.

Add to server/index.js

require('babel-core/register')({
  presets: ['es2015', 'react']
});
require.extensions['.scss'] = () => {
  return;
};
require.extensions['.css'] = () => {
  return;
};
require.extensions['.styl'] = () => {
  return;
};

config:

_name: "extract-stylus",
      test: /\.styl$/,
      use: hmr
        ? `${styleLoader}!${stylusQuery}`
        : ExtractTextPlugin.extract({ fallback: styleLoader, use: stylusQuery, publicPath: "" })

Combination of the styles

stylus + css modules (pending)