incorrectly parse shorthand #6

tbela99 · Aug 13, 2023 · 997ff5f · 997ff5f
1 parent e8dc908
commit 997ff5f
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 2 deletions.
diff --git a/.npmignore b/.npmignore
@@ -9,4 +9,5 @@
 /package-lock.json
 /node_modules
 /coverage
-/.github
+/.github
+/.gitattributes
diff --git a/README.md b/README.md
@@ -160,6 +160,62 @@ Single JavaScript file
 <script src="dist/index-umd-web.js"></script>
 ```
 
+## Example
+
+### Automatic CSS Nesting
+
+CSS
+
+```css
+
+table.colortable td {
+  text-align:center;
+}
+table.colortable td.c {
+  text-transform:uppercase;
+}
+table.colortable td:first-child, table.colortable td:first-child+td {
+  border:1px solid black;
+}
+table.colortable th {
+  text-align:center;
+  background:black;
+  color:white;
+}
+```
+
+Javascript
+```javascript
+import {parse, render} from '@tbela99/css-parser';
+
+
+const options = {minify: true, nestingRules: true};
+
+const {code} = await parse(css, options).then(result => render(result.ast, {minify: false}));
+//
+console.debug(code);
+```
+
+Result
+```css
+table.colortable {
+ & td {
+  text-align: center;
+  &.c {
+   text-transform: uppercase
+  }
+  &:first-child,&:first-child+td {
+   border: 1px solid #000
+  }
+ }
+ & th {
+  text-align: center;
+  background: #000;
+  color: #fff
+ }
+}
+```
+
 ## AST
 
 ### Comment

diff --git a/package.json b/package.json
@@ -50,7 +50,6 @@
     "@types/mocha": "^10.0.1",
     "@types/node": "^20.4.10",
     "@web/test-runner": "^0.17.0",
-    "@webref/css": "^6.6.2",
     "c8": "^8.0.1",
     "mocha": "^10.2.0",
     "rollup": "^3.28.0",

diff --git a/src/lib/parser/declaration/map.ts b/src/lib/parser/declaration/map.ts
@@ -82,6 +82,7 @@ export class PropertyMap {
                                     continue;
                                 }
 
+                                // @ts-ignore
                                 if (('propertyName' in acc[i] && acc[i].propertyName == property) || matchType(acc[i], props)) {
 
                                     if ('prefix' in props && props.previous != null && !(props.previous in tokens)) {

diff --git a/test/specs/shorthand.spec.js b/test/specs/shorthand.spec.js
@@ -1,6 +1,7 @@
 /* generate from test/specs/shorthand.spec.ts */
 import { expect as f } from '../../node_modules/@esm-bundle/chai/esm/chai.js';
 import { transform } from '../../dist/node/index.js';
+import {render} from "../../dist/index.js";
 
 const options = {
     minify: true,
@@ -234,4 +235,83 @@ border: #333 solid 1px;
 }
 `, options).then(result => f(result.code).equals('html{font:clamp(12px,.8rem + .25vw,20px)/1.7 Blanco,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}'));
     });
+
+    it('shorthand parsing #16', function () {
+        return transform(`
+@media all {
+    html {
+        font-family: Blanco, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        font-size: clamp(12px, 0.8rem + 0.25vw, 20px);
+        font-weight: 400;
+        line-height: 1.7;
+    }
+}
+
+button.jetpack-instant-search__overlay-close {
+    align-items: center;
+    appearance: none;
+    background-image: none;
+    background-position: initial;
+    background-size: initial;
+    background-repeat: initial;
+    background-attachment: initial;
+    background-origin: initial;
+    background-clip: initial;
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    border-image: initial;
+    border-bottom: 1px solid rgb(230, 241, 245);
+    border-radius: 0px;
+    box-shadow: none;
+    cursor: pointer;
+    display: flex;
+    height: 61px;
+    justify-content: center;
+    line-height: 1;
+    margin: 0px;
+    outline: none;
+    padding: 0px;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    width: 60px;
+    background-color: transparent !important;
+}
+
+`, options).then(result => f(render(result.ast, {minify: false}).code).equals(`html {
+ font: clamp(12px,.8rem + .25vw,20px)/1.7 Blanco,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
+}
+button.jetpack-instant-search__overlay-close {
+ align-items: center;
+ appearance: none;
+ background-image: none;
+ background-position: initial;
+ background-size: initial;
+ background-repeat: initial;
+ background-attachment: initial;
+ background-origin: initial;
+ background-clip: initial;
+ background-color: #0000 !important;
+ border-top: none;
+ border-right: none;
+ border-left: none;
+ border-image: initial;
+ border-bottom: 1px solid #e6f1f5;
+ border-radius: 0;
+ box-shadow: none;
+ cursor: pointer;
+ display: flex;
+ height: 61px;
+ justify-content: center;
+ line-height: 1;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: none;
+ width: 60px
+}`));
+    });
 });