Clear todos and remove css kebab handling (#8019)
This commit is contained in:
parent
a39ff7ed6b
commit
34cb200216
9 changed files with 45 additions and 55 deletions
29
.changeset/giant-plants-sip.md
Normal file
29
.changeset/giant-plants-sip.md
Normal file
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
'astro': major
|
||||
---
|
||||
|
||||
Remove backwards-compatible kebab-case transform for camelCase CSS variable names passed to the `style` attribute. If you were relying on the kebab-case transform in your styles, make sure to use the camelCase version to prevent missing styles. For example:
|
||||
|
||||
```astro
|
||||
---
|
||||
const myValue = "red"
|
||||
---
|
||||
|
||||
<!-- input -->
|
||||
<div style={{ "--myValue": myValue }}></div>
|
||||
|
||||
<!-- output (before) -->
|
||||
<div style="--my-value:var(--myValue);--myValue:red"></div>
|
||||
|
||||
<!-- output (after) -->
|
||||
<div style="--myValue:red"></div>
|
||||
```
|
||||
|
||||
```diff
|
||||
<style>
|
||||
div {
|
||||
- color: var(--my-value);
|
||||
+ color: var(--myValue);
|
||||
}
|
||||
</style>
|
||||
```
|
|
@ -1,5 +1,5 @@
|
|||
import { expect } from '@playwright/test';
|
||||
import { isWindows, testFactory } from './test-utils.js';
|
||||
import { testFactory } from './test-utils.js';
|
||||
|
||||
const test = testFactory({
|
||||
root: './fixtures/css/',
|
||||
|
@ -16,8 +16,6 @@ test.afterAll(async () => {
|
|||
});
|
||||
|
||||
test.describe('CSS Sourcemap HMR', () => {
|
||||
test.skip(isWindows, 'TODO: fix css hmr in windows');
|
||||
|
||||
test('removes Astro-injected CSS once Vite-injected CSS loads', async ({ page, astro }) => {
|
||||
const html = await astro.fetch('/').then((res) => res.text());
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { expect } from '@playwright/test';
|
||||
import { getColor, isWindows, testFactory } from './test-utils.js';
|
||||
import { getColor, testFactory } from './test-utils.js';
|
||||
|
||||
const test = testFactory({
|
||||
root: './fixtures/css/',
|
||||
|
@ -16,8 +16,6 @@ test.afterAll(async () => {
|
|||
});
|
||||
|
||||
test.describe('CSS HMR', () => {
|
||||
test.skip(isWindows, 'TODO: fix css hmr in windows');
|
||||
|
||||
test('edit CSS from @import', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/'));
|
||||
|
||||
|
|
|
@ -154,9 +154,7 @@ test.skip('Multiple frameworks', () => {
|
|||
await expect(count, 'initial count updated to 5').toHaveText('5');
|
||||
});
|
||||
|
||||
// TODO: re-enable this test when #3559 is fixed
|
||||
// https://github.com/withastro/astro/issues/3559
|
||||
test.skip('Vue component', async ({ astro, page }) => {
|
||||
test('Vue component', async ({ astro, page }) => {
|
||||
await page.goto(astro.resolveUrl('/'));
|
||||
|
||||
const count = page.locator('#vue-counter pre');
|
||||
|
@ -169,9 +167,7 @@ test.skip('Multiple frameworks', () => {
|
|||
await expect(count, 'initial count updated to 5').toHaveText('5');
|
||||
});
|
||||
|
||||
// TODO: track down a reliability issue in this test
|
||||
// It seems to lost connection to the vite server in CI
|
||||
test.skip('Svelte component', async ({ astro, page }) => {
|
||||
test('Svelte component', async ({ astro, page }) => {
|
||||
await page.goto(astro.resolveUrl('/'));
|
||||
|
||||
const count = page.locator('#svelte-counter pre');
|
||||
|
|
|
@ -216,12 +216,6 @@ export async function add(names: string[], { flags }: AddOptions) {
|
|||
await fs.writeFile(fileURLToPath(configURL), ASTRO_CONFIG_STUB, { encoding: 'utf-8' });
|
||||
}
|
||||
|
||||
// TODO: improve error handling for invalid configs
|
||||
if (configURL?.pathname.endsWith('package.json')) {
|
||||
throw new Error(
|
||||
`Unable to use "astro add" with package.json configuration. Try migrating to \`astro.config.mjs\` and try again.`
|
||||
);
|
||||
}
|
||||
let ast: t.File | null = null;
|
||||
try {
|
||||
ast = await parseAstroConfig(configURL);
|
||||
|
|
|
@ -189,7 +189,6 @@ export function emoji(char: string, fallback: string) {
|
|||
* through a script tag or a dynamic import as-is.
|
||||
*/
|
||||
// NOTE: `/@id/` should only be used when the id is fully resolved
|
||||
// TODO: Export a helper util from Vite
|
||||
export async function resolveIdToUrl(loader: ModuleLoader, id: string, root?: URL) {
|
||||
let resultId = await loader.resolveId(id, undefined);
|
||||
// Try resolve jsx to tsx
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { AstroError } from '../core/errors/errors.js';
|
||||
import { AstroJSX, jsx } from '../jsx-runtime/index.js';
|
||||
import { renderJSX } from '../runtime/server/jsx.js';
|
||||
|
||||
|
@ -22,7 +23,7 @@ export async function check(
|
|||
// if the exception is from an mdx component
|
||||
// throw an error
|
||||
if (Component[Symbol.for('mdx-component')]) {
|
||||
throw createFormattedError({
|
||||
throw new AstroError({
|
||||
message: error.message,
|
||||
title: error.name,
|
||||
hint: `This issue often occurs when your MDX component encounters runtime errors.`,
|
||||
|
@ -51,23 +52,6 @@ export async function renderToStaticMarkup(
|
|||
return { html };
|
||||
}
|
||||
|
||||
type FormatErrorOptions = {
|
||||
message: string;
|
||||
name: string;
|
||||
stack?: string;
|
||||
hint: string;
|
||||
title: string;
|
||||
};
|
||||
// TODO: Remove this function and use `AstroError` when we refactor it to be usable without error codes
|
||||
function createFormattedError({ message, name, stack, hint }: FormatErrorOptions) {
|
||||
const error = new Error(message);
|
||||
error.name = name;
|
||||
error.stack = stack;
|
||||
// @ts-expect-error - hint is not part of the Error interface but it will be picked up by the error overlay
|
||||
error.hint = hint;
|
||||
return error;
|
||||
}
|
||||
|
||||
export default {
|
||||
check,
|
||||
renderToStaticMarkup,
|
||||
|
|
|
@ -29,10 +29,6 @@ const toStyleString = (obj: Record<string, any>) =>
|
|||
Object.entries(obj)
|
||||
.map(([k, v]) => {
|
||||
if (k[0] !== '-' && k[1] !== '-') return `${kebab(k)}:${v}`;
|
||||
// TODO: Remove in v3! See #6264
|
||||
// We need to emit --kebab-case AND --camelCase for backwards-compat in v2,
|
||||
// but we should be able to remove this workaround in v3.
|
||||
if (kebab(k) !== k) return `${kebab(k)}:var(${k});${k}:${v}`;
|
||||
return `${k}:${v}`;
|
||||
})
|
||||
.join(';');
|
||||
|
|
|
@ -1,22 +1,18 @@
|
|||
/**
|
||||
* UNCOMMENT: add support for smarter "external" scripts in Rollup
|
||||
import { expect } from 'chai';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
|
||||
let fixture;
|
||||
describe('External file references', () => {
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ root: './fixtures/astro-external-files/' });
|
||||
await fixture.build();
|
||||
});
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ root: './fixtures/astro-external-files/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
// TODO: Vite error: fix external files
|
||||
describe('Externeal file references', () => {
|
||||
it('Build with externeal reference', async () => {
|
||||
let rss = await fixture.readFile('/index.html');
|
||||
expect(rss).to.be(''); // TODO: inline snapshot
|
||||
});
|
||||
it('Build with externeal reference', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
expect(html).to.include('<script src="/external-file.js"');
|
||||
});
|
||||
});
|
||||
*/
|
||||
|
||||
it.skip('is skipped', () => {});
|
||||
|
|
Loading…
Reference in a new issue