Merge pull request #148 from remarkablemark/refactor/typescript

refactor: migrate to TypeScript

.github/workflows/build.yml

@@ -14,8 +14,8 @@ jobs:
       - name: Run ESLint
         run: npm run lint
 
-      - name: Lint TypeScript
-        run: npm run lint:dts
+      - name: Type check
+        run: npm run lint:tsc
 
       - name: Run unit tests
         run: npm run test:ci

.gitignore

@@ -41,8 +41,8 @@ jspm_packages
 .node_repl_history
 
 # Build files
-build
-dist
+cjs/
+dist/
 
 # Vim swap files
 *.swp

.prettierrc.json

@@ -1,4 +1,3 @@
 {
-  "singleQuote": true,
-  "trailingComma": "none"
+  "singleQuote": true
 }

README.md

@@ -11,7 +11,8 @@
 Parses inline style to object:
 
 ```js
-var parse = require('style-to-object');
+import parse from 'style-to-object';
+
 parse('color: #C0FFEE; background: #BADA55;');
 ```
 
@@ -48,16 +49,18 @@ yarn add style-to-object
 
 ## Usage
 
-Import the module:
+Import with ES Modules:
 
 ```js
-// CommonJS
-const parse = require('style-to-object');
-
-// ES Modules
 import parse from 'style-to-object';
 ```
 
+Require with CommonJS:
+
+```js
+const parse = require('style-to-object').default;
+```
+
 Parse single declaration:
 
 ```js
@@ -127,15 +130,15 @@ parse('/*');  // throws Error
 If the 2nd argument is a function, then the parser will return `null`:
 
 ```js
-parse('color: #f00', function() {}); // null
+parse('color: #f00', () => {}); // null
 ```
 
 But the function will iterate through each declaration:
 
 <!-- prettier-ignore-start -->
 
 ```js
-parse('color: #f00', function(name, value, declaration) {
+parse('color: #f00', (name, value, declaration) => {
   console.log(name);        // 'color'
   console.log(value);       // '#f00'
   console.log(declaration); // { type: 'declaration', property: 'color', value: '#f00' }
@@ -161,42 +164,14 @@ parse(style, iterator);
 console.log(output); // [['color', 'red'], ['background', 'blue']]
 ```
 
-## Testing
-
-Run tests:
-
-```sh
-npm test
-```
-
-Run tests in watch mode:
-
-```sh
-npm run test:watch
-```
-
-Run tests with coverage:
-
-```sh
-npm run test:coverage
-```
-
-Lint files:
-
-```sh
-npm run lint
-```
-
-Fix lint errors:
+## Migration
 
-```sh
-npm run lint:fix
-```
+### v1
 
-Test TypeScript declaration file for style and correctness:
+Migrated to TypeScript. Iterator excludes `Comment`. CommonJS requires the `.default` key:
 
-```sh
-npm run lint:dts
+```js
+const parse = require('style-to-object').default;
 ```
 
 ## Release

__tests__/fixtures/index.js → __tests__/fixtures/index.ts

@@ -1,4 +1,4 @@
-const cases = [
+export const cases = [
   // general
   ['display: inline-block;', { display: 'inline-block' }],
   ['color:red;', { color: 'red' }],
@@ -9,29 +9,29 @@ const cases = [
       'font-size': '.75em',
       position: 'absolute',
       width: '33.3%',
-      'z-index': '1337'
-    }
+      'z-index': '1337',
+    },
   ],
   [
     'font-family: "Goudy Bookletter 1911", Gill Sans Extrabold, sans-serif;',
     {
-      'font-family': '"Goudy Bookletter 1911", Gill Sans Extrabold, sans-serif'
-    }
+      'font-family': '"Goudy Bookletter 1911", Gill Sans Extrabold, sans-serif',
+    },
   ],
 
   // multiple of same property
   [
     'color:rgba(0,0,0,1);color:white;',
     {
-      color: 'white'
-    }
+      color: 'white',
+    },
   ],
 
   // missing semicolon
   ['line-height: 42', { 'line-height': '42' }],
   [
     'font-style:italic; text-transform:uppercase',
-    { 'font-style': 'italic', 'text-transform': 'uppercase' }
+    { 'font-style': 'italic', 'text-transform': 'uppercase' },
   ],
 
   // extra whitespace
@@ -52,8 +52,8 @@ const cases = [
       '-webkit-border-top-right-radius': '5px',
       '-webkit-border-bottom-right-radius': '10px',
       '-webkit-border-bottom-left-radius': '5px',
-      'border-radius': '10px 5px'
-    }
+      'border-radius': '10px 5px',
+    },
   ],
 
   // text and url
@@ -62,14 +62,14 @@ const cases = [
   [
     'background-image: url("http://cdn.example.com/image.png?v=42");',
     {
-      'background-image': 'url("http://cdn.example.com/image.png?v=42")'
-    }
+      'background-image': 'url("http://cdn.example.com/image.png?v=42")',
+    },
   ],
   [
     'background: #123456 url("https://foo.bar/image.png?v=2")',
     {
-      background: '#123456 url("https://foo.bar/image.png?v=2")'
-    }
+      background: '#123456 url("https://foo.bar/image.png?v=2")',
+    },
   ],
 
   // property prefix
@@ -79,16 +79,16 @@ const cases = [
       '-webkit-hyphens': 'auto',
       '-moz-hyphens': 'auto',
       '-ms-hyphens': 'auto',
-      hyphens: 'auto'
-    }
+      hyphens: 'auto',
+    },
   ],
 
   // value prefix
   [
     'display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;',
     {
-      display: 'flex'
-    }
+      display: 'flex',
+    },
   ],
 
   // comment
@@ -97,38 +97,38 @@ const cases = [
     'top: 0; /* comment */ bottom: 42rem;',
     {
       top: '0',
-      bottom: '42rem'
-    }
+      bottom: '42rem',
+    },
   ],
   [
     ` right: 0; /* comment */
     /* comment */   left: 42rem; `,
     {
       right: '0',
-      left: '42rem'
-    }
+      left: '42rem',
+    },
   ],
 
   // custom
   [
     'foo: bar;',
     {
-      foo: 'bar'
-    }
+      foo: 'bar',
+    },
   ],
-  ['foo:bar; baz:qux', { foo: 'bar', baz: 'qux' }]
-];
+  ['foo:bar; baz:qux', { foo: 'bar', baz: 'qux' }],
+] as const;
 
-const errors = [
+export const errors = [
   // property missing ':'
   'overflow',
   '1',
 
   // end of comment missing
-  '/* unclosed comment'
-];
+  '/* unclosed comment',
+] as const;
 
-const invalids = [
+export const invalids = [
   undefined,
   null,
   true,
@@ -149,11 +149,5 @@ const invalids = [
 
   // comment
   '/* color: #f00; */',
-  '/**/'
-];
-
-module.exports = {
-  cases,
-  errors,
-  invalids
-};
+  '/**/',
+] as const;

__tests__/index.test.mjs

@@ -1,5 +1,5 @@
 import assert from 'assert';
-import StyleToObject from '../index.mjs';
+import parse from '../esm/index.mjs';
 
-assert.strictEqual(typeof StyleToObject, 'function');
-assert.deepEqual(StyleToObject('foo: bar'), { foo: 'bar' });
+assert.strictEqual(typeof parse, 'function');
+assert.deepEqual(parse('foo: bar'), { foo: 'bar' });

__tests__/index.test.js → __tests__/index.test.ts

@@ -1,6 +1,6 @@
-const inlineStyleParser = require('inline-style-parser');
-const { cases, errors, invalids } = require('./fixtures');
-const parse = require('..');
+import inlineStyleParser from 'inline-style-parser';
+import { cases, errors, invalids } from './fixtures';
+import parse from '../src';
 
 describe('valid cases', () => {
   describe.each(cases)('when style=%p', (style, expected) => {
@@ -23,7 +23,7 @@ describe('error cases', () => {
 describe('invalid cases', () => {
   describe.each(invalids)('when style=%p', (style) => {
     it('returns null', () => {
-      expect(parse(style)).toBe(null);
+      expect(parse(style as string)).toBe(null);
     });
   });
 });
@@ -48,7 +48,6 @@ describe('iterator', () => {
     parse(style, (name, value, comment) => {
       expect(name).toBe(undefined);
       expect(value).toBe(undefined);
-      expect(comment.comment).toBe(' color: #f00; ');
       expect(comment).toEqual(inlineStyleParser(style)[0]);
     });
   });

esm/index.mjs

@@ -0,0 +1,3 @@
+import StyleToObject from '../cjs/index.js';
+
+export default StyleToObject.default;