[1.0] Add the sass plugin to this repo

docs/docs/plugins.md

@@ -29,6 +29,7 @@ mean converting this file into a JS component).
 * [gatsby-plugin-manifest](/docs/packages/gatsby-plugin-manifest/)
 * [gatsby-plugin-offline](/docs/packages/gatsby-plugin-offline/)
 * [gatsby-plugin-preact](/docs/packages/gatsby-plugin-preact/)
+* [gatsby-plugin-sass](/docs/packages/gatsby-plugin-sass/)
 * [gatsby-plugin-sharp](/docs/packages/gatsby-plugin-sharp/)
 * [gatsby-plugin-typescript](/docs/packages/gatsby-plugin-typescript/)
 * [gatsby-source-filesystem](/docs/packages/gatsby-source-filesystem/)

packages/gatsby-plugin-sass/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+/gatsby-node.js
+/index.js

packages/gatsby-plugin-sass/.npmignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

packages/gatsby-plugin-sass/README.md

@@ -0,0 +1,16 @@
+# gatsby-plugin-sass
+Provides drop-in support for SASS/SCSS stylesheets
+
+## Install
+`yarn add gatsby-plugin-sass`
+
+## How to use
+1. Include the plugin in your `gatsby-config.js` file.
+2. Write your stylesheets in SASS/SCSS and require/import them
+
+```javascript
+// in gatsby-config.js
+plugins: [
+  `gatsby-plugin-sass`
+]
+```

packages/gatsby-plugin-sass/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "gatsby-plugin-sass",
+  "description": "Gatsby plugin to handle scss/sass files",
+  "version": "1.0.0-alpha13",
+  "author": "Daniel Farrell <daniel@mobelux.com>",
+  "dependencies": {
+    "extract-text-webpack-plugin": "^1.0.1",
+    "node-sass": "^4.5.2",
+    "sass-loader": "^4.1.1",
+    "webpack": "^1.13.3"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1"
+  },
+  "keywords": [
+    "gatsby",
+    "sass",
+    "scss"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "readme": "README.md",
+  "scripts": {
+    "build": "babel src --out-dir .",
+    "watch": "babel -w src --out-dir ."
+  },
+}

packages/gatsby-plugin-sass/src/gatsby-node.js

@@ -0,0 +1,66 @@
+import ExtractTextPlugin from "extract-text-webpack-plugin";
+
+exports.modifyWebpackConfig = ({ args }) => {
+  const { config, stage } = args;
+
+  const cssModulesConf = `css?modules&minimize&importLoaders=1`;
+  const cssModulesConfDev = `${cssModulesConf}&sourceMap&localIdentName=[name]---[local]---[hash:base64:5]`;
+
+  switch (stage) {
+    case `develop`: {
+      config.loader(`sass`, {
+        test: /\.s(a|c)ss$/,
+        exclude: /\.module\.s(a|c)ss$/,
+        loaders: [`style`, `css`, `sass`]
+      });
+
+      config.loader(`sassModules`, {
+        test: /\.module\.s(a|c)ss$/,
+        loaders: [`style`, cssModulesConfDev, `sass`]
+      });
+      return config;
+    }
+    case `build-css`: {
+      config.loader("sass", {
+        test: /\.s(a|c)ss$/,
+        exclude: /\.module\.s(a|c)ss$/,
+        loader: ExtractTextPlugin.extract([`css?minimize`, `sass`])
+      });
+
+      config.loader(`sassModules`, {
+        test: /\.module\.s(a|c)ss$/,
+        loader: ExtractTextPlugin.extract(`style`, [cssModulesConf, `sass`])
+      });
+      return config;
+    }
+    case `build-html`: {
+      config.loader("sass", {
+        test: /\.s(a|c)ss$/,
+        exclude: /\.module\.s(a|c)ss$/,
+        loader: `null`
+      });
+
+      config.loader(`sassModules`, {
+        test: /\.module\.s(a|c)ss$/,
+        loader: ExtractTextPlugin.extract(`style`, [cssModulesConf, `sass`])
+      });
+      return config;
+    }
+    case `build-javascript`: {
+      config.loader("sass", {
+        test: /\.s(a|c)ss$/,
+        exclude: /\.module\.s(a|c)ss$/,
+        loader: ExtractTextPlugin.extract([`css`, `sass`])
+      });
+
+      config.loader(`sassModules`, {
+        test: /\.module\.s(a|c)ss$/,
+        loader: ExtractTextPlugin.extract(`style`, [cssModulesConf, `sass`])
+      });
+      return config;
+    }
+    default: {
+      return config;
+    }
+  }
+};