From f42b6f9971e44073aca20305433a010b360eddd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20B=C5=82a=C5=BCejewicz=20=28Peter=20Blazejewicz=29?= Date: Tue, 31 Mar 2020 20:04:53 +0200 Subject: [PATCH] feat(postcss-custom-properties): new type definition (#43446) - definition file - test coverage for standalone and plugin usage https://github.com/postcss/postcss-custom-properties#usage Thanks! --- types/postcss-custom-properties/index.d.ts | 80 +++++++++++++++++++ types/postcss-custom-properties/package.json | 6 ++ .../postcss-custom-properties-tests.ts | 80 +++++++++++++++++++ types/postcss-custom-properties/tsconfig.json | 23 ++++++ types/postcss-custom-properties/tslint.json | 1 + 5 files changed, 190 insertions(+) create mode 100644 types/postcss-custom-properties/index.d.ts create mode 100644 types/postcss-custom-properties/package.json create mode 100644 types/postcss-custom-properties/postcss-custom-properties-tests.ts create mode 100644 types/postcss-custom-properties/tsconfig.json create mode 100644 types/postcss-custom-properties/tslint.json diff --git a/types/postcss-custom-properties/index.d.ts b/types/postcss-custom-properties/index.d.ts new file mode 100644 index 0000000000..022ba372f7 --- /dev/null +++ b/types/postcss-custom-properties/index.d.ts @@ -0,0 +1,80 @@ +// Type definitions for postcss-custom-properties 9.1 +// Project: https://github.com/postcss/postcss-custom-properties#readme +// Definitions by: Piotr Błażejewicz +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +import { Plugin, Result, LazyResult } from 'postcss'; + +declare namespace postcssCustomProperties { + /** + * Sources where Custom Properties can be imported from or export to, + * which might be CSS, JS, and JSON files, functions, and directly passed objects + */ + type ImportSources = + | string + | (() => CustomPropertiesObject) + | CustomPropertiesObject + | (() => CustomPropertiesObject) + | Promise; + /** + * Sources where Custom Properties can be imported from or export to, + * which might be CSS, JS, and JSON files, functions, and directly passed objects + */ + type ExportSources = + | string + | CustomPropertiesObject + | ((customProperties: CustomPropertiesObject) => any) + | Promise; + + interface CustomPropertiesObject { + customProperties?: { + [name: string]: string; + }; + ['custom-properties']?: { + [name: string]: string; + }; + } + + interface Options { + /** + * The preserve option determines whether Custom Properties + * and properties using custom properties should be preserved in their original form. + * By default, both of these are preserved + * @see {@link https://github.com/postcss/postcss-custom-properties#preserve} + */ + preserve?: boolean; + /** + * The importFrom option specifies sources where Custom Properties can be imported from, + * which might be CSS, JS, and JSON files, functions, and directly passed objects. + * Multiple sources can be passed into this option, and they will be parsed in the order they are received. + * JavaScript files, JSON files, functions, and objects will need to namespace Custom Properties using the customProperties or custom-properties key. + * @see {@link https://github.com/postcss/postcss-custom-properties#importfrom} + */ + importFrom?: ImportSources | ImportSources[]; + /** + * The exportTo option specifies destinations where Custom Properties can be exported to, + * which might be CSS, JS, and JSON files, functions, and directly passed objects. + * Multiple destinations can be passed into this option, and they will be parsed in the order they are received. + * JavaScript files, JSON files, and objects will need to namespace Custom Properties using the customProperties or custom-properties key. + * @see {@link https://github.com/postcss/postcss-custom-properties#exportto} + */ + exportTo?: ExportSources | ExportSources[]; + } + + type CustomPropertiesPlugin = Plugin & { + process: ( + css: + | string + | { + toString(): string; + } + | Result, + opts?: any, + pluginOptions?: Options, + ) => LazyResult; + }; +} + +declare const postcssCustomProperties: postcssCustomProperties.CustomPropertiesPlugin; + +export = postcssCustomProperties; diff --git a/types/postcss-custom-properties/package.json b/types/postcss-custom-properties/package.json new file mode 100644 index 0000000000..73f1a60b11 --- /dev/null +++ b/types/postcss-custom-properties/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "postcss": "^7.0.27" + } +} diff --git a/types/postcss-custom-properties/postcss-custom-properties-tests.ts b/types/postcss-custom-properties/postcss-custom-properties-tests.ts new file mode 100644 index 0000000000..0053c01c21 --- /dev/null +++ b/types/postcss-custom-properties/postcss-custom-properties-tests.ts @@ -0,0 +1,80 @@ +import postcss = require('postcss'); +import postcssCustomProperties = require('postcss-custom-properties'); +import { CustomPropertiesObject, Options } from 'postcss-custom-properties'; + +const css = `:root { + --color: red; + } + + h1 { + color: var(--color); + }`; + +const pluginOptions: Options = { + preserve: true, + importFrom: 'path/to/file.css', + exportTo: 'path/to/file.css', +}; + +const processOptions = { + from: 'src/app.css', + to: 'dest/app.css', +}; + +postcssCustomProperties.process(css, processOptions, pluginOptions); + +postcss([postcssCustomProperties(pluginOptions)]).process(css, processOptions); + +postcssCustomProperties({ + importFrom: 'path/to/file.css', +}); + +postcssCustomProperties({ + importFrom: [ + 'path/to/file.css', + 'and/then/this.js', + 'and/then/that.json', + { + customProperties: { '--color': 'red' }, + }, + () => { + const customProperties = { '--color': 'red' }; + + return { customProperties }; + }, + ], +}); + +postcssCustomProperties({ + exportTo: 'path/to/file.css', // :root { --color: red; } +}); + +const customProperties = { + '--ref-color': 'var(--color)', + '--color': 'rgb(255, 0, 0)', + '--color-h': '0', + '--color-s': '100%', + '--color-l': '50%', + '--color-hsl': 'hsl(var(--color-h), var(--color-s), var(--color-l))', + '--circular': 'var(--circular-2)', + '--circular-2': 'var(--circular)', + '--margin': '0 10px 20px 30px', + '--theme-color': '#053', +}; + +const cachedObject: CustomPropertiesObject = { + customProperties, +}; + +postcssCustomProperties({ + exportTo: [ + 'path/to/file.css', + 'and/then/this.js', + 'and/then/this.mjs', + 'and/then/that.json', + cachedObject, + (customProperties: CustomPropertiesObject) => { + customProperties; + }, + ], +}); diff --git a/types/postcss-custom-properties/tsconfig.json b/types/postcss-custom-properties/tsconfig.json new file mode 100644 index 0000000000..efddff5281 --- /dev/null +++ b/types/postcss-custom-properties/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "postcss-custom-properties-tests.ts" + ] +} diff --git a/types/postcss-custom-properties/tslint.json b/types/postcss-custom-properties/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/postcss-custom-properties/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }