Skip to content

Commit 18647aa

Browse files
dominikgdominikg
authored
fix: improve virtual css module path (fixes #14)
* improve handling of virtual css module paths (fixes #14)
1 parent 8d9ef96 commit 18647aa

File tree

29 files changed

+713
-338
lines changed

29 files changed

+713
-338
lines changed

‎.changeset/long-foxes-agree.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/vite-plugin-svelte': patch
3+
---
4+
5+
improve virtual css module path (fixes #14)

‎package.json

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,22 @@
2727
"release": "pnpm run build && pnpx changeset publish"
2828
},
2929
"devDependencies": {
30-
"@changesets/cli": "^2.14.1",
30+
"@changesets/cli": "^2.15.0",
3131
"@microsoft/api-extractor": "^7.13.2",
32-
"@types/fs-extra": "^9.0.8",
33-
"@types/jest": "^26.0.21",
34-
"@types/node": "^14.14.35",
32+
"@types/fs-extra": "^9.0.10",
33+
"@types/jest": "^26.0.22",
34+
"@types/node": "^14.14.37",
3535
"@types/semver": "^7.3.4",
36-
"@typescript-eslint/eslint-plugin": "^4.18.0",
37-
"@typescript-eslint/parser": "^4.18.0",
36+
"@typescript-eslint/eslint-plugin": "^4.20.0",
37+
"@typescript-eslint/parser": "^4.20.0",
3838
"chalk": "^4.1.0",
3939
"cross-env": "^7.0.3",
4040
"enquirer": "^2.3.6",
41-
"esbuild": "^0.9.5",
42-
"eslint": "^7.22.0",
41+
"esbuild": "~0.9.7",
42+
"eslint": "^7.23.0",
4343
"eslint-config-prettier": "^8.1.0",
4444
"eslint-plugin-html": "^6.1.2",
45-
"eslint-plugin-jest": "^24.3.2",
45+
"eslint-plugin-jest": "^24.3.3",
4646
"eslint-plugin-markdown": "^2.0.0",
4747
"eslint-plugin-node": "^11.1.0",
4848
"eslint-plugin-prettier": "^3.3.1",
@@ -58,21 +58,21 @@
5858
"node-fetch": "^2.6.1",
5959
"npm-check-updates": "^11.3.0",
6060
"npm-run-all": "^4.1.5",
61-
"playwright-core": "^1.9.2",
62-
"pnpm": "^5.18.7",
61+
"playwright-core": "^1.10.0",
62+
"pnpm": "^5.18.9",
6363
"prettier": "^2.2.1",
6464
"prettier-plugin-svelte": "^2.2.0",
6565
"rimraf": "^3.0.2",
66-
"semver": "^7.3.4",
66+
"semver": "^7.3.5",
6767
"sirv": "^1.0.11",
6868
"slash": "^3.0.0",
6969
"stylelint": "^13.12.0",
7070
"stylelint-config-prettier": "^8.0.2",
7171
"stylelint-config-recommended": "^4.0.0",
72-
"svelte": "^3.35.0",
72+
"svelte": "^3.37.0",
7373
"ts-jest": "^26.5.4",
7474
"typescript": "^4.2.3",
75-
"vite": "^2.1.2"
75+
"vite": "^2.1.5"
7676
},
7777
"husky": {
7878
"hooks": {

‎packages/playground/autoprefixer-browerslist/.browserslistrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
safari 12

‎packages/playground/autoprefixer-browerslist/.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules/
2+
/public/build/
3+
4+
.DS_Store

‎packages/playground/autoprefixer-browerslist/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# default svelte app template
2+
3+
Created with `npx degit sveltejs/template`
4+
5+
adapted to vite by moving index.html to root and replacing rollup config with vite
6+
7+
use pnpm
8+
9+
`pnpm dev` starts dev server
10+
`pnpm build` builds for production

‎packages/playground/autoprefixer-browerslist/__tests__/autoprefixer-browerslist.spec.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { isBuild, findAssetFile } from '../../testUtils';
2+
3+
test('should prefix position: sticky for code in source tree', async () => {
4+
const stickyStyle = isBuild
5+
? await getStyleFromDist('sticky')
6+
: await getStyleFromPage(page, 'sticky');
7+
expect(stickyStyle).toBe('position:-webkit-sticky;position:sticky');
8+
});
9+
10+
/* unfortunately this test fails. the dependency has a different absolute path and .browerslist is not picked up
11+
test('should prefix position: sticky for imported dependency', async () => {
12+
const stickyStyle = isBuild
13+
? await getStyleFromDist('sticky-dep')
14+
: await getStyleFromPage(page,'sticky-dep');
15+
expect(stickyStyle).toBe('position:-webkit-sticky;position:sticky')
16+
});
17+
*/
18+
19+
async function getStyleFromPage(page, cssClass: string) {
20+
const styleNodes = await page.$$('head style');
21+
const styles: string[] = await Promise.all(styleNodes.map((e) => e.textContent()));
22+
const css = styles.find((s) => s.includes(`.${cssClass}.`));
23+
return extractStyleContent(css, cssClass);
24+
}
25+
26+
async function getStyleFromDist(cssClass: string) {
27+
const css = await findAssetFile(/index.*\.css/);
28+
return extractStyleContent(css, cssClass);
29+
}
30+
31+
function extractStyleContent(css: string, cssClass: string) {
32+
const match = css.match(new RegExp(`\\.${cssClass}\\.[^\\{]*\\{([^\\}]*)\\}`));
33+
return match[1];
34+
}

‎packages/playground/autoprefixer-browerslist/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
7+
<title>Svelte app</title>
8+
9+
<script type="module" src="/src/main.js"></script>
10+
</head>
11+
12+
<body></body>
13+
</html>

‎packages/playground/autoprefixer-browerslist/package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "playground-autoprefixer-browserslist",
3+
"private": true,
4+
"version": "1.0.0",
5+
"scripts": {
6+
"build": "vite build",
7+
"dev": "vite"
8+
},
9+
"dependencies": {
10+
"playground-hmr-test-dependency": "workspace:*"
11+
},
12+
"devDependencies": {
13+
"@sveltejs/vite-plugin-svelte": "workspace:*",
14+
"autoprefixer": "^10.2.5",
15+
"postcss": "^8.2.9",
16+
"postcss-load-config": "^3.0.1",
17+
"svelte": "^3.37.0",
18+
"svelte-hmr": "^0.14.0",
19+
"svelte-preprocess": "^4.7.0",
20+
"vite": "^2.1.5"
21+
}
22+
}

‎packages/playground/autoprefixer-browerslist/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: [
3+
// expected to pick up on .browserslistrc:
4+
require('autoprefixer')()
5+
]
6+
};

‎packages/playground/autoprefixer-browerslist/src/App.svelte

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script>
2+
import Dependency from 'playground-hmr-test-dependency';
3+
</script>
4+
5+
<div class="sticky" id="#sticky">sticky-div</div>
6+
<Dependency />
7+
8+
<style>
9+
.sticky {
10+
position: sticky;
11+
}
12+
</style>

0 commit comments

Comments
 (0)