From 89db0570a6c34b39807767c5c0fe44affbbc5c22 Mon Sep 17 00:00:00 2001 From: Thierry Bela Nanga Date: Sat, 4 May 2024 17:37:51 -0400 Subject: [PATCH] failed to flatten @import when using url() syntax #33 --- CHANGELOG.md | 3 +++ dist/index-umd-web.js | 16 ++++++++++------ dist/index.cjs | 16 ++++++++++------ dist/lib/parser/parse.js | 16 ++++++++++------ package.json | 2 +- src/lib/parser/parse.ts | 20 ++++++++++++++------ test/inspect.js | 2 +- test/specs/code/import2.js | 18 ++++++++++++++++-- 8 files changed, 65 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index defce59..48efdad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## V0.5.1 +- [x] failed to flatten @import when using url() syntax +- ## V0.5.0 - [x] render node with parents - [x] fix relative color from xyz diff --git a/dist/index-umd-web.js b/dist/index-umd-web.js index 8d1cf05..2db3851 100644 --- a/dist/index-umd-web.js +++ b/dist/index-umd-web.js @@ -6371,12 +6371,16 @@ } if (atRule.val == 'import') { // @ts-ignore - if (tokens[0].typ == exports.EnumToken.UrlFunctionTokenType && tokens[1].typ == exports.EnumToken.UrlTokenTokenType) { - tokens.shift(); - // @ts-ignore - tokens[0].typ = exports.EnumToken.StringTokenType; - // @ts-ignore - tokens[0].val = `"${tokens[0].val}"`; + if (tokens[0].typ == exports.EnumToken.UrlFunctionTokenType) { + if (tokens[1].typ == exports.EnumToken.UrlTokenTokenType || tokens[1].typ == exports.EnumToken.StringTokenType) { + tokens.shift(); + if (tokens[1].typ == exports.EnumToken.UrlTokenTokenType) { + // @ts-ignore + tokens[0].typ = exports.EnumToken.StringTokenType; + // @ts-ignore + tokens[0].val = `"${tokens[0].val}"`; + } + } } // @ts-ignore if (tokens[0].typ == exports.EnumToken.StringTokenType) { diff --git a/dist/index.cjs b/dist/index.cjs index 9bfe23e..7285f28 100644 --- a/dist/index.cjs +++ b/dist/index.cjs @@ -6369,12 +6369,16 @@ async function parseNode(results, context, stats, options, errors, src, map) { } if (atRule.val == 'import') { // @ts-ignore - if (tokens[0].typ == exports.EnumToken.UrlFunctionTokenType && tokens[1].typ == exports.EnumToken.UrlTokenTokenType) { - tokens.shift(); - // @ts-ignore - tokens[0].typ = exports.EnumToken.StringTokenType; - // @ts-ignore - tokens[0].val = `"${tokens[0].val}"`; + if (tokens[0].typ == exports.EnumToken.UrlFunctionTokenType) { + if (tokens[1].typ == exports.EnumToken.UrlTokenTokenType || tokens[1].typ == exports.EnumToken.StringTokenType) { + tokens.shift(); + if (tokens[1].typ == exports.EnumToken.UrlTokenTokenType) { + // @ts-ignore + tokens[0].typ = exports.EnumToken.StringTokenType; + // @ts-ignore + tokens[0].val = `"${tokens[0].val}"`; + } + } } // @ts-ignore if (tokens[0].typ == exports.EnumToken.StringTokenType) { diff --git a/dist/lib/parser/parse.js b/dist/lib/parser/parse.js index 0f12d48..8fa8b5e 100644 --- a/dist/lib/parser/parse.js +++ b/dist/lib/parser/parse.js @@ -346,12 +346,16 @@ async function parseNode(results, context, stats, options, errors, src, map) { } if (atRule.val == 'import') { // @ts-ignore - if (tokens[0].typ == EnumToken.UrlFunctionTokenType && tokens[1].typ == EnumToken.UrlTokenTokenType) { - tokens.shift(); - // @ts-ignore - tokens[0].typ = EnumToken.StringTokenType; - // @ts-ignore - tokens[0].val = `"${tokens[0].val}"`; + if (tokens[0].typ == EnumToken.UrlFunctionTokenType) { + if (tokens[1].typ == EnumToken.UrlTokenTokenType || tokens[1].typ == EnumToken.StringTokenType) { + tokens.shift(); + if (tokens[1].typ == EnumToken.UrlTokenTokenType) { + // @ts-ignore + tokens[0].typ = EnumToken.StringTokenType; + // @ts-ignore + tokens[0].val = `"${tokens[0].val}"`; + } + } } // @ts-ignore if (tokens[0].typ == EnumToken.StringTokenType) { diff --git a/package.json b/package.json index 0041a81..bdb12eb 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@tbela99/css-parser", "description": "CSS parser for node and the browser", - "version": "0.5.0", + "version": "0.5.1", "exports": { ".": "./dist/node/index.js", "./umd": "./dist/index-umd-web.js", diff --git a/src/lib/parser/parse.ts b/src/lib/parser/parse.ts index e7c63bd..8773c00 100644 --- a/src/lib/parser/parse.ts +++ b/src/lib/parser/parse.ts @@ -532,12 +532,20 @@ async function parseNode(results: TokenizeResult[], context: AstRuleList, stats: if (atRule.val == 'import') { // @ts-ignore - if (tokens[0].typ == EnumToken.UrlFunctionTokenType && tokens[1].typ == EnumToken.UrlTokenTokenType) { - tokens.shift(); - // @ts-ignore - tokens[0].typ = EnumToken.StringTokenType; - // @ts-ignore - tokens[0].val = `"${tokens[0].val}"`; + if (tokens[0].typ == EnumToken.UrlFunctionTokenType) { + + if (tokens[1].typ == EnumToken.UrlTokenTokenType || tokens[1].typ == EnumToken.StringTokenType) { + + tokens.shift(); + + if (tokens[1].typ == EnumToken.UrlTokenTokenType) { + + // @ts-ignore + tokens[0].typ = EnumToken.StringTokenType; + // @ts-ignore + tokens[0].val = `"${tokens[0].val}"`; + } + } } // @ts-ignore if (tokens[0].typ == EnumToken.StringTokenType) { diff --git a/test/inspect.js b/test/inspect.js index 181eafe..1164cb6 100644 --- a/test/inspect.js +++ b/test/inspect.js @@ -7,4 +7,4 @@ const css = readFileSync(dirname(new URL(import.meta.url).pathname) + '/files/cs const {code, stats} = await transform(css); console.log(code); -console.error({stats}); \ No newline at end of file +console.log({stats}); \ No newline at end of file diff --git a/test/specs/code/import2.js b/test/specs/code/import2.js index 2f7e1b0..8b51b49 100644 --- a/test/specs/code/import2.js +++ b/test/specs/code/import2.js @@ -3,8 +3,11 @@ export function run(describe, expect, transform, parse, render, dirname, readFil const import1 = `@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css'; `; - describe('process import', function () { - it('process import #2', function () { + const import2 = `@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css'); +`; + + describe('process import #2', function () { + it('process import #1', function () { return readFile(dirname(new URL(import.meta.url).pathname) + '/../../files/result/font-awesome-all.css'). then(file => transform(import1, { minify: false, @@ -14,4 +17,15 @@ export function run(describe, expect, transform, parse, render, dirname, readFil }); }); + describe('process import #2', function () { + it('process import #2', function () { + return readFile(dirname(new URL(import.meta.url).pathname) + '/../../files/result/font-awesome-all.css'). + then(file => transform(import2, { + minify: false, + resolveImport: true + }). + then((result) => expect(result.code).equals(file.trimEnd()))); + }); + }); + } \ No newline at end of file