v1.0.0-beta.2
Interconversion between JavaScript Object(CSS-in-JS) and PostCSS AST
Attributes
Includes Deno configuration
Repository
Current version released
3 years ago
postcss-js
Interconversion between JavaScript Object(CSS-in-JS) and PostCSS AST
Usage
import {
toAST,
toObject,
} from "https://deno.land/x/postcss_js@$VERSION/mod.ts";
import { parse } from "https://deno.land/x/postcss@8.4.6/lib/postcss.js";
import { expect } from "https://deno.land/x/unitest/mod.ts";
const css = `
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
`;
const ast = parse(css);
const cssInJss = toObject(ast);
expect(ast).toEqual(toAST(cssInJss));
API
toAST
JavaScript Object(CSS-in-JS) to PostCSS AST
types
import {
type BinaryTree,
Root,
} from "https://deno.land/x/postcss_js@$VERSION/mod.ts";
declare function toAST(object: BinaryTree<string | number>): Root;
example
import { toAST } from "https://deno.land/x/postcss_js@$VERSION/mod.ts";
import Rule from "https://deno.land/x/postcss@8.4.6/lib/rule.js";
import Declaration from "https://deno.land/x/postcss@8.4.6/lib/declaration.js";
import AtRule from "https://deno.land/x/postcss@8.4.6/lib/at-rule.js";
import Root from "https://deno.land/x/postcss@8.4.6/lib/root.js";
import { expect } from "https://deno.land/x/unitest/mod.ts";
const style = {
"@madia (min-width: 640px)": {
".container": {
maxWidth: "640px",
},
},
".mask": {
WebkitMask: "100%",
},
};
const root = toAST(style);
expect(root).toEqual(
new Root({
nodes: [
new AtRule({
name: "media",
params: "(min-width: 640px)",
nodes: [
new Rule({
selector: ".container",
nodes: [
new Declaration({
prop: "max-width",
value: "640px",
}),
],
}),
],
}),
new Rule({
selector: ".mask",
nodes: [
new Declaration({
prop: "-webkit-mask",
value: "100%",
}),
],
}),
],
}),
);
toObject
PostCSS AST to JavaScript Object(CSS-in-JS)
types
import {
type BinaryTree,
ChildNode,
} from "https://deno.land/x/postcss_js@$VERSION/mod.ts";
declare function toObject(ast: {
nodes: ChildNode[];
}): BinaryTree<string | number>;
example
import { toObject } from "https://deno.land/x/postcss_js@$VERSION/mod.ts";
import Rule from "https://deno.land/x/postcss@8.4.6/lib/rule.js";
import Declaration from "https://deno.land/x/postcss@8.4.6/lib/declaration.js";
import AtRule from "https://deno.land/x/postcss@8.4.6/lib/at-rule.js";
import Root from "https://deno.land/x/postcss@8.4.6/lib/root.js";
import { expect } from "https://deno.land/x/unitest/mod.ts";
const root = new Root({
nodes: [
new Rule({
selector: ".min-w-0",
nodes: [
new Declaration({
prop: "min-width",
value: "0px",
}),
],
}),
],
});
expect(toObject(root)).toEqual({
".min-w-0": {
minWidth: "0px",
},
});
License
Copyright © 2022-present TomokiMiyauci.
Released under the MIT license