diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
index 2f7303da6..a6903b02c 100644
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/packages/@tailwindcss-vite/src/index.ts
@@ -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 '))
+ },
+ }
+}
diff --git a/packages/internal-postcss-fix-relative-paths/src/index.ts b/packages/internal-postcss-fix-relative-paths/src/index.ts
index 337ea2886..d16cb2214 100644
--- a/packages/internal-postcss-fix-relative-paths/src/index.ts
+++ b/packages/internal-postcss-fix-relative-paths/src/index.ts
@@ -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
+ // // }
+ // },
},
}
}
diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts
index 2971d41ad..28451437f 100644
--- a/packages/tailwindcss/src/index.ts
+++ b/packages/tailwindcss/src/index.ts
@@ -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)
}
diff --git a/playgrounds/vite/package.json b/playgrounds/vite/package.json
index f547f1ba8..10a3ae499 100644
--- a/playgrounds/vite/package.json
+++ b/playgrounds/vite/package.json
@@ -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": {
diff --git a/playgrounds/vite/src/App.svelte b/playgrounds/vite/src/App.svelte
index e6813eac5..40d883e00 100644
--- a/playgrounds/vite/src/App.svelte
+++ b/playgrounds/vite/src/App.svelte
@@ -2,17 +2,8 @@
let name = 'world'
-Hello {name}!
+Hello {name}!
-
diff --git a/playgrounds/vite/vite.config.ts b/playgrounds/vite/vite.config.ts
index 1aec6e03c..c2d25bd97 100644
--- a/playgrounds/vite/vite.config.ts
+++ b/playgrounds/vite/vite.config.ts
@@ -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
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f39878608..046dd8cca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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