@plumeria/core 0.2.4 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 zss-in-js contributer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plumeria/core",
-  "version": "0.2.4",
-  "description": "CSS-in-JS with Near Zero-runtime and Semantics library",
+  "version": "0.3.0",
+  "description": "Near Zero-runtime CSS-in-JS for efficient design systems.",
   "keywords": [
     "react",
     "css",
@@ -14,12 +14,18 @@
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "bin": {
-    "css": "./bin/css.mjs"
-  },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@plumeria/collection": "^0.1.2",
-    "@plumeria/compiler": "^0.1.1",
     "zss-engine": "^0.2.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc && cp -r src/styles dist",
+    "test": "jest --config ../../jest.config.js"
   }
-}
+}

package/readme.md

@@ -12,18 +12,18 @@ npm install --save @plumeria/core
 
 ### css.create()
 
-Styles are defined as a map of CSS object using `css.create()`. In the example below, there are 2 different CSS class. The names "box" and "text" are arbitrary names given to the class name.
+Styles are defined as a map of CSS rules using css.create(). In the example below, there are 2 different CSS rules. The names "box" and "text" are arbitrary names given to the rules.
 
 ```tsx
-import { css } from "@plumeria/core";
+import { css } from '@plumeria/core';
 
 const styles = css.create({
   box: {
-    width: "100%",
-    color: "rgb(60,60,60)",
+    width: '100%',
+    color: 'rgb(60,60,60)',
   },
   text: {
-    color: "yellow",
+    color: 'yellow',
   },
 });
 ```
@@ -33,22 +33,20 @@ Pseudo and media queries can be wrapped in property style definitions:
 ```ts
 const styles = css.create({
   box: {
-    [css.media.max("width: 900px")]: {
-      width: "100%",
-      color: "rgb(60,60,60)",
+    [css.media.max('width: 900px')]: {
+      width: '100%',
+      color: 'rgb(60,60,60)',
     },
   },
   text: {
     [css.pseudo.hover]: {
-      color: "yellow",
+      color: 'yellow',
       opacity: 0.9,
     },
   },
 });
 ```
 
-The compiler extracts the CSS rules, replacing the rules in the source code with the compiled CSS.
-
 ### css.global()
 
 This API lets you define global CSS.
@@ -65,6 +63,8 @@ css.global({
 });
 ```
 
+The compiler extracts the CSS rules, replacing the rules in the source code with the compiled CSS.
+
 ### cx
 
 Merges strings such as class names and pseudos.
@@ -73,7 +73,7 @@ Merges strings such as class names and pseudos.
 const styles = css.create({
   text: {
     [cx(css.pseudo.hover, css.pseudo.after)]: {
-      color: "yellow",
+      color: 'yellow',
       opacity: 0.9,
     },
   },
@@ -97,7 +97,7 @@ const fade = css.keyframes({
 const styles = css.create({
   box: {
     animationName: fade,
-    animationDuration: "1s",
+    animationDuration: '1s',
   },
 });
 ```
@@ -109,16 +109,16 @@ A default compile to :root, and the rest as a string compile to data-theme, You
 
 ```ts
 const colors = css.defineThemeVars({
-  normal: "white",
+  normal: 'white',
   text_primary: {
-    default: "rgb(60,60,60)",
-    light: "black",
-    dark: "white",
-    [css.media.max("width: 700px")]: "gray",
+    default: 'rgb(60,60,60)',
+    light: 'black',
+    dark: 'white',
+    [css.media.max('width: 700px')]: 'gray',
   },
   bg_primary: {
-    light: "white",
-    dark: "black",
+    light: 'white',
+    dark: 'black',
   },
 });
 ```
@@ -129,8 +129,8 @@ Mixes #000 or #FFF into the color.
 The first argument takes the color and the second argument takes the same value as opacity (string % or number).
 
 ```ts
-css.colors.darken("skyblue", 0.12);
-css.colors.darken("skyblue", "12%");
+css.colors.darken('skyblue', 0.12);
+css.colors.darken('skyblue', '12%');
 ```
 
 ## Linter
@@ -143,15 +143,15 @@ Type safety relies on this eslint-plugin. It includes 397 properties, excluding
 Plumeria complies with Semantic HTML, which means that it uses one style for each class name.
 
 ```tsx
-import { css } from "@plumeria/core";
+import { css } from '@plumeria/core';
 
 const styles = css.create({
   box: {
-    width: "100%",
-    color: "rgb(60,60,60)",
+    width: '100%',
+    color: 'rgb(60,60,60)',
   },
   text: {
-    color: "yellow",
+    color: 'yellow',
   },
 });
 ```

package/bin/css.mjs

@@ -1,44 +0,0 @@
-#!/usr/bin/env node
-
-import { execSync } from 'child_process';
-import path from 'path';
-import { styleText } from 'util';
-import fs from 'fs';
-
-const checkMark = styleText('greenBright', '✓');
-
-try {
-  const isPnpm = fs.existsSync(path.join(process.cwd(), 'node_modules/.pnpm'));
-
-  const typecheck = process.argv.includes('--type-check');
-  if (typecheck)
-    execSync('npx tsc --noEmit --incremental false', {
-      stdio: 'inherit',
-      cwd: process.cwd(),
-    });
-
-  const plumeriaPath = isPnpm ? findPnpmPlumeriaPath() : path.join(process.cwd(), 'node_modules/@plumeria');
-
-  const argv = process.argv.includes('--log') ? ' --log' : '';
-  execSync('npx tsx compiler/src/index.ts' + argv, {
-    stdio: 'inherit',
-    cwd: plumeriaPath,
-  });
-
-  const completed = typecheck ? 'Type-check completed' : '';
-  console.log(` ${checkMark} Compiled... ${completed}`);
-} catch (error) {
-  console.error('Compilation failed:', error.message);
-  process.exit(1);
-}
-
-function findPnpmPlumeriaPath() {
-  const pnpmPath = path.join(process.cwd(), 'node_modules/.pnpm');
-  const plumeriaDir = fs.readdirSync(pnpmPath).find(dir => dir.startsWith('@plumeria+core@'));
-
-  if (!plumeriaDir) {
-    throw new Error('Could not find @plumeria package in pnpm directory');
-  }
-
-  return path.join(pnpmPath, plumeriaDir, 'node_modules/@plumeria');
-}