Bug/issue 763 refine import rule handling (#999)

* setting up test cases for additional import rule examples

* support non relative @import url rule

* support arbitrary @ rules

* @supports and single declaration handling

* test for more @ rules

* update related specs

packages/cli/src/plugins/resource/plugin-standard-css.js

@@ -28,6 +28,8 @@ function bundleCss(body, url) {
           const importContents = fs.readFileSync(path.resolve(path.dirname(url), value), 'utf-8');
 
           optimizedCss += bundleCss(importContents, url);
+        } else {
+          optimizedCss += `@import url('${value}');`;
         }
       } else if (type === 'Atrule' && name !== 'import') {
         optimizedCss += `@${name} `;
@@ -58,6 +60,8 @@ function bundleCss(body, url) {
         optimizedCss += `${name}(`;
       } else if (type === 'MediaFeature') {
         optimizedCss += ` (${name}:`;
+      } else if (type === 'Parentheses') {
+        optimizedCss += '(';
       } else if (type === 'PseudoElementSelector') {
         optimizedCss += `::${name}`;
       } else if (type === 'Block') {
@@ -124,19 +128,20 @@ function bundleCss(body, url) {
         }
       }
     },
-    leave: function(node, item) {
+    leave: function(node, item) { // eslint-disable-line complexity
       switch (node.type) {
 
         case 'Atrule':
-          if (node.name !== 'import') {
-            optimizedCss += '}';
+          if (!node.block && node.name !== 'import') {
+            optimizedCss += ';';
           }
           break;
-        case 'Rule':
+        case 'Block':
           optimizedCss += '}';
           break;
         case 'Function':
         case 'MediaFeature':
+        case 'Parentheses':
           optimizedCss += ')';
           break;
         case 'PseudoClassSelector':
@@ -160,7 +165,10 @@ function bundleCss(body, url) {
             optimizedCss += '!important';
           }
 
-          optimizedCss += ';';
+          if (item.next || (item.prev && !item.next)) {
+            optimizedCss += ';';
+          }
+
           break;
         case 'Selector':
           if (item.next) {

packages/cli/test/cases/build.config.optimization-default/fixtures/expected.css

@@ -1,43 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root,:host{--primary-color:#16f;--secondary-color:#ff7;}
 
 @font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:local('Source Sans Pro Regular'),local('SourceSansPro-Regular'),url('/assets/fonts/source-sans-pro-v13-latin-regular.woff2')format('woff2'),url('/assets/fonts/source-sans-pro-v13-latin-regular.woff')format('woff'),url('/assets/fonts/source-sans-pro-v13-latin-regular.ttf')format('truetype');}
 
+@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
+
 *{margin:0;padding:0;font-family:'Comic Sans',sans-serif;}
 
-body{background-color:green;}
+body{background-color:green}
 
 h1,h2{color:var(--primary-color);border:0.5px solid #dddde1;}
 
-#foo,.bar{color:var(--secondary-color);}
+#foo,.bar{color:var(--secondary-color)}
 
-div>p{display:none;}
+div>p{display:none}
 
-a[title]{color:purple;}
+a[title]{color:purple}
 
-@media screen and (max-width:992px){body{background-color:blue;}}
+@media screen and (max-width:992px){body{background-color:blue}}
 
 p::first-line{color:blue;width:100%!important;}
 
 pre[class*='language-']{color:#ccc;background:none;}
 
-dd:only-of-type{background-color:bisque;}
+dd:only-of-type{background-color:bisque}
 
-:not(pre)>code[class*='language-']{background:#2d2d2d;}
+:not(pre)>code[class*='language-']{background:#2d2d2d}
 
 li:nth-child(-n+3){border:2px solid orange;margin-bottom:1px;}
 
-li:nth-child(even){background-color:lightyellow;}
+li:nth-child(even){background-color:lightyellow}
 
 li:nth-last-child(5n){border:2px solid orange;margin-top:1px;}
 
-dd:nth-last-of-type(odd){border:2px solid orange;}
+dd:nth-last-of-type(odd){border:2px solid orange}
+
+p:nth-of-type(2n+1){color:red}
+
+*:lang(en-US){outline:2px solid deeppink}
+
+p~ul{font-weight:bold}
+
+a[href*='greenwood'],a[href$='.pdf']{color:orange}
 
-p:nth-of-type(2n+1){color:red;}
+[title~=flower],a[href^='https'],[lang|=en]{text-decoration:underline}
 
-*:lang(en-US){outline:2px solid deeppink;}
+@keyframes slidein{from{transform:translateX(0%)}to{transform:translateX(100%)}}
 
-p~ul{font-weight:bold;}
+@supports (display:flex){.flex-container>*{text-shadow:0px 0px 2px blue;float:none;}.flex-container{display:flex}}
 
-a[href*='greenwood'],a[href$='.pdf']{color:orange;}
+@page {size:8.5in 9in;margin-top:4in;}
 
-[title~=flower],a[href^='https'],[lang|=en]{text-decoration:underline;}
+@font-feature-values Font One{@styleset {nice-style:12}}

packages/cli/test/cases/build.config.optimization-default/src/styles/main.css

@@ -87,4 +87,36 @@ a[href*="greenwood"], a[href$=".pdf"] {
 
 [title~=flower], a[href^="https"], [lang|=en] {
   text-decoration: underline;
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@supports (display: flex) {
+  .flex-container > * {
+    text-shadow: 0px 0px 2px blue;
+    float: none;
+  }
+
+  .flex-container {
+    display: flex;
+  }
+}
+
+@page {
+  size: 8.5in 9in;
+  margin-top: 4in;
+}
+
+@font-feature-values Font One {
+  @styleset {
+    nice-style: 12;
+  }
 }

packages/cli/test/cases/build.config.optimization-default/src/styles/theme.css

@@ -1 +1,6 @@
-@import url('../system/variables.css');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url('../system/variables.css');
+@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

packages/cli/test/cases/build.config.optimization-inline/build.config-optimization-inline.spec.js

@@ -144,7 +144,7 @@ describe('Build Greenwood With: ', function() {
         it('should contain the expected CSS content inlined for page.css', function() {
           const styleTags = dom.window.document.querySelectorAll('head style');
 
-          expect(styleTags[1].textContent).to.contain('body{color:red;}');
+          expect(styleTags[1].textContent).to.contain('body{color:red}');
         });
       });
     });

packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js

@@ -153,7 +153,7 @@ describe('Build Greenwood With: ', function() {
 
       it('should have an inline <style> tag in the <head>', function() {
         const themeStyleTags = Array.from(dom.window.document.querySelectorAll('head style'))
-          .filter(style => style.textContent.trim() === '*{color:blue;}');
+          .filter(style => style.textContent.trim() === '*{color:blue}');
 
         expect(themeStyleTags.length).to.be.equal(1);
       });

packages/cli/test/cases/build.default.workspace-javascript-css/build.default.workspace-javascript-css.spec.js

@@ -145,13 +145,13 @@ describe('Build Greenwood With: ', function() {
       it('should have the expected output from the first inline <style> tag in index.html', async function() {
         const styleTags = dom.window.document.querySelectorAll('head > style');
 
-        expect(styleTags[0].textContent.replace(/\n/g, '').trim()).to.equal('p.output-style{color:green;}');
+        expect(styleTags[0].textContent.replace(/\n/g, '').trim()).to.equal('p.output-style{color:green}');
       });
 
       it('should have the expected output from the second inline <style> tag in index.html', async function() {
         const styleTags = dom.window.document.querySelectorAll('head > style');
 
-        expect(styleTags[1].textContent.replace(/\n/g, '').replace(/ /g, '')).to.equal('span.output-style{color:red;}');
+        expect(styleTags[1].textContent.replace(/\n/g, '').replace(/ /g, '')).to.equal('span.output-style{color:red}');
       });
 
       it('should have the color style for the output element', function() {

packages/cli/test/cases/build.default.workspace-template-page-and-app/build.default.workspace-template-page-and-app.spec.js

@@ -118,10 +118,10 @@ describe('Build Greenwood With: ', function() {
         });
 
         it('should merge page template <style> tags after app template <style> tags', function() {
-          expect(styleTags[0].textContent).to.equal('span{text-align:center;}');
-          expect(styleTags[1].textContent).to.equal('p{margin:0 auto;}');
-          expect(styleTags[2].textContent).to.equal('ol{list-style:none;}');
-          expect(styleTags[3].textContent).to.equal('h3{text-decoration:underline;}');
+          expect(styleTags[0].textContent).to.equal('span{text-align:center}');
+          expect(styleTags[1].textContent).to.equal('p{margin:0 auto}');
+          expect(styleTags[2].textContent).to.equal('ol{list-style:none}');
+          expect(styleTags[3].textContent).to.equal('h3{text-decoration:underline}');
         });
       });
 

packages/plugin-postcss/test/cases/default/default.spec.js

@@ -59,7 +59,7 @@ describe('Build Greenwood With: ', function() {
 
     describe('Page referencing external nested CSS file', function() {
       it('should output correctly processed nested CSS as non nested', function() {
-        const expectedCss = 'body{color:red;}h1{color:blue;}';
+        const expectedCss = 'body{color:red}h1{color:blue}';
         const cssFiles = glob.sync(path.join(this.context.publicDir, 'styles', '*.css'));
         const css = fs.readFileSync(cssFiles[0], 'utf-8');
 

packages/plugin-postcss/test/cases/options.extend-config/options.extend-config.spec.js

@@ -66,7 +66,7 @@ describe('Build Greenwood With: ', function() {
 
     describe('Page referencing external nested CSS file', function() {
       it('should output correctly processed nested CSS as non nested', function() {
-        const expectedCss = 'body{color:red;}body h1{color:blue;}';
+        const expectedCss = 'body{color:red}body h1{color:blue}';
         const cssFiles = glob.sync(path.join(this.context.publicDir, 'styles', '*.css'));
         const css = fs.readFileSync(cssFiles[0], 'utf-8');