Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: aaronccasanova/open-props
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: main
Choose a base ref
...
head repository: hchiam-test-org/open-props-pr-225
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref
Able to merge. These branches can be automatically merged.
  • 6 commits
  • 20 files changed
  • 2 contributors

Commits on Apr 15, 2022

  1. Copy the full SHA
    cd524d4 View commit details
  2. Add yarn.lock updates

    aaronccasanova committed Apr 15, 2022
    Copy the full SHA
    568fbd9 View commit details
  3. Copy the full SHA
    1757415 View commit details

Commits on Apr 19, 2022

  1. working demo

    hchiam committed Apr 19, 2022
    Copy the full SHA
    dbff9f1 View commit details
  2. Merge pull request argyleink#1 from hchiam-test-org/feat/typescript-d…

    …eclarations
    
    Feat/typescript declarations
    hchiam authored Apr 19, 2022
    Copy the full SHA
    b2d5294 View commit details
  3. Copy the full SHA
    f1da46e View commit details
41 changes: 31 additions & 10 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -20,10 +20,12 @@
"main": "dist/open-props.cjs",
"unpkg": "open-props.min.css",
"module": "dist/open-props.module.js",
"types": "dist/types/index.d.ts",
"exports": {
".": {
"import": "./dist/open-props.module.js",
"require": "./dist/open-props.cjs",
"types": "./dist/types/index.d.ts",
"default": "./dist/open-props.cjs"
},
"./src": "./src/index.js",
@@ -153,6 +155,7 @@
"postcss-cli": "^8.3.1",
"postcss-combine-duplicated-selectors": "^10.0.3",
"postcss-import": "^14.0.2",
"postcss-preset-env": "6.7.x"
"postcss-preset-env": "6.7.x",
"type-fest": "^2.12.2"
}
}
9 changes: 7 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -18,13 +18,18 @@ const camelize = text => {
return text.substr(0, 1).toLowerCase() + text.substr(1)
}

const mapToObjectNotation = props => {
/**
* @template T
* @param {T} props
* @returns {import("type-fest").CamelCasedPropertiesDeep<T> & import("type-fest").KebabCase<T>}
*/
const keysToCamelCase = (props) => {
for (var prop in props)
props[camelize(prop)] = props[prop]
return props
}

const OpenProps = mapToObjectNotation({
const OpenProps = keysToCamelCase({
...Animations,
...Sizes,
...Colors,
16 changes: 16 additions & 0 deletions test/autocomplete.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// Test auto-complete and type checks in your IDE:

import OpenProps from "../dist/types";
import Animations from "../dist/types/props.animations";

const anim = Animations;
anim["--animation-blink"];
// anim["--animation-blink"] = 1; // TS complains if you try to assign a non-string
anim["--animation-blink"] = 'some string works';

const op = OpenProps;
// op.someString = 1; // TS complains if you try to assign a non-string
// op.someString = 'this won't work'; // TS complains if you try to assign a string that's not included
op["--animation-blink"] // auto-completes!
op["--size-1"] // also auto-completes! all props are available on the top-level OpenProps object
op.animationBlink // camelCase API also auto-completes!
13 changes: 13 additions & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"compilerOptions": {
"baseUrl": ".",
"rootDir": "src",
"declarationDir": "./types",
"allowJs": true,
"declaration": true,
"emitDeclarationOnly": true,
"esModuleInterop": true
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
Loading