Feature/scss plugin (#786)

jackjocross · jaredpalmer · commit 872c1be6c611 · 2018-10-22T12:24:50.000-04:00
* add scss plugin and fixes to makeLoaderFinder

* add readme for scss plugin

* fix test regex for including .css

* remove jest forceExit

* add contributors

* refactor tests

* add plugin options

* edit readme for better options knowledge

* change node-sass to node-sass-chokidar
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -76,6 +76,17 @@
         "example",
         "plugin"
       ]
+    },
+    {
+      "login": "rayandrews",
+      "name": "Ray Andrew",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/4437323?v=4",
+      "profile": "https://www.linkedin.com/in/ray-andrew/",
+      "contributions": [
+        "code",
+        "example",
+        "plugin"
+      ]
     }
   ]
 }
diff --git a/README.md b/README.md
@@ -390,11 +390,9 @@ MIT License
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-
 <!-- prettier-ignore -->
-| [<img src="https://avatars2.githubusercontent.com/u/4060187?v=4" width="100px;"/><br /><sub><b>Jared Palmer</b></sub>](http://jaredpalmer.com)<br />[💬](#question-jaredpalmer "Answering Questions") [💻](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer "Code") [🎨](#design-jaredpalmer "Design") [📖](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer "Documentation") [💡](#example-jaredpalmer "Examples") [🤔](#ideas-jaredpalmer "Ideas, Planning, & Feedback") [👀](#review-jaredpalmer "Reviewed Pull Requests") [⚠️](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer "Tests") [🔧](#tool-jaredpalmer "Tools") | [<img src="https://avatars3.githubusercontent.com/u/1415847?v=4" width="100px;"/><br /><sub><b>Jari Zwarts</b></sub>](https://jari.io)<br />[💬](#question-jariz "Answering Questions") [💻](https://github.com/jaredpalmer/razzle/commits?author=jariz "Code") [🤔](#ideas-jariz "Ideas, Planning, & Feedback") [🔌](#plugin-jariz "Plugin/utility libraries") [👀](#review-jariz "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/810438?v=4" width="100px;"/><br /><sub><b>Dan Abramov</b></sub>](http://twitter.com/dan_abramov)<br />[💻](https://github.com/jaredpalmer/razzle/commits?author=gaearon "Code") [🤔](#ideas-gaearon "Ideas, Planning, & Feedback") | [<img src="https://avatars0.githubusercontent.com/u/15182?v=4" width="100px;"/><br /><sub><b>Eric Clemmons</b></sub>](http://ericclemmons.github.com/)<br />[💻](https://github.com/jaredpalmer/razzle/commits?author=ericclemmons "Code") [🤔](#ideas-ericclemmons "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/17142193?v=4" width="100px;"/><br /><sub><b>Zino Hofmann</b></sub>](https://www.linkedin.com/in/zinohofmann/)<br />[💡](#example-HofmannZ "Examples") | [<img src="https://avatars2.githubusercontent.com/u/441058?v=4" width="100px;"/><br /><sub><b>Lucas Terra</b></sub>](https://www.linkedin.com/in/lucasterra7/)<br />[💻](https://github.com/jaredpalmer/razzle/commits?author=lucasterra "Code") [💡](#example-lucasterra "Examples") [🔌](#plugin-lucasterra "Plugin/utility libraries") | [<img src="https://avatars.githubusercontent.com/u/3628043" width="100px;"/><br /><sub><b>Erik Engi</b></sub>](https://oengi.com/)<br />[📖](https://github.com/jaredpalmer/razzle/commits?author=kireerik "Documentation") [📝](https://hackernoon.com/material-ui-get-started-fast-react-16-eea211d65308 "Blogposts") [💡](https://github.com/kireerik/razzle-material-ui-styled-example "Examples") [🐛](https://github.com/jaredpalmer/razzle/issues/created_by/kireerik "Bug reports") |
+| [<img src="https://avatars2.githubusercontent.com/u/4060187?v=4" width="100px;"/><br /><sub><b>Jared Palmer</b></sub>](http://jaredpalmer.com)<br />[💬](#question-jaredpalmer "Answering Questions") [💻](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer "Code") [🎨](#design-jaredpalmer "Design") [📖](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer "Documentation") [💡](#example-jaredpalmer "Examples") [🤔](#ideas-jaredpalmer "Ideas, Planning, & Feedback") [👀](#review-jaredpalmer "Reviewed Pull Requests") [⚠️](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer "Tests") [🔧](#tool-jaredpalmer "Tools") | [<img src="https://avatars3.githubusercontent.com/u/1415847?v=4" width="100px;"/><br /><sub><b>Jari Zwarts</b></sub>](https://jari.io)<br />[💬](#question-jariz "Answering Questions") [💻](https://github.com/jaredpalmer/razzle/commits?author=jariz "Code") [🤔](#ideas-jariz "Ideas, Planning, & Feedback") [🔌](#plugin-jariz "Plugin/utility libraries") [👀](#review-jariz "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/810438?v=4" width="100px;"/><br /><sub><b>Dan Abramov</b></sub>](http://twitter.com/dan_abramov)<br />[💻](https://github.com/jaredpalmer/razzle/commits?author=gaearon "Code") [🤔](#ideas-gaearon "Ideas, Planning, & Feedback") | [<img src="https://avatars0.githubusercontent.com/u/15182?v=4" width="100px;"/><br /><sub><b>Eric Clemmons</b></sub>](http://ericclemmons.github.com/)<br />[💻](https://github.com/jaredpalmer/razzle/commits?author=ericclemmons "Code") [🤔](#ideas-ericclemmons "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/17142193?v=4" width="100px;"/><br /><sub><b>Zino Hofmann</b></sub>](https://www.linkedin.com/in/zinohofmann/)<br />[💡](#example-HofmannZ "Examples") | [<img src="https://avatars2.githubusercontent.com/u/441058?v=4" width="100px;"/><br /><sub><b>Lucas Terra</b></sub>](https://www.linkedin.com/in/lucasterra7/)<br />[💻](https://github.com/jaredpalmer/razzle/commits?author=lucasterra "Code") [💡](#example-lucasterra "Examples") [🔌](#plugin-lucasterra "Plugin/utility libraries") | [<img src="https://avatars1.githubusercontent.com/u/4437323?v=4" width="100px;"/><br /><sub><b>Ray Andrew</b></sub>](https://www.linkedin.com/in/ray-andrew/)<br />[💻](https://github.com/jaredpalmer/razzle/commits?author=rayandrews "Code") [💡](#example-rayandrews "Examples") [🔌](#plugin-rayandrews "Plugin/utility libraries") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
-
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
diff --git a/examples/with-scss/.gitignore b/examples/with-scss/.gitignore
@@ -0,0 +1,10 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+public/static
+.env.*.local
diff --git a/examples/with-scss/README.md b/examples/with-scss/README.md
@@ -0,0 +1,23 @@
+# Razzle With SCSS Example
+
+## How to use
+
+Download the example [or clone the whole project](https://github.com/jaredpalmer/razzle.git):
+
+```bash
+curl https://codeload.github.com/jaredpalmer/razzle/tar.gz/master | tar -xz --strip=2 razzle-master/examples/with-scss
+cd with-scss
+```
+
+Install it and run:
+
+```bash
+yarn install
+yarn start
+```
+
+## Idea behind the example
+
+This is a basic, bare-bones example of how to use razzle. It satisfies the entry points and use scss as styling language
+You can import anything from node_modules or other scss files, like Bootstrap, etc.
+`src/index.js` for the server, `src/client.js` for the browser, and `src/App.scss` for SCSS style.
diff --git a/examples/with-scss/package.json b/examples/with-scss/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "razzle-examples-with-scss",
+  "version": "2.2.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "start:prod": "NODE_ENV=production node build/server.js"
+  },
+  "dependencies": {
+    "express": "^4.15.2",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "devDependencies": {
+    "razzle": "^2.2.0",
+    "razzle-plugin-scss": "^2.2.0"
+  }
+}
diff --git a/examples/with-scss/public/favicon.ico b/examples/with-scss/public/favicon.ico
diff --git a/examples/with-scss/public/robots.txt b/examples/with-scss/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+
diff --git a/examples/with-scss/razzle.config.js b/examples/with-scss/razzle.config.js
@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  plugins: ['scss'],
+};
diff --git a/examples/with-scss/src/App.js b/examples/with-scss/src/App.js
@@ -0,0 +1,12 @@
+import './App.scss';
+
+import React from 'react';
+
+const App = () => (
+  <div>
+    <div>Welcome to Razzle.</div>
+    <div className="info">Hot reload enabled!!</div>
+  </div>
+);
+
+export default App;
diff --git a/examples/with-scss/src/App.scss b/examples/with-scss/src/App.scss
@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+@import './other';
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Open Sans', sans-serif;
+}
diff --git a/examples/with-scss/src/App.test.js b/examples/with-scss/src/App.test.js
@@ -0,0 +1,10 @@
+import App from './App';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+describe('<App />', () => {
+  test('renders without exploding', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<App />, div);
+  });
+});
diff --git a/examples/with-scss/src/client.js b/examples/with-scss/src/client.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { hydrate } from 'react-dom';
+import App from './App';
+
+hydrate(<App />, document.getElementById('root'));
+
+if (module.hot) {
+  module.hot.accept();
+}
diff --git a/examples/with-scss/src/index.js b/examples/with-scss/src/index.js
@@ -0,0 +1,21 @@
+import express from 'express';
+import app from './server';
+
+if (module.hot) {
+  module.hot.accept('./server', function() {
+    console.log('🔁  HMR Reloading `./server`...');
+  });
+  console.info('✅  Server-side HMR Enabled!');
+}
+
+const port = process.env.PORT || 3000;
+
+export default express()
+  .use((req, res) => app.handle(req, res))
+  .listen(port, function(err) {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    console.log(`> Started on port ${port}`);
+  });
diff --git a/examples/with-scss/src/other.scss b/examples/with-scss/src/other.scss
@@ -0,0 +1,4 @@
+.info {
+  color: darkmagenta;
+  font-size: 14;
+}
diff --git a/examples/with-scss/src/server.js b/examples/with-scss/src/server.js
@@ -0,0 +1,38 @@
+import App from './App';
+import React from 'react';
+import express from 'express';
+import { renderToString } from 'react-dom/server';
+
+const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
+
+const server = express();
+
+server
+  .disable('x-powered-by')
+  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
+  .get('/*', (req, res) => {
+    const markup = renderToString(<App />);
+    res.send(
+      // prettier-ignore
+      `<!doctype html>
+    <html lang="">
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta charSet='utf-8' />
+        <title>Welcome to Razzle</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        ${
+          assets.client.css
+            ? `<link rel="stylesheet" href="${assets.client.css}">`
+            : ''
+        } 
+    </head>
+    <body>
+        <div id="root">${markup}</div>    
+        <script src="${assets.client.js}" defer crossorigin></script>
+    </body>
+</html>`
+    );
+  });
+
+export default server;
diff --git a/packages/razzle-dev-utils/makeLoaderFinder.js b/packages/razzle-dev-utils/makeLoaderFinder.js
@@ -9,11 +9,14 @@ const makeLoaderFinder = loaderName => rule => {
     typeof rule.loader === 'string' && rule.loader.match(loaderRegex);
 
   // Checks if there is an object inside rule.use with loader matching loaderRegex, OR
+  // Checks another condition, if rule is not an object, but pure string (ex: "style-loader", etc)
   const inUseArray =
     Array.isArray(rule.use) &&
     rule.use.find(
       loader =>
-        typeof loader.loader === 'string' && loader.loader.match(loaderRegex)
+        (typeof loader.loader === 'string' &&
+          loader.loader.match(loaderRegex)) ||
+        (typeof loader === 'string' && loader.match(loaderRegex))
     );
 
   return inUseArray || inLoaderString;
diff --git a/packages/razzle-plugin-scss/.eslintrc b/packages/razzle-plugin-scss/.eslintrc
@@ -0,0 +1,6 @@
+{
+  "env": {
+    "jest": true,
+    "node": true
+  }
+}
diff --git a/packages/razzle-plugin-scss/README.md b/packages/razzle-plugin-scss/README.md
@@ -1,3 +1,159 @@
 # razzle-plugin-scss
 
-This is just a stub. Not yet implemented.
+This package contains a plugin for using [SCSS/SASS](https://sass-lang.com/) with Razzle
+
+## Usage in Razzle Projects
+
+```bash
+yarn add razzle-plugin-scss --dev
+```
+
+### With the default options
+
+```js
+// razzle.config.js
+
+module.exports = {
+  plugins: ['scss'],
+};
+```
+
+---
+
+### With custom options
+
+```js
+// razzle.config.js
+
+module.exports = {
+  plugins: [
+    {
+      name: 'scss',
+      options: {
+        postcss: {
+          dev: {
+            sourceMap: false,
+          },
+        },
+      },
+    }
+  ],
+};
+```
+
+## Options
+
+Please remember that custom options will extends default options using `Object.assign`.
+Array such as postcss.plugins __WILL NOT BE EXTENDED OR CONCATED__, it will override all default plugins.
+
+---
+
+### postcss: _object_
+
+default
+
+```js
+{
+  dev: {
+    sourceMap: true,
+    ident: 'postcss',
+  },
+  prod: {
+    sourceMap: false,
+    ident: 'postcss',
+  },
+  plugins: [
+    PostCssFlexBugFixes,
+    autoprefixer({
+      browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
+      flexbox: 'no-2009',
+    }),
+  ],
+}
+```
+
+Set `dev` to add config to postcss in `development`.
+Set `prod` to add config to postcss in `production`.
+
+See [postcss loader options](https://github.com/postcss/postcss-loader#options) to override configs.
+
+---
+
+### sass: _object_
+
+default
+
+```js
+{
+  dev: {
+    sourceMap: true,
+    includePaths: [paths.appNodeModules],
+  },
+  prod: {
+    sourceMap: false,
+    includePaths: [paths.appNodeModules],
+  },
+}
+```
+
+Set `dev` to add config to postcss in `development`.
+Set `prod` to add config to postcss in `production`.
+
+See [node-sass options](https://github.com/sass/node-sass#options) to override configs.
+
+---
+
+### css: _object_
+
+default
+
+```js
+{
+  dev: {
+    sourceMap: true,
+    importLoaders: 1,
+    modules: false,
+  },
+  prod: {
+    sourceMap: false,
+    importLoaders: 1,
+    modules: false,
+    minimize: true,
+  },
+}
+```
+
+Set `dev` to add config to postcss in `development`.
+Set `prod` to add config to postcss in `production`.
+
+See [css loader options](https://github.com/webpack-contrib/css-loader#options) to override configs.
+
+---
+
+#### style: _object_
+
+default
+
+```js
+{}
+```
+
+Style loader only used in `development` environment.
+
+See [style loader options](https://github.com/webpack-contrib/style-loader#options) to override configs.
+
+#### resolveUrl: _object_
+
+default
+
+```js
+{
+  dev: {},
+  prod: {},
+}
+```
+
+Set `dev` to add config to postcss in `development`.
+Set `prod` to add config to postcss in `production`.
+
+See [resolve url loader options](https://github.com/bholloway/resolve-url-loader#options) to override configs.
diff --git a/packages/razzle-plugin-scss/helpers.js b/packages/razzle-plugin-scss/helpers.js
diff --git a/packages/razzle-plugin-scss/index.js b/packages/razzle-plugin-scss/index.js
diff --git a/packages/razzle-plugin-scss/package.json b/packages/razzle-plugin-scss/package.json
diff --git a/packages/razzle-plugin-scss/tests/index.test.js b/packages/razzle-plugin-scss/tests/index.test.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,17 @@`
`76`	`76`	`"example",`
`77`	`77`	`"plugin"`
`78`	`78`	`]`
	`79`	`+ },`
	`80`	`+ {`
	`81`	`+ "login": "rayandrews",`
	`82`	`+ "name": "Ray Andrew",`
	`83`	`+ "avatar_url": "https://avatars1.githubusercontent.com/u/4437323?v=4",`
	`84`	`+ "profile": "https://www.linkedin.com/in/ray-andrew/",`
	`85`	`+ "contributions": [`
	`86`	`+ "code",`
	`87`	`+ "example",`
	`88`	`+ "plugin"`
	`89`	`+ ]`
`79`	`90`	`}`
`80`	`91`	`]`
`81`	`92`	`}`