Coder Social home page Coder Social logo

shixuanhong / vite-plugin-css-export Goto Github PK

View Code? Open in Web Editor NEW
22.0 22.0 1.0 235 KB

A Vite plugin for sharing variables between Javascript and CSS (or Sass, Less, etc.)

License: MIT License

JavaScript 1.64% Vue 7.09% SCSS 6.20% HTML 1.54% TypeScript 78.24% CSS 1.22% Less 1.46% Sass 1.30% Stylus 1.31%
css vite vite-plugin vite-plugin-css-export

vite-plugin-css-export's People

Contributors

shixuanhong avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

fe-xl

vite-plugin-css-export's Issues

[New Feature] Custom css export matching resolution

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!! :)

Plugin has issues with Vite 3.1.X, parse errors

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.