fix: built-in base styles not work without sira directives.

perf: update plugin addBase logic.
refactor: rename dist js dir to plugin.
chore: upgrade postcss deps.

packages/tailwind/package.json

@@ -25,11 +25,11 @@
     "ui",
     "modern"
   ],
-  "main": "dist/js/index.js",
-  "types": "dist/js/types/config.types.d.ts",
-  "typings": "dist/js/types/config.types.d.ts",
+  "main": "dist/plugin/index.js",
+  "types": "dist/plugin/types/config.types.d.ts",
+  "typings": "dist/plugin/types/config.types.d.ts",
   "files": [
-    "dist/js",
+    "dist/plugin",
     "dist/css",
     "LICENSE",
     "README.md"
@@ -45,23 +45,22 @@
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "create:paths": "npm run create:folders && npm run create:files",
-    "create:folders": "mkdirp  -p ./dist/css ./dist/js",
+    "create:folders": "mkdirp  -p ./dist/css ./dist/plugin",
     "create:files": "touch ./dist/css/styles.css && touch ./dist/css/base.css && touch ./dist/css/components.css && touch ./dist/css/utilities.css",
+    "create:paths": "npm run create:folders && npm run create:files",
     "js": "tsc -b",
     "js:minify": "node ./scripts/minify.js",
     "styles": "tailwindcss --postcss -i src/style/styles.css -o ./dist/css/styles.css",
     "base": "npx tailwindcss -c src/style/base/tailwind.config.js -i src/style/base/base.css -o ./dist/css/base.css",
-    "utilities": "npx tailwindcss -c src/style/utilities/tailwind.config.js -i src/style/utilities/utilities.css -o ./dist/css/utilities.css",
     "components": "tailwindcss --postcss -i src/style/components.css -o ./dist/css/components.css",
-    "build": "cross-env NODE_ENV=production npm run clean && npm run create:paths && npm run js && npm run js:minify && npm run styles -- --minify && npm run base -- --minify &&  npm run components -- --minify && npm run utilities -- --minify ",
+    "utilities": "npx tailwindcss -c src/style/utilities/tailwind.config.js -i src/style/utilities/utilities.css -o ./dist/css/utilities.css",
     "css": "npm run create:paths & npm run js & npm run styles",
     "plugin": "npm run create:paths & npm run js & npm run base & npm run components & npm run utilities",
     "dev": "npm run create:paths && npm run js & npm run styles & npm run base & npm run components & npm run utilities",
-    "npm:publish": "npm run build && git push --follow-tags origin main && npm publish"
+    "build": "cross-env NODE_ENV=production npm run clean && npm run create:paths && npm run js && npm run js:minify && npm run styles -- --minify && npm run base -- --minify &&  npm run components -- --minify && npm run utilities -- --minify "
   },
   "devDependencies": {
-    "@types/postcss-js": "4.0.0",
+    "@types/postcss-js": "4.0.1",
     "autoprefixer": "^10.4.14",
     "concurrently": "^8.2.0",
     "cross-env": "^7.0.3",
@@ -80,12 +79,13 @@
   },
   "dependencies": {
     "@riccox/colorify": "^0.2.2",
-    "postcss": "8.4.19",
-    "postcss-js": "4.0.0",
+    "postcss": "8.4.27",
+    "postcss-js": "4.0.1",
     "postcss-selector-parser": "^6.0.13",
     "tailwindcss": "^3.3.3"
   },
   "peerDependencies": {
-    "tailwindcss": "^3"
+    "tailwindcss": "^3",
+    "lodash": "^4.17.21"
   }
 }

packages/tailwind/scripts/minify.js

@@ -26,6 +26,6 @@ async function minifyFiles(filePaths) {
   );
 }
 
-const files = getAllFiles('./dist/js');
+const files = getAllFiles('./dist/plugin');
 
 minifyFiles(files).then((r) => r);

packages/tailwind/src/config/index.ts → packages/tailwind/src/plugin/index.ts

@@ -13,10 +13,10 @@ import { createTheme, excludeThemesByName } from './utils/theme';
 import _ from 'lodash';
 import { getSelectorsWithPrefix } from './utils/prefix';
 
-const basePath = path.resolve(__dirname, path.join('..', 'css'));
-const baseCSS = fs.readFileSync(path.join(basePath, 'base.css'), 'utf-8');
-const componentsCSS = fs.readFileSync(path.join(basePath, 'components.css'), 'utf-8');
-const utilitiesCSS = fs.readFileSync(path.join(basePath, 'utilities.css'), 'utf-8');
+const cssPath = path.resolve(__dirname, path.join('..', 'css'));
+const baseCSS = fs.readFileSync(path.join(cssPath, 'base.css'), 'utf-8');
+const componentsCSS = fs.readFileSync(path.join(cssPath, 'components.css'), 'utf-8');
+const utilitiesCSS = fs.readFileSync(path.join(cssPath, 'utilities.css'), 'utf-8');
 
 const config = plugin.withOptions<PluginConfig>(
   (options: PluginConfig) =>
@@ -26,12 +26,9 @@ const config = plugin.withOptions<PluginConfig>(
       const utilities = postcss.parse(utilitiesCSS);
 
       // objectify css styles
-      // @ts-ignore
-      const baseObj = postcssJs.objectify(base);
-      // @ts-ignore
-      const componentsObj = postcssJs.objectify(components);
-      // @ts-ignore
-      const utilitiesObj = postcssJs.objectify(utilities);
+      const baseCSSObj = postcssJs.objectify(base);
+      const componentsCSSObj = postcssJs.objectify(components);
+      const utilitiesCSSObj = postcssJs.objectify(utilities);
 
       // get sira-ui config
       const configValue: PluginConfig = { ...options } || {};
@@ -62,6 +59,7 @@ const config = plugin.withOptions<PluginConfig>(
         ],
       };
 
+      const baseRules = [baseCSSObj];
       // validate config
       if (isValidObject(siraConfig)) {
         // remove excluded themes
@@ -80,20 +78,20 @@ const config = plugin.withOptions<PluginConfig>(
               mergedTheme = _.merge(lightTheme, theme);
             }
 
-            addBase([
+            baseRules.push(
               // inject some basic depended css variables
-              ...createTheme(mergedTheme),
-            ]);
+              createTheme(mergedTheme)
+            );
           });
         }
       }
 
       // add all style to tailwindcss
-      addBase(baseObj);
+      addBase(baseRules);
       // apply prefix, must apply a string even empty like '' for normal build
-      const componentsPrefixed = getSelectorsWithPrefix(configValue.prefix ?? '', componentsObj);
+      const componentsPrefixed = getSelectorsWithPrefix(configValue.prefix ?? '', componentsCSSObj);
       addComponents(componentsPrefixed);
-      addUtilities(utilitiesObj);
+      addUtilities(utilitiesCSSObj);
     },
   (options: PluginConfig) => {
     const customColorNames: string[] = [];

packages/tailwind/src/config/utils/prefix.ts → packages/tailwind/src/plugin/utils/prefix.ts

@@ -1,5 +1,6 @@
 import postcss, { Declaration, Root, Rule } from 'postcss';
 import selectorParser from 'postcss-selector-parser';
+const postcssJs = require('postcss-js');
 
 const addPrefix = (prefix: string) => {
   return (css: Root) => {
@@ -21,20 +22,11 @@ interface CSSObject {
 
 export const getSelectorsWithPrefix = (prefix: string, cssObject: CSSObject): CSSObject => {
   const prefixWithoutSpace = prefix.replace(/\s/g, '');
-  let cssCode = '';
-  for (let key in cssObject) {
-    cssCode += `${key}{`;
-    // skip keyframe code
-    if (key.indexOf('keyframes') === -1) {
-      for (let prop in cssObject[key]) {
-        cssCode += `${prop}:${cssObject[key][prop]};`;
-      }
-    }
-    cssCode += `}`;
-  }
-  const prefixedCSS = postcss([addPrefix(prefixWithoutSpace)]).process(cssCode, {
-    from: undefined,
+
+  const prefixedCSS = postcss([addPrefix(prefixWithoutSpace)]).process(cssObject, {
+    parser: postcssJs,
   });
+
   const prefixedCSSObject: CSSObject = {};
   prefixedCSS.root.walkRules((rule: Rule) => {
     const selector = rule.selector;

packages/tailwind/src/style/base.css

@@ -1,2 +1,2 @@
 @import 'tailwindcss/base';
-@import './base/base.css';
+@import './base/preset.css';

packages/tailwind/src/style/base/base.css

@@ -1,104 +1,2 @@
 @import 'tailwindcss/base';
-
-html {
-  -webkit-tap-highlight-color: transparent;
-}
-
-html,
-body {
-  @apply z-0 m-0 p-0;
-  color: rgb(var(--sira-colors-bw-1000));
-  background-color: rgb(var(--sira-colors-bw-50));
-
-  /* default bw color */
-  --sira-color-100: var(--sira-colors-bw-100);
-  --sira-color-200: var(--sira-colors-bw-200);
-  --sira-color-300: var(--sira-colors-bw-300);
-  --sira-color-400: var(--sira-colors-bw-400);
-  --sira-color-500: var(--sira-colors-bw-500);
-  --sira-color-600: var(--sira-colors-bw-600);
-  --sira-color-700: var(--sira-colors-bw-700);
-  --sira-color-800: var(--sira-colors-bw-800);
-  --sira-color-900: var(--sira-colors-bw-900);
-  --sira-color-1000: var(--sira-colors-bw-1000);
-  --sira-color-1100: var(--sira-colors-bw-1100);
-  --sira-color-100-contrast: var(--sira-colors-bw-100-contrast);
-  --sira-color-200-contrast: var(--sira-colors-bw-200-contrast);
-  --sira-color-300-contrast: var(--sira-colors-bw-300-contrast);
-  --sira-color-400-contrast: var(--sira-colors-bw-400-contrast);
-  --sira-color-500-contrast: var(--sira-colors-bw-500-contrast);
-  --sira-color-600-contrast: var(--sira-colors-bw-600-contrast);
-  --sira-color-700-contrast: var(--sira-colors-bw-700-contrast);
-  --sira-color-800-contrast: var(--sira-colors-bw-800-contrast);
-  --sira-color-900-contrast: var(--sira-colors-bw-900-contrast);
-  --sira-color-1000-contrast: var(--sira-colors-bw-1000-contrast);
-  --sira-color-1100-contrast: var(--sira-colors-bw-1100-contrast);
-}
-
-/*************************** Scrollbar */
-/* Works on Firefox */
-*:hover {
-  scrollbar-color: rgb(var(--sira-colors-bw-600)) transparent;
-}
-
-/* Works on Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-  /* avoid div width shift from scrollbar */
-  width: 0.4rem;
-  height: 0.4rem;
-  background: transparent;
-}
-
-*::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-*:hover::-webkit-scrollbar-thumb,
-*::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(var(--sira-colors-bw-600));
-  border: 0.1rem solid transparent;
-  border-radius: 1.4rem;
-  -webkit-border-radius: 1.4rem;
-  -moz-border-radius: 1.4rem;
-  -ms-border-radius: 1.4rem;
-  -o-border-radius: 1.4rem;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: transparent;
-}
-
-*::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-
-kbd {
-  display: inline-flex;
-  font-weight: 600;
-  white-space: nowrap;
-  justify-content: center;
-  align-items: center;
-  border-radius: 0.375rem;
-  border-width: 1px;
-  height: fit-content;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-
-  --tw-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.1);
-  --tw-shadow-colored: 0px 1.5px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--sira-colors-bw-600), var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--sira-colors-bw-300), var(--tw-bg-opacity));
-}
-
-img {
-  @apply rounded-lg;
-}
+@import 'preset.css';

packages/tailwind/src/style/base/preset.css

@@ -0,0 +1,104 @@
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+
+html,
+body {
+  z-index: 0;
+  margin: 0;
+  padding: 0;
+  color: rgb(var(--sira-colors-bw-1000));
+  background-color: rgb(var(--sira-colors-bw-50));
+
+  /* default bw color */
+  --sira-color-100: var(--sira-colors-bw-100);
+  --sira-color-200: var(--sira-colors-bw-200);
+  --sira-color-300: var(--sira-colors-bw-300);
+  --sira-color-400: var(--sira-colors-bw-400);
+  --sira-color-500: var(--sira-colors-bw-500);
+  --sira-color-600: var(--sira-colors-bw-600);
+  --sira-color-700: var(--sira-colors-bw-700);
+  --sira-color-800: var(--sira-colors-bw-800);
+  --sira-color-900: var(--sira-colors-bw-900);
+  --sira-color-1000: var(--sira-colors-bw-1000);
+  --sira-color-1100: var(--sira-colors-bw-1100);
+  --sira-color-100-contrast: var(--sira-colors-bw-100-contrast);
+  --sira-color-200-contrast: var(--sira-colors-bw-200-contrast);
+  --sira-color-300-contrast: var(--sira-colors-bw-300-contrast);
+  --sira-color-400-contrast: var(--sira-colors-bw-400-contrast);
+  --sira-color-500-contrast: var(--sira-colors-bw-500-contrast);
+  --sira-color-600-contrast: var(--sira-colors-bw-600-contrast);
+  --sira-color-700-contrast: var(--sira-colors-bw-700-contrast);
+  --sira-color-800-contrast: var(--sira-colors-bw-800-contrast);
+  --sira-color-900-contrast: var(--sira-colors-bw-900-contrast);
+  --sira-color-1000-contrast: var(--sira-colors-bw-1000-contrast);
+  --sira-color-1100-contrast: var(--sira-colors-bw-1100-contrast);
+}
+
+/*************************** Scrollbar */
+/* Works on Firefox */
+*:hover {
+  scrollbar-color: rgb(var(--sira-colors-bw-600)) transparent;
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  /* avoid div width shift from scrollbar */
+  width: 0.4rem;
+  height: 0.4rem;
+  background: transparent;
+}
+
+*::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+*:hover::-webkit-scrollbar-thumb,
+*::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(var(--sira-colors-bw-600));
+  border: 0.1rem solid transparent;
+  border-radius: 1.4rem;
+  -webkit-border-radius: 1.4rem;
+  -moz-border-radius: 1.4rem;
+  -ms-border-radius: 1.4rem;
+  -o-border-radius: 1.4rem;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: transparent;
+}
+
+*::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+kbd {
+  display: inline-flex;
+  font-weight: 600;
+  white-space: nowrap;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  height: fit-content;
+
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+
+  --tw-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0px 1.5px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--sira-colors-bw-600), var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--sira-colors-bw-300), var(--tw-bg-opacity));
+}
+
+img {
+  border-radius: 0.5rem;
+}

packages/tailwind/tailwind.config.js

@@ -1,12 +1,8 @@
-const { safeList } = require('./dist/js/utils/safelist.js');
+const { safeList } = require('./dist/plugin/utils/safelist.js');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  safelist: safeList,
-  content: process.env.NODE_ENV === 'production' ? [{ raw: '' }] : ['../../apps/**/*.{html,js,ts,tsx,jsx}'],
-  darkMode: 'class',
-  theme: {
-    extend: {},
-  },
-  plugins: [require('./dist/js')],
+  safelist: process.env.NODE_ENV === 'production' ? safeList : [],
+  content: process.env.NODE_ENV === 'production' ? [{ raw: '' }] : ['../../apps/**/*.{html,js,ts,tsx,jsx,css}'],
+  plugins: [require('./dist/plugin')],
 };