From 1e4199f167dd3d37719a10a14bf7f68325a486e3 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Mon, 2 Jun 2025 16:34:48 +0200 Subject: [PATCH] Fix bundling in more cases for `@import` statements that link to external resources --- plugin-packs/postcss-bundler/CHANGELOG.md | 4 + plugin-packs/postcss-bundler/dist/index.cjs | 2 +- plugin-packs/postcss-bundler/dist/index.mjs | 2 +- .../src/postcss-import/index.ts | 4 +- .../lib/base64-encoded-import.ts | 4 +- .../src/postcss-import/lib/post-process.ts | 143 ++++++++++-------- plugin-packs/postcss-bundler/test/_tape.mjs | 3 + ...nditional-layer-before-external.expect.css | 4 +- .../002-at-media/009/style.expect.css | 2 +- .../002-at-media/010/style.expect.css | 2 +- .../002-at-media/011/style.expect.css | 2 +- .../002-at-media/012/style.expect.css | 2 +- .../002-at-media/014/style.expect.css | 4 +- .../002-at-media/015/style.expect.css | 2 +- .../002-at-media/016/style.expect.css | 2 +- .../002-at-media/017/style.expect.css | 2 +- .../002-at-media/018/style.expect.css | 2 +- .../003-at-layer/014/style.expect.css | 4 +- .../004-at-supports/006/style.expect.css | 4 +- .../005-at-scope/006/style.expect.css | 4 +- .../002-url-queries/001/style.expect.css | 4 +- .../001/style.expect.css | 16 +- .../test/relative-before-external.css | 2 + .../test/relative-before-external.expect.css | 3 + 24 files changed, 116 insertions(+), 107 deletions(-) create mode 100644 plugin-packs/postcss-bundler/test/relative-before-external.css create mode 100644 plugin-packs/postcss-bundler/test/relative-before-external.expect.css diff --git a/plugin-packs/postcss-bundler/CHANGELOG.md b/plugin-packs/postcss-bundler/CHANGELOG.md index 591b610757..369fe7aa0a 100644 --- a/plugin-packs/postcss-bundler/CHANGELOG.md +++ b/plugin-packs/postcss-bundler/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS Bundler +### Unreleased (patch) + +- Fix bundling in more cases for `@import` statements that link to external resources + ### 2.0.7 _May 27, 2025_ diff --git a/plugin-packs/postcss-bundler/dist/index.cjs b/plugin-packs/postcss-bundler/dist/index.cjs index 61af429bc4..29b576e816 100644 --- a/plugin-packs/postcss-bundler/dist/index.cjs +++ b/plugin-packs/postcss-bundler/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/css-parser-algorithms"),t=require("@csstools/css-tokenizer"),s=require("node:path"),o=require("node:module"),n=require("node:fs/promises"),r=require("@csstools/postcss-rebase-url");function isWarning(e){return"warning"===e.type}function isNodesStatement(e){return"nodes"===e.type}function isImportStatement(e){return"import"===e.type}function isPreImportStatement(e){return"pre-import"===e.type}const i=/^data:text\/css(?:;(?:base64|plain))?,/i,a=/^data:text\/css;base64,/i,c=/^data:text\/css;plain,/i;function isValidDataURL(e){return!!e&&i.test(e)}const p=/^charset$/i,u=/^import$/i,l=/^url$/i,m=/^layer$/i,d=/^supports$/i,f=/^scope$/i;function parseAtImport(s){const o=t.tokenize({css:s});if(2===o.length&&(t.isTokenString(o[0])||t.isTokenURL(o[0]))){let e=o[0][4].value;return e=stripHash(e),!!e&&{uri:e,fullUri:o[0][1]}}const n=e.parseListOfComponentValues(o);let r,i,a,c,p="",u="";for(let s=0;s!e.isWhiteSpaceOrCommentNode(t))))return!1;r=e.stringify([o.value])}else if(e.isFunctionNode(o)&&d.test(o.getName())){if(void 0!==a)return!1;a=e.stringify([o.value])}else{if(!e.isFunctionNode(o)||!f.test(o.getName())){i=e.stringify([n.slice(s)]);break}if(void 0!==c)return!1;c=e.stringify([wrapInParenthesisIfNeeded(o.value)])}}}return p=stripHash(p),!!p&&{uri:p,fullUri:u,layer:r,media:i,supports:a,scope:c}}function wrapInParenthesisIfNeeded(s){for(let o=0;o{const i=parseStylesheet(e,t,s,o,n);if(r.charset&&i.charset&&r.charset.params.toLowerCase()!==i.charset.params.toLowerCase())throw i.charset.error(`Incompatible @charset statements:\n ${i.charset.params} specified in ${i.charset.source?.input.file}\n ${r.charset.params} specified in ${r.charset.source?.input.file}`);!r.charset&&i.charset&&(r.charset=i.charset),r.statements.push(...i.statements)})),r;let i,a,c=[],l=[];for(let r=0;r({postcssPlugin:"noop-plugin",Once(){}});async function parseStyles(e,t,s,o,n,r){const i=parseStylesheet(e,t,s,o,n);{let t,s,o;const n=[];for(const a of i.statements)isImportStatement(a)&&isProcessableURL(a.uri)&&(t&&s&&o||([t,s,o]=createRequire(a.node,e),t&&s&&o))&&n.push(resolveImportId(e,a,r,t,s,o));n.length&&await Promise.all(n)}for(let e=0;e{if(isWarning(s)||isPreImportStatement(s)||!s.conditions?.length)return;if(isImportStatement(s))return void(s.node.params=base64EncodedConditionalImport(s.fullUri,s.conditions));const n=s.nodes;if(!n.length)return;const r=n[0].parent;if(!r)return;const i=[];for(const e of s.conditions){if(void 0!==e.media){const o=t({name:"media",params:e.media,source:s.importingNode?.source??r.source});i.push(o)}if(void 0!==e.scope){const o=t({name:"scope",params:e.scope,source:s.importingNode?.source??r.source});i.push(o)}if(void 0!==e.supports){const o=t({name:"supports",params:"("+e.supports+")",source:s.importingNode?.source??r.source});i.push(o)}if(void 0!==e.layer){const o=t({name:"layer",params:e.layer,source:s.importingNode?.source??r.source});i.push(o)}}const a=i[0];if(!a)return;for(let e=0;e{e.parent=void 0})),c.append(n),e.statements[o]={type:"nodes",nodes:[a],conditions:s.conditions,from:s.from,importingNode:s.importingNode}}))}function applyStyles(e,t){t.nodes=[],e.charset&&(e.charset.parent=void 0,t.append(e.charset)),e.statements.forEach((e=>{isImportStatement(e)?(e.node.parent=void 0,t.append(e.node)):isNodesStatement(e)&&e.nodes.forEach((e=>{e.parent=void 0,t.append(e)}))}))}function postProcess(e,t){let s=-1,o=-1,n=-1;for(let t=0;t({postcssPlugin:"postcss-bundler",async Once(e,{result:t,atRule:s,postcss:o}){const n=await parseStyles(t,e,null,[],[],o);postProcess(n,s),applyConditions(n,s),applyStyles(n,e)}});creator$1.postcss=!0;const creator=()=>({postcssPlugin:"postcss-bundler",plugins:[creator$1(),r()]});creator.postcss=!0,module.exports=creator; +"use strict";var e=require("@csstools/css-parser-algorithms"),t=require("@csstools/css-tokenizer"),s=require("node:path"),o=require("node:module"),n=require("node:fs/promises"),r=require("@csstools/postcss-rebase-url");function isWarning(e){return"warning"===e.type}function isNodesStatement(e){return"nodes"===e.type}function isImportStatement(e){return"import"===e.type}function isPreImportStatement(e){return"pre-import"===e.type}const i=/^data:text\/css(?:;(?:base64|plain))?,/i,a=/^data:text\/css;base64,/i,c=/^data:text\/css;plain,/i;function isValidDataURL(e){return!!e&&i.test(e)}const p=/^charset$/i,u=/^import$/i,m=/^url$/i,l=/^layer$/i,d=/^supports$/i,f=/^scope$/i;function parseAtImport(s){const o=t.tokenize({css:s});if(2===o.length&&(t.isTokenString(o[0])||t.isTokenURL(o[0]))){let e=o[0][4].value;return e=stripHash(e),!!e&&{uri:e,fullUri:o[0][1]}}const n=e.parseListOfComponentValues(o);let r,i,a,c,p="",u="";for(let s=0;s!e.isWhiteSpaceOrCommentNode(t))))return!1;r=e.stringify([o.value])}else if(e.isFunctionNode(o)&&d.test(o.getName())){if(void 0!==a)return!1;a=e.stringify([o.value])}else{if(!e.isFunctionNode(o)||!f.test(o.getName())){i=e.stringify([n.slice(s)]);break}if(void 0!==c)return!1;c=e.stringify([wrapInParenthesisIfNeeded(o.value)])}}}return p=stripHash(p),!!p&&{uri:p,fullUri:u,layer:r,media:i,supports:a,scope:c}}function wrapInParenthesisIfNeeded(s){for(let o=0;o{const i=parseStylesheet(e,t,s,o,n);if(r.charset&&i.charset&&r.charset.params.toLowerCase()!==i.charset.params.toLowerCase())throw i.charset.error(`Incompatible @charset statements:\n ${i.charset.params} specified in ${i.charset.source?.input.file}\n ${r.charset.params} specified in ${r.charset.source?.input.file}`);!r.charset&&i.charset&&(r.charset=i.charset),r.statements.push(...i.statements)})),r;let i,a,c=[],m=[];for(let r=0;r({postcssPlugin:"noop-plugin",Once(){}});async function parseStyles(e,t,s,o,n,r){const i=parseStylesheet(e,t,s,o,n);{let t,s,o;const n=[];for(const a of i.statements)isImportStatement(a)&&isProcessableURL(a.uri)&&(t&&s&&o||([t,s,o]=createRequire(a.node,e),t&&s&&o))&&n.push(resolveImportId(e,a,r,t,s,o));n.length&&await Promise.all(n)}for(let e=0;e{if(isWarning(s)||isPreImportStatement(s)||!s.conditions?.length)return;if(isImportStatement(s))return void(s.node.params=base64EncodedConditionalImport(s.fullUri,s.conditions));const n=s.nodes;if(!n.length)return;const r=n[0].parent;if(!r)return;const i=[];for(const e of s.conditions){if(void 0!==e.media){const o=t({name:"media",params:e.media,source:s.importingNode?.source??r.source});i.push(o)}if(void 0!==e.scope){const o=t({name:"scope",params:e.scope,source:s.importingNode?.source??r.source});i.push(o)}if(void 0!==e.supports){const o=t({name:"supports",params:"("+e.supports+")",source:s.importingNode?.source??r.source});i.push(o)}if(void 0!==e.layer){const o=t({name:"layer",params:e.layer,source:s.importingNode?.source??r.source});i.push(o)}}const a=i[0];if(!a)return;for(let e=0;e{e.parent=void 0})),c.append(n),e.statements[o]={type:"nodes",nodes:[a],conditions:s.conditions,from:s.from,importingNode:s.importingNode}}))}function applyStyles(e,t){t.nodes=[],e.charset&&(e.charset.parent=void 0,t.append(e.charset)),e.statements.forEach((e=>{isImportStatement(e)?(e.node.parent=void 0,t.append(e.node)):isNodesStatement(e)&&e.nodes.forEach((e=>{e.parent=void 0,t.append(e)}))}))}function postProcess(e,t,s){let o=-1,n=-1;for(let t=0;t"atrule"===e.type&&!e.nodes)))&&!(r"comment"===e.type)))&&r{e.parent=void 0,o.append(e)}));const n="data:text/css;base64,"+Buffer.from(o.toString()).toString("base64"),a={type:"import",uri:n,fullUri:'"'+n+'"',node:t({name:"import",params:'"'+n+'"',source:i.importingNode?.source??i.nodes[0]?.source}),conditions:i.conditions,from:i.from,importingNode:i.importingNode};e.statements.splice(r,1,a)}}}const creator$1=()=>({postcssPlugin:"postcss-bundler",async Once(e,{result:t,atRule:s,root:o,postcss:n}){const r=await parseStyles(t,e,null,[],[],n);postProcess(r,s,o),applyConditions(r,s),applyStyles(r,e)}});creator$1.postcss=!0;const creator=()=>({postcssPlugin:"postcss-bundler",plugins:[creator$1(),r()]});creator.postcss=!0,module.exports=creator; diff --git a/plugin-packs/postcss-bundler/dist/index.mjs b/plugin-packs/postcss-bundler/dist/index.mjs index bcb95df666..8b46e6ba6e 100644 --- a/plugin-packs/postcss-bundler/dist/index.mjs +++ b/plugin-packs/postcss-bundler/dist/index.mjs @@ -1 +1 @@ -import{parseListOfComponentValues as e,isWhiteSpaceOrCommentNode as t,isTokenNode as s,isFunctionNode as o,stringify as r,isSimpleBlockNode as n,SimpleBlockNode as i}from"@csstools/css-parser-algorithms";import{tokenize as a,isTokenString as c,isTokenURL as p,isTokenIdent as u,isTokenOpenParen as l,TokenType as m}from"@csstools/css-tokenizer";import d from"node:path";import f from"node:module";import h from"node:fs/promises";import y from"@csstools/postcss-rebase-url";function isWarning(e){return"warning"===e.type}function isNodesStatement(e){return"nodes"===e.type}function isImportStatement(e){return"import"===e.type}function isPreImportStatement(e){return"pre-import"===e.type}const g=/^data:text\/css(?:;(?:base64|plain))?,/i,v=/^data:text\/css;base64,/i,I=/^data:text\/css;plain,/i;function isValidDataURL(e){return!!e&&g.test(e)}const S=/^charset$/i,b=/^import$/i,N=/^url$/i,$=/^layer$/i,w=/^supports$/i,C=/^scope$/i;function parseAtImport(n){const i=a({css:n});if(2===i.length&&(c(i[0])||p(i[0]))){let e=i[0][4].value;return e=stripHash(e),!!e&&{uri:e,fullUri:i[0][1]}}const l=e(i);let m,d,f,h,y="",g="";for(let e=0;e!t(e))))return!1;m=r([n.value])}else if(o(n)&&w.test(n.getName())){if(void 0!==f)return!1;f=r([n.value])}else{if(!o(n)||!C.test(n.getName())){d=r([l.slice(e)]);break}if(void 0!==h)return!1;h=r([wrapInParenthesisIfNeeded(n.value)])}}}return y=stripHash(y),!!y&&{uri:y,fullUri:g,layer:m,media:d,supports:f,scope:h}}function wrapInParenthesisIfNeeded(e){for(let s=0;s{const i=parseStylesheet(e,t,s,o,r);if(n.charset&&i.charset&&n.charset.params.toLowerCase()!==i.charset.params.toLowerCase())throw i.charset.error(`Incompatible @charset statements:\n ${i.charset.params} specified in ${i.charset.source?.input.file}\n ${n.charset.params} specified in ${n.charset.source?.input.file}`);!n.charset&&i.charset&&(n.charset=i.charset),n.statements.push(...i.statements)})),n;let i,a,c=[],p=[];for(let n=0;n({postcssPlugin:"noop-plugin",Once(){}});async function parseStyles(e,t,s,o,r,n){const i=parseStylesheet(e,t,s,o,r);{let t,s,o;const r=[];for(const a of i.statements)isImportStatement(a)&&isProcessableURL(a.uri)&&(t&&s&&o||([t,s,o]=createRequire(a.node,e),t&&s&&o))&&r.push(resolveImportId(e,a,n,t,s,o));r.length&&await Promise.all(r)}for(let e=0;e{if(isWarning(s)||isPreImportStatement(s)||!s.conditions?.length)return;if(isImportStatement(s))return void(s.node.params=base64EncodedConditionalImport(s.fullUri,s.conditions));const r=s.nodes;if(!r.length)return;const n=r[0].parent;if(!n)return;const i=[];for(const e of s.conditions){if(void 0!==e.media){const o=t({name:"media",params:e.media,source:s.importingNode?.source??n.source});i.push(o)}if(void 0!==e.scope){const o=t({name:"scope",params:e.scope,source:s.importingNode?.source??n.source});i.push(o)}if(void 0!==e.supports){const o=t({name:"supports",params:"("+e.supports+")",source:s.importingNode?.source??n.source});i.push(o)}if(void 0!==e.layer){const o=t({name:"layer",params:e.layer,source:s.importingNode?.source??n.source});i.push(o)}}const a=i[0];if(!a)return;for(let e=0;e{e.parent=void 0})),c.append(r),e.statements[o]={type:"nodes",nodes:[a],conditions:s.conditions,from:s.from,importingNode:s.importingNode}}))}function applyStyles(e,t){t.nodes=[],e.charset&&(e.charset.parent=void 0,t.append(e.charset)),e.statements.forEach((e=>{isImportStatement(e)?(e.node.parent=void 0,t.append(e.node)):isNodesStatement(e)&&e.nodes.forEach((e=>{e.parent=void 0,t.append(e)}))}))}function postProcess(e,t){let s=-1,o=-1,r=-1;for(let t=0;t({postcssPlugin:"postcss-bundler",async Once(e,{result:t,atRule:s,postcss:o}){const r=await parseStyles(t,e,null,[],[],o);postProcess(r,s),applyConditions(r,s),applyStyles(r,e)}});creator$1.postcss=!0;const creator=()=>({postcssPlugin:"postcss-bundler",plugins:[creator$1(),y()]});creator.postcss=!0;export{creator as default}; +import{parseListOfComponentValues as e,isWhiteSpaceOrCommentNode as t,isTokenNode as s,isFunctionNode as o,stringify as r,isSimpleBlockNode as n,SimpleBlockNode as i}from"@csstools/css-parser-algorithms";import{tokenize as a,isTokenString as c,isTokenURL as p,isTokenIdent as u,isTokenOpenParen as m,TokenType as l}from"@csstools/css-tokenizer";import d from"node:path";import f from"node:module";import h from"node:fs/promises";import y from"@csstools/postcss-rebase-url";function isWarning(e){return"warning"===e.type}function isNodesStatement(e){return"nodes"===e.type}function isImportStatement(e){return"import"===e.type}function isPreImportStatement(e){return"pre-import"===e.type}const g=/^data:text\/css(?:;(?:base64|plain))?,/i,v=/^data:text\/css;base64,/i,I=/^data:text\/css;plain,/i;function isValidDataURL(e){return!!e&&g.test(e)}const S=/^charset$/i,N=/^import$/i,b=/^url$/i,$=/^layer$/i,w=/^supports$/i,C=/^scope$/i;function parseAtImport(n){const i=a({css:n});if(2===i.length&&(c(i[0])||p(i[0]))){let e=i[0][4].value;return e=stripHash(e),!!e&&{uri:e,fullUri:i[0][1]}}const m=e(i);let l,d,f,h,y="",g="";for(let e=0;e!t(e))))return!1;l=r([n.value])}else if(o(n)&&w.test(n.getName())){if(void 0!==f)return!1;f=r([n.value])}else{if(!o(n)||!C.test(n.getName())){d=r([m.slice(e)]);break}if(void 0!==h)return!1;h=r([wrapInParenthesisIfNeeded(n.value)])}}}return y=stripHash(y),!!y&&{uri:y,fullUri:g,layer:l,media:d,supports:f,scope:h}}function wrapInParenthesisIfNeeded(e){for(let s=0;s{const i=parseStylesheet(e,t,s,o,r);if(n.charset&&i.charset&&n.charset.params.toLowerCase()!==i.charset.params.toLowerCase())throw i.charset.error(`Incompatible @charset statements:\n ${i.charset.params} specified in ${i.charset.source?.input.file}\n ${n.charset.params} specified in ${n.charset.source?.input.file}`);!n.charset&&i.charset&&(n.charset=i.charset),n.statements.push(...i.statements)})),n;let i,a,c=[],p=[];for(let n=0;n({postcssPlugin:"noop-plugin",Once(){}});async function parseStyles(e,t,s,o,r,n){const i=parseStylesheet(e,t,s,o,r);{let t,s,o;const r=[];for(const a of i.statements)isImportStatement(a)&&isProcessableURL(a.uri)&&(t&&s&&o||([t,s,o]=createRequire(a.node,e),t&&s&&o))&&r.push(resolveImportId(e,a,n,t,s,o));r.length&&await Promise.all(r)}for(let e=0;e{if(isWarning(s)||isPreImportStatement(s)||!s.conditions?.length)return;if(isImportStatement(s))return void(s.node.params=base64EncodedConditionalImport(s.fullUri,s.conditions));const r=s.nodes;if(!r.length)return;const n=r[0].parent;if(!n)return;const i=[];for(const e of s.conditions){if(void 0!==e.media){const o=t({name:"media",params:e.media,source:s.importingNode?.source??n.source});i.push(o)}if(void 0!==e.scope){const o=t({name:"scope",params:e.scope,source:s.importingNode?.source??n.source});i.push(o)}if(void 0!==e.supports){const o=t({name:"supports",params:"("+e.supports+")",source:s.importingNode?.source??n.source});i.push(o)}if(void 0!==e.layer){const o=t({name:"layer",params:e.layer,source:s.importingNode?.source??n.source});i.push(o)}}const a=i[0];if(!a)return;for(let e=0;e{e.parent=void 0})),c.append(r),e.statements[o]={type:"nodes",nodes:[a],conditions:s.conditions,from:s.from,importingNode:s.importingNode}}))}function applyStyles(e,t){t.nodes=[],e.charset&&(e.charset.parent=void 0,t.append(e.charset)),e.statements.forEach((e=>{isImportStatement(e)?(e.node.parent=void 0,t.append(e.node)):isNodesStatement(e)&&e.nodes.forEach((e=>{e.parent=void 0,t.append(e)}))}))}function postProcess(e,t,s){let o=-1,r=-1;for(let t=0;t"atrule"===e.type&&!e.nodes)))&&!(n"comment"===e.type)))&&n{e.parent=void 0,o.append(e)}));const r="data:text/css;base64,"+Buffer.from(o.toString()).toString("base64"),a={type:"import",uri:r,fullUri:'"'+r+'"',node:t({name:"import",params:'"'+r+'"',source:i.importingNode?.source??i.nodes[0]?.source}),conditions:i.conditions,from:i.from,importingNode:i.importingNode};e.statements.splice(n,1,a)}}}const creator$1=()=>({postcssPlugin:"postcss-bundler",async Once(e,{result:t,atRule:s,root:o,postcss:r}){const n=await parseStyles(t,e,null,[],[],r);postProcess(n,s,o),applyConditions(n,s),applyStyles(n,e)}});creator$1.postcss=!0;const creator=()=>({postcssPlugin:"postcss-bundler",plugins:[creator$1(),y()]});creator.postcss=!0;export{creator as default}; diff --git a/plugin-packs/postcss-bundler/src/postcss-import/index.ts b/plugin-packs/postcss-bundler/src/postcss-import/index.ts index a0e6171526..3c894262db 100644 --- a/plugin-packs/postcss-bundler/src/postcss-import/index.ts +++ b/plugin-packs/postcss-bundler/src/postcss-import/index.ts @@ -7,7 +7,7 @@ import { postProcess } from './lib/post-process'; const creator: PluginCreator = () => { return { postcssPlugin: 'postcss-bundler', - async Once(styles, { result, atRule, postcss }): Promise { + async Once(styles, { result, atRule, root, postcss }): Promise { const bundle = await parseStyles( result, styles, @@ -17,7 +17,7 @@ const creator: PluginCreator = () => { postcss, ); - postProcess(bundle, atRule); + postProcess(bundle, atRule, root); applyConditions(bundle, atRule); applyStyles(bundle, styles); diff --git a/plugin-packs/postcss-bundler/src/postcss-import/lib/base64-encoded-import.ts b/plugin-packs/postcss-bundler/src/postcss-import/lib/base64-encoded-import.ts index 73a4766b7b..3ca502418c 100644 --- a/plugin-packs/postcss-bundler/src/postcss-import/lib/base64-encoded-import.ts +++ b/plugin-packs/postcss-bundler/src/postcss-import/lib/base64-encoded-import.ts @@ -21,9 +21,9 @@ export function base64EncodedConditionalImport(prelude: string, conditions: Arra )}`; for (const condition of conditions) { - params = `'data:text/css;base64,${Buffer.from( + params = `"data:text/css;base64,${Buffer.from( `@import ${params}`, - ).toString('base64')}' ${formatImportPrelude( + ).toString('base64')}" ${formatImportPrelude( condition.layer, condition.media, condition.supports, diff --git a/plugin-packs/postcss-bundler/src/postcss-import/lib/post-process.ts b/plugin-packs/postcss-bundler/src/postcss-import/lib/post-process.ts index 8a5eeb296e..72a506ccdd 100644 --- a/plugin-packs/postcss-bundler/src/postcss-import/lib/post-process.ts +++ b/plugin-packs/postcss-bundler/src/postcss-import/lib/post-process.ts @@ -1,92 +1,105 @@ -import type { AtRule, AtRuleProps } from 'postcss'; +import type { AtRule, AtRuleProps, Root, RootProps } from 'postcss'; import type { ImportStatement, NodesStatement, Stylesheet} from './statement'; -import { isImportStatement, isNodesStatement, isPreImportStatement } from './statement'; +import { isImportStatement, isNodesStatement, isPreImportStatement, isWarning } from './statement'; -export function postProcess(stylesheet: Stylesheet, atRule: (defaults?: AtRuleProps) => AtRule): void { +export function postProcess(stylesheet: Stylesheet, atRule: (defaults?: AtRuleProps) => AtRule, root: (defaults?: RootProps) => Root): void { let indexOfFirstImport = -1; - let indexOfFirstPreImport = -1; - let indexOfFirstMeaningfulNode = -1; + let indexOfLastImport = -1; for (let i = 0; i < stylesheet.statements.length; i++) { const stmt = stylesheet.statements[i]; if (isImportStatement(stmt)) { - indexOfFirstImport = i; - if (indexOfFirstImport !== -1 && indexOfFirstPreImport !== -1 && indexOfFirstMeaningfulNode !== -1) { - break; + if (indexOfFirstImport === -1) { + indexOfFirstImport = i; } + indexOfLastImport = i; continue; } + } - if (isPreImportStatement(stmt)) { - indexOfFirstPreImport = i; - if (indexOfFirstImport !== -1 && indexOfFirstPreImport !== -1 && indexOfFirstMeaningfulNode !== -1) { - break; - } + for (let i = 0; i < stylesheet.statements.length; i++) { + const stmt = stylesheet.statements[i]; + if (isImportStatement(stmt)) { continue; } - if (isNodesStatement(stmt)) { - for (let j = 0; j < stmt.nodes.length; j++) { - const node = stmt.nodes[j]; - if (node.type === 'comment') { - continue; - } + if (isWarning(stmt)) { + continue; + } - indexOfFirstMeaningfulNode = i; - } + if (isNodesStatement(stmt) && !stmt.importingNode) { + continue; + } + + if (isPreImportStatement(stmt)) { + if (i < indexOfLastImport) { + const params = 'data:text/css;base64,' + Buffer.from(stmt.node.toString()).toString('base64'); - if (indexOfFirstImport !== -1 && indexOfFirstPreImport !== -1 && indexOfFirstMeaningfulNode !== -1) { - break; + const importStmt: ImportStatement = { + type: 'import', + uri: params, + fullUri: '"' + params + '"', + node: atRule({ + name: 'import', + params: '"' + params + '"', + source: stmt.node.source, + }), + conditions: stmt.conditions, + from: stmt.from, + importingNode: stmt.importingNode, + }; + + stylesheet.statements.splice(i, 1, importStmt); + } else { + const nodesStmt: NodesStatement = { + type: 'nodes', + nodes: [stmt.node], + conditions: stmt.conditions, + from: stmt.from, + importingNode: stmt.importingNode, + }; + + stylesheet.statements.splice(i, 1, nodesStmt); } continue; } - } - if (indexOfFirstPreImport !== -1) { - for (let i = 0; i < stylesheet.statements.length; i++) { - const stmt = stylesheet.statements[i]; - - if (isPreImportStatement(stmt)) { - if ( - i < indexOfFirstImport && - ( - i < indexOfFirstMeaningfulNode || - indexOfFirstMeaningfulNode === -1 - ) - ) { - const params = 'data:text/css;base64,' + Buffer.from(stmt.node.toString()).toString('base64'); - - const importStmt: ImportStatement = { - type: 'import', - uri: params, - fullUri: '\'' + params + '\'', - node: atRule({ - name: 'import', - params: '\'' + params + '\'', - source: stmt.node.source, - }), - conditions: stmt.conditions, - from: stmt.from, - importingNode: stmt.importingNode, - }; - - stylesheet.statements.splice(i, 1, importStmt); - } else { - const nodesStmt: NodesStatement = { - type: 'nodes', - nodes: [stmt.node], - conditions: stmt.conditions, - from: stmt.from, - importingNode: stmt.importingNode, - }; - - stylesheet.statements.splice(i, 1, nodesStmt); - } - } + if (i < indexOfFirstImport && stmt.nodes.every((x) => x.type === 'atrule' && !x.nodes)) { + continue; + } + + if (i < indexOfLastImport && (stmt.nodes.every((x) => x.type === 'comment'))) { + continue; + } + + if (i < indexOfLastImport) { + const dummyRoot = root(); + stmt.nodes.forEach((node) => { + node.parent = undefined; + dummyRoot.append(node); + }); + + const params = 'data:text/css;base64,' + Buffer.from(dummyRoot.toString()).toString('base64'); + + const importStmt: ImportStatement = { + type: 'import', + uri: params, + fullUri: '"' + params + '"', + node: atRule({ + name: 'import', + params: '"' + params + '"', + source: stmt.importingNode?.source ?? stmt.nodes[0]?.source, + }), + conditions: stmt.conditions, + from: stmt.from, + importingNode: stmt.importingNode, + }; + + stylesheet.statements.splice(i, 1, importStmt); } } } diff --git a/plugin-packs/postcss-bundler/test/_tape.mjs b/plugin-packs/postcss-bundler/test/_tape.mjs index 0675113d91..4bdd4e8e3b 100644 --- a/plugin-packs/postcss-bundler/test/_tape.mjs +++ b/plugin-packs/postcss-bundler/test/_tape.mjs @@ -18,6 +18,9 @@ const testCases = { 'conditional-layer-before-external': { message: 'correctly handles conditional stylesheets containing layer statements before external resources', }, + 'relative-before-external': { + message: 'correctly handles stylesheets before external resources', + }, 'does-not-exist-1': { message: 'throws on files that don\'t exist', exception: /Failed to find 'imports\/does-not-exist.css'/, diff --git a/plugin-packs/postcss-bundler/test/conditional-layer-before-external.expect.css b/plugin-packs/postcss-bundler/test/conditional-layer-before-external.expect.css index 146deb2f6e..7282c8021d 100644 --- a/plugin-packs/postcss-bundler/test/conditional-layer-before-external.expect.css +++ b/plugin-packs/postcss-bundler/test/conditional-layer-before-external.expect.css @@ -1,8 +1,8 @@ /* imports/layer-before-external.css */ -@import 'data:text/css;base64,QGxheWVyIHJlc2V0LCBib290c3RyYXA=' (min-width: 300px); +@import "data:text/css;base64,QGxheWVyIHJlc2V0LCBib290c3RyYXA=" (min-width: 300px); -@import 'data:text/css;base64,QGltcG9ydCB1cmwoJ2h0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4wL2Rpc3QvY3NzL2Jvb3RzdHJhcC5jc3MnKSAobWluLXdpZHRoOiAzMDBweCk=' layer(bootstrap); +@import "data:text/css;base64,QGltcG9ydCB1cmwoJ2h0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4wL2Rpc3QvY3NzL2Jvb3RzdHJhcC5jc3MnKSAobWluLXdpZHRoOiAzMDBweCk=" layer(bootstrap); @media (min-width: 300px){ diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/009/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/009/style.expect.css index 1c4781d1e7..cbe4b9a754 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/009/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/009/style.expect.css @@ -1,2 +1,2 @@ /* ./a.css */ -@import 'data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSAobWluLXdpZHRoOiAxcHgp' (min-height: 1px); +@import "data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSAobWluLXdpZHRoOiAxcHgp" (min-height: 1px); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/010/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/010/style.expect.css index d87676f81c..3c86f2c03c 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/010/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/010/style.expect.css @@ -1,3 +1,3 @@ /* ./a.css */ @import url("http://localhost:8080/green.css") not print and (min-width: 1px); -@import 'data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9yZWQuY3NzIikgbm90IHByaW50IGFuZCAobWluLXdpZHRoOiAxcHgp' not screen and (min-height: 1px); +@import "data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9yZWQuY3NzIikgbm90IHByaW50IGFuZCAobWluLXdpZHRoOiAxcHgp" not screen and (min-height: 1px); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/011/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/011/style.expect.css index 3da3206138..2223158937 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/011/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/011/style.expect.css @@ -1,3 +1,3 @@ @import url("http://localhost:8080/green.css"); /* ./a.css */ -@import 'data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9yZWQuY3NzIikgc2NyZWVuIGFuZCAobm90IChtaW4td2lkdGg6IDFweCkp' not print and (min-height: 1px); +@import "data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9yZWQuY3NzIikgc2NyZWVuIGFuZCAobm90IChtaW4td2lkdGg6IDFweCkp" not print and (min-height: 1px); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/012/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/012/style.expect.css index 135bc2958a..c1e2377734 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/012/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/012/style.expect.css @@ -1,2 +1,2 @@ /* ./a.css */ -@import 'data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBub3QgcHJpbnQgYW5kIChtaW4td2lkdGg6IDFweCk=' not screen and (max-height: 1px); +@import "data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBub3QgcHJpbnQgYW5kIChtaW4td2lkdGg6IDFweCk=" not screen and (max-height: 1px); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/014/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/014/style.expect.css index 193be70e32..e4a01883de 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/014/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/014/style.expect.css @@ -1,4 +1,4 @@ /* ./a.css */ /* ./b.css */ -@import 'data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBub3QgcHJpbnQgYW5kIChtaW4td2lkdGg6IDFweCk=' not print and (min-color: 1); -@import 'data:text/css;base64,QGltcG9ydCAnZGF0YTp0ZXh0L2NzcztiYXNlNjQsUUdsdGNHOXlkQ0IxY213b0ltaDBkSEE2THk5c2IyTmhiR2h2YzNRNk9EQTRNQzl5WldRdVkzTnpJaWtnYm05MElIQnlhVzUwSUdGdVpDQW9iV2x1TFhkcFpIUm9PaUF4Y0hncCcgbm90IHNjcmVlbiBhbmQgKG1pbi1oZWlnaHQ6IDFweCk=' not print and (min-color: 1); +@import "data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBub3QgcHJpbnQgYW5kIChtaW4td2lkdGg6IDFweCk=" not print and (min-color: 1); +@import "data:text/css;base64,QGltcG9ydCAiZGF0YTp0ZXh0L2NzcztiYXNlNjQsUUdsdGNHOXlkQ0IxY213b0ltaDBkSEE2THk5c2IyTmhiR2h2YzNRNk9EQTRNQzl5WldRdVkzTnpJaWtnYm05MElIQnlhVzUwSUdGdVpDQW9iV2x1TFhkcFpIUm9PaUF4Y0hncCIgbm90IHNjcmVlbiBhbmQgKG1pbi1oZWlnaHQ6IDFweCk=" not print and (min-color: 1); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/015/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/015/style.expect.css index 840af196ec..7571ec0d50 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/015/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/015/style.expect.css @@ -1,2 +1,2 @@ /* ./a.css */ -@import 'data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDFweCk=' screen and (min-height: 1px); +@import "data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDFweCk=" screen and (min-height: 1px); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/016/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/016/style.expect.css index 9020ccd972..e2a50c97a2 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/016/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/016/style.expect.css @@ -1,2 +1,2 @@ /* ./a.css */ -@import 'data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDFweCk=' all and (min-height: 1px); +@import "data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDFweCk=" all and (min-height: 1px); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/017/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/017/style.expect.css index 4fe95ed41a..7d4594eeb8 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/017/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/017/style.expect.css @@ -1,2 +1,2 @@ /* ./a.css */ -@import 'data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDFweCk=' not print and (min-height: 1px); +@import "data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDFweCk=" not print and (min-height: 1px); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/018/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/018/style.expect.css index c3ce1a654a..a6c5681df5 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/018/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/002-at-media/018/style.expect.css @@ -1,2 +1,2 @@ /* ./a.css */ -@import 'data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBub3QgcHJpbnQgYW5kIChtaW4td2lkdGg6IDFweCk=' all and (min-height: 1px); +@import "data:text/css;base64,QGltcG9ydCB1cmwoImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9ncmVlbi5jc3MiKSBub3QgcHJpbnQgYW5kIChtaW4td2lkdGg6IDFweCk=" all and (min-height: 1px); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/003-at-layer/014/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/003-at-layer/014/style.expect.css index f41ac3b325..848ff43561 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/003-at-layer/014/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/003-at-layer/014/style.expect.css @@ -1,6 +1,6 @@ /* ./a.css */ -@import 'data:text/css;base64,QGxheWVyIGIsIGE=' print; +@import "data:text/css;base64,QGxheWVyIGIsIGE=" print; /* ./b.css */ /* a comment */ -@import 'data:text/css;base64,QGxheWVyIGEsIGI=' screen; +@import "data:text/css;base64,QGxheWVyIGEsIGI=" screen; @import url("http://localhost:8080/green.css") screen; diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/004-at-supports/006/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/004-at-supports/006/style.expect.css index 337a59882e..d16d7f5e0e 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/004-at-supports/006/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/004-at-supports/006/style.expect.css @@ -1,5 +1,5 @@ /* ./a.css */ /* ./b.css */ /* ./c.css */ -@import 'data:text/css;base64,QGltcG9ydCAnZGF0YTp0ZXh0L2NzcztiYXNlNjQsUUdsdGNHOXlkQ0IxY213b0ltaDBkSEE2THk5c2IyTmhiR2h2YzNRNk9EQTRNQzluY21WbGJpNWpjM01pS1NCdWIzUWdjSEpwYm5RZ1lXNWtJQ2h0YVc0dGQybGtkR2c2SURGd2VDaz0nIGxheWVyKGZvbyk=' supports(display: grid); -@import 'data:text/css;base64,QGltcG9ydCAnZGF0YTp0ZXh0L2NzcztiYXNlNjQsUUdsdGNHOXlkQ0FuWkdGMFlUcDBaWGgwTDJOemN6dGlZWE5sTmpRc1VVZHNkR05IT1hsa1EwSXhZMjEzYjBsdGFEQmtTRUUyVEhrNWMySXlUbWhpUjJoMll6TlJOazlFUVRSTlF6bDVXbGRSZFZrelRucEphV3RuWW0wNU1FbElRbmxoVnpVd1NVZEdkVnBEUVc5aVYyeDFURmhrY0ZwSVVtOVBhVUY0WTBobmNDY2dibTkwSUhOamNtVmxiaUJoYm1RZ0tHMXBiaTFvWldsbmFIUTZJREZ3ZUNrPScgbGF5ZXIoZm9vKQ==' supports(display: grid); +@import "data:text/css;base64,QGltcG9ydCAiZGF0YTp0ZXh0L2NzcztiYXNlNjQsUUdsdGNHOXlkQ0IxY213b0ltaDBkSEE2THk5c2IyTmhiR2h2YzNRNk9EQTRNQzluY21WbGJpNWpjM01pS1NCdWIzUWdjSEpwYm5RZ1lXNWtJQ2h0YVc0dGQybGtkR2c2SURGd2VDaz0iIGxheWVyKGZvbyk=" supports(display: grid); +@import "data:text/css;base64,QGltcG9ydCAiZGF0YTp0ZXh0L2NzcztiYXNlNjQsUUdsdGNHOXlkQ0FpWkdGMFlUcDBaWGgwTDJOemN6dGlZWE5sTmpRc1VVZHNkR05IT1hsa1EwSXhZMjEzYjBsdGFEQmtTRUUyVEhrNWMySXlUbWhpUjJoMll6TlJOazlFUVRSTlF6bDVXbGRSZFZrelRucEphV3RuWW0wNU1FbElRbmxoVnpVd1NVZEdkVnBEUVc5aVYyeDFURmhrY0ZwSVVtOVBhVUY0WTBobmNDSWdibTkwSUhOamNtVmxiaUJoYm1RZ0tHMXBiaTFvWldsbmFIUTZJREZ3ZUNrPSIgbGF5ZXIoZm9vKQ==" supports(display: grid); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/005-at-scope/006/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/005-at-scope/006/style.expect.css index 761593e9b1..fecb1b4ed2 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/005-at-scope/006/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/002-sub-features/005-at-scope/006/style.expect.css @@ -1,5 +1,5 @@ /* ./a.css */ /* ./b.css */ /* ./c.css */ -@import 'data:text/css;base64,QGltcG9ydCAnZGF0YTp0ZXh0L2NzcztiYXNlNjQsUUdsdGNHOXlkQ0IxY213b0ltaDBkSEE2THk5c2IyTmhiR2h2YzNRNk9EQTRNQzluY21WbGJpNWpjM01pS1NCdWIzUWdjSEpwYm5RZ1lXNWtJQ2h0YVc0dGQybGtkR2c2SURGd2VDaz0nIGxheWVyKGZvbyk=' scope((.donut-edge)); -@import 'data:text/css;base64,QGltcG9ydCAnZGF0YTp0ZXh0L2NzcztiYXNlNjQsUUdsdGNHOXlkQ0FuWkdGMFlUcDBaWGgwTDJOemN6dGlZWE5sTmpRc1VVZHNkR05IT1hsa1EwSXhZMjEzYjBsdGFEQmtTRUUyVEhrNWMySXlUbWhpUjJoMll6TlJOazlFUVRSTlF6bDVXbGRSZFZrelRucEphV3RuWW0wNU1FbElRbmxoVnpVd1NVZEdkVnBEUVc5aVYyeDFURmhrY0ZwSVVtOVBhVUY0WTBobmNDY2dibTkwSUhOamNtVmxiaUJoYm1RZ0tHMXBiaTFvWldsbmFIUTZJREZ3ZUNrPScgbGF5ZXIoZm9vKQ==' scope((.donut-edge)); +@import "data:text/css;base64,QGltcG9ydCAiZGF0YTp0ZXh0L2NzcztiYXNlNjQsUUdsdGNHOXlkQ0IxY213b0ltaDBkSEE2THk5c2IyTmhiR2h2YzNRNk9EQTRNQzluY21WbGJpNWpjM01pS1NCdWIzUWdjSEpwYm5RZ1lXNWtJQ2h0YVc0dGQybGtkR2c2SURGd2VDaz0iIGxheWVyKGZvbyk=" scope((.donut-edge)); +@import "data:text/css;base64,QGltcG9ydCAiZGF0YTp0ZXh0L2NzcztiYXNlNjQsUUdsdGNHOXlkQ0FpWkdGMFlUcDBaWGgwTDJOemN6dGlZWE5sTmpRc1VVZHNkR05IT1hsa1EwSXhZMjEzYjBsdGFEQmtTRUUyVEhrNWMySXlUbWhpUjJoMll6TlJOazlFUVRSTlF6bDVXbGRSZFZrelRucEphV3RuWW0wNU1FbElRbmxoVnpVd1NVZEdkVnBEUVc5aVYyeDFURmhrY0ZwSVVtOVBhVUY0WTBobmNDSWdibTkwSUhOamNtVmxiaUJoYm1RZ0tHMXBiaTFvWldsbmFIUTZJREZ3ZUNrPSIgbGF5ZXIoZm9vKQ==" scope((.donut-edge)); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/004-unimplementable/002-url-queries/001/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/004-unimplementable/002-url-queries/001/style.expect.css index c089daa78f..ca504fb223 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/004-unimplementable/002-url-queries/001/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/004-unimplementable/002-url-queries/001/style.expect.css @@ -1,5 +1,3 @@ /* ./a.css */ -.box { - background-color: red; -} +@import "data:text/css;base64,LmJveCB7CgliYWNrZ3JvdW5kLWNvbG9yOiByZWQ7Cn0="; @import url("./a.css?background-color=green"); diff --git a/plugin-packs/postcss-bundler/test/css-import-tests/004-unimplementable/003-mixed-importables/001/style.expect.css b/plugin-packs/postcss-bundler/test/css-import-tests/004-unimplementable/003-mixed-importables/001/style.expect.css index e348bce57a..53ae960282 100644 --- a/plugin-packs/postcss-bundler/test/css-import-tests/004-unimplementable/003-mixed-importables/001/style.expect.css +++ b/plugin-packs/postcss-bundler/test/css-import-tests/004-unimplementable/003-mixed-importables/001/style.expect.css @@ -1,17 +1,3 @@ /* a.css */ - -.box { - animation: BOX; - animation-duration: 0s; - animation-fill-mode: both; -} - -@keyframes BOX { - - 0%, - 100% { - background-color: red; - } -} - +@import "data:text/css;base64,CgouYm94IHsKCWFuaW1hdGlvbjogQk9YOwoJYW5pbWF0aW9uLWR1cmF0aW9uOiAwczsKCWFuaW1hdGlvbi1maWxsLW1vZGU6IGJvdGg7Cn0KCkBrZXlmcmFtZXMgQk9YIHsKCgkwJSwKCTEwMCUgewoJCWJhY2tncm91bmQtY29sb3I6IHJlZDsKCX0KfQ=="; @import url("http://localhost:8080/b.css"); diff --git a/plugin-packs/postcss-bundler/test/relative-before-external.css b/plugin-packs/postcss-bundler/test/relative-before-external.css new file mode 100644 index 0000000000..4c3baf7d68 --- /dev/null +++ b/plugin-packs/postcss-bundler/test/relative-before-external.css @@ -0,0 +1,2 @@ +@import "imports/basic.css"; +@import "https://localhost:8080/does-not-exist.css"; diff --git a/plugin-packs/postcss-bundler/test/relative-before-external.expect.css b/plugin-packs/postcss-bundler/test/relative-before-external.expect.css new file mode 100644 index 0000000000..930d48ece4 --- /dev/null +++ b/plugin-packs/postcss-bundler/test/relative-before-external.expect.css @@ -0,0 +1,3 @@ +/* imports/basic.css */ +@import "data:text/css;base64,CgouZm9vIHsKCWJhY2tncm91bmQ6IHVybCgnLi4vaW1hZ2VzL2dyZWVuLnBuZycpOwp9CgouYmFyIHsKCWJhY2tncm91bmQ6IHVybChncmVlbi5wbmcpOwp9CgoudXJsLW1vZGlmaWVyIHsKCWJhY2tncm91bmQ6IHVybCgiLi4vaW1hZ2VzL2dyZWVuLnBuZyIgc29tZXRoaW5nKTsKfQoKLmZyYWdtZW50IHsKCWJhY2tncm91bmQ6IHVybCgiLi4vaW1hZ2VzL2dyZWVuLnBuZyNmb28iKTsKfQoKLnNlYXJjaCB7CgliYWNrZ3JvdW5kOiB1cmwoIi4uL2ltYWdlcy9ncmVlbi5wbmc/Zm9vPWJhciIpOwp9"; +@import "https://localhost:8080/does-not-exist.css";