123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
import { delay } from 'std/async/delay.ts'import { join } from 'std/path/mod.ts'import { assert, assertEquals } from 'std/testing/asserts.ts'import { stopEsbuild } from '../bundler/esbuild.ts'import { Application } from '../server/app.ts'import { computeHash } from '../server/helper.ts'import { ensureTextFile } from '../shared/fs.ts'import cssLoader from './css.ts'
Deno.test('plugin: css loader', async () => {  Deno.env.set('DENO_TESTING', 'true')  const dir = await Deno.makeTempDir({ prefix: 'aleph_plugin_testing' })  const app = new Application(dir, 'development')  await ensureTextFile(    join(dir, '/style/index.css'),    'h1 { font-size: 18px; }'  )  const loader = cssLoader()  const { code } = await loader.load!({ url: '/style/index.css', }, app)  assert(loader.type === 'loader')  assert(loader.test.test('/style/index.css'))  assert(loader.test.test('/style/index.pcss'))  assert(loader.test.test('/style/index.postcss'))  assert(!loader.test.test('/style/index.less'))  assert(!loader.test.test('/style/index.sass'))  assert(loader.acceptHMR)  assertEquals(code, [    'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',    'export const css = "h1 { font-size: 18px; }"',    'export default {}',    'applyCSS("/style/index.css", { css })',  ].join('\n'))})
Deno.test({  name: 'plugin: css loader in production mode',  fn: async () => {    Deno.env.set('DENO_TESTING', 'true')    const dir = await Deno.makeTempDir({ prefix: 'aleph_plugin_testing' })    const app = new Application(dir, 'production')    await ensureTextFile(      join(dir, '/style/index.css'),      'h1 { font-size: 18px; }'    )    const loader = cssLoader()    const { code } = await loader.load!({ url: '/style/index.css', }, app)    assertEquals(code, [      'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',      'export const css = "h1{font-size:18px}"',      'export default {}',      'applyCSS("/style/index.css", { css })',    ].join('\n'))
    stopEsbuild()    await delay(150) // wait esbuild stop  },  sanitizeResources: false,})

Deno.test('plugin: css loader with extract size option', async () => {  Deno.env.set('DENO_TESTING', 'true')  const dir = await Deno.makeTempDir({ prefix: 'aleph_plugin_testing' })  const app = new Application(dir, 'development')  app.config.css.extractSize = 10  await ensureTextFile(    join(dir, '/style/index.css'),    'h1 { font-size: 18px; }'  )  const loader = cssLoader()  const { code } = await loader.load!({ url: '/style/index.css', }, app)  assertEquals(code, [    'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',    `export const href = "/_aleph/style/index.${computeHash('h1 { font-size: 18px; }').slice(0, 8)}.css"`,    'export default {}',    'applyCSS("/style/index.css", { href })',  ].join('\n'))})

Deno.test('plugin: css loader for remote external', async () => {  Deno.env.set('DENO_TESTING', 'true')  const dir = await Deno.makeTempDir({ prefix: 'aleph_plugin_testing' })  const app = new Application(dir, 'development')  app.config.css.remoteExternal = true  const loader = cssLoader()  const { code } = await loader.load!({ url: 'https://esm.sh/tailwindcss/dist/tailwind.min.css', }, app)  assertEquals(code, [    'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',    'export const href = "https://esm.sh/tailwindcss/dist/tailwind.min.css"',    'export default {}',    'applyCSS("https://esm.sh/tailwindcss/dist/tailwind.min.css", { href })',  ].join('\n'))})
Deno.test('plugin: css loader for inline styles', async () => {  Deno.env.set('DENO_TESTING', 'true')  const dir = await Deno.makeTempDir({ prefix: 'aleph_plugin_testing' })  const app = new Application(dir, 'development')  const loader = cssLoader()  const { code, type } = await loader.load!({    url: '#inline-style-{}',    data: 'h1 { font-size: 18px; }'  }, app)  assertEquals(code, 'h1 { font-size: 18px; }')  assertEquals(type, 'css')})
Deno.test('plugin: css loader enables modules feature', async () => {  Deno.env.set('DENO_TESTING', 'true')  const dir = await Deno.makeTempDir({ prefix: 'aleph_plugin_testing' })  const app = new Application(dir, 'development')  app.config.css.modules = {    scopeBehaviour: 'local',    generateScopedName: '[name]_[local]'  }  await ensureTextFile(    join(dir, '/style/index.css'),    '.name { font-size: 18px; }'  )  const loader = cssLoader()  const { code } = await loader.load!({ url: '/style/index.css', }, app)  assertEquals(code, [    'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',    'export const css = ".index_name { font-size: 18px; }"',    'export default {"name":"index_name"}',    'applyCSS("/style/index.css", { css })',  ].join('\n'))})
Deno.test('plugin: css loader with postcss plugins', async () => {  Deno.env.set('DENO_TESTING', 'true')  const dir = await Deno.makeTempDir({ prefix: 'aleph_plugin_testing' })  const app = new Application(dir, 'development')  app.config.css.postcss = {    plugins: ['postcss-nested']  }  await ensureTextFile(    join(dir, '/style/index.css'),    '.foo { .bar { font-size: 100%; } }'  )  const loader = cssLoader()  const { code } = await loader.load!({ url: '/style/index.css' }, app)  assertEquals(code, [    'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',    'export const css = ".foo .bar { font-size: 100%; }"',    'export default {}',    'applyCSS("/style/index.css", { css })',  ].join('\n'))})