davidtheclark / davidtheclark/postcss-simple-extend

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

Open
#16 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
34
Forks
3
PR merge metrics
No merged PRs in 30d

Description

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 ()
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 ()
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 ()
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 ()
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

```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.