fix: workaround for postcss build issue [REVERTME]

to be reveretd once following issue is closed
material-components/material-components-web@a30ab96

components/select/scss/_keyframes.scss

@@ -0,0 +1,27 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@keyframes mdc-select-float-native-control {
+  0% {
+    transform: translateY(8px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}

components/select/scss/_mixins.scss

@@ -0,0 +1,102 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "@material/floating-label/mixins";
+@import "@material/theme/mixins";
+@import "@material/line-ripple/mixins";
+
+// Public
+
+@mixin mdc-select-ink-color($color) {
+  &:not(.mdc-select--disabled) {
+    @include mdc-select-ink-color_($color);
+  }
+}
+
+@mixin mdc-select-container-fill-color($color) {
+  &:not(.mdc-select--disabled) {
+    @include mdc-select-container-fill-color_($color);
+  }
+}
+
+@mixin mdc-select-focused-label-color($color) {
+  &:not(.mdc-select--disabled) {
+    .mdc-select__native-control:focus ~ .mdc-floating-label {
+      @include mdc-floating-label-ink-color(mdc-theme-prop-value($color));
+    }
+  }
+}
+
+@mixin mdc-select-hover-bottom-line-color($color) {
+  &:not(.mdc-select--disabled) .mdc-select__native-control:hover {
+    @include mdc-select-native-control-bottom-line-color_($color);
+  }
+}
+
+@mixin mdc-select-bottom-line-color($color) {
+  &:not(.mdc-select--disabled) {
+    @include mdc-select-bottom-line-color_($color);
+  }
+}
+
+@mixin mdc-select-focused-bottom-line-color($color) {
+  &:not(.mdc-select--disabled) {
+    @include mdc-select-focused-line-ripple-color_($color);
+  }
+}
+
+@mixin mdc-select-label-color($color) {
+  &:not(.mdc-select--disabled) .mdc-floating-label {
+    @include mdc-floating-label-ink-color($color);
+  }
+}
+
+// Private
+@mixin mdc-select-focused-line-ripple_ {
+  .mdc-select__native-control:focus ~ .mdc-line-ripple {
+    @content;
+  }
+}
+
+@mixin mdc-select-ink-color_($color) {
+  .mdc-select__native-control {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-select-container-fill-color_($color) {
+  @include mdc-theme-prop(background-color, $color);
+}
+
+@mixin mdc-select-bottom-line-color_($color) {
+  .mdc-select__native-control {
+    @include mdc-select-native-control-bottom-line-color_($color);
+  }
+}
+
+@mixin mdc-select-native-control-bottom-line-color_($color) {
+  border-bottom-color: $color;
+}
+
+@mixin mdc-select-focused-line-ripple-color_($color) {
+  @include mdc-select-focused-line-ripple_ {
+    @include mdc-line-ripple-color($color);
+  }
+}
+
+@mixin mdc-select-dd-arrow-svg-bg_($fill-hex-number: 000000, $opacity: .54) {
+  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23#{$fill-hex-number}%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22#{$opacity}%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
+}

components/select/scss/_variables.scss

@@ -0,0 +1,33 @@
+//
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "@material/animation/variables";
+
+$mdc-select-arrow-padding: 26px;
+$mdc-select-label-padding: 16px;
+
+$mdc-select-ink-color: rgba(mdc-theme-prop-value(on-surface), .87);
+$mdc-select-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37);
+
+$mdc-select-label-color: rgba(mdc-theme-prop-value(on-surface), .6);
+$mdc-select-focused-label-color: rgba(mdc-theme-prop-value(primary), .87);
+$mdc-select-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37);
+
+$mdc-select-bottom-line-idle-color: rgba(mdc-theme-prop-value(on-surface), .42);
+$mdc-select-bottom-line-hover-color: rgba(mdc-theme-prop-value(on-surface), .87);
+
+$mdc-select-box-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 4%);
+$mdc-select-box-disabled-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%);

components/select/scss/mdc-select.scss

@@ -0,0 +1,159 @@
+//
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "./keyframes";
+@import "./mixins";
+@import "./variables";
+@import "@material/animation/variables";
+@import "@material/line-ripple/mdc-line-ripple";
+@import "@material/floating-label/mdc-floating-label";
+@import "@material/typography/mixins";
+@import "@material/ripple/common";
+@import "@material/ripple/mixins";
+@import "@material/rtl/mixins";
+
+// postcss-bem-linter: define select
+.mdc-select {
+  @include mdc-select-container-fill-color(transparent);
+  @include mdc-select-dd-arrow-svg-bg_;
+  @include mdc-select-ink-color($mdc-select-ink-color);
+  @include mdc-select-label-color($mdc-select-label-color);
+  @include mdc-select-bottom-line-color($mdc-select-bottom-line-idle-color);
+
+  // Focused state colors
+  @include mdc-select-focused-bottom-line-color(primary);
+  @include mdc-select-focused-label-color($mdc-select-focused-label-color);
+
+  // Hover state colors
+  @include mdc-select-hover-bottom-line-color($mdc-select-bottom-line-hover-color);
+
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  height: 52px;
+  background-repeat: no-repeat;
+  background-position: right 8px bottom 12px;
+  overflow: hidden;
+
+  @include mdc-rtl {
+    background-position: left 8px bottom 12px;
+  }
+
+  &__native-control {
+    @include mdc-rtl-reflexive-property(padding, 0, $mdc-select-arrow-padding);
+    @include mdc-typography(subtitle1);
+
+    &::-ms-expand {
+      display: none;
+    }
+
+    // counteracts the extra text padding that Firefox adds by default
+    @-moz-document url-prefix("") {
+      text-indent: -2px;
+    }
+
+    width: 100%;
+    padding-top: 20px;
+    padding-bottom: 4px;
+    border: none;
+    border-bottom: 1px solid;
+    border-radius: 0;
+    outline: none;
+    background-color: transparent;
+    white-space: nowrap;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  // stylelint-disable-next-line plugin/selector-bem-pattern
+  .mdc-floating-label {
+    pointer-events: none;
+  }
+
+  @include mdc-select-focused-line-ripple_ {
+    &::after {
+      transform: scale(1, 2);
+      opacity: 1;
+    }
+  }
+}
+
+.mdc-select--box {
+  @include mdc-select-container-fill-color($mdc-select-box-fill-color);
+  @include mdc-ripple-surface;
+  @include mdc-ripple-radius-bounded;
+  // Select Box intentionally omits press ripple, so each state needs to be specified individually
+  @include mdc-states-base-color($mdc-select-ink-color);
+  @include mdc-states-hover-opacity(mdc-states-opacity($mdc-select-ink-color, hover));
+  @include mdc-states-focus-opacity(
+    mdc-states-opacity($mdc-select-ink-color, focus),
+    $has-nested-focusable-element: true
+  );
+
+  height: 56px;
+  border-radius: 4px 4px 0 0;
+  background-position: right 10px center;
+
+  @include mdc-rtl {
+    background-position: left 10px center;
+  }
+
+  .mdc-select__native-control {
+    @include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding);
+
+    height: 56px;
+    border-radius: 4px 4px 0 0;
+  }
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-floating-label {
+    @include mdc-rtl-reflexive-position(left, 16px);
+
+    bottom: 12px;
+    line-height: 1.75rem;
+
+    &--float-above {
+      transform: translateY(-40%) scale(.75, .75);
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+}
+
+.mdc-select--disabled {
+  @include mdc-select-dd-arrow-svg-bg_($mdc-select-disabled-ink-color);
+
+  &.mdc-select--box {
+    @include mdc-select-container-fill-color_($mdc-select-box-disabled-fill-color);
+  }
+
+  .mdc-floating-label {
+    @include mdc-floating-label-ink-color($mdc-select-disabled-label-color);
+  }
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-line-ripple {
+    display: none;
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+
+  .mdc-select__native-control {
+    border-bottom-style: dotted;
+  }
+
+  opacity: .38;
+  cursor: default;
+  pointer-events: none;
+}

components/select/styles.scss

@@ -1 +1,5 @@
-@import "@material/select/mdc-select";
+// @import "@material/select/mdc-select";
+
+// temporary fix for postcss
+@import "./scss/mdc-select";
+