bump version number

tbela99 · Aug 25, 2023 · 919251f · 919251f
1 parent 4c4034a
commit 919251f
Show file tree

Hide file tree

Showing 10 changed files with 347 additions and 5 deletions.
diff --git a/dist/index-umd-web.js b/dist/index-umd-web.js
@@ -830,7 +830,7 @@
         if (token.typ == 'Func' && token.chi.length > 0 && colorsFunc.includes(token.val)) {
             // @ts-ignore
             for (const v of token.chi) {
-                if (!['Number', 'Perc', 'Comma', 'Whitespace'].includes(v.typ)) {
+                if (!['Number', 'Angle', 'Perc', 'Comma', 'Whitespace', 'Literal'].includes(v.typ)) {
                     return false;
                 }
             }

diff --git a/dist/index.cjs b/dist/index.cjs
@@ -828,7 +828,7 @@ function isColor(token) {
     if (token.typ == 'Func' && token.chi.length > 0 && colorsFunc.includes(token.val)) {
         // @ts-ignore
         for (const v of token.chi) {
-            if (!['Number', 'Perc', 'Comma', 'Whitespace'].includes(v.typ)) {
+            if (!['Number', 'Angle', 'Perc', 'Comma', 'Whitespace', 'Literal'].includes(v.typ)) {
                 return false;
             }
         }

diff --git a/dist/lib/parser/utils/syntax.js b/dist/lib/parser/utils/syntax.js
@@ -37,7 +37,7 @@ function isColor(token) {
     if (token.typ == 'Func' && token.chi.length > 0 && colorsFunc.includes(token.val)) {
         // @ts-ignore
         for (const v of token.chi) {
-            if (!['Number', 'Perc', 'Comma', 'Whitespace'].includes(v.typ)) {
+            if (!['Number', 'Angle', 'Perc', 'Comma', 'Whitespace', 'Literal'].includes(v.typ)) {
                 return false;
             }
         }

diff --git a/src/lib/parser/utils/syntax.ts b/src/lib/parser/utils/syntax.ts
@@ -55,7 +55,7 @@ export function isColor(token: Token): boolean {
         // @ts-ignore
         for (const v of token.chi) {
 
-            if (!['Number', 'Perc', 'Comma', 'Whitespace'].includes(v.typ)) {
+            if (!['Number', 'Angle', 'Perc', 'Comma', 'Whitespace', 'Literal'].includes(v.typ)) {
 
                 return false;
             }

diff --git a/src/lib/renderer/utils/color.ts b/src/lib/renderer/utils/color.ts
@@ -501,7 +501,7 @@ export function getAngle(token: NumberToken | AngleToken): number {
     }
 
     // @ts-ignore
-    return token.val / 360
+    return token.val / 360;
 }
 
 function hsl2rgb(h: number, s: number, l: number, a: number | null = null) {

diff --git a/test/specs/angle.spec.js b/test/specs/angle.spec.js
@@ -8,4 +8,8 @@ describe('Parse angle', function () {
         return transform(`
 .transform { transform: rotate(0.75turn, 2.356194rad, 100grad); }`).then(result => f(result.code).equals(`.transform{transform:rotate(270deg,2.356194rad,90deg)}`));
     });
+    it('angle #1', function () {
+        return transform(`
+.transform { transform: rotate(0.75turn, 2.356194rad, 100grad); }`).then(result => f(result.code).equals(`.transform{transform:rotate(270deg,2.356194rad,90deg)}`));
+    });
 });
diff --git a/test/specs/color.spec.js b/test/specs/color.spec.js
@@ -24,6 +24,31 @@ describe('Parse color', function () {
     it('hwb #4', function () {
         return parse(`.hwb { color: hwb(195, 0%, 0%, 50%); }`).then(result => f(render(result.ast, {minify: false}).code).equals(`.hwb {
  color: #00bfff80
+}`));
+    });
+
+    it('hsl #5', function () {
+        return parse(`a {
+color: hsl(300deg 100% 50% / 1);
+`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
+ color: #f0f
+}`));
+    });
+
+    it('device-cmyk #6', function () {
+        return parse(`a {
+color: device-cmyk(0 81% 81% 30%);
+`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
+ color: #b32222
+}`));
+    });
+
+    it('hwb #7', function () {
+        return parse(`
+a {
+color: hwb(3.1416rad 0% 0% / 100%)
+`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
+ color: cyan
 }`));
     });
 });
diff --git a/test/specs/color.web-spec.js b/test/specs/color.web-spec.js
@@ -24,6 +24,31 @@ describe('Parse color', function () {
     it('hwb #4', function () {
         return parse(`.hwb { color: hwb(195, 0%, 0%, 50%); }`).then(result => f(render(result.ast, {minify: false}).code).equals(`.hwb {
  color: #00bfff80
+}`));
+    });
+
+    it('hsl #5', function () {
+        return parse(`a {
+color: hsl(300deg 100% 50% / 1);
+`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
+ color: #f0f
+}`));
+    });
+
+    it('device-cmyk #6', function () {
+        return parse(`a {
+color: device-cmyk(0 81% 81% 30%);
+`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
+ color: #b32222
+}`));
+    });
+
+    it('hwb #7', function () {
+        return parse(`
+a {
+color: hwb(3.1416rad 0% 0% / 100%)
+`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
+ color: cyan
 }`));
     });
 });
diff --git a/test/specs/expand.web-spec.js b/test/specs/expand.web-spec.js
@@ -0,0 +1,253 @@
+/* generate from test/specs/nesting.spec.ts */
+import {expect as f} from '../../node_modules/@esm-bundle/chai/esm/chai.js';
+import {parse, render} from '../../dist/web/index.js';
+
+describe('flatten nested css rules', function () {
+    it('flatten #1', function () {
+        const nesting1 = `
+
+.foo {
+        color: blue;
+        &Bar { color: red; }
+}
+`;
+        return parse(nesting1, {
+            minify: true, nestingRules: true
+        }).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.foo {
+ color: blue
+}
+Bar.foo {
+ color: red
+}`));
+    });
+
+    it('flatten #2', function () {
+        const nesting1 = `
+.header {
+  background-color: blue;
+  & p {
+    font-size: 16px;
+    & span {
+      &:hover {
+        color: green
+      }
+    }
+  }
+}
+`;
+        return parse(nesting1, {
+            minify: true, nestingRules: true
+        }).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.header {
+ background-color: blue
+}
+.header p {
+ font-size: 16px
+}
+.header p span:hover {
+ color: green
+}`));
+    });
+
+    it('flatten with at-rule #3', function () {
+        const nesting1 = `
+.foo {
+    display: grid;
+    
+    @media (orientation: landscape) {
+      & {
+        grid-auto-flow: column;
+      }
+    }
+  }
+`;
+        return parse(nesting1, {
+            minify: true, nestingRules: true
+        }).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.foo {
+ display: grid
+}
+@media (orientation:landscape) {
+ .foo {
+  grid-auto-flow: column
+ }
+}`));
+    });
+
+    it('flatten with at-rule #4', function () {
+        const nesting1 = `
+.foo {
+  display: grid;
+
+  @media (orientation: landscape) {
+    grid-auto-flow: column;
+  }
+}
+`;
+        return parse(nesting1, {
+            minify: true, nestingRules: true
+        }).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.foo {
+ display: grid
+}
+@media (orientation:landscape) {
+ .foo {
+  grid-auto-flow: column
+ }
+}`));
+    });
+
+    it('flatten with at-rule #5', function () {
+        const nesting1 = `
+.foo {
+  display: grid;
+
+  @media (orientation: landscape) {
+    grid-auto-flow: column;
+
+    @media (min-width > 1024px) {
+      max-inline-size: 1024px;
+    }
+  }
+}
+`;
+        return parse(nesting1, {
+            minify: true, nestingRules: true
+        }).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.foo {
+ display: grid
+}
+@media (orientation:landscape) {
+ .foo {
+  grid-auto-flow: column
+ }
+}
+@media (orientation:landscape) and (min-width >1024px) {
+ .foo {
+  max-inline-size: 1024px
+ }
+}`));
+    });
+
+    it('flatten with at-rule #6', function () {
+        const nesting1 = `
+html {
+  @layer base {
+    block-size: 100%;
+
+    @layer support {
+      & body {
+        min-block-size: 100%;
+      }
+    }
+  }
+}
+`;
+        return parse(nesting1, {
+            minify: true, nestingRules: true
+        }).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`@layer base {
+ html {
+  block-size: 100%
+ }
+}
+@layer base.support {
+ html body {
+  min-block-size: 100%
+ }
+}`));
+    });
+
+    it('flatten with at-rule #7', function () {
+        const nesting1 = `
+html {
+  @layer base {
+    block-size: 100%;
+
+    @layer support {
+       body {
+        min-block-size: 100%;
+      }
+    }
+  }
+}
+`;
+        return parse(nesting1, {
+            minify: true, nestingRules: true
+        }).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`@layer base {
+ html {
+  block-size: 100%
+ }
+}
+@layer base.support {
+ html body {
+  min-block-size: 100%
+ }
+}`));
+    });
+
+    it('flatten with at-rule #8', function () {
+        const nesting1 = `
+.card {
+  inline-size: 40ch;
+  aspect-ratio: 3/4;
+
+  @scope (&) {
+    :scope {
+      border: 1px solid white;
+    }
+  }
+}
+`;
+        return parse(nesting1, {
+            minify: true, nestingRules: true
+        }).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.card {
+ inline-size: 40ch;
+ aspect-ratio: 3/4
+}
+@scope (.card) {
+ :scope {
+  border: 1px solid #fff
+ }
+}`));
+    });
+
+    it('flatten with at-rule #9', function () {
+        const nesting1 = `
+.foo {
+  color: blue;
+  && { padding: 2ch; }
+}
+`;
+        return parse(nesting1, {
+            minify: true, nestingRules: true
+        }).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.foo {
+ color: blue
+}
+.foo.foo {
+ padding: 2ch
+}`));
+    });
+
+    it('flatten with at-rule #10', function () {
+        const nesting1 = `
+
+@scope (.card) to (> header) {
+  :scope {
+    inline-size: 40ch;
+    aspect-ratio: 3/4;
+
+    > header {
+      border-block-end: 1px solid white;
+    }
+  }
+}
+`;
+        return parse(nesting1, {
+            minify: true, nestingRules: true
+        }).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`@scope (.card) to (>header) {
+ :scope {
+  inline-size: 40ch;
+  aspect-ratio: 3/4
+ }
+ :scope>header {
+  border-block-end: 1px solid #fff
+ }
+}`));
+    });
+});