Introduce `<style global>` (#824)

* Adding support for multiple <style> blocks

* Adding support for `<style global>`

* scoping @keyframes should also be skipped for <style global>

* Adding test coverage for muliple style blocks, global blocks, and scoped keyframes

* docs: Updating docs for `<style global>` support

* Adding yarn changeset

* Punctuation fix in styling docs

* docs: Clarifying example use cases given in the docs

Co-authored-by: Tony Sullivan <tony.f.sullivan@gmail.com>

1 files changed, 1 insertions, 13 deletions

diff --git a/packages/astro-parser/src/parse/index.ts b/packages/astro-parser/src/parse/index.ts
index ef33bfaca..776d46e2b 100644
--- a/packages/astro-parser/src/parse/index.ts
+++ b/packages/astro-parser/src/parse/index.ts
@@ -226,18 +226,6 @@ export class Parser {
 export default function parse(template: string, options: ParserOptions = {}): Ast {
   const parser = new Parser(template, options);
 
-  // TODO we may want to allow multiple <style> tags —
-  // one scoped, one global. for now, only allow one
-  if (parser.css.length > 1) {
-    parser.error(
-      {
-        code: 'duplicate-style',
-        message: 'You can only have one <style> tag per Astro file',
-      },
-      parser.css[1].start
-    );
-  }
-
   // const instance_scripts = parser.js.filter((script) => script.context === 'default');
   // const module_scripts = parser.js.filter((script) => script.context === 'module');
   const astro_scripts = parser.js.filter((script) => script.context === 'setup');
@@ -264,7 +252,7 @@ export default function parse(template: string, options: ParserOptions = {}): As
 
   return {
     html: parser.html,
-    css: parser.css[0],
+    css: parser.css,
     // instance: instance_scripts[0],
     module: astro_scripts[0],
     meta: {