Merge pull request #11 from zengxiaoluan/master

Master

.npmignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -15,6 +15,21 @@ I want a css preprocessor which have some feature limited css, like:
 
 so will have enough performance to support runtime requirements. That is all.
 
+# Usage
+
+```node
+let { styledas } = require('styledas');
+
+let str = `.u{
+    color: black;
+    	&:hover {
+        color: red;
+    }
+}`;
+
+console.log(styledas(str)); // .u{color:black;}.u:hover{color:red;}
+```
+
 # Which feature support util now?
 
 You can check it under the test directory. It is still developing.

benchmark/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "benchmark",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {},
+  "devDependencies": {
+    "styledas": "^1.0.5",
+    "stylis": "^4.3.0"
+  }
+}

benchmark/with-stylis.js

@@ -0,0 +1,39 @@
+let { styledas } = require('styledas');
+let { compile, serialize, stringify } = require('stylis');
+
+let str = `.a{
+        // line comment
+        // color: red;
+        /**
+         * removes block comments and line comments,
+         * there's a fire in the house // there is
+         */
+        button /*
+          // what's
+          xxx
+          */
+        {color: blue;}
+        // hello
+        button /* 1 */
+        {
+          color: red; /* 2 */
+        }
+        /*! 1 */
+        color: red;
+        /*! 2 */
+        h1 {
+          /*! 1 */
+          color: red;
+          /*! 2 */
+          color: red;
+          /*! 3 */
+        }}
+      `;
+
+console.time('styledas');
+console.log(styledas(str));
+console.timeEnd('styledas');
+
+console.time('stylis');
+console.log(serialize(compile(str), stringify));
+console.timeEnd('stylis');

index.ts

@@ -1,6 +1,6 @@
-import { parser, stringify, styles } from './src/index';
+import { parser, stringify, styledas } from './src/index';
 
-export default styles;
+export default styledas;
 
 /*
 let str = `.user{

package.json

@@ -1,36 +1,36 @@
 {
-  "name": "styles",
-  "version": "1.0.0",
+  "name": "styledas",
+  "version": "1.0.5",
   "description": "A feature limited css preprocessor",
-  "main": "index.js",
+  "main": "./dist/styledas.js",
   "directories": {
     "test": "test"
   },
-  "dependencies": {
-    "vitest": "^0.34.3"
-  },
+  "dependencies": {},
   "devDependencies": {
     "prettier": "^3.0.3",
-    "vite": "^4.4.9"
+    "vite": "^4.4.9",
+    "vitest": "^0.34.3"
   },
   "scripts": {
     "test": "vitest",
     "prettier:c": "npx prettier -c .",
     "prettier:w": "npx prettier -w .",
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "pub": "npm run build && npm publish"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/zengxiaoluan/styles.git"
+    "url": "git+https://github.com/zengxiaoluan/styledas.git"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/zengxiaoluan/styles/issues"
+    "url": "https://github.com/zengxiaoluan/styledas/issues"
   },
-  "homepage": "https://github.com/zengxiaoluan/styles#readme",
+  "homepage": "https://github.com/zengxiaoluan/styledas#readme",
   "prettier": {
     "arrowParens": "always",
     "bracketSameLine": false,

src/index.ts

@@ -49,15 +49,14 @@ export function parser(str) {
   }
 
   function comment(commentType: '/' | '*') {
-    console.log(commentType, '---');
     while (true) {
       previous = c;
       c = next();
       if (c === void 0) break;
 
-      if (commentType === '/' && ['\n'].includes(c)) {
+      if (commentType === '/' && '\n' === c) {
         break;
-      } else if (commentType === '*' && previous === '*' && ['/'].includes(c)) {
+      } else if (commentType === '*' && previous === '*' && '/' === c) {
         break;
       }
     }
@@ -79,10 +78,12 @@ export function parser(str) {
 
         cur = node;
 
-        if (cur.parent && cur.parent !== dummy && characters.startsWith('.'))
+        if (characters.startsWith('&')) {
+          // like &:hover, don't append whiteSpace
+        } else if (cur.parent && cur.parent !== dummy)
           characters = ' ' + characters;
 
-        cur.selector = characters.replace('&', '');
+        cur.selector = characters.replace('&', '').trimEnd();
         stack.push(cur);
 
         characters = '';
@@ -97,7 +98,7 @@ export function parser(str) {
         break;
       }
       case '}': {
-        cur.content.push(characters);
+        cur.content.push(characters.trimEnd());
 
         characters = '';
 
@@ -157,7 +158,7 @@ export function stringify(node: Node, preSelector: string) {
   return css;
 }
 
-export function styles(str) {
+export function styledas(str) {
   let root = parser(str);
   return stringify(root, '');
 }

test/comment.test.js

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest';
-import { styles } from '../src/index';
+import { styledas } from '../src/index';
 
 let str = `.u{
     // a
@@ -19,10 +19,43 @@ let str2 = `.u{
     }*/
 }`;
 
+let str3 = `.a{
+        // line comment
+        // color: red;
+        /**
+         * removes block comments and line comments,
+         * there's a fire in the house // there is
+         */
+        button /*
+          // what's
+          xxx
+          */
+        {color: blue;}
+        // hello
+        button /* 1 */
+        {
+          color: red; /* 2 */
+        }
+        /*! 1 */
+        color: red;
+        /*! 2 */
+        h1 {
+          /*! 1 */
+          color: red;
+          /*! 2 */
+          color: red;
+          /*! 3 */
+        }}
+      `;
+
 export default str;
 
 test(str, () => {
-  expect(styles(str)).toBe('.u{color:black;}.u:hover{color:red;}');
+  expect(styledas(str)).toBe('.u{color:black;}.u:hover{color:red;}');
+
+  expect(styledas(str2)).toBe('.u{}');
 
-  expect(styles(str2)).toBe('.u{}');
+  expect(styledas(str3)).toBe(
+    '.a{color:red;}.a button{color:blue;}.a button{color:red;}.a h1{color:red;color:red;}',
+  );
 });

test/hierarchy.test.js

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest';
-import { styles } from '../src/index';
+import { styledas } from '../src/index';
 
 let str = `.user{
     color: black;
@@ -11,5 +11,5 @@ let str = `.user{
 export default str;
 
 test(str, () => {
-  expect(styles(str)).toBe('.user{color:black;}.user .h{color:red;}');
+  expect(styledas(str)).toBe('.user{color:black;}.user .h{color:red;}');
 });

test/hover.test.js

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest';
-import { styles } from '../src/index';
+import { styledas } from '../src/index';
 
 let str = `.u{
     color: black;
@@ -11,5 +11,5 @@ let str = `.u{
 export default str;
 
 test(str, () => {
-  expect(styles(str)).toBe('.u{color:black;}.u:hover{color:red;}');
+  expect(styledas(str)).toBe('.u{color:black;}.u:hover{color:red;}');
 });

test/index.test.js

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest';
-import { styles } from '../src/index';
+import { styledas } from '../src/index';
 
 let str = `.u{
     color: black;
@@ -9,5 +9,5 @@ let str = `.u{
 export default str;
 
 test(str, () => {
-  expect(styles(str)).toBe('.u{color:black;background-size:1px 1px;}');
+  expect(styledas(str)).toBe('.u{color:black;background-size:1px 1px;}');
 });

vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    outDir: './dist',
+    lib: {
+      entry: './src/index.ts',
+      formats: ['umd', 'cjs', 'es', 'iife'],
+      name: 'styledas',
+    },
+  },
+});