├── .editorconfig ├── .env ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode └── settings.json ├── README.md ├── agilecss.config.ts ├── index.html ├── package-lock.json ├── package.json ├── public └── vite.svg ├── src ├── App.css ├── App.tsx ├── assets │ └── react.svg ├── components │ └── Hello │ │ └── Hello.tsx ├── index.css ├── main.tsx ├── styles │ └── agile-css.css ├── types │ ├── env.d.ts │ ├── global.d.ts │ └── reset.d.ts └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.editorconfig: -------------------------------------------------------------------------------- 1 | # https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | insert_final_newline = true 10 | max_line_length = 80 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | max_line_length = 0 15 | trim_trailing_whitespace = false 16 | 17 | [COMMIT_EDITMSG] 18 | max_line_length = 0 19 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | VITE_TEST=AAA11 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Ignore artifacts: 2 | build 3 | coverage 4 | 5 | node_modules 6 | 7 | # Ignore all HTML files: 8 | *.html 9 | 10 | .github 11 | 12 | .next 13 | 14 | .swc 15 | 16 | next.config.js 17 | 18 | next-i18next.config.js 19 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app", 3 | "rules": { 4 | "react/react-in-jsx-scope": "off", 5 | "react/display-name": "off", 6 | "react/prop-types": "off", 7 | "react/jsx-key": "error", 8 | "no-console": 1, 9 | "no-unused-vars": "off", 10 | "@typescript-eslint/no-unused-vars": "error" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | !.vscode/extensions.json 17 | .idea 18 | .DS_Store 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore artifacts: 2 | build 3 | coverage 4 | 5 | node_modules 6 | 7 | # Ignore all HTML files: 8 | *.html 9 | 10 | .github 11 | 12 | .next 13 | 14 | .swc 15 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "tabWidth": 2, 4 | "printWidth": 100, 5 | "singleQuote": true, 6 | "jsxBracketSameLine": false, 7 | "endOfLine": "auto", 8 | "jsxSingleQuote": true, 9 | "trailingComma": "all", 10 | "arrowParens": "always" 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.tabSize": 2, 3 | "editor.rulers": [100], 4 | "editor.formatOnSave": true, 5 | "git.ignoreLimitWarning": true 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Atomic CSS with agile-css 2 | 3 | ## Package 4 | 5 | [agile-css](https://www.npmjs.com/package/agile-css) 6 | 7 | # Install 8 | 9 | ```bash 10 | npm install 11 | ``` 12 | 13 | # Run 14 | 15 | ```bash 16 | npm run dev 17 | ``` 18 | 19 | # Install Extentions to support auto complete class 20 | 21 | [Agile CSS Autocomplete](https://marketplace.visualstudio.com/items?itemName=AgileCssAutocomplete.agile-css-autocomplete) 22 | 23 | ## Watch file change at `src/styles/agile-css.css` 24 | 25 | ## Syntax 26 | 27 | ``` 28 | :|| "!">...@ 29 | 30 | Example: 31 | 32 | Class Name CSS 33 | ----------------------------------------------------------------------------------------- 34 | c:red -> .c\:red { color: red } 35 | bgc:blue! -> .bgc\:blue\! { background-color: blue !important } 36 | bd:1px_solid_yellow -> .bd\:1px_solid_yellow { border: 1px solid yellow } 37 | p:30px@md -> @media (min-width:992px) { .p\:30px\@md { padding: 30px } 38 | m:20px@+300px -> @media (max-width:300px) { .m\:20px\@\+300px { margin: 20px } } 39 | fz:20px|h -> .fz\:20px\|h:hover { font-size: 20px } 40 | cnt:(After_cnt)||af -> .cnt\:\(After_cnt\)\|\|af::after { content: 'After ctn' } 41 | cnt:(Before_cnt)|be -> .cnt\:\(Before_cnt\)\|be:before { content: 'Before ctn' } 42 | cnt:(Hover)|h||be -> .cnt\:\(Hover\)\|be:hover:before { content: 'Hover' } 43 | trf:scale(2) -> .trf/:scale\(2\) { transform: scale(2) } 44 | m:calc(20px_+_10px) -> .m\:calc\(20px_+_10px\) { margin: calc(20px + 10px) } 45 | ``` 46 | -------------------------------------------------------------------------------- /agilecss.config.ts: -------------------------------------------------------------------------------- 1 | import { pfs, rtl, pixelToRem, validator, defineConfig } from 'agile-css'; 2 | 3 | export default defineConfig({ 4 | input: ['./src/**/*.jsx', './src/**/*.js', './src/**/*.tsx'], 5 | output: './src/styles/agile-css.css', 6 | defaultCss: ` 7 | body { 8 | font-size: 14px; 9 | } 10 | `, 11 | validator, 12 | cache: true, 13 | plugins: [pixelToRem(62.5), rtl(), pfs()], 14 | breakpoints: { 15 | sm: '768px', 16 | md: '992px', 17 | lg: '1200px', 18 | }, 19 | custom: { 20 | 'color-primary': 'var(--color-primary)', 21 | 'color-secondary': 'var(--color-secondary)', 22 | 'color-tertiary': 'var(--color-tertiary)', 23 | 'color-quaternary': 'var(--color-quaternary)', 24 | }, 25 | }); 26 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-agile-css", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev-vite": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview", 10 | "start": "npm run build && vite preview", 11 | "lint": "eslint --ext .ts,.tsx src --color", 12 | "format": "prettier --write \"./src/**/*.{ts,tsx,json}\"", 13 | "prepare": "husky install", 14 | "analyze": "npm run lint && tsc && vite build --mode=analyze && source-map-explorer 'dist/assets/*.js'", 15 | "agile-css": "agile-css -w", 16 | "prebuild": "agile-css", 17 | "dev": "concurrently --kill-others \"npm run dev-vite\" \"npm run agile-css\"" 18 | }, 19 | "dependencies": { 20 | "react": "^18.2.0", 21 | "react-dom": "^18.2.0", 22 | "react-gh-corners": "^1.1.1" 23 | }, 24 | "devDependencies": { 25 | "@total-typescript/ts-reset": "^0.4.2", 26 | "@types/node": "^18.11.11", 27 | "@types/react": "^18.0.24", 28 | "@types/react-dom": "^18.0.8", 29 | "@typescript-eslint/eslint-plugin": "^5.48.1", 30 | "@typescript-eslint/parser": "^5.48.1", 31 | "@vitejs/plugin-react": "^2.2.0", 32 | "agile-css": "^2.1.12", 33 | "concurrently": "^8.0.1", 34 | "eslint": "^8.31.0", 35 | "eslint-config-react-app": "^7.0.1", 36 | "husky": "^8.0.0", 37 | "lint-staged": "^13.1.0", 38 | "prettier": "^2.8.2", 39 | "sass": "^1.57.1", 40 | "source-map-explorer": "^2.5.3", 41 | "typescript": "^4.6.4", 42 | "vite": "^3.2.3", 43 | "vite-plugin-checker": "^0.5.1", 44 | "vite-plugin-environment": "^1.1.3" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-unused-vars */ 2 | import { useState } from 'react'; 3 | import reactLogo from './assets/react.svg'; 4 | import './App.css'; 5 | import './styles/agile-css.css'; 6 | import Hello from '@/components/Hello/Hello'; 7 | import { GithubCorners } from 'react-gh-corners'; 8 | 9 | function App() { 10 | const [count, setCount] = useState(0); 11 | 12 | return ( 13 |
14 | {/* {process.env.VITE_TEST} */} 15 | 16 | {/* 24 |

Vite + React

25 |
26 | 27 |

28 | Edit src/App.tsx and save to test HMR 29 |

30 |
31 |

Click on the Vite and React logos to learn more

*/} 32 | 33 | 34 |
35 | ); 36 | } 37 | 38 | export default App; 39 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Hello/Hello.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Hello = () => { 4 | return ( 5 | <> 6 |

7 | Hello Agile Atomic Css 8 |

9 | 10 | ); 11 | }; 12 | 13 | export default Hello; 14 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | body { 28 | margin: 0; 29 | display: flex; 30 | place-items: center; 31 | min-width: 320px; 32 | min-height: 100vh; 33 | } 34 | 35 | h1 { 36 | font-size: 3.2em; 37 | line-height: 1.1; 38 | } 39 | 40 | button { 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(); 7 | -------------------------------------------------------------------------------- /src/styles/agile-css.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | font-size: 14px; 4 | } 5 | 6 | .c\:red { color: red } 7 | .c\:blue { color: blue } 8 | .c\:green\|h:hover { color: green } 9 | .cur\:pointer { cursor: pointer } 10 | .fz\:30px { font-size: 3rem } 11 | .trs\:all_300ms_ease { transition: all 300ms ease } -------------------------------------------------------------------------------- /src/types/env.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace NodeJS { 2 | export interface ProcessEnv { 3 | MAIN_SERVICE_BASE_URL: string; 4 | API_APP: string; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/types/global.d.ts: -------------------------------------------------------------------------------- 1 | declare global { 2 | interface Window { 3 | ENV: typeof process.env; 4 | } 5 | } 6 | export {}; 7 | -------------------------------------------------------------------------------- /src/types/reset.d.ts: -------------------------------------------------------------------------------- 1 | // Do not add any other lines of code to this file! 2 | import '@total-typescript/ts-reset'; 3 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare const process; 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx", 18 | "baseUrl": ".", 19 | "types": ["node"], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["src"], 25 | "references": [{ "path": "./tsconfig.node.json" }] 26 | } 27 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | import EnvironmentPlugin from 'vite-plugin-environment'; 4 | import checker from 'vite-plugin-checker'; 5 | import * as path from 'path'; 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig(({ mode }) => { 9 | const isDev = mode !== 'production'; 10 | const isAnalyze = mode === 'analyze'; 11 | 12 | return { 13 | plugins: [ 14 | react(), 15 | EnvironmentPlugin('all'), 16 | // resolve({ "react-codemirror2": ` 17 | // const UnControlled = {}; 18 | // export { 19 | // UnControlled, 20 | // }` 21 | // } 22 | checker({ 23 | typescript: true, 24 | }), 25 | ], 26 | optimizeDeps: { 27 | include: ['react'], 28 | }, 29 | css: { 30 | devSourcemap: isDev, 31 | }, 32 | build: { 33 | commonjsOptions: { 34 | include: [/node_modules/], 35 | }, 36 | sourcemap: isAnalyze, 37 | }, 38 | resolve: { 39 | alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }], 40 | }, 41 | esbuild: { 42 | sourcemap: isDev, 43 | }, 44 | server: { 45 | port: 3000, 46 | }, 47 | preview: { 48 | port: 3000, 49 | }, 50 | }; 51 | }); 52 | --------------------------------------------------------------------------------