@astrojs/compiler 0.2.14 → 0.2.16

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @astrojs/compiler
 
+## 0.2.16
+
+### Patch Changes
+
+- 9ad8da7: Allows a data-astro-raw attr to parse children as raw text
+- 61b77de: Bugfix: CSS and selector scoping
+
+## 0.2.15
+
+### Patch Changes
+
+- 8fbae5e: Bugfix: fix component detection bug in parser
+- 37b5b6e: Bugfix: wait to release processStyle() until after fn call
+
 ## 0.2.14
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/compiler",
   "type": "module",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "scripts": {
     "build": "tsc -p ."
   },

package/test/basic.test.mjs

@@ -1,20 +1,32 @@
 /* eslint-disable no-console */
 
 import { transform } from '@astrojs/compiler';
+import sass from 'sass';
 
-const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
+function transformSass(value) {
+  return new Promise((resolve, reject) => {
+    sass.render({ data: value }, (err, result) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve({ code: result.css.toString('utf8'), map: result.map });
+      return;
+    });
+  });
+}
 
 async function run() {
-  
-  let i = 0;
   const result = await transform(
     `---
 let value = 'world';
 ---
 
 <style lang="scss" define:vars={{ a: 0 }}>
+$color: red;
+
 div {
-  color: red;
+  color: $color;
 }
 </style>
 
@@ -23,8 +35,9 @@ div {
 <div>Ahhh</div>
 
 <style lang="scss">
+$color: green;
 div {
-  color: green;
+  color: $color;
 }
 </style>
 `,
@@ -32,34 +45,29 @@ div {
       sourcemap: true,
       // HOLY CRAP THIS ACTUALLY WORKS!
       preprocessStyle: async (value, attrs) => {
-        let x = i++;
         if (!attrs.lang) {
           return null;
         }
-        // console.log(`Starting to preprocess style ${x} as ${attrs.lang}`);
-        // await sleep(3000);
-        // console.log(`Finished preprocessing ${x}`);
-        return { code: value.replace('color', 'background') };
+        if (attrs.lang === 'scss') {
+          try {
+            return transformSass(value);
+          } catch (err) {
+            console.error(err);
+          }
+        }
+        return null;
       },
     }
   );
-  // console.log(result);
 
   // test
-  if (!result.code.includes('background:red')) {
-    throw new Error(`Styles didn’t transform as expected. Expected "background:red" to be present.`);
+  if (!result.code.includes('color:red')) {
+    throw new Error(`Styles didn’t transform as expected. Expected "color:red" to be present.`);
   }
 
-  if (!result.code.includes('background:green')) {
-    throw new Error(`Styles didn’t transform as expected. Expected "background:green" to be present.`);
+  if (!result.code.includes('color:green')) {
+    throw new Error(`Styles didn’t transform as expected. Expected "color:green" to be present.`);
   }
-
-  // const start = performance.now()
-  // const html = await compile(template);
-  // const end = performance.now()
-
-  // console.log('Compiled in ' + (start - end).toFixed(1) + 'ms');
-  // console.log(html);
 }
 
 await run();

package/test/output.test.mjs

@@ -1,10 +1,7 @@
 /* eslint-disable no-console */
 import { transform } from '@astrojs/compiler';
 
-const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
-
 async function run() {
-  let i = 0;
   const result = await transform(
     `<div xmlns:happy="https://example.com/schemas/happy">
     <img src="jolly.avif" happy:smile="sweet"/>
@@ -21,9 +18,12 @@ async function run() {
     }
   );
 
-  if(result.code[0] === '\x00') {
+  if (result.code[0] === '\x00') {
     throw new Error('Corrupt output');
   }
 }
 
-await run().catch(err => { console.error(err); process.exit(1); });
+await run().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/test/test.mjs

@@ -1,2 +1,2 @@
 import './basic.test.mjs';
-import './output.test.mjs';
+import './output.test.mjs';

package/test/visible.test.mjs

@@ -2,11 +2,7 @@
 
 import { transform } from '@astrojs/compiler';
 
-const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
-
 async function run() {
-  
-  let i = 0;
   const result = await transform(
     `---
     import ThemeToggleButton from './ThemeToggleButton.tsx';
@@ -33,7 +29,7 @@ async function run() {
   );
 
   // test
-  if(!result.code.includes(`{ modules: [{ module: $$module1, specifier: './ThemeToggleButton.tsx' }], hydratedComponents: [ThemeToggleButton], hoisted: [] }`)) {
+  if (!result.code.includes(`{ modules: [{ module: $$module1, specifier: './ThemeToggleButton.tsx' }], hydratedComponents: [ThemeToggleButton], hoisted: [] }`)) {
     throw new Error('Hydrated components not included');
   }
 }