You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
PostCSS 8.4 brought ranges for warnings and errors, smaller node_modules size, lazy parsing to avoid PostCSS does nothing warning, and TypeScript fixes.
Thanks to Sponsors
This release was possible thanks to our community.
If your company wants to support the sustainability of front-end infrastructure or wants to give some love to PostCSS, you can join our supporters by:
Tidelift with a Spotify-like subscription model supporting all projects from your lock file.
result.warn(msg,{ index })// One character warning at indexresult.warn(msg,{ endIndex })// Starts at node start, ends at endIndexresult.warn(msg,{ index, endIndex })// Starts at index, ends at endIndexresult.warn(msg,{ start })// Starts at start, ends at node endresult.warn(msg,{ end })// Starts at node start, ends at endresult.warn(msg,{ start, end })// Starts at start, ends at endresult.warn(msg,{ word })// Starts at word location, ends at word index + length
It will improve DX in the IDE extension.
Lazy Parsing
Previously, we found that many tools run PostCSS even if the developer didn’t pass any PostCSS plugins. Parsing is the most expensive step in CSS processing. It led to a waste of resources without any reason.
We tried to resolve the problem by adding a PostCSS does nothing warning. But it didn’t force tool authors to be more careful with user’s resources.
If PostCSS sees that tool call it without passing plugins (or changing parser/stringifier), PostCSS will not parse CSS (until toll will call Result#root). In 8.4, @bogdan0083 (with the help of @WilhelmYakunin) tries to solve the problem in another way. It allows us to save resources and remove the PostCSS does nothing warning.
// No plugins, we do not parse CSSletresult=awaitpostcss().process(css,{ from })result.css// Is the same string passed to process()result.map// Special 1-to-1 source mapresult.root// CSS will parsed only here
Install Size Reduction
With ≈60M weekly downloads, PostCSS has responsibility for the world’s resource spending.
In 8.4, we moved to a fixed version of source-map-js, which reduced the postcss size in your node_modules from ≈1 MB to 0.3 MB. With the huge popularity of PostCSS, it will free a lot of resources on our CIs.
Migration from Jest to uvu
@kimoofey refactored all tests from the popular Jest framework to small and fast uvu.
It will not affect end-users. However, it reduced our node_modules size by 33 MB and made tests twice faster (yarn install & yarn unit: 24 → 13 seconds).
Because PostCSS needs synchronous API, we can’t move from the old `source-map 0.6 to 0.7 (many other open-source projects too).
@7rulnik forked source-map 0.6 to source-map-js and back-ported performance improvements from 0.7. In 8.3 we switched from source-map to this source-map-js fork.
You map see 4x performance improvements in parsing map from processing step before PostCSS (for instance, Sass).
Document Nodes
Thanks to @gucong3000, PostCSS already parse CSS from HTML and JS files (CSS-in-JS templates and objects).
He suggested adding new Document node type to PostCSS AST to keep multiple Root nodes inside and JS/HTML/Markdown code blocks between these style blocks.
This is an experimental feature. Some aspects of this node could change within minor or patch version releases.
Node#assign() Shortcut
The creator of famous postcss-preset-env and many other PostCSS tools, @jonathantnealsuggested a nice shortcut to change multiple properties in the node:
PostCSS 8.2 added a new API to serialize and deserialize CSS AST to JSON.
import{parse,fromJSON}from'postcss'letroot=parse('a{}',{from: 'input.css'})letjson=root.toJSON()// save to file, send by network, etcletroot2=fromJSON(json)
If your company wants to support the sustainability of front-end infrastructure or just wants to give some love to PostCSS, you can join our supporters by:
Tidelift with a Spotify-like subscription model and supporting all projects from your lock file.
We try to avoid any breaking changes for end-users:
PostCSS 8 dropped Node.js 6.x, 8.x, 11.x, and 13.x versions support. All these versions have no security updates anymore.
We now serve ES6+ sources in the npm package without Babel compilation. If you are creating tools like CodePen and put PostCSS into the client-side JS bundle, you may need to run Babel on node_modules/postcss for old browsers.
We removed rarely used postcss.vendor API.
New Plugin API
The biggest change in PostCSS 8 is a new plugin API. Thanks to @BondarenkoAlex for big help in creating a new API.
We know that rewriting old plugins will take time, but the new API will improve the end-user’s experience and make life easier for plugin developers:
With new API, all plugins can share a single scan of the CSS tree. It makes CSS processing up to 20% faster.
Because npm often duplicates dependencies, you may have many postcss duplicates in your node_modules. New API fixes this problem.
Plugins will re-visit changed nodes to reduce compatibility issues between plugins. Now the order of plugins in your PostCSS config will be less important.
New API is close to Babel’s visitor API.
These resources will help plugin developers in API migration:
We have a Gitter chat open for all questions related to plugin migration.
PostCSS development guidelines were also changed:
Now it is prohibited to create own AST on top of PostCSS AST classes since it could lead to painful bugs due to the usage private APIs.
Plugins and runners must have postcss in peerDependencies.
New Website without React
Previously PostCSS used a React-based framework for the project's website. Since we have a static website, we decided to migrate to a React-free framework and got good performance improvements:
We also removed Google Analytics tracking scripts and encourage other open source projects to be an example in caring about user’s privacy and performance.
Parser Improvments
Did you know that all examples below are valid CSS?
Now PostCSS parses even those rare edge cases correctly. Thanks to Tailwind CSS and Prettier teams for adding more cases to our CSS parser tests collection.
Note that now --roundMixin: { border-radius: 8px } will be parsed as a Declaration with the { border-radius: 8px } value.
Better Source Map Support
We have added support for two new source map formats: Index map and JSON (data:application/json).
PostCSS 8 is now much closer to the source map spec. Thanks to the Google team for reports:
We now treatsources in map as URLs instead of file paths.
We now resolvesourcesrelative to map file, not CSS file.
A few source map APIs were added:
opts.maps.absolute = true option for absolute paths in source map.
opts.maps.annotation = (file, root) => url for a dynamic path to source map.
Node#origin() now returns position.url in addition to position.file for compatibility with absolute URLs in source map’s sources.
API Changes
We have added ES modules support and now we export all classes from the main entry:
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR contains the following updates:
7->8Release Notes
postcss/postcss (postcss7)
v8.4.47Compare Source
v8.4.46Compare Source
Cannot read properties of undefined (reading 'before').v8.4.45Compare Source
v8.4.44Compare Source
markClean is not a functionerror.v8.4.43Compare Source
markClean is not a functionerror.v8.4.42Compare Source
v8.4.41Compare Source
v8.4.40Compare Source
v8.4.39Compare Source
CssSyntaxErrortypes (by @romainmenke).v8.4.38Compare Source
endIndex: 0in errors and warnings (by @romainmenke).v8.4.37Compare Source
original.column are not numberserror in another case.v8.4.36Compare Source
original.column are not numberserror on broken previous source map.v8.4.35Compare Source
!innode.parent.nodestype.undefinedto node adding method to simplify types.v8.4.34Compare Source
AtRule#nodestype (by Tim Weißenfels).v8.4.33Compare Source
NoWorkResultbehavior difference with normal mode (by Romain Menke).NoWorkResultusage conditions (by @ahmdammarr).v8.4.32Compare Source
postcss().process()types (by Andrew Ferreira).v8.4.31Compare Source
\rparsing to fix CVE-2023-44270.v8.4.30Compare Source
v8.4.29Compare Source
Node#source.offset(by Ido Rosenthal).v8.4.28Compare Source
Root.source.endfor better source map (by Romain Menke).Result.roottypes whenprocess()has no parser.v8.4.27Compare Source
Containerclone methods types.v8.4.26Compare Source
v8.4.25Compare Source
v8.4.24Compare Source
Plugintypes.v8.4.23Compare Source
v8.4.22Compare Source
node16(by Remco Haszing).v8.4.21Compare Source
Input#errortypes (by Aleks Hudochenkov).v8.4.20Compare Source
@layer.v8.4.19Compare Source
v8.4.18Compare Source
absolute: truewith emptysourceContent(by Rene Haas).v8.4.17Compare Source
Node.before()unexpected behavior (by Romain Menke).v8.4.16Compare Source
RootAST migration.v8.4.15Compare Source
v8.4.14Compare Source
v8.4.13Compare Source
append()error after using.parent(by Jordan Pittman).v8.4.12Compare Source
package.fundingto have same value between all PostCSS packages.v8.4.11Compare Source
Declaration#raws.valuetype.v8.4.10Compare Source
package.fundingURL format.v8.4.9Compare Source
package.funding(by Álvaro Mondéjar).v8.4.8Compare Source
v8.4.7Compare Source
Node#warn()type (by Masafumi Koba).,.v8.4.6Compare Source
.rootaccess for plugin-less case.v8.4.5Compare Source
rawstypes to make object extendable (by James Garbutt).v8.4.4Compare Source
v8.4.3Compare Source
this.css.replace is not a functionerror.v8.4.2Compare Source
Node#source.offset(by Ido Rosenthal).v8.4.1Compare Source
v8.4.0: 8.4 “President Camio”Compare Source
PostCSS 8.4 brought ranges for warnings and errors, smaller
node_modulessize, lazy parsing to avoidPostCSS does nothingwarning, and TypeScript fixes.Thanks to Sponsors
This release was possible thanks to our community.
If your company wants to support the sustainability of front-end infrastructure or wants to give some love to PostCSS, you can join our supporters by:
Rages for Errors and Warnings
@adalinesimonian, the author of amazing Stylelint extension for VS Code, added ranges to errors and warnings.
It will improve DX in the IDE extension.
Lazy Parsing
Previously, we found that many tools run PostCSS even if the developer didn’t pass any PostCSS plugins. Parsing is the most expensive step in CSS processing. It led to a waste of resources without any reason.
We tried to resolve the problem by adding a
PostCSS does nothingwarning. But it didn’t force tool authors to be more careful with user’s resources.If PostCSS sees that tool call it without passing plugins (or changing parser/stringifier), PostCSS will not parse CSS (until toll will call
Result#root). In 8.4, @bogdan0083 (with the help of @WilhelmYakunin) tries to solve the problem in another way. It allows us to save resources and remove thePostCSS does nothingwarning.Install Size Reduction
With ≈60M weekly downloads, PostCSS has responsibility for the world’s resource spending.
Together with @7rulnik we reduced
source-map-jssize. It is transitive dependency of PostCSS.In 8.4, we moved to a fixed version of
source-map-js, which reduced thepostcsssize in yournode_modulesfrom ≈1 MB to 0.3 MB. With the huge popularity of PostCSS, it will free a lot of resources on our CIs.Migration from Jest to
uvu@kimoofey refactored all tests from the popular Jest framework to small and fast
uvu.It will not affect end-users. However, it reduced our
node_modulessize by 33 MB and made tests twice faster (yarn install & yarn unit: 24 → 13 seconds).TypeScript Fixes
Processortypes.Stringifiertypes (by @43081j).RootandDocumentin result values (by @43081j).Node#walkRules()types (by @hudochenkov).Other Changes
v8.3.11Compare Source
v8.3.10Compare Source
Maximum call stackissue of some source maps (by Yeting Li).v8.3.9Compare Source
nanocolorstopicocolors.v8.3.8Compare Source
nanocolors.v8.3.7Compare Source
colorettetonanocolors.package.json(by Christian Oliff).v8.3.6Compare Source
missed semicolonerror (by @Gusted).v8.3.5Compare Source
v8.3.4Compare Source
v8.3.3Compare Source
postcssdependency duplication in custom parsers.v8.3.2Compare Source
v8.3.1Compare Source
v8.3.0: 8.3 “Duke Murmur”Compare Source
PostCSS 8.3 improved source map parsing performance, added
Node#assign()shortcut, and experimentalDocumentnode to AST.Thanks to Sponsors
This release was possible thanks to our community.
If your company wants to support the sustainability of front-end infrastructure or wants to give some love to PostCSS, you can join our supporters by:
Source Map Performance
Because PostCSS needs synchronous API, we can’t move from the old `source-map 0.6 to 0.7 (many other open-source projects too).
@7rulnik forked
source-map0.6 tosource-map-jsand back-ported performance improvements from 0.7. In 8.3 we switched fromsource-mapto thissource-map-jsfork.You map see 4x performance improvements in parsing map from processing step before PostCSS (for instance, Sass).
DocumentNodesThanks to @gucong3000, PostCSS already parse CSS from HTML and JS files (CSS-in-JS templates and objects).
But his plugin need big updates. @hudochenkov from stylelint team decided to create new parsers for styles inside CSS-in-JS, HTML, and Markdown.
He suggested adding new
Documentnode type to PostCSS AST to keep multipleRootnodes inside and JS/HTML/Markdown code blocks between these style blocks.This is an experimental feature. Some aspects of this node could change within minor or patch version releases.
Node#assign()ShortcutThe creator of famous
postcss-preset-envand many other PostCSS tools, @jonathantneal suggested a nice shortcut to change multiple properties in the node:v8.2.15Compare Source
listtype definitions (by @n19htz).v8.2.14Compare Source
source-mapfrom client-side bundle (by Barak Igal).v8.2.13Compare Source
v8.2.12Compare Source
package.jsonexports.v8.2.11Compare Source
DEP0148warning in Node.js 16.v8.2.10Compare Source
v8.2.9Compare Source
NodeErrorOptionstype (by Rouven Weßling).v8.2.8Compare Source
v8.2.7Compare Source
v8.2.6Compare Source
Maximum call stack size exceededinNode#toJSON.v8.2.5Compare Source
list.split(by Natalie Weizenbaum).v8.2.4Compare Source
postcss.plugin()warning (by Tom Williams).v8.2.3Compare Source
JSON.stringify(Node[])support (by Niklas Mischkulnig).v8.2.2Compare Source
Result#warn()types.v8.2.1Compare Source
listtype definitions (by @n19htz).v8.2.0: 8.2 “Prince Orobas”Compare Source
PostCSS 8.2 added a new API to serialize and deserialize CSS AST to JSON.
Thanks to @mischnic for his work.
v8.1.14Compare Source
v8.1.13Compare Source
v8.1.12Compare Source
v8.1.11Compare Source
v8.1.10Compare Source
LazyResulttype export (by Evan You).LazyResulttype compatibility withPromise(by Anton Kastritskiy).v8.1.9Compare Source
v8.1.8Compare Source
LazyResulttype compatibility withPromise(by Ludovico Fischer).v8.1.7Compare Source
importsupport in TypeScript (by Remco Haszing).v8.1.6Compare Source
package.exportsNode.js 15 fix.v8.1.5Compare Source
v8.1.4Compare Source
v8.1.3Compare Source
package.types.v8.1.2Compare Source
v8.1.1Compare Source
v8.1.0: 8.1 “Duke Gemory”Compare Source
PostCSS 8.1 fixed the new visitor API from the 8.0 release.
We fixed
RootandRootExitre-calling on children's changes. And now visitors will visit the parent again if nested children were changed.We added
OnceandOnceExitevents, which will not be called again on node changes. You can use them to lint files or collect statistics:We updated Migration guide according to new changes.
v8.0.9Compare Source
Transformerto exported types (by Pierre-Marie Dartus).v8.0.8Compare Source
8.0.7regression on PostCSS 7 nodes converting (by Adam Wathan).v8.0.7Compare Source
v8.0.6Compare Source
Container.v8.0.5Compare Source
v8.0.4Compare Source
Cannot read property 'line' of nullerror.v8.0.3Compare Source
v8.0.2Compare Source
v8.0.1Compare Source
Processor#version.v8.0.0: 8.0 “President Ose”Compare Source
PostCSS 8.0 brings new plugin API,
node_modulessize reduction, better source map support, and CSS parser improvements.Check out a day-by-day diary of PostCSS 8.0 development process.
See Migration Guides for end-users and for plugin developers.
Thanks to Sponsors
With more than 100 M downloads per month, it becomes hard to support PostCSS in free time. For instance, getting the 8.0 release ready took 4 months of work.
This release was possible thanks to out community. Tailwind CSS, De Voorhoede, InVision AG, Brainbow, and many individual contributions.
If your company wants to support the sustainability of front-end infrastructure or just wants to give some love to PostCSS, you can join our supporters by:
Breaking Changes
We try to avoid any breaking changes for end-users:
node_modules/postcssfor old browsers.postcss.vendorAPI.New Plugin API
The biggest change in PostCSS 8 is a new plugin API. Thanks to @BondarenkoAlex for big help in creating a new API.
We know that rewriting old plugins will take time, but the new API will improve the end-user’s experience and make life easier for plugin developers:
postcssduplicates in yournode_modules. New API fixes this problem.These resources will help plugin developers in API migration:
PostCSS development guidelines were also changed:
postcssinpeerDependencies.New Website without React
Previously PostCSS used a React-based framework for the project's website. Since we have a static website, we decided to migrate to a React-free framework and got good performance improvements:
Check out postcss.org and new API docs that feature the awesome alchemy-inspired design by @okonet.
We also removed Google Analytics tracking scripts and encourage other open source projects to be an example in caring about user’s privacy and performance.
Parser Improvments
Did you know that all examples below are valid CSS?
Now PostCSS parses even those rare edge cases correctly. Thanks to Tailwind CSS and Prettier teams for adding more cases to our CSS parser tests collection.
Note that now
--roundMixin: { border-radius: 8px }will be parsed as aDeclarationwith the{ border-radius: 8px }value.Better Source Map Support
We have added support for two new source map formats: Index map and JSON (
data:application/json).PostCSS 8 is now much closer to the source map spec. Thanks to the Google team for reports:
sourcesin map as URLs instead of file paths.sourcesrelative to map file, not CSS file.A few source map APIs were added:
opts.maps.absolute = trueoption for absolute paths in source map.opts.maps.annotation = (file, root) => urlfor a dynamic path to source map.Node#origin()now returnsposition.urlin addition toposition.filefor compatibility with absolute URLs in source map’ssources.API Changes
We have added ES modules support and now we export all classes from the main entry:
@graberzz added
Node#source.offsetin addition tolineandcolumn.CSS Custom Properties and Sass-like
$-variables now have a specialDeclaration#variablemark:TypeScript
PostCSS now has a first-class TypeScript support:
Other Changes
replaceWithwith input replaced node (by @josephkaptur).chalktocolorette.Declaration#valueauto-conversion to string to prevent plugin’s bugs.<input css 9M4X8l>:10:6.Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR was generated by Mend Renovate. View the repository job log.