feature #474 Add resolve options for imports from css files. (David E…

…llingsworth, weaverryan)

This PR was merged into the master branch.

Discussion
----------

Add resolve options for imports from css files.

These options change the default resolver functionality when import is used in css files.
This reduces the burden on the developer to locate styles provided by npm packages.

E.g. With these changes the follow become valid:

sass-test.scss:
```css
// Resolution via "sass" property in package.json file in npm package
@import '~bootstrap';

// Resolution via file extension to css-test.css
@import 'css-test';
```

css-test.css
```css
// Resolution via "style" property in package.json file in npm package
@import '~@fortawesome/fontawesome-free';
```

Commits
-------

7895f63 fixing CS
9525e7a Merge branch 'master' into resolve
382bc5f Add functional test for css imports via package.json style property
b9e42be Add functional test for sass imports via package.json sass property
0f9657f Specify resolve option to be used with the css-loader. This allows @import in css files to locate a file to import based on the package.json file and to look for local files with the appropriate extensions when not specified.
b54ec7b Specify resolve option to be used with the sass-loader. This allows @import in sass files to locate a file to import based on the package.json file and to look for local files with the appropriate extentions when not specified.

fixtures/css/sass_package_import.scss

@@ -0,0 +1,7 @@
+// There seems to be an issue with the sass-loader and prefixing
+// aliased directories with a tilde. The following line is how
+// this import should look and works for node_modules.
+// @import '~lib/test-pkg';
+
+// Importing without the tilde seems to work for webpack aliases
+@import 'lib/test-pkg';

fixtures/css/style_package_import.css

@@ -0,0 +1 @@
+@import '~lib/test-pkg';

fixtures/lib/test-pkg/css/sass_entry.scss

@@ -0,0 +1,5 @@
+$content:'Sass entrypoint';
+
+body {
+    content:$content;
+}

fixtures/lib/test-pkg/css/style_entry.css

@@ -0,0 +1,3 @@
+body {
+    content:'Style entrypoint';
+}

fixtures/lib/test-pkg/js/javascript_entry.js

@@ -0,0 +1,3 @@
+"use strict";
+
+document.write("JavaScript entrypoint");

fixtures/lib/test-pkg/package.json

@@ -0,0 +1,11 @@
+{
+    "name":"@symfony/webpack-encore-test-pkg",
+    "description": "This is a test package for use by functional tests which use packages.",
+    "author": {
+        "name": "David Ellingsworth",
+        "email": "david@desource.org"
+    },
+    "main":"js/javascript_entry.js",
+    "style":"css/style_entry.css",
+    "sass":"css/sass_entry.scss"
+}

lib/config-generator.js

@@ -234,6 +234,10 @@ class ConfigGenerator {
                 use: babelLoaderUtil.getLoaders(this.webpackConfig)
             }),
             applyRuleConfigurationCallback('css', {
+                resolve: {
+                    mainFields: ['style', 'main'],
+                    extensions: ['.css'],
+                },
                 test: /\.css$/,
                 oneOf: [
                     {
@@ -311,6 +315,10 @@ class ConfigGenerator {
 
         if (this.webpackConfig.useSassLoader) {
             rules.push(applyRuleConfigurationCallback('sass', {
+                resolve: {
+                    mainFields: ['sass', 'style', 'main'],
+                    extensions: ['.scss', '.sass', '.css']
+                },
                 test: /\.s[ac]ss$/,
                 oneOf: [
                     {

test/functional.js

@@ -2214,6 +2214,43 @@ module.exports = {
             });
         });
 
+        describe('Package entrypoint imports', () => {
+            it('Import via "sass" package property', (done) => {
+                const config = createWebpackConfig('web/build', 'dev');
+
+                config.setPublicPath('/build');
+                config.addAliases({
+                    lib: path.resolve('./lib')
+                });
+                config.enableSassLoader();
+                config.addStyleEntry('sass', './css/sass_package_import.scss');
+
+                testSetup.runWebpack(config, () => {
+                    // A successful compile is all that is needed to pass this test.
+                    // If this test fails then the import in the above sass file
+                    // is not loading the package's sass file.
+                    done();
+                });
+            });
+
+            it('Import via "style" package property', (done) => {
+                const config = createWebpackConfig('web/build', 'dev');
+
+                config.setPublicPath('/build');
+                config.addAliases({
+                    lib: path.resolve('./lib')
+                });
+                config.addStyleEntry('style', './css/style_package_import.css');
+
+                testSetup.runWebpack(config, () => {
+                    // A successful compile is all that is needed to pass this test.
+                    // If this test fails then the import in the above css file
+                    // is not loading the package's style file.
+                    done();
+                });
+            });
+        });
+
         describe('CSS extraction', () => {
             it('With CSS extraction enabled', (done) => {
                 const config = createWebpackConfig('build', 'dev');