search

madeleineostoja / postcss-responsive-type

Automagical responsive typography, built on PostCSS
372 stars 21 forks source link

problem when prefix `::placeholder` #34

Open aaronkzhou opened 5 years ago

aaronkzhou commented 5 years ago

related issue https://github.com/postcss/autoprefixer/issues/1263 it happens when autoprefix input::placeholder

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'indexOf' of undefined
    at /Users/t826148/dev/lightbox/repo/desktop/src/app/layouts/shared-navigation/search-nav-button.css:56:3
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss-responsive-type/index.js:219:25
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/container.js:239:18
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/container.js:135:18
    at Root.each (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/container.js:101:16)
    at Root.walk (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/container.js:131:17)
    at Root.walkRules (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/container.js:237:19)
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss-responsive-type/index.js:213:9
    at LazyResult.run (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/lazy-result.js:295:14)
    at LazyResult.asyncTick (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/lazy-result.js:208:26)
    at LazyResult.asyncTick (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/lazy-result.js:221:14)
    at LazyResult.asyncTick (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/lazy-result.js:221:14)
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/lazy-result.js:213:17
    at runLoaders (/Users/t826148/dev/lightbox/repo/desktop/node_modules/webpack/lib/NormalModule.js:316:20)
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/t826148/dev/lightbox/repo/desktop/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss-loader/src/index.js:208:9)
aaronkzhou commented 5 years ago

minimum css 

.searchInput {
  background-image: url('../../../images/search.svg');
  background-repeat: no-repeat;
  background-position: right 50%;
  background-size: 20px 20px;
  background-color: transparent;
  border: 0;
  caret-color: #777;
  color: var(--white);
  cursor: pointer;
  font-family: "GothamRounded";
  font-size: 0;
  height: 28px;
  outline: none;
  width: 24px;
  transition: width 0.25s;
  display: flex;
  padding-left: 26px;

  &::placeholder {
    color: var(--white);
    opacity: 1;
  }
}