Draft: 127 rc remove emotion and move to css

.eslintrc.cjs

@@ -6,15 +6,16 @@ module.exports = {
   extends: [
     'plugin:react/recommended',
     'standard-with-typescript',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
+    'plugin:css-modules/recommended'
   ],
   overrides: [],
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
     project: './tsconfig.json'
   },
-  plugins: ['react', 'prettier'],
+  plugins: ['react', 'prettier', 'css-modules'],
   rules: {
     '@typescript-eslint/ban-ts-comment': [
       'error',

.gitignore

@@ -3,6 +3,7 @@ coverage
 build
 node_modules
 stats.json
+styled-system
 # Cruft
 .DS_Store
 npm-debug.log

client/main.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { Calendar, CalendarProvider, DatePicker } from '../src'
 import { createRoot } from 'react-dom/client'
 import './style.css'
+import '../src/style/index.css'
 import TimePicker from '../src/packages/TimePicker'
 const container = document.getElementById('root')
 const root = createRoot(container as HTMLElement)

package.json

@@ -14,7 +14,8 @@
     "watch": "rollup -c rollup.config.js -w",
     "lint:fix": "eslint --fix src",
     "format": "prettier src --write",
-    "prepare": "husky install"
+    "panda:codegen": "panda codegen",
+    "prepare": "husky install && panda codegen"
   },
   "repository": {
     "type": "git",
@@ -38,6 +39,7 @@
     "@babel/preset-typescript": "^7.21.0",
     "@commitlint/cli": "^17.6.1",
     "@commitlint/config-conventional": "^17.6.1",
+    "@pandacss/dev": "^0.23.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
@@ -55,10 +57,12 @@
     "@typescript-eslint/parser": "^5.51.0",
     "@vitejs/plugin-react": "^3.1.0",
     "babel-jest": "^29.4.3",
+    "cssnano": "^6.0.2",
     "cypress": "^12.10.0",
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard-with-typescript": "^34.0.0",
+    "eslint-plugin-css-modules": "^2.12.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-prettier": "^5.0.1",
@@ -67,11 +71,16 @@
     "husky": "^8.0.3",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
+    "postcss": "^8.4.32",
+    "postcss-nested": "^6.0.1",
+    "postcss-nesting": "^12.0.2",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^3.15.0",
     "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
     "typescript": "*",

panda.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: [
+    './src/components/**/*.{js,jsx,ts,tsx}',
+    './client/**/*.{js,jsx,ts,tsx}'
+  ],
+
+  // Files to exclude
+  exclude: [],
+
+  // Useful for theme customization
+  theme: {
+    extend: {}
+  },
+
+  // The output directory for your css system
+  outdir: 'styled-system'
+})

postcss.config.js

@@ -0,0 +1,9 @@
+const nested = require('postcss-nested')
+const cssnano = require('cssnano')
+const simplevars = require('postcss-simple-vars')
+const pandacss = require('@pandacss/dev/postcss')
+
+module.exports = {
+  modules: true,
+  plugins: [simplevars(), nested(), cssnano(), pandacss()]
+}

rollup.config.js

@@ -3,6 +3,7 @@ import resolve from '@rollup/plugin-node-resolve'
 import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import terser from '@rollup/plugin-terser'
+import postcss from 'rollup-plugin-postcss'
 
 export default {
   input: './src/index.tsx',
@@ -33,6 +34,7 @@ export default {
       dedupe: ['dayjs']
     }),
     babel({ babelHelpers: 'bundled' }),
+    postcss(),
     commonjs(),
     terser()
   ],

src/components/CalendarItem/CalendarItem.module.css

@@ -0,0 +1,150 @@
+.CalendarItemClass {
+    position: relative;
+    outline: none;
+    background-color: transparent;
+    display: flex;
+    font-family: inherit;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid transparent;
+    user-select: none;
+    color: var(--zmn-gray-600);
+
+    &:hover,
+    &:focus {
+        border-color: var(--zmn-gray-50);
+    }
+    &:active {
+        background-color: var(--zmn-primary-50);
+        border-color: transparent;
+        color: var(--zmn-gray-0);
+    }
+    &[data-selected='true'] {
+        background-color: var(--zmn-primary-50);
+        border-color: transparent;
+        color: var(--zmn-gray-0);
+    }
+    &[data-disabled='true'] {
+        border-color: transparent;
+    }
+    &[data-disabled='true'] .cl-text {
+        opacity: 0.5;
+    }
+    &:not([data-range='true']) {
+        transition: all 0.1s linear;
+    }
+    &:not([data-selected='true'])&[data-weekend='true'] {
+        color: #ff4d4d;
+    }
+    &:not([data-disabled='true']) {
+        cursor: pointer;
+    }
+    &[data-in-range='true'] {
+        background-color: var(--zmn-primary-90);
+        border-color: transparent;
+    }
+    &[data-start-range='true'] {
+        background-color:  var(--zmn-primary-40);
+        color: var(--zmn-gray-0);
+        border-color: transparent;
+    }
+    &[data-end-range='true'] {
+        background-color: var(--zmn-primary-40);
+        color: var(--zmn-gray-0);
+        border-color: transparent;
+    }
+    &[data-in-range='true']:before,
+    &[data-end-range='true']:before {
+      content: ' ';
+      display: block;
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      top: -1px;
+      background-color: var(--zmn-primary-90);
+      z-index: -1;
+    }
+    &[data-in-range='true']:nth-of-type(1):before,
+    &[data-start-range='true']:before {
+        display: none;
+    }
+}
+
+.CalendarItemClassRoundThin {
+    border-radius: var(--zmn-round-calendarItem-thin);
+    &[data-start-range='true'] {
+        border-radius: var(--zmn-round-calendarItem-thin);
+    }
+    &[data-end-range='true'] {
+        border-radius: var(--zmn-round-calendarItem-thin);
+    }
+    &:not([data-range='true']) {
+        border-radius: var(--zmn-round-calendarItem-thin);
+    }
+}
+
+.CalendarItemClassRoundX1  {
+    border-radius: var(--zmn-round-calendarItem-x1);
+    &[data-start-range='true'] {
+        border-radius: var(--zmn-round-calendarItem-x1);
+    }
+    &[data-end-range='true'] {
+        border-radius: var(--zmn-round-calendarItem-x1);
+    }
+    &:not([data-range='true']) {
+        border-radius: var(--zmn-round-calendarItem-x1);
+    }
+}
+
+.CalendarItemClassRoundX2  {
+    border-radius: var(--zmn-round-calendarItem-x2);
+    &[data-start-range='true'] {
+        border-radius: var(--zmn-round-calendarItem-x2);
+    }
+    &[data-end-range='true'] {
+        border-radius: var(--zmn-round-calendarItem-x2);
+    }
+    &:not([data-range='true']) {
+        border-radius: var(--zmn-round-calendarItem-x2);
+    }
+}
+.CalendarItemClassRoundX3  {
+    border-radius: var(--zmn-round-calendarItem-x3);
+    &[data-start-range='true'] {
+        border-radius: var(--zmn-round-calendarItem-x3);
+    }
+    &[data-end-range='true'] {
+        border-radius: var(--zmn-round-calendarItem-x3);
+    }
+    &:not([data-range='true']) {
+        border-radius: var(--zmn-round-calendarItem-x3);
+    }
+}
+
+.CalendarItemClassRoundX4  {
+    border-radius: var(--zmn-round-calendarItem-x4);
+    &[data-start-range='true'] {
+        border-radius: var(--zmn-round-calendarItem-x4);
+    }
+    &[data-end-range='true'] {
+        border-radius: var(--zmn-round-calendarItem-x4);
+    }
+    &:not([data-range='true']) {
+        border-radius: var(--zmn-round-calendarItem-x4);
+    }
+}
+
+.CalendarItemClassRtl {
+    &[data-in-range='true']:before,
+    &[data-end-range='true']:before {
+        left: 20px;
+        right: unset;
+    }
+}
+.CalendarItemClassLtr {
+    &[data-in-range='true']:before,
+    &[data-end-range='true']:before {
+        right: 20px;
+        left: unset;
+    }
+}