fix(select): Ensure disabled styles render correctly (#286)

- Fix @include directive for disabled styles that was used within the
  context of a multiple selector, which was emitting incorrect styles.
- Fix our webpack config to emit our stylesheets correctly, while also
  removing LoaderOptions which is apparently deprecated
- (tech debt) Update stylelint-scss and postcss-loader
- (tech debt) Remove prod dependency on stylelint-scss which shouldn't
  have been there in the first place

Fixes #276

Author: traviskaufman

package.json

@@ -59,7 +59,7 @@
     "mkdirp": "^0.5.1",
     "node-sass": "^3.7.0",
     "npm-run-all": "^2.3.0",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^1.2.2",
     "raw-loader": "^0.5.1",
     "sass-loader": "^4.1.1",
     "semver": "^5.3.0",
@@ -69,7 +69,7 @@
     "stylelint": "^7.8.0",
     "stylelint-config-standard": "^16.0.0",
     "stylelint-order": "^0.2.2",
-    "stylelint-scss": "^1.2.1",
+    "stylelint-scss": "^1.4.1",
     "stylelint-selector-bem-pattern": "^1.0.0",
     "tape": "^4.6.0",
     "testdouble": "^1.6.0",
@@ -105,8 +105,5 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  },
-  "dependencies": {
-    "stylelint-scss": "^1.4.1"
   }
 }

packages/mdc-select/mdc-select.scss

@@ -121,12 +121,16 @@
   pointer-events: none;
   // Imitate native disabled functionality
   user-select: none;
+}
 
-  @include mdc-theme-dark(".mdc-select", true) {
-    @include mdc-theme-prop(color, text-disabled-on-dark);
-    @include mdc-select-dd-arrow-svg-bg_(ffffff, .38);
+@each $sel in ("mdc-select--disabled", "mdc-select[disabled]") {
+  .#{$sel} {
+    @include mdc-theme-dark(".mdc-select", true) {
+      @include mdc-theme-prop(color, text-disabled-on-dark);
+      @include mdc-select-dd-arrow-svg-bg_(ffffff, .38);
 
-    border-bottom: 1px dotted rgba(white, .38);
+      border-bottom: 1px dotted rgba(white, .38);
+    }
   }
 }
 

webpack.config.js

@@ -46,6 +46,28 @@ if (LIFECYCLE_EVENT == 'test' || LIFECYCLE_EVENT == 'test:watch') {
   process.env.BABEL_ENV = 'test';
 }
 
+const CSS_LOADER_CONFIG = [
+  {
+    loader: 'css-loader',
+    options: {
+      sourceMap: true,
+    },
+  },
+  {
+    loader: 'postcss-loader',
+    options: {
+      plugins: () =>[require('autoprefixer')({grid: false})],
+    },
+  },
+  {
+    loader: 'sass-loader',
+    options: {
+      sourceMap: true,
+      includePaths: glob.sync('packages/*/node_modules').map((d) => path.join(__dirname, d)),
+    },
+  },
+];
+
 module.exports = [{
   name: 'js-components',
   entry: {
@@ -145,43 +167,14 @@ module.exports = [{
   module: {
     rules: [{
       test: /\.scss$/,
-      use: IS_DEV ? [{
-          loader: 'style-loader',
-        },
-        {
-          loader: 'css-loader',
-          options: {
-            sourceMap: true,
-          },
-        },
-        {
-          loader: 'postcss-loader',
-        },
-        {
-          loader: 'sass-loader',
-          options: {
-            sourceMap: true,
-          },
-        }] : ExtractTextPlugin.extract('css-loader!postcss-loader!sass-loader'),
+      use: IS_DEV ? [{loader: 'style-loader'}].concat(CSS_LOADER_CONFIG) : ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: CSS_LOADER_CONFIG,
+      }),
     }],
   },
   plugins: [
     new ExtractTextPlugin('[name].' + (IS_PROD ? 'min.' : '') + 'css'),
     createBannerPlugin(),
-    new webpack.LoaderOptionsPlugin({
-      debug: true,
-      options: {
-        context: __dirname,
-        output: {
-          path: OUT_PATH,
-        },
-        postcss: {
-          plugins: () =>[require('autoprefixer')({grid: false})],
-        },
-        sassLoader: {
-          includePaths: glob.sync('packages/*/node_modules').map((d) => path.join(__dirname, d)),
-        },
-      },
-    }),
   ],
 }];