shixuanhong / vite-plugin-css-export Goto Github PK
View Code? Open in Web Editor NEWA Vite plugin for sharing variables between Javascript and CSS (or Sass, Less, etc.)
License: MIT License
A Vite plugin for sharing variables between Javascript and CSS (or Sass, Less, etc.)
License: MIT License
Hello!
Thank you so much for this plugin, it works great.
I was wondering if it would be possible to add a feature to put in custom boolean function to match a export
css file, rather than strictly enforcing the exportRE
regex.
https://github.com/shixuanhong/vite-plugin-css-export/blob/main/src/index.ts#L159 i.e., on the line here, replacing it with
if (isCSSRequest(id) && (customFunction ? customFunction(id) : exportRE?.test(id)))
I can put up a PR for this feature as well.
Thanks again!! :)
I'm using 1.0.3 of the vite-plugin-css-export, this works with all my scss files just great with Vite 3.0.X. However when upgrading to Vite 3.1.X I now get scss parse errors as shown below.
ERROR 3:23:52 PM [vite] Internal server error: Unexpected token (1:8) 15:23:52
Plugin: vite:css-post
File: XXX/test/src/themes/themes.scss?export
at Parser.pp$4.raise (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:30629:13)
at Parser.pp$9.unexpected (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:27930:8)
at Parser.pp$9.expect (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:27924:26)
at Parser.pp$5.parseExprList (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:30496:12)
at Parser.pp$5.parseExprAtom (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:29984:26)
at Parser.pp$5.parseExprSubscripts (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:29805:19)
at Parser.pp$5.parseMaybeUnary (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:29771:17)
at Parser.pp$5.parseExprOps (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:29698:19)
at Parser.pp$5.parseMaybeConditional (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:29681:19)
at Parser.pp$5.parseMaybeAssign (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:29648:19)
at Parser.pp$5.parseExpression (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:29611:19)
at Parser.pp$8.parseStatement (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:28120:45)
at Parser.pp$8.parseTopLevel (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:27987:21)
at Parser.parse (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:27759:15)
at Function.parse (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:27809:35)
at TransformContext.parse (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:40715:27)
at TransformContext.vitePostCodeHandler (XXX/node_modules/vite-plugin-css-export/dist/index.cjs:127:20)
at TransformContext.cssPostPlugin.transform (XXX/node_modules/vite-plugin-css-export/dist/index.cjs:160:38)
at async Object.transform (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:41031:30)
at async loadAndTransform (file://XXX/node_modules/vite/dist/node/chunks/dep-665b0112.js:37292:29)
Here is my vite.config
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { createHtmlPlugin } from 'vite-plugin-html';
import ViteCSSExportPlugin from 'vite-plugin-css-export';
import { imagetools } from 'vite-imagetools';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
createHtmlPlugin({
minify: true,
entry: '/src/index.tsx',
template: 'public/index.html'
}),
ViteCSSExportPlugin(),
imagetools()
],
css: {
// Adds Source Maps when viewing SCSS in dev mode
devSourcemap: true
},
build: {
// If enabled - the dist folder will contain map files, only good for sandbox
// sourcemap: 'inline'
},
server: {
// Uncomment when using ngrok. See this post: https://github.com/vitejs/vite/discussions/5399
// hmr: { clientPort: 443 },
port: 3000,
proxy: {
}
}
});
Any suggestions? Thank you for the great plugin!
I've been a regular user of this module for react projects. I'm switching to Svelte and Vite 5. During normal run it works great, however doing a vite build I get the following error message
โ 112 modules transformed.
[vite:css-post] Failed to convert JavaScript value `Object {"code":"","map":{"mappings":""},"moduleSideEffects":"no-treeshake"}` into rust type `String`
file: /home/joshh/redsky/redsky/redsky-quickstart-svelte/src/themes/colors.scss?export
transforming (113) src/app.scsserror during build:
Error: Failed to convert JavaScript value `Object {"code":"","map":{"mappings":""},"moduleSideEffects":"no-treeshake"}` into rust type `String`
at Object.parseAst [as parse] (file:///home/joshh/redsky/redsky/redsky-quickstart-svelte/node_modules/rollup/dist/es/shared/parseAst.js:2142:23)
at Object.vitePostCodeHandler (file:///home/joshh/redsky/redsky/redsky-quickstart-svelte/node_modules/vite-plugin-css-export/dist/index.mjs:121:20)
at cssPostPlugin.transform (file:///home/joshh/redsky/redsky/redsky-quickstart-svelte/node_modules/vite-plugin-css-export/dist/index.mjs:155:38)
error Command failed with exit code 1.
Any suggestions?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.