Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
postcss-nesting
Advanced tools
postcss-nesting - npm Package Compare versions
Comparing version 12.1.5 to 13.0.0
| # Changes to PostCSS Nesting | ||
| ### 12.1.5 | ||
| ### 13.0.0 | ||
| _May 23, 2024_ | ||
| _August 3, 2024_ | ||
| - Fix nested rules within `@scope` | ||
| - Make edition `2024-02` the default (major). | ||
| - Updated: Support for Node v18+ (major). | ||
| - Updated [`@csstools/selector-resolve-nested`](https://github.com/csstools/postcss-plugins/tree/main/packages/selector-resolve-nested) to [`2.0.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/selector-resolve-nested/CHANGELOG.md#200) (major) | ||
| - Updated [`@csstools/selector-specificity`](https://github.com/csstools/postcss-plugins/tree/main/packages/selector-specificity) to [`4.0.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/selector-specificity/CHANGELOG.md#400) (major) | ||
| ### 12.1.4 | ||
| _May 13, 2024_ | ||
| - Updated [`@csstools/selector-specificity`](https://github.com/csstools/postcss-plugins/tree/main/packages/selector-specificity) to [`3.1.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/selector-specificity/CHANGELOG.md#311) (patch) | ||
| ### 12.1.3 | ||
| _May 11, 2024_ | ||
| - Updated [`@csstools/selector-specificity`](https://github.com/csstools/postcss-plugins/tree/main/packages/selector-specificity) to [`3.1.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/selector-specificity/CHANGELOG.md#310) (minor) | ||
| [Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting/CHANGELOG.md) |
@@ -8,3 +8,3 @@ import type { PluginCreator } from 'postcss'; | ||
| export declare type pluginOptions = { | ||
| /** The implementation edition for CSS Nesting, default to '2021' */ | ||
| /** The implementation edition for CSS Nesting, default to '2024-02' */ | ||
| edition?: '2021' | '2024-02'; | ||
@@ -11,0 +11,0 @@ } & pluginOptions2021 & pluginOptions2024_02; |
| { | ||
| "name": "postcss-nesting", | ||
| "description": "Nest rules inside each other in CSS", | ||
| "version": "12.1.5", | ||
| "version": "13.0.0", | ||
| "contributors": [ | ||
@@ -32,3 +32,3 @@ { | ||
| "engines": { | ||
| "node": "^14 || ^16 || >=18" | ||
| "node": ">=18" | ||
| }, | ||
@@ -58,4 +58,4 @@ "type": "module", | ||
| "dependencies": { | ||
| "@csstools/selector-resolve-nested": "^1.1.0", | ||
| "@csstools/selector-specificity": "^3.1.1", | ||
| "@csstools/selector-resolve-nested": "^2.0.0", | ||
| "@csstools/selector-specificity": "^4.0.0", | ||
| "postcss-selector-parser": "^6.1.0" | ||
@@ -62,0 +62,0 @@ }, |
118
README.md
| # PostCSS Nesting [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS] | ||
| [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-nesting.svg" height="20">][npm-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]<br><br>[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/nesting-rules.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/nesting-rules.svg" height="20">][css-url] | ||
| `npm install postcss-nesting --save-dev` | ||
| ```bash | ||
| npm install postcss-nesting --save-dev | ||
| ``` | ||
| [PostCSS Nesting] lets you nest style rules inside each other, following the [CSS Nesting specification]. | ||
@@ -37,4 +33,2 @@ | ||
| color: red; | ||
| color: pink; | ||
| } | ||
@@ -44,3 +38,3 @@ .foo:hover { | ||
| } | ||
| .foo > .bar { | ||
| .foo > .bar { | ||
| color: blue; | ||
@@ -53,2 +47,6 @@ } | ||
| } | ||
| .foo { | ||
| color: pink; | ||
| } | ||
| ``` | ||
@@ -75,56 +73,40 @@ | ||
| [PostCSS Nesting] runs in all Node environments, with special | ||
| instructions for: | ||
| - [Node](INSTALL.md#node) | ||
| - [PostCSS CLI](INSTALL.md#postcss-cli) | ||
| - [PostCSS Load Config](INSTALL.md#postcss-load-config) | ||
| - [Webpack](INSTALL.md#webpack) | ||
| - [Next.js](INSTALL.md#nextjs) | ||
| - [Gulp](INSTALL.md#gulp) | ||
| - [Grunt](INSTALL.md#grunt) | ||
| ## ⚠️ `@nest` has been removed from the specification. | ||
| ## Options | ||
| Previous iterations of the [CSS Nesting specification] required using `@nest` for certain selectors. | ||
| ### edition | ||
| `@nest` was removed from the specification completely. | ||
| Future versions of this plugin will error if you use `@nest`. | ||
| The CSS nesting feature has gone through several iterations and what is currently implemented in browsers is not the same as what was originally proposed. This plugin dates back to the original proposal and you might have written your CSS expecting this older behavior. | ||
| We advice everyone to migrate their codebase **now** to nested CSS without `@nest`. | ||
| We published a [Stylelint Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins-stylelint/no-at-nest-rule#csstoolsstylelint-no-at-nest-rule) to help you migrate. | ||
| You can pick the older behavior by setting the `edition` option. | ||
| The `edition` values correspond with rough dates when of a particular version of the specification: | ||
| - `2024-02` (default) | ||
| - `2021` | ||
| example warning: | ||
| > `@nest` was removed from the CSS Nesting specification and will be removed from PostCSS Nesting in the next major version. | ||
| > Change `@nest foo & {}` to `foo & {}` to migrate to the latest standard. | ||
| > [!TIP] | ||
| > If you wrote nested rules with `@nest` you definitely want to set the `edition` to `2021`. | ||
| > If you are unsure than you should try to omit the `edition` option and use the default. | ||
| You can silence this warning with a new `silenceAtNestWarning` plugin option. | ||
| Eventually we will remove support for the older edition, and this plugin option, so it is strongly advised to update your CSS to the latest edition. | ||
| ```js | ||
| postcssNesting({ | ||
| silenceAtNestWarning: true | ||
| edition: '2024-02' | ||
| }) | ||
| ``` | ||
| ## Options | ||
| #### `2024-02` (default) | ||
| ### edition | ||
| - usage of `:is()` pseudo-class is no longer optional | ||
| - at rules are not combined with the `and` keyword | ||
| - `@nest` is removed from the specification | ||
| - declarations and nested rules/at-rules are no longer re-ordered | ||
| The default behavior is to transpile CSS following an older version of the CSS nesting specification. | ||
| #### `2021` | ||
| If you want to already use the latest version you can set the `edition` option to `2024-02`. | ||
| ```js | ||
| postcssNesting({ | ||
| edition: '2024-02' | ||
| }) | ||
| ``` | ||
| #### `2021` (default) | ||
| This version is a continuation of what existed before CSS nesting was implemented in browsers. | ||
| It made a few non-invasive changes to keep up with implementations but it is falling behind. | ||
| In a future version of this plugin this will no longer be the default. | ||
| ```pcss | ||
@@ -169,52 +151,4 @@ .foo { | ||
| #### `2024-02` | ||
| ### noIsPseudoSelector (edition: `2021`) | ||
| - usage of `:is()` pseudo-class is no longer optional | ||
| - at rules are not combined with the `and` keyword | ||
| - `@nest` is removed from the specification | ||
| - declarations and nested rules/at-rules are no longer re-ordered | ||
| ```pcss | ||
| .foo { | ||
| color: red; | ||
| &:hover { | ||
| color: green; | ||
| } | ||
| > .bar { | ||
| color: blue; | ||
| } | ||
| @media (prefers-color-scheme: dark) { | ||
| color: cyan; | ||
| } | ||
| color: pink; | ||
| } | ||
| /* becomes */ | ||
| .foo { | ||
| color: red; | ||
| } | ||
| .foo:hover { | ||
| color: green; | ||
| } | ||
| .foo > .bar { | ||
| color: blue; | ||
| } | ||
| @media (prefers-color-scheme: dark) { | ||
| .foo { | ||
| color: cyan; | ||
| } | ||
| } | ||
| .foo { | ||
| color: pink; | ||
| } | ||
| ``` | ||
| ### noIsPseudoSelector | ||
| #### Specificity | ||
@@ -221,0 +155,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.91%
111
Worsened metrics
- Total package byte prevSize
- decreased by-4.65%
32289
- Number of lines in readme file
- decreased by-20.5%
256
Dependency changes
+ Added@csstools/selector-resolve-nested@2.0.0(transitive)
+ Added@csstools/selector-specificity@4.0.0(transitive)
- Removed@csstools/selector-resolve-nested@1.1.0(transitive)
- Removed@csstools/selector-specificity@3.1.1(transitive)