search

davidtheclark / postcss-simple-extend

A PostCSS plugin for extending placeholder selectors
MIT License
34 stars 3 forks source link

No parent could be found error when use @apply Tailwind classes #16

Open schel4ok opened 3 years ago

schel4ok commented 3 years ago

starting from this

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .scripts([
          'public/js/app.js',
          'resources/js/includes/script.js'
      ],  'public/js/app.js')
   .postCss('resources/css/app.css', 'public/css', [
      require('postcss-import'), 
      require('tailwindcss'),
      require('postcss-simple-extend'),
      require('postcss-nested'),  
      require('autoprefixer'),
    ]);

resources/css/app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'includes/thumbnails';

resources/css/includes/thumbnails.css

@define-placeholder thumbnail {
    @apply relative overflow-hidden w-full sm:w-auto sm:max-w-lg sm:shadow-lg sm:border-4 sm:border-solid sm:border-white;
    img { 
        @apply object-cover; 
        transition: transform 2s, filter 1.5s ease-in-out;
        transform-origin: center center;
        filter: brightness(0.7);
    }
    &:hover img { transform: scale(1.3); filter: brightness(1); }
}

.thumbnail-left  { 
    @extend thumbnail;
    @apply sm:float-left  sm:mr-6;
}

.thumbnail-right  { 
    @extend thumbnail;
    @apply sm:float-right  sm:ml-6;
}

I got errors

npm run dev

> dev
> npm run development

> development
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 2 errors                                      9:22:20 PM

 error  in ./resources/css/app.css

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No parent could be found
    at /home/http/app/resources/css/includes/thumbnails.css:2:2
    at findParent (/home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:218:9)
    at /home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:228:33
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:314:16
    at /home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:139:18
    at AtRule.each (/home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:105:16)
    at AtRule.walk (/home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:135:17)
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:152:24
    at Root.each (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:135:17)
    at Root.walkAtRules (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:312:17)
    at processApplyAtRules (/home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:225:9)
    at /home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:315:14
    at LazyResult.run (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at /home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:131:17)
    at LazyResult.asyncTick (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:216:17)
    at LazyResult.asyncTick (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:225:14)
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:217:17
    at /home/http/app/node_modules/webpack/lib/NormalModule.js:316:20
    at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/http/app/node_modules/postcss-loader/src/index.js:208:9

 error  in ./resources/css/app.css

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No parent could be found
    at /home/http/app/resources/css/includes/thumbnails.css:2:2
    at findParent (/home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:218:9)
    at /home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:228:33
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:314:16
    at /home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:139:18
    at AtRule.each (/home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:105:16)
    at AtRule.walk (/home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:135:17)
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:152:24
    at Root.each (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:135:17)
    at Root.walkAtRules (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:312:17)
    at processApplyAtRules (/home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:225:9)
    at /home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:315:14
    at LazyResult.run (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at /home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:131:17)
    at LazyResult.asyncTick (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:216:17)
    at LazyResult.asyncTick (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:225:14)
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:217:17

 @ ./resources/css/app.css 2:14-142

     Asset     Size   Chunks             Chunk Names
/js/app.js  731 KiB  /js/app  [emitted]  /js/app

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No parent could be found
    at /home/http/app/resources/css/includes/thumbnails.css:2:2
    at findParent (/home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:218:9)
    at /home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:228:33
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:314:16
    at /home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:139:18
    at AtRule.each (/home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:105:16)
    at AtRule.walk (/home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:135:17)
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:152:24
    at Root.each (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:135:17)
    at Root.walkAtRules (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:312:17)
    at processApplyAtRules (/home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:225:9)
    at /home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:315:14
    at LazyResult.run (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at /home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:131:17)
    at LazyResult.asyncTick (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:216:17)
    at LazyResult.asyncTick (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:225:14)
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:217:17
    at /home/http/app/node_modules/webpack/lib/NormalModule.js:316:20
    at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/http/app/node_modules/postcss-loader/src/index.js:208:9
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No parent could be found
    at /home/http/app/resources/css/includes/thumbnails.css:2:2
    at findParent (/home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:218:9)
    at /home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:228:33
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:314:16
    at /home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:139:18
    at AtRule.each (/home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:105:16)
    at AtRule.walk (/home/http/app/node_modules/postcss-import/node_modules/postcss/lib/container.js:135:17)
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:152:24
    at Root.each (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:135:17)
    at Root.walkAtRules (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:312:17)
    at processApplyAtRules (/home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:225:9)
    at /home/http/app/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:315:14
    at LazyResult.run (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at /home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/home/http/app/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:131:17)
    at LazyResult.asyncTick (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:216:17)
    at LazyResult.asyncTick (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:225:14)
    at /home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:217:17
 @ ./resources/css/app.css 2:14-142
schel4ok commented 3 years ago

I just noticed that if I delete @apply with all tailwind classes then it works. What is the problem?

brighttank commented 3 years ago

I think the problem is the @define-placeholder not the @apply

postcss can't resolve that to an element hence you get a "No parent could be found error".

I had a similar problem when I was trying to nest @apply directly under @screen

schel4ok commented 3 years ago

No. I solved with % before classname. This way it works. So I think documentation should be fixed.

%thumbnail {
    @apply relative overflow-hidden w-full sm:w-auto sm:max-w-md sm:shadow-lg sm:border-4 sm:border-solid sm:border-white;
    img { 
        @apply object-cover h-full w-full origin-center inline-block align-bottom transition-all duration-2000; 
    }

    &:hover img { @apply transform scale-125 filter-brightness-70; }

    p.alt { @apply absolute text-white inline-block text-center opacity-0 left-0 right-0 bottom-0 m-0 p-4 bg-black bg-opacity-50 transition-all duration-1000 delay-300; 
    } 

    &:hover > p.alt { @apply opacity-100; }
}

%left  {@apply sm:float-left  sm:mr-6;}
%right {@apply sm:float-right sm:ml-6;}
%vert  {@apply sm:max-h-96 sm:max-w-xs;}

.thumbnail            { @extend %thumbnail; }
.thumbnail-vert       { @extend %thumbnail; @extend %vert; }

.thumbnail-left       { @extend %thumbnail; @extend %left; }
.thumbnail-right      { @extend %thumbnail; @extend %right; }
.thumbnail-left-vert  { @extend %thumbnail; @extend %left;  @extend %vert; }
.thumbnail-right-vert { @extend %thumbnail; @extend %right; @extend %vert; }