feat(cssSelectorPrefix): Add cssSelectorPrefix option (#25)

* feat(cssSelectorPrefix): Add cssSelectorPrefix to support standalone style guide header & footer

* WIP: Updated readme with usage of cssSelectorPrefix

README.md

@@ -55,6 +55,17 @@ module.exports = decorateClientConfig(config, {
 });
 ```
 
+### CSS Selector Prefix
+
+This selector prefix is automatically prepended to all selectors to ensure styles don't leak out into the global scope.
+For example, this is used for generating the standalone header & footer in the style guide.
+
+```js
+module.exports = decorateClientConfig(config, {
+  cssSelectorPrefix: '.__SSG__'
+});
+```
+
 ## Contributing
 
 Refer to [CONTRIBUTING.md](./CONTRIBUTING.md).

index.js

@@ -212,6 +212,14 @@ const decorateServerConfig = (config, options) => {
   });
 }
 
+const postcssPlugins = ({ cssSelectorPrefix }, autoprefixerConfig) => 
+  [require('autoprefixer')(autoprefixerConfig)]
+    .concat(!cssSelectorPrefix ? [] : [
+      require('postcss-prefix-selector')({
+        prefix: `:global(${cssSelectorPrefix})`
+      })
+    ]);
+
 const decorateClientConfig = (config, options) => {
   const extractTextPlugin = options && options.extractTextPlugin;
   const { absolute } = getIncludePaths(options);
@@ -258,7 +266,7 @@ const decorateClientConfig = (config, options) => {
           {
             loader: require.resolve('postcss-loader'),
             options: {
-              plugins: () => [require('autoprefixer')(autoprefixerConfig)]
+              plugins: () => postcssPlugins(options)
             }
           },
           require.resolve('less-loader')

package.json

@@ -46,6 +46,7 @@
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
     "postcss-loader": "^2.0.7",
+    "postcss-prefix-selector": "^1.6.0",
     "raw-loader": "^0.5.1",
     "style-loader": "^0.19.0",
     "svgo-loader": "^1.2.1",