postcss-styled-syntax
Advanced tools
postcss-styled-syntax - npm Package Compare versions
Comparing version 0.4.0 to 0.5.0
@@ -16,3 +16,3 @@ let postcss = require('postcss'); | ||
| /** @typedef {import('@typescript-eslint/typescript-estree').TSESTree.TaggedTemplateExpression} TaggedTemplateExpression */ | ||
| /** @typedef {import('@typescript-eslint/typescript-estree').TSESTree.LeftHandSideExpression} LeftHandSideExpression */ | ||
| /** @typedef {import('@typescript-eslint/typescript-estree').TSESTree.Expression} Expression */ | ||
@@ -93,3 +93,3 @@ /** @type {import('postcss').Parser<import('postcss').Document>} */ | ||
| previousComponentRangeEnd, | ||
| node.rangeStart | ||
| node.rangeStart, | ||
| ); | ||
@@ -164,3 +164,3 @@ | ||
| /** | ||
| * @param {LeftHandSideExpression} node | ||
| * @param {Expression} node | ||
| * @return {boolean} | ||
@@ -167,0 +167,0 @@ */ |
@@ -378,3 +378,3 @@ // @ts-nocheck | ||
| return this.interpolations?.some( | ||
| (item) => item.start === token[2] && item.end === token[3] | ||
| (item) => item.start === token[2] && item.end === token[3], | ||
| ); | ||
@@ -452,3 +452,3 @@ } | ||
| error.input.endLine, | ||
| error.input.endColumn | ||
| error.input.endColumn, | ||
| ); | ||
@@ -455,0 +455,0 @@ } |
@@ -76,3 +76,3 @@ 'use strict'; | ||
| node.raws.after, | ||
| node.raws.styledSyntaxRangeEnd | ||
| node.raws.styledSyntaxRangeEnd, | ||
| ); | ||
@@ -79,0 +79,0 @@ |
@@ -166,3 +166,3 @@ 'use strict'; | ||
| let interpolation = interpolations.find( | ||
| (item) => item.start < next && next < item.end | ||
| (item) => item.start < next && next < item.end, | ||
| ); | ||
@@ -333,3 +333,3 @@ | ||
| let interpolation = interpolations.find( | ||
| (item) => pos <= item.start && item.start <= next + 1 | ||
| (item) => pos <= item.start && item.start <= next + 1, | ||
| ); | ||
@@ -336,0 +336,0 @@ |
| { | ||
| "name": "postcss-styled-syntax", | ||
| "version": "0.4.0", | ||
| "version": "0.5.0", | ||
| "description": "PostCSS syntax for template literals CSS-in-JS (e. g. styled-components).", | ||
@@ -16,4 +16,3 @@ "main": "lib/index.js", | ||
| "coverage": "jest --coverage", | ||
| "fix": "eslint . --fix --max-warnings=0 && prettier '**/*.js' --write", | ||
| "prepare": "husky install" | ||
| "fix": "eslint . --fix --max-warnings=0 && prettier '**/*.js' --write" | ||
| }, | ||
@@ -44,4 +43,5 @@ "repository": "hudochenkov/postcss-styled-syntax", | ||
| "dependencies": { | ||
| "@typescript-eslint/typescript-estree": "^5.47.0", | ||
| "estree-walker": "^2.0.2" | ||
| "@typescript-eslint/typescript-estree": "^5.62.0", | ||
| "estree-walker": "^2.0.2", | ||
| "typescript": "~5.1.6" | ||
| }, | ||
@@ -52,16 +52,16 @@ "peerDependencies": { | ||
| "devDependencies": { | ||
| "@types/estree": "^1.0.0", | ||
| "@types/jest": "^29.2.5", | ||
| "eslint": "^8.31.0", | ||
| "@types/estree": "^1.0.1", | ||
| "@types/jest": "^29.5.4", | ||
| "eslint": "^8.49.0", | ||
| "eslint-config-hudochenkov": "^9.0.0", | ||
| "eslint-config-prettier": "^8.6.0", | ||
| "husky": "^8.0.3", | ||
| "jest": "^29.3.1", | ||
| "jest-watch-typeahead": "^2.2.1", | ||
| "lint-staged": "^13.1.0", | ||
| "postcss": "^8.4.21", | ||
| "prettier": "^2.8.1", | ||
| "prettier-config-hudochenkov": "^0.3.0", | ||
| "typescript": "^4.9.4" | ||
| "eslint-config-prettier": "^9.0.0", | ||
| "jest": "^29.7.0", | ||
| "jest-watch-typeahead": "^2.2.2", | ||
| "postcss": "^8.4.29", | ||
| "prettier": "^3.0.3", | ||
| "prettier-config-hudochenkov": "^0.4.0" | ||
| }, | ||
| "engines": { | ||
| "node": ">=14.17" | ||
| } | ||
| } |
| # postcss-styled-syntax | ||
| PostCSS syntax for template literals CSS-in-JS (e. g. styled-components, Emotion). Built to be used as [Stylelint] custom syntax or with [PostCSS] plugins. | ||
| PostCSS syntax for template literals CSS-in-JS (e. g. styled-components, Emotion). It was built to be used as [Stylelint] custom syntax or with [PostCSS] plugins. | ||
@@ -9,3 +9,3 @@ Syntax supports: | ||
| - Deeply nested interpolations | ||
| - Interpolations in selectors, property names and values | ||
| - Interpolations in selectors, property names, and values | ||
| - JavaScript and TypeScript (including files with JSX) | ||
@@ -57,3 +57,3 @@ - All functions: | ||
| Example assumes using [PostCSS CLI](https://github.com/postcss/postcss-cli) or other PostCSS runner with config support. | ||
| An example assumes using [PostCSS CLI](https://github.com/postcss/postcss-cli) or another PostCSS runner with config support. | ||
@@ -64,5 +64,5 @@ ## How it works | ||
| Syntax parser JavaScript/TypeScript code and find all supported components and functions (e. g. <code>css\`\`</code>). Then it go over them and builds a PostCSS AST, where all found components become `Root` nodes inside `Document` node. | ||
| Syntax parser JavaScript/TypeScript code and find all supported components and functions (e.g., <code>css\`\`</code>). Then, it goes over them and builds a PostCSS AST, where all found components become `Root` nodes inside the `Document` node. | ||
| All interpolations within found component CSS are end up in the AST. E. g. for a declaration `color: ${brand}` `Decl` node will look like: | ||
| All interpolations within the found component CSS end up in the AST. E. g. for a declaration `color: ${brand}` `Decl` node will look like this: | ||
@@ -76,3 +76,3 @@ ```js | ||
| When interpolation is not part of any node it goes to the next node's `raws.before`. For example for the following code: | ||
| When interpolation is not part of any node, it goes to the next node's `raws.before`. For example, for the following code: | ||
@@ -100,3 +100,3 @@ ```js | ||
| If there is not next node after interpolation, it will go to parents `raws.after`. For example for the following code: | ||
| If there is no next node after interpolation, it will go to parents `raws.after`. For example, for the following code: | ||
@@ -130,3 +130,3 @@ ```js | ||
| Mostly it works just as default PostCSS stringifyer. The main difference is `css` helper in interpolations within a styled component code. E. g. situatians like this: | ||
| Mostly, it works just as the default PostCSS stringifyer. The main difference is the `css` helper in interpolations within a styled component code. E. g. situations like this: | ||
@@ -150,15 +150,15 @@ ```js | ||
| During parsing whole interpolation (`${(props) ... }`) is added as `raws.before` to `color: red` node. And it should not be modified. Each `css` helpers remember their original content (as a string). | ||
| During parsing, the whole interpolation (`${(props) ... }`) is added as `raws.before` to `color: red` node. And it should not be modified. Each `css` helper remembers their original content (as a string). | ||
| When stringifyer reaches `raws.before` of a node it checks if it has interpolations with `css` helpers. If yes, then it searchs for `css` helper original content and replace it with stringified `css` helper. This way changes made to the AST of `css` helper will be stringified. | ||
| When stringifyer reaches a node's `raws.before`, it checks if it has interpolations with `css` helpers. If yes, it searches for the original content of `css` helper and replaces it with a stringified `css` helper. This way, changes to the AST of the `css` helper will be stringified. | ||
| ## Known issues | ||
| - Double slash comments (`//`) will result in parsing error. Use standard CSS comments instead (`/* */`). It is definitelly possible to add support for double slash comment, but let's use standard CSS as much as possible | ||
| - Double-slash comments (`//`) will result in a parsing error. Use standard CSS comments instead (`/* */`). It is definitely possible to add support for double-slash comments, but let's use standard CSS as much as possible | ||
| - Source maps won't work or could not be trusted. I did not disable them on purpose. But did not test them at all. Because of the way we need handle `css` helpers within styled component, `source.end` positions on a node might change if `css` AST changes. See “How it works” section on stringifying for more info. | ||
| - Source maps won't work or cannot be trusted. I did not disable them on purpose. But did not test them at all. Because of the way we need to handle `css` helpers within a styled component, `source.end` positions on a node might change if `css` AST changes. See the “How it works” section on stringifying for more info. | ||
| ## Acknowledgements | ||
| [PostCSS] for tokenizer, parser, stringifier and tests for them. | ||
| [PostCSS] for tokenizer, parser, stringifier, and tests for them. | ||
@@ -165,0 +165,0 @@ [Prettier](https://prettier.io/) for styled-components detection function in an ESTree AST. |
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
- Dev dependency count
- decreased by-23.08%
10
Worsened metrics
- Total package byte prevSize
- decreased by-0.04%
35244
- Dependency count
- increased by33.33%
4
Dependency changes
+ Addedtypescript@~5.1.6
+ Addedtypescript@5.1.6(transitive)
- Removedtypescript@5.6.3(transitive)