Skip to content

Commit

Permalink
enable tailwind nesting (#29746)
Browse files Browse the repository at this point in the history
Currently, if you implement native CSS nesting within a Vue component a
warning will appear in the terminal. It states
`Nested CSS was detected, but CSS nesting has not been configured
correctly.
Please enable a CSS nesting plugin *before* Tailwind in your
configuration.` To fix this error we need to enable the built-in
[tailwinds nesting
config](https://tailwindcss.com/docs/using-with-preprocessors#nesting).

Example code to trigger the warning within a vue component:

```CSS
<style>
.example {
  &:hover,
  &:focus-visible {
    color: var(--color-text);
  }

  & svg {
    margin-right: 0.78rem;
  }
}
</style>
```

---------

Co-authored-by: rafh <[email protected]>
Co-authored-by: silverwind <[email protected]>
  • Loading branch information
3 people authored Mar 14, 2024
1 parent 487ac9b commit 03753cb
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 2 deletions.
49 changes: 48 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"pdfobject": "2.3.0",
"postcss": "8.4.35",
"postcss-loader": "8.1.1",
"postcss-nesting": "12.1.0",
"pretty-ms": "9.0.0",
"sortablejs": "1.15.2",
"swagger-ui-dist": "5.11.8",
Expand Down
8 changes: 7 additions & 1 deletion webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {readFileSync} from 'node:fs';
import {env} from 'node:process';
import tailwindcss from 'tailwindcss';
import tailwindConfig from './tailwind.config.js';
import tailwindcssNesting from 'tailwindcss/nesting/index.js';
import postcssNesting from 'postcss-nesting';

const {EsbuildPlugin} = EsBuildLoader;
const {SourceMapDevToolPlugin, DefinePlugin} = webpack;
Expand Down Expand Up @@ -145,14 +147,18 @@ export default {
sourceMap: sourceMaps === 'true',
url: {filter: filterCssImport},
import: {filter: filterCssImport},
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
map: false, // https://github.com/postcss/postcss/issues/1914
plugins: [tailwindcss(tailwindConfig)],
plugins: [
tailwindcssNesting(postcssNesting({edition: '2024-02'})),
tailwindcss(tailwindConfig),
],
},
},
}
Expand Down

0 comments on commit 03753cb

Please sign in to comment.