wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

V2

Browse source
This commit is contained in:
Philipp Spiess 2024-08-07 18:28:36 +02:00
parent ea0f093c12
commit e3b943b4ae
7 changed files with 123 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

23
packages/@tailwindcss-vite/src/index.ts
View file

@ -77,8 +77,6 @@ export default function tailwindcss(): Plugin[] {
function generateCss(css: string, inputPath: string) {
let basePath = path.dirname(path.resolve(inputPath))
console.log({ css, inputPath })
return compile(css, {
loadPlugin: (pluginPath) => {
if (pluginPath[0] === '.') {
@ -199,9 +197,10 @@ export default function tailwindcss(): Plugin[] {
if (!postcssConfig || !postcssConfig?.plugins) {
config.css = config.css || {}
config.css.postcss = postcssConfig || {}
config.css.postcss.plugins = [fixRelativePathsPlugin() as any]
config.css.postcss.plugins = [fixRelativePathsPlugin() as any, fixSvelte() as any]
} else {
postcssConfig.plugins.push(fixRelativePathsPlugin() as any)
postcssConfig.plugins.push(fixSvelte() as any)
}
},
@ -301,9 +300,6 @@ function isTailwindCssFile(id: string, src: string) {
const isTailwind =
(extension === 'css' && src.includes('@tailwind')) ||
(extension === 'svelte' && id.endsWith('&lang.css'))
if (isTailwind) {
console.log({ id, src, ext: getExtension(id) })
}
return isTailwind
}
@ -330,3 +326,18 @@ function optimizeCss(
errorRecovery: true,
}).code.toString()
}
export function fixSvelte() {
return {
postcssPlugin: 'tailwindcss-postcss-fix-svelte',
OnceExit: (root: any) => {
const filename = root.source.input.file
if (!filename.endsWith('.svelte?svelte&type=style&lang.css')) {
return
}
const content = root.toString()
let compiled = compile(content.replace('@tailwind ', '@failwind '), {}).build([''])
root.replaceWith(compiled.replace('@failwind ', ' @tailwind '))
},
}
}

52
packages/internal-postcss-fix-relative-paths/src/index.ts
View file

@ -67,29 +67,35 @@ export default function fixRelativePathsPlugin(): Plugin {
AtRule: {
content: fixRelativePath,
plugin: fixRelativePath,
apply: function (atRule: AtRule, { postcss }: { postcss: any }) {
if (touched.has(atRule)) {
return
}
if (atRule.params[0] === "'") {
return
}
atRule.params = `'${atRule.params}'`
touched.add(atRule)
// Convert atRule to a comment
// atRule.replaceWith(
// postcss.rule({
// selector: '& .CUSTOM-foo-base476',
// nodes: [],
// }),
// )
// atRule.before(postcss.comment({ text: '! custom' + atRule.toString() }))
// if (atRule.name === 'apply') {
// atRule.name = 'comment'
// atRule.params = 'tailwindcss-apply'
// return
// }
},
// theme: function (atRule: AtRule, { postcss }: { postcss: any }) {
// if (touched.has(atRule)) {
// return
// }
// }
// apply: function (atRule: AtRule, { postcss }: { postcss: any }) {
// if (touched.has(atRule)) {
// return
// }
// if(atRule.name)
// if (atRule.params[0] === "'") {
// return
// }
// atRule.params = `'${atRule.params}'`
// touched.add(atRule)
// // Convert atRule to a comment
// // atRule.replaceWith(
// // postcss.rule({
// // selector: '& .CUSTOM-foo-base476',
// // nodes: [],
// // }),
// // )
// // atRule.before(postcss.comment({ text: '! custom' + atRule.toString() }))
// // if (atRule.name === 'apply') {
// // atRule.name = 'comment'
// // atRule.params = 'tailwindcss-apply'
// // return
// // }
// },
},
}
}

1
packages/tailwindcss/src/index.ts
View file

@ -309,7 +309,6 @@ export function compile(
.slice(7 /* Ignore `@apply ` when parsing the selector */)
.trim()
console.log({ candidates })
if (candidates[0] === "'" || candidates[0] === '"') {
candidates = candidates.slice(1, -1)
}

1
playgrounds/vite/package.json
View file

@ -15,6 +15,7 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"svelte": "^4.2.18",
"svelte-preprocess": "^6.0.2",
"tailwindcss": "workspace:^"
},
"devDependencies": {

15
playgrounds/vite/src/App.svelte
View file

@ -2,17 +2,8 @@
let name = 'world'
</script>
<h1 class="foo any-hover:text-red-500">Hello {name}!</h1>
<h1 class="foo any-hover:text-red-500 hover:underline">Hello {name}!</h1>
<style lang="postcss">
@import 'tailwindcss';
.foo {
@apply underline;
}
@variant any-hover {
&:hover {
@slot;
}
}
<style>
@tailwind utilities;
</style>

25
playgrounds/vite/vite.config.ts
View file

@ -5,8 +5,31 @@ import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
svelte({
preprocess: [vitePreprocess()],
preprocess: [
// sveltePreprocess({
// aliases: [
// ['tailwindcss', 'tailwindcss'],
// ['tailwind', 'tailwindcss'],
// ['postcss', 'tailwindcss'],
// ],
// /** Add a custom language preprocessor */
// tailwindcss({ content, filename, attributes }) {
// let compiled = compile(content.replace('@tailwind ', '@failwind '), {}).build(
// Array.from(['']),
// )
// console.log({ compiled, attributes })
// return Promise.resolve({
// code: compiled.replace('@failwind ', '@tailwind '),
// map: '',
// attributes,
// })
// },
// }),
vitePreprocess(),
],
}),
tailwindcss(),
],
})
// @tailwindcss/svelte

49
pnpm-lock.yaml generated
View file

@ -280,6 +280,9 @@ importers:
svelte:
specifier: ^4.2.18
version: 4.2.18
svelte-preprocess:
specifier: ^6.0.2
version: 6.0.2(@babel/core@7.24.6)(postcss-load-config@6.0.1(postcss@8.4.38))(postcss@8.4.38)(svelte@4.2.18)(typescript@5.4.5)
tailwindcss:
specifier: workspace:^
version: link:../../packages/tailwindcss
@ -2722,6 +2725,43 @@ packages:
peerDependencies:
svelte: ^3.19.0 || ^4.0.0
svelte-preprocess@6.0.2:
resolution: {integrity: sha512-OvDTLfaOkkhjprbDKO0SOCkjNYuHy16dbD4SpqbIi6QiabOMHxRT4km5/dzbFFkmW1L0E2INF3MFltG2pgOyKQ==}
engines: {node: '>= 18.0.0'}
peerDependencies:
'@babel/core': ^7.10.2
coffeescript: ^2.5.1
less: ^3.11.3 || ^4.0.0
postcss: ^7 || ^8
postcss-load-config: '>=3'
pug: ^3.0.0
sass: ^1.26.8
stylus: '>=0.55'
sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
svelte: ^4.0.0 || ^5.0.0-next.100 || ^5.0.0
typescript: ^5.0.0
peerDependenciesMeta:
'@babel/core':
optional: true
coffeescript:
optional: true
less:
optional: true
postcss:
optional: true
postcss-load-config:
optional: true
pug:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
typescript:
optional: true
svelte@4.2.18:
resolution: {integrity: sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==}
engines: {node: '>=16'}
@ -5518,6 +5558,15 @@ snapshots:
dependencies:
svelte: 4.2.18
svelte-preprocess@6.0.2(@babel/core@7.24.6)(postcss-load-config@6.0.1(postcss@8.4.38))(postcss@8.4.38)(svelte@4.2.18)(typescript@5.4.5):
dependencies:
svelte: 4.2.18
optionalDependencies:
'@babel/core': 7.24.6
postcss: 8.4.38
postcss-load-config: 6.0.1(postcss@8.4.38)(yaml@2.4.2)
typescript: 5.4.5
svelte@4.2.18:
dependencies:
'@ampproject/remapping': 2.3.0