From 919251fec1b803510722892799585e0d818b5b39 Mon Sep 17 00:00:00 2001 From: Thierry Bela Date: Fri, 25 Aug 2023 17:06:06 -0400 Subject: [PATCH] bump version number --- dist/index-umd-web.js | 2 +- dist/index.cjs | 2 +- dist/lib/parser/utils/syntax.js | 2 +- src/lib/parser/utils/syntax.ts | 2 +- src/lib/renderer/utils/color.ts | 2 +- test/specs/angle.spec.js | 4 + test/specs/color.spec.js | 25 ++++ test/specs/color.web-spec.js | 25 ++++ test/specs/expand.web-spec.js | 253 ++++++++++++++++++++++++++++++++ test/specs/malformed.spec.js | 35 +++++ 10 files changed, 347 insertions(+), 5 deletions(-) create mode 100644 test/specs/expand.web-spec.js diff --git a/dist/index-umd-web.js b/dist/index-umd-web.js index 7b7de95..b6a03bb 100644 --- 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 index 45909e6..5dfd69a 100644 --- 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 index ee48ec8..5c667b2 100644 --- 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 index 2b09536..09a885a 100644 --- 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 index fb0a8bd..bd8ae75 100644 --- 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 index 00df379..e012d1e 100644 --- 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)}`)); + }); }); \ No newline at end of file diff --git a/test/specs/color.spec.js b/test/specs/color.spec.js index 578e192..707f310 100644 --- 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 index 7520edb..3065757 100644 --- 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 new file mode 100644 index 0000000..79d80ba --- /dev/null +++ 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 + } +}`)); + }); +}); diff --git a/test/specs/malformed.spec.js b/test/specs/malformed.spec.js index 78d13bc..c95f607 100644 --- a/test/specs/malformed.spec.js +++ b/test/specs/malformed.spec.js @@ -142,6 +142,41 @@ describe('malformed tokens', function () { a { color: pink } +}`)); + }); + + it('bad declaration #10', async function () { + const css = ` + +a { +color: +; +`; + + return transform(css, {minify: transform, resolveImport: true}).then(result => expect(render(result.ast, { + minify: false, + removeComments: false, + preserveLicense: true + }).code).equals(``)); + }); + + it('bad declaration #11', async function () { + const css = ` + +a { +color: hwb(3.1416rad 0% 0% / 100%); +transform: rotate(3.1416rad); +color: +; +`; + + return transform(css, {minify: transform, resolveImport: true}).then(result => expect(render(result.ast, { + minify: false, + removeComments: false, + preserveLicense: true + }).code).equals(`a { + color: cyan; + transform: rotate(3.1416rad) }`)); }); });