Add general mix.css() command.

This is an alias for mix.postCss().

Author: JeffreyWay

docs/css.md

@@ -0,0 +1,36 @@
+# General CSS Compilation
+
+-   [Basic Usage](#basic-usage)
+-   [Advanced Usage](#advanced-usage)
+
+### Basic Usage
+
+Mix provides the `mix.css()` command for basic CSS compilation. Here's an example that imports the Normalize CSS library and adds a single rule.
+
+```css
+/* src/app.css */
+
+@import '~normalize.css/normalize.css';
+
+body {
+    color: red;
+}
+```
+
+We can now add CSS compilation to our `webpack.mix.js` file, like so:
+
+```js
+// webpack.mix.js
+let mix = require('laravel-mix');
+
+mix.css('src/app.css', 'dist');
+```
+
+Run webpack with `npx mix` and you'll find a `/dist/app.css` file that contains the full Normalize library, as well as your `body` rule.
+
+Easy!
+
+### Advanced Usage
+
+As you'll find in the next section, `mix.css()` is an alias for `mix.postCss()`. This means you have full access to the entire PostCSS plugin ecosystem as part of your compilation.
+

docs/postcss.md

@@ -1,12 +1,12 @@
-# PostCss Preprocessing
+# PostCSS Preprocessing
 
 -   [Basic Usage](#basic-usage)
 -   [Autoprefixer](#autoprefixer)
 
 ### Basic Usage
 
 Here's a quick example to get you started. Imagine that you have the following CSS file that needs to be compiled and piped through a series of PostCSS plugins. In the example below,
-we'll need to pull in the `postcss-custom-properties` PostCss plugin.
+we'll need to pull in the `postcss-custom-properties` PostCSS plugin.
 
 ```css
 :root {
@@ -18,7 +18,7 @@ we'll need to pull in the `postcss-custom-properties` PostCss plugin.
 }
 ```
 
-No problem. Let's add PostCss compilation to our `webpack.mix.js` file.
+No problem. Let's add PostCSS compilation to our `webpack.mix.js` file.
 
 ```js
 // webpack.mix.js
@@ -28,6 +28,8 @@ let mix = require('laravel-mix');
 mix.postCss('src/app.css', 'dist', [require('postcss-custom-properties')]);
 ```
 
+> Tip: `mix.postCss()` and `mix.css()` are aliases. Either option works for all examples in this section.
+
 Notice how, as the third argument to `mix.postCss()`, we can provide an optional array of PostCSS plugins that should be included as part of the build.
 
 Compile this down as usual \(`npx mix`\), and you'll find a `/dist/app.css` file that contains:

docs/readme.md

@@ -21,10 +21,11 @@
 
 ### CSS
 
+-   [General CSS Compilation](css.md)
+-   [PostCSS Compilation](postcss.md)
 -   [Sass Compilation](sass.md)
 -   [Less Compilation](less.md)
 -   [Stylus Compilation](stylus.md)
--   [PostCss Compilation](postcss.md)
 -   [Relative URL Rewriting](url-rewriting.md)
 
 ### Tasks

src/components/ComponentRegistrar.js

@@ -11,7 +11,7 @@ let components = [
     'Sass',
     'Stylus',
     'PostCss',
-    'Css',
+    'CssWebpackConfig',
     'BrowserSync',
     'Combine',
     'Copy',

src/components/Css.js renamed to src/components/CssWebpackConfig.js

@@ -3,7 +3,7 @@ let mapValues = require('lodash').mapValues;
 let AutomaticComponent = require('./AutomaticComponent');
 let MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-class Css extends AutomaticComponent {
+class CssWebpackConfig extends AutomaticComponent {
     /**
      * webpack rules to be appended to the master config.
      */
@@ -12,13 +12,13 @@ class Css extends AutomaticComponent {
             {
                 test: /\.css$/,
                 use: [
-                    ...Css.afterLoaders(),
+                    ...CssWebpackConfig.afterLoaders(),
                     { loader: 'css-loader', options: { importLoaders: 1 } },
                     {
                         loader: 'postcss-loader',
                         options: this.postCssOptions()
                     },
-                    ...Css.beforeLoaders({
+                    ...CssWebpackConfig.beforeLoaders({
                         type: 'css',
                         injectGlobalStyles: true
                     })
@@ -29,7 +29,7 @@ class Css extends AutomaticComponent {
                 test: /\.scss$/,
                 exclude: this.excludePathsFor('sass'),
                 use: [
-                    ...Css.afterLoaders(),
+                    ...CssWebpackConfig.afterLoaders(),
                     { loader: 'css-loader' },
                     {
                         loader: 'postcss-loader',
@@ -44,7 +44,7 @@ class Css extends AutomaticComponent {
                             }
                         }
                     },
-                    ...Css.beforeLoaders({
+                    ...CssWebpackConfig.beforeLoaders({
                         type: 'scss',
                         injectGlobalStyles: true
                     })
@@ -55,7 +55,7 @@ class Css extends AutomaticComponent {
                 test: /\.sass$/,
                 exclude: this.excludePathsFor('sass'),
                 use: [
-                    ...Css.afterLoaders(),
+                    ...CssWebpackConfig.afterLoaders(),
                     { loader: 'css-loader' },
                     {
                         loader: 'postcss-loader',
@@ -71,7 +71,7 @@ class Css extends AutomaticComponent {
                             }
                         }
                     },
-                    ...Css.beforeLoaders({
+                    ...CssWebpackConfig.beforeLoaders({
                         type: 'sass',
                         injectGlobalStyles: true
                     })
@@ -82,14 +82,14 @@ class Css extends AutomaticComponent {
                 test: /\.less$/,
                 exclude: this.excludePathsFor('less'),
                 use: [
-                    ...Css.afterLoaders(),
+                    ...CssWebpackConfig.afterLoaders(),
                     { loader: 'css-loader' },
                     {
                         loader: 'postcss-loader',
                         options: this.postCssOptions()
                     },
                     { loader: 'less-loader' },
-                    ...Css.beforeLoaders({
+                    ...CssWebpackConfig.beforeLoaders({
                         type: 'less',
                         injectGlobalStyles: true
                     })
@@ -100,14 +100,14 @@ class Css extends AutomaticComponent {
                 test: /\.styl(us)?$/,
                 exclude: this.excludePathsFor('stylus'),
                 use: [
-                    ...Css.afterLoaders(),
+                    ...CssWebpackConfig.afterLoaders(),
                     { loader: 'css-loader' },
                     {
                         loader: 'postcss-loader',
                         options: this.postCssOptions()
                     },
                     { loader: 'stylus-loader' },
-                    ...Css.beforeLoaders({
+                    ...CssWebpackConfig.beforeLoaders({
                         type: 'stylus',
                         injectGlobalStyles: true
                     })
@@ -220,7 +220,9 @@ class Css extends AutomaticComponent {
 
         if (Mix.globalStyles && injectGlobalStyles) {
             let resources =
-                Css.normalizeGlobalStyles(Mix.globalStyles)[type] || [];
+                CssWebpackConfig.normalizeGlobalStyles(Mix.globalStyles)[
+                    type
+                ] || [];
 
             if (resources.length) {
                 loaders.push({
@@ -251,4 +253,4 @@ class Css extends AutomaticComponent {
     }
 }
 
-module.exports = Css;
+module.exports = CssWebpackConfig;

src/components/PostCss.js

@@ -3,6 +3,13 @@ let File = require('../File');
 let Preprocessor = require('./Preprocessor');
 
 class PostCss extends Preprocessor {
+    /**
+     * The Mix API name for the component.
+     */
+    name() {
+        return ['postCss', 'css'];
+    }
+
     /**
      * Register the component.
      *

src/components/Preprocessor.js

@@ -2,7 +2,7 @@ let Assert = require('../Assert');
 let path = require('path');
 let File = require('../File');
 let { Chunks } = require('../Chunks');
-let Css = require('./Css');
+let CssWebpackConfig = require('./CssWebpackConfig');
 let PostCssPluginsFactory = require('../PostCssPluginsFactory');
 
 class Preprocessor {
@@ -32,7 +32,7 @@ class Preprocessor {
 
         this.details.forEach(preprocessor => {
             let loaders = [
-                ...Css.afterLoaders({ method: 'extract' }),
+                ...CssWebpackConfig.afterLoaders({ method: 'extract' }),
                 {
                     loader: 'css-loader',
                     options: {
@@ -66,7 +66,7 @@ class Preprocessor {
             }
 
             loaders.push(
-                ...Css.beforeLoaders({
+                ...CssWebpackConfig.beforeLoaders({
                     type: preprocessor.type,
                     injectGlobalStyles: false
                 })

test/features/postcss.js

@@ -20,6 +20,30 @@ test.after.always(() => {
     postCssConfigFile.delete();
 });
 
+test('basic mix.postCss() compilation', async t => {
+    let css = 'body { color: red; }';
+
+    let file = new Stub('css/basic-compilation.css', css);
+
+    mix.postCss(file.relativePath(), 'css');
+
+    await webpack.compile();
+
+    t.true(file.hasCompiledContent(css));
+});
+
+test('mix.css() is an alias for mix.postCss()', async t => {
+    let css = 'body { color: red; }';
+
+    let file = new Stub('css/basic-compilation.css', css);
+
+    mix.css(file.relativePath(), 'css');
+
+    await webpack.compile();
+
+    t.true(file.hasCompiledContent(css));
+});
+
 test('it applies autoprefixer to compiled CSS', async t => {
     let css = `
         @keyframes testing {