release v2.0.0

Author: voorjaar

README.md

@@ -287,7 +287,7 @@ Interpretation mode will not modify your classes, it will only compile the origi
 
 * States attribute: such as `sm md lg xl xxl focus hover dark ...` after applid media rules then also will be merged into the `class` attribute. (Attributes like `sm:hover` are not available because they may be rarely used and slow down the parsing speed.)
 
-* Customize: Customize font or color, etc. (In development)
+* Customize: support `tailwind.config.js`.
 
 * For more details, please refer to [windicss](https://github.com/voorjaar/windicss).
 

example/svelte/rollup.config.js

@@ -40,10 +40,11 @@ export default {
 		svelte({
 			preprocess: {
 				markup: require('../../src/index').preprocess({
+					config: 'tailwind.config.js',
 					compile: false,
+					prefix: 'windi-',
 					globalPreflight: true,
 					globalUtility: true, 
-					prefix: 'windi-',
 				})
 			},
 			compilerOptions: {

example/svelte/tailwind.config.js

@@ -0,0 +1,32 @@
+// tailwind.config.js
+const colors = require('windicss/colors')
+
+module.exports = {
+  theme: {
+    screens: {
+      sm: '480px',
+      md: '768px',
+      lg: '976px',
+      xl: '1440px',
+    },
+    colors: {
+      gray: colors.coolGray,
+      blue: colors.lightBlue,
+      red: colors.rose,
+      pink: colors.fuchsia,
+    },
+    fontFamily: {
+      sans: ['Graphik', 'sans-serif'],
+      serif: ['Merriweather', 'serif'],
+    },
+    extend: {
+      spacing: {
+        '128': '32rem',
+        '144': '36rem',
+      },
+      borderRadius: {
+        '4xl': '2rem',
+      }
+    }
+  }
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-windicss-preprocess",
-  "version": "1.0.9",
+  "version": "2.0.0",
   "description": "A Svelte Preprocessor to compile tailwindcss at build time based on windicss compiler.",
   "main": "src/index.js",
   "types": "src/index.d.ts",
@@ -24,7 +24,7 @@
   "dependencies": {
     "magic-string": "^0.25.7",
     "svelte": "^3.31.2",
-    "windicss": "1.2.2"
+    "windicss": "^2.0.6"
   },
   "devDependencies": {
     "@types/node": "^14.14.14",

package.json

@@ -1,12 +1,9 @@
 import MagicString from 'magic-string';
-import { variants } from 'windicss/src/processor/variants';
-
 import { walk, parse } from 'svelte/compiler';
-import { StyleSheet } from 'windicss/src/utils/style';
-import { compile, interpret, preflight } from 'windicss/src';
-import { CSSParser } from 'windicss/src/utils/css';
-import { optimizeBuild } from 'windicss/src/utils/algorithm';
-
+import { StyleSheet } from 'windicss/utils/style';
+import { Processor } from 'windicss/lib';
+import { CSSParser } from 'windicss/utils/parser';
+import type { Config } from 'windicss/types/interfaces';
 import type { TemplateNode } from 'svelte/types/compiler/interfaces'
 import type { Preprocessor } from 'svelte/types/compiler/preprocess';
 
@@ -17,21 +14,27 @@ interface ChildNode {
   name?:string;
 }
 
-const mode = process.env.NODE_ENV;
-const dev = mode === 'development';
-const variantKeys = [...Object.keys(variants), 'xxl'];
+const DEV = process.env.NODE_ENV === 'development';
 
+let PROCESSOR:Processor;
+let VARIANTS:string[] = [];
 let IGNORED_CLASSES:string[] = [];
 let STYLESHEETS:StyleSheet[] = [];
 let DIRECTIVES:StyleSheet[] = [];
 let FILES:(string|undefined)[] = [];
 
 let TAGNAMES:{[key:string]:string|undefined} = {};
-let OPTIONS = {
+let OPTIONS:{
+  config?: Config | string,
+  compile?: boolean,
+  prefix?: string,
+  globalPreflight?: boolean,
+  globalUtility?: boolean,
+} = {
   compile: true,
-  globalPreflight: true,
-  globalUtility: true, 
   prefix: 'windi-',
+  globalPreflight: true,
+  globalUtility: true,
 };
 
 function combineStyleList(stylesheets:StyleSheet[]) {
@@ -49,14 +52,14 @@ function globalStyleSheet(styleSheet:StyleSheet) {
 }
 
 function compilation(classNames:string) {
-  const utility = compile(classNames, OPTIONS.prefix, false);
+  const utility = PROCESSOR.compile(classNames, OPTIONS.prefix, false);
   IGNORED_CLASSES = [...IGNORED_CLASSES, ...utility.ignored];
   STYLESHEETS.push(OPTIONS.globalUtility?globalStyleSheet(utility.styleSheet):utility.styleSheet);
   return utility.className ? [utility.className, ...utility.ignored].join(' ') : utility.ignored.join(' '); // return new className
 }
 
 function interpretation(classNames:string) {
-  const utility = interpret(classNames);
+  const utility = PROCESSOR.interpret(classNames);
   IGNORED_CLASSES = [...IGNORED_CLASSES, ...utility.ignored];
   let styleSheet = utility.styleSheet;
   STYLESHEETS.push(OPTIONS.globalUtility?globalStyleSheet(styleSheet):styleSheet);
@@ -85,7 +88,7 @@ const _preprocess:Preprocessor = ({content, filename}) => {
   if (style) {
     // handle tailwind directives ...
     style = style.replace(/<\/?style[^>]*>/g, '');
-    STYLESHEETS.push(new CSSParser(style).parse(undefined, true));
+    STYLESHEETS.push(new CSSParser(style, PROCESSOR).parse(undefined));
     content = content.replace(styleRegex, '');
   }
   const parsed = parse(content);
@@ -107,7 +110,7 @@ const _preprocess:Preprocessor = ({content, filename}) => {
             classStart = i.start;
             classes = [...classes, ...i.value.map(({data}:ChildNode)=>data)];
             code.overwrite(i.start, i.end, '');
-          } else if (variantKeys.includes(i.name)) {
+          } else if (VARIANTS.includes(i.name)) {
             // handle variant properties
             classStart = i.start;
             classes = [...classes, ...i.value.map(({data}:ChildNode)=>addVariant(data, i.name === 'xxl' ? '2xl' : i.name))];
@@ -127,15 +130,15 @@ const _preprocess:Preprocessor = ({content, filename}) => {
 
       if (node.type === 'Class') {
         // handle class directive
-        const utility = interpret(node.name);
+        const utility = PROCESSOR.interpret(node.name);
         IGNORED_CLASSES = [...IGNORED_CLASSES, ...utility.ignored];
         DIRECTIVES.push(utility.styleSheet);
         // make sure directives add after all classes.
       }
 
       if (node.type==="ConditionalExpression") {
         // handle inline conditional expression
-        const utility = interpret(`${getReduceValue(node, 'consequent')} ${getReduceValue(node, 'alternate')}`);
+        const utility = PROCESSOR.interpret(`${getReduceValue(node, 'consequent')} ${getReduceValue(node, 'alternate')}`);
         IGNORED_CLASSES = [...IGNORED_CLASSES, ...utility.ignored];
         DIRECTIVES.push(utility.styleSheet);
       }
@@ -151,13 +154,12 @@ const _preprocess:Preprocessor = ({content, filename}) => {
   };
 
   // preflights might lost when refresh
-  const preflights = preflight(dev?Object.keys(TAGNAMES):updatedTags, FILES.length === 0 || FILES.indexOf(filename) === 0); // only enable global styles for first file
+  const preflights = PROCESSOR.preflight(DEV?Object.keys(TAGNAMES):updatedTags, FILES.length === 0 || FILES.indexOf(filename) === 0); // only enable global styles for first file
 
-  const outputCSS = optimizeBuild(
-                      (OPTIONS.globalPreflight? globalStyleSheet(preflights) : preflights)
+  const outputCSS = (OPTIONS.globalPreflight? globalStyleSheet(preflights) : preflights)
                       .extend(combineStyleList(STYLESHEETS))
                       .extend(combineStyleList(DIRECTIVES))
-                    );
+                      .build();
 
   code.trimEnd().append(`\n\n<style>\n${outputCSS}</style>`);
 
@@ -170,7 +172,9 @@ const _preprocess:Preprocessor = ({content, filename}) => {
   return {code: code.toString()};
 }
 
-export function preprocess(options={}) {
+export function preprocess(options: typeof OPTIONS = {}) {
   OPTIONS = {...OPTIONS, ...options}; // change global settings here;
+  PROCESSOR = new Processor(OPTIONS.config);
+  VARIANTS = [...Object.keys(PROCESSOR.resolveVariants()), 'xxl'];
   return _preprocess;
 }