failed to flatten @import when using url() syntax #33

tbela99 · May 4, 2024 · 89db057 · 89db057
1 parent 46b8379
commit 89db057
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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});
+console.log({stats});
diff --git 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())));
+        });
+    });
+
 }