Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(tailwind): update layout without altering formatting #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 16 commits into from
Closed

fix(tailwind): update layout without altering formatting #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
c1d64b7
fix(tailwind): update layout without altering formatting
benmccann Oct 9, 2024
d866d91
fix
benmccann Oct 9, 2024
904ecd0
better logic. still broken
benmccann Oct 9, 2024
4adf1b7
fix
benmccann Oct 9, 2024
ffee270
fix
benmccann Oct 9, 2024
39dbe05
refactor
benmccann Oct 9, 2024
6156452
fix
benmccann Oct 9, 2024
00a865a
cleanup import
benmccann Oct 9, 2024
c07f62a
format
benmccann Oct 9, 2024
2f5fd63
fix type
benmccann Oct 9, 2024
95d8a62
fix
benmccann Oct 9, 2024
0c8b07f
fix
benmccann Oct 9, 2024
a8624d2
set modern flag
benmccann Oct 9, 2024
1a79d9c
make it easier to call
benmccann Oct 9, 2024
8bf75fb
format
benmccann Oct 9, 2024
4e92d59
alphebetize
benmccann Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions packages/adders/tailwindcss/config/adder.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { options } from './options.ts';
import { defineAdderConfig } from '@svelte-cli/core';
import { array, common, exports, functions, imports, object } from '@svelte-cli/core/js';
import { addImports } from '@svelte-cli/core/css';
import { element } from '@svelte-cli/core/html';
import { svelteMagicAst } from '@svelte-cli/core/parsers';

export const adder = defineAdderConfig({
metadata: {
Expand Down Expand Up @@ -105,21 +105,20 @@ export const adder = defineAdderConfig({
},
{
name: () => 'src/App.svelte',
contentType: 'svelte',
content: ({ jsAst }) => {
imports.addEmpty(jsAst, './app.css');
content: ({ content }) => {
const { ast, source } = svelteMagicAst(content);
imports.addEmpty(ast, source, './app.css');
return source.toString();
},
condition: ({ kit }) => !kit
},
{
name: ({ kit }) => `${kit?.routesDirectory}/+layout.svelte`,
contentType: 'svelte',
content: ({ jsAst, htmlAst }) => {
imports.addEmpty(jsAst, '../app.css');
if (htmlAst.childNodes.length === 0) {
const slot = element('slot');
htmlAst.childNodes.push(slot);
}
content: ({ content }) => {
content ||= '<slot />';
const { ast, source } = svelteMagicAst(content);
imports.addEmpty(ast, source, '../app.css');
return source.toString();
Comment on lines +117 to +121
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how about this as an alternate approach? https://github.com/sveltejs/cli/pull/75/files#diff-225d2ebe1d2b9c148fe3d2d9cf3030b09ed48c73824c51ce3f7dbf8a02ea878eR122-R129

},
condition: ({ kit }) => Boolean(kit)
},
Expand Down
1 change: 1 addition & 0 deletions packages/ast-tooling/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"domhandler": "^5.0.3",
"domutils": "^3.1.0",
"htmlparser2": "^9.1.0",
"magic-string": "^0.30.11",
"postcss": "^8.4.38",
"recast": "^0.23.7",
"silver-fleece": "^1.1.0",
Expand Down
4 changes: 4 additions & 0 deletions packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@
"./js": {
"types": "./dist/tooling/js/index.d.ts",
"default": "./dist/js.js"
},
"./parsers": {
"types": "./dist/tooling/parsers.d.ts",
"default": "./dist/parsers.js"
}
},
"files": [
Expand Down
41 changes: 31 additions & 10 deletions packages/core/tooling/js/imports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,38 @@
import { type AST } from 'svelte/compiler';
import { Walker, type AstTypes } from '@svelte-cli/ast-tooling';
import MagicString from 'magic-string';
import { areNodesEqual } from './common.ts';
import { dedent } from '../../index.ts';

export function addEmpty(ast: AstTypes.Program, importFrom: string): void {
const expectedImportDeclaration: AstTypes.ImportDeclaration = {
type: 'ImportDeclaration',
source: {
type: 'Literal',
value: importFrom
},
specifiers: []
};
export function addEmpty(ast: AST.Root, contents: MagicString, importFrom: string): void {
const body = ast.instance?.content?.body || [];

addImportIfNecessary(ast, expectedImportDeclaration);
if (!body.length) {
contents.prepend(dedent`
<script>
import '${importFrom}';
</script>

`);
return;
}

// check if already imported
for (const statement of body) {
if (statement.type === 'ImportDeclaration' && statement.source.value === importFrom) {
return;
}
}

const first_statement = body[0];
if (!first_statement.range) {
throw new Error(`${JSON.stringify(first_statement)} is missing range information.}`);
}
const is_first_line_import = first_statement.type === 'ImportDeclaration';
contents.prependLeft(
first_statement.range[0],
`import '${importFrom}';` + (is_first_line_import ? '\n\t' : '\n\n\t')
);
Comment on lines +7 to +35
Copy link
Member

@AdrianGonz97 AdrianGonz97 Oct 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

one issue with this implementation is that it's not really focused on applying the import to JS modules. for instance, it's injecting the <script> tags when there's no body.
this would break if we were to run addEmpty to a JS file like:

name: () => 'foo.js',
content: ({ content }) => {
	const { ast, generateCode } = parseScript(content);
	const ms = new MagicString(content);
	imports.addEmpty(ast, ms, '../app.css');
	return ms.toString();
}

}

export function addDefault(ast: AstTypes.Program, importFrom: string, importAs: string): void {
Expand Down
8 changes: 8 additions & 0 deletions packages/core/tooling/parsers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import MagicString from 'magic-string';
import { type AST, parse } from 'svelte/compiler';

export function svelteMagicAst(content: string): { ast: AST.Root; source: MagicString } {
const ast = parse(content, { modern: true });
const source = new MagicString(content);
return { ast, source };
}
90 changes: 69 additions & 21 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ function getConfig(project) {
internal: `${projectRoot}/internal.ts`,
css: `${projectRoot}/tooling/css/index.ts`,
html: `${projectRoot}/tooling/html/index.ts`,
js: `${projectRoot}/tooling/js/index.ts`
js: `${projectRoot}/tooling/js/index.ts`,
parsers: `${projectRoot}/tooling/parsers.ts`
};
} else if (project === 'cli') {
inputs = [`${projectRoot}/index.ts`, `${projectRoot}/bin.ts`];
Expand Down
Loading