astro/test/astro-styles-ssr.test.js

import { suite } from 'uvu';
import * as assert from 'uvu/assert';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';

const StylesSSR = suite('Styles SSR');

/** Basic CSS minification; removes some flakiness in testing CSS */
function cssMinify(css) {
  return css
    .trim() // remove whitespace
    .replace(/\n\s*/g, '') // collapse lines
    .replace(/\s*\{/g, '{') // collapse selectors
    .replace(/:\s*/g, ':') // collapse attributes
    .replace(/;}/g, '}'); // collapse block
}

setup(StylesSSR, './fixtures/astro-styles-ssr');

StylesSSR('Has <link> tags', async ({ runtime }) => {
  const MUST_HAVE_LINK_TAGS = [
    '/_astro/components/ReactCSS.css',
    '/_astro/components/ReactModules.module.css',
    '/_astro/components/SvelteScoped.svelte.css',
    '/_astro/components/VueCSS.vue.css',
    '/_astro/components/VueModules.vue.css',
    '/_astro/components/VueScoped.vue.css',
  ];

  const result = await runtime.load('/');
  const $ = doc(result.contents);

  for (const href of MUST_HAVE_LINK_TAGS) {
    const el = $(`link[href="${href}"]`);
    assert.equal(el.length, 1);
  }
});

StylesSSR('Has correct CSS classes', async ({ runtime }) => {
  // TODO: remove this (temporary CI patch)
  if (process.version.startsWith('v14.')) {
    return;
  }

  const result = await runtime.load('/');
  const $ = doc(result.contents);

  const MUST_HAVE_CLASSES = {
    '#react-css': 'react-title',
    '#react-modules': 'title', // ⚠️  this should be transformed
    '#vue-css': 'vue-title',
    '#vue-modules': 'title', // ⚠️  this should also be transformed
    '#vue-scoped': 'vue-title', // also has data-v-* property
    '#svelte-scoped': 'svelte-title', // also has additional class
  };

  for (const [selector, className] of Object.entries(MUST_HAVE_CLASSES)) {
    const el = $(selector);
    if (selector === '#react-modules' || selector === '#vue-modules') {
      // this will generate differently on Unix vs Windows. Here we simply test that it has transformed
      assert.match(el.attr('class'), new RegExp(`^_${className}_[A-Za-z0-9-_]+`)); // className should be transformed, surrounded by underscores and other stuff
    } else {
      // if this is not a CSS module, it should remain as expected
      assert.ok(el.attr('class').includes(className));
    }

    // add’l test: Vue Scoped styles should have data-v-* attribute
    if (selector === '#vue-scoped') {
      const { attribs } = el.get(0);
      const scopeId = Object.keys(attribs).find((k) => k.startsWith('data-v-'));
      assert.ok(scopeId);
    }

    // add’l test: Svelte should have another class
    if (selector === '#svelte-title') {
      assert.not.equal(el.attr('class'), className);
    }
  }
});

StylesSSR('CSS Module support in .astro', async ({ runtime }) => {
  const result = await runtime.load('/');
  const $ = doc(result.contents);

  let scopedClass;

  // test 1: <style> tag in <head> is transformed
  const css = cssMinify(
    $('style')
      .html()
      .replace(/\.astro-[A-Za-z0-9-]+/, (match) => {
        scopedClass = match; // get class hash from result
        return match;
      })
  );

  assert.match(css, `.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px}`);

  // test 2: element received .astro-XXXXXX class (this selector will succeed if transformed correctly)
  const wrapper = $(`.wrapper${scopedClass}`);
  assert.equal(wrapper.length, 1);
});

StylesSSR.run();
-												Add SSR Styles test (#35)


											
										
										
											2021-03-26 19:59:41 +00:00
+								import { suite } from 'uvu';
 								import * as assert from 'uvu/assert';
 								import { doc } from './test-utils.js';
-												Add Astro.fetchContent API (#91)


											
										
										
											2021-04-14 00:08:32 +00:00
+								import { setup } from './helpers.js';
-												Add SSR Styles test (#35)


											
										
										
											2021-03-26 19:59:41 +00:00
 								const StylesSSR = suite('Styles SSR');
-												Extract Astro styles to external stylesheets (#43)

* Extract Astro styles to external stylesheets

* Require relative URLs in Markdown layouts
											
										
										
											2021-03-31 19:04:18 +00:00
+								/** Basic CSS minification; removes some flakiness in testing CSS */
 								function cssMinify(css) {
 								  return css
 								    .trim() // remove whitespace
 								    .replace(/\n\s*/g, '') // collapse lines
 								    .replace(/\s*\{/g, '{') // collapse selectors
 								    .replace(/:\s*/g, ':') // collapse attributes
 								    .replace(/;}/g, '}'); // collapse block
 								}
-												Add Astro.fetchContent API (#91)


											
										
										
											2021-04-14 00:08:32 +00:00
+								setup(StylesSSR, './fixtures/astro-styles-ssr');
-												Add SSR Styles test (#35)


											
										
										
											2021-03-26 19:59:41 +00:00
-												Add Astro.fetchContent API (#91)


											
										
										
											2021-04-14 00:08:32 +00:00
+								StylesSSR('Has <link> tags', async ({ runtime }) => {
-												Get CSS Modules working in Vue (#53)


											
										
										
											2021-04-02 16:16:16 +00:00
+								  const MUST_HAVE_LINK_TAGS = [
 								    '/_astro/components/ReactCSS.css',
-												Update Snowpack, Add CSS Modules SSR (#116)

* Add CSS Modules SSR

* Update docs
											
										
										
											2021-04-20 21:06:33 +00:00
+								    '/_astro/components/ReactModules.module.css',
-												Get CSS Modules working in Vue (#53)


											
										
										
											2021-04-02 16:16:16 +00:00
+								    '/_astro/components/SvelteScoped.svelte.css',
 								    '/_astro/components/VueCSS.vue.css',
 								    '/_astro/components/VueModules.vue.css',
 								    '/_astro/components/VueScoped.vue.css',
 								  ];
-												Add SSR Styles test (#35)


											
										
										
											2021-03-26 19:59:41 +00:00
 								  const result = await runtime.load('/');
 								  const $ = doc(result.contents);
 								  for (const href of MUST_HAVE_LINK_TAGS) {
 								    const el = $(`link[href="${href}"]`);
 								    assert.equal(el.length, 1);
 								  }
 								});
-												Add Astro.fetchContent API (#91)


											
										
										
											2021-04-14 00:08:32 +00:00
+								StylesSSR('Has correct CSS classes', async ({ runtime }) => {
-												Update Snowpack, Add CSS Modules SSR (#116)

* Add CSS Modules SSR

* Update docs
											
										
										
											2021-04-20 21:06:33 +00:00
+								  // TODO: remove this (temporary CI patch)
 								  if (process.version.startsWith('v14.')) {
 								    return;
 								  }
-												Add SSR Styles test (#35)


											
										
										
											2021-03-26 19:59:41 +00:00
+								  const result = await runtime.load('/');
 								  const $ = doc(result.contents);
-												Get CSS Modules working in Vue (#53)


											
										
										
											2021-04-02 16:16:16 +00:00
+								  const MUST_HAVE_CLASSES = {
 								    '#react-css': 'react-title',
-												Update Snowpack, Add CSS Modules SSR (#116)

* Add CSS Modules SSR

* Update docs
											
										
										
											2021-04-20 21:06:33 +00:00
+								    '#react-modules': 'title', // ⚠️  this should be transformed
-												Get CSS Modules working in Vue (#53)


											
										
										
											2021-04-02 16:16:16 +00:00
+								    '#vue-css': 'vue-title',
-												Update Snowpack, Add CSS Modules SSR (#116)

* Add CSS Modules SSR

* Update docs
											
										
										
											2021-04-20 21:06:33 +00:00
+								    '#vue-modules': 'title', // ⚠️  this should also be transformed
-												Get CSS Modules working in Vue (#53)


											
										
										
											2021-04-02 16:16:16 +00:00
+								    '#vue-scoped': 'vue-title', // also has data-v-* property
 								    '#svelte-scoped': 'svelte-title', // also has additional class
 								  };
 								  for (const [selector, className] of Object.entries(MUST_HAVE_CLASSES)) {
 								    const el = $(selector);
-												Update Snowpack, Add CSS Modules SSR (#116)

* Add CSS Modules SSR

* Update docs
											
										
										
											2021-04-20 21:06:33 +00:00
+								    if (selector === '#react-modules' || selector === '#vue-modules') {
-												Add Windows Support (#93)

* Add Windows to test suite

* Try implicit URL
											
										
										
											2021-04-14 19:21:25 +00:00
+								      // this will generate differently on Unix vs Windows. Here we simply test that it has transformed
-												Update Snowpack, Add CSS Modules SSR (#116)

* Add CSS Modules SSR

* Update docs
											
										
										
											2021-04-20 21:06:33 +00:00
+								      assert.match(el.attr('class'), new RegExp(`^_${className}_[A-Za-z0-9-_]+`)); // className should be transformed, surrounded by underscores and other stuff
-												Add Windows Support (#93)

* Add Windows to test suite

* Try implicit URL
											
										
										
											2021-04-14 19:21:25 +00:00
+								    } else {
 								      // if this is not a CSS module, it should remain as expected
 								      assert.ok(el.attr('class').includes(className));
 								    }
-												Get CSS Modules working in Vue (#53)


											
										
										
											2021-04-02 16:16:16 +00:00
 								    // add’l test: Vue Scoped styles should have data-v-* attribute
 								    if (selector === '#vue-scoped') {
 								      const { attribs } = el.get(0);
 								      const scopeId = Object.keys(attribs).find((k) => k.startsWith('data-v-'));
 								      assert.ok(scopeId);
 								    }
 								    // add’l test: Svelte should have another class
 								    if (selector === '#svelte-title') {
 								      assert.not.equal(el.attr('class'), className);
 								    }
-												Add SSR Styles test (#35)


											
										
										
											2021-03-26 19:59:41 +00:00
+								  }
 								});
-												Add Astro.fetchContent API (#91)


											
										
										
											2021-04-14 00:08:32 +00:00
+								StylesSSR('CSS Module support in .astro', async ({ runtime }) => {
-												Convert CSS Modules to scoped styles (#38)

* Convert CSS Modules to scoped styles

* Update README

* Move class scoping into HTML walker

* Fix SSR styles test

* Fix mustache tags

* Update PostCSS plugin name

* Add JSDoc comment

* Update test
											
										
										
											2021-03-30 16:11:21 +00:00
+								  const result = await runtime.load('/');
 								  const $ = doc(result.contents);
 								  let scopedClass;
 								  // test 1: <style> tag in <head> is transformed
-												Extract Astro styles to external stylesheets (#43)

* Extract Astro styles to external stylesheets

* Require relative URLs in Markdown layouts
											
										
										
											2021-03-31 19:04:18 +00:00
+								  const css = cssMinify(
 								    $('style')
 								      .html()
 								      .replace(/\.astro-[A-Za-z0-9-]+/, (match) => {
 								        scopedClass = match; // get class hash from result
 								        return match;
 								      })
 								  );
-												Add Windows Support (#93)

* Add Windows to test suite

* Try implicit URL
											
										
										
											2021-04-14 19:21:25 +00:00
+								  assert.match(css, `.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px}`);
-												Convert CSS Modules to scoped styles (#38)

* Convert CSS Modules to scoped styles

* Update README

* Move class scoping into HTML walker

* Fix SSR styles test

* Fix mustache tags

* Update PostCSS plugin name

* Add JSDoc comment

* Update test
											
										
										
											2021-03-30 16:11:21 +00:00
 								  // test 2: element received .astro-XXXXXX class (this selector will succeed if transformed correctly)
 								  const wrapper = $(`.wrapper${scopedClass}`);
 								  assert.equal(wrapper.length, 1);
 								});
-												Add SSR Styles test (#35)


											
										
										
											2021-03-26 19:59:41 +00:00
+								StylesSSR.run();