lix-website/themes/lix/assets/bootstrap/node_modules/@stylelint/postcss-css-in-js
2024-04-26 22:49:34 -06:00
..
camel-case.js initial commit of template 2024-04-26 22:49:34 -06:00
extract.js initial commit of template 2024-04-26 22:49:34 -06:00
get-template.js initial commit of template 2024-04-26 22:49:34 -06:00
index.js initial commit of template 2024-04-26 22:49:34 -06:00
LICENSE initial commit of template 2024-04-26 22:49:34 -06:00
literal.js initial commit of template 2024-04-26 22:49:34 -06:00
object-parse.js initial commit of template 2024-04-26 22:49:34 -06:00
object-parser.js initial commit of template 2024-04-26 22:49:34 -06:00
object-stringifier.js initial commit of template 2024-04-26 22:49:34 -06:00
object-stringify.js initial commit of template 2024-04-26 22:49:34 -06:00
object-syntax.js initial commit of template 2024-04-26 22:49:34 -06:00
object.js initial commit of template 2024-04-26 22:49:34 -06:00
package.json initial commit of template 2024-04-26 22:49:34 -06:00
README.md initial commit of template 2024-04-26 22:49:34 -06:00
template-parse.js initial commit of template 2024-04-26 22:49:34 -06:00
template-parser-helper.js initial commit of template 2024-04-26 22:49:34 -06:00
template-parser.js initial commit of template 2024-04-26 22:49:34 -06:00
template-safe-parse.js initial commit of template 2024-04-26 22:49:34 -06:00
template-safe-parser.js initial commit of template 2024-04-26 22:49:34 -06:00
template-stringifier.js initial commit of template 2024-04-26 22:49:34 -06:00
template-stringify.js initial commit of template 2024-04-26 22:49:34 -06:00
template-tokenize.js initial commit of template 2024-04-26 22:49:34 -06:00
un-camel-case.js initial commit of template 2024-04-26 22:49:34 -06:00

PostCSS CSS-in-JS Syntax

NPM version Build Status

PostCSS syntax for parsing CSS in JS literals:

Getting Started

First thing's first, install the module:

npm install postcss-syntax @stylelint/postcss-css-in-js --save-dev

Use Cases

const postcss = require("postcss");
const stylelint = require("stylelint");
const syntax = require("postcss-syntax");
postcss([stylelint({ fix: true })])
  .process(source, { syntax: syntax })
  .then(function (result) {
    // An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
    result.content;
  });

input:

import glm from "glamorous";
const Component1 = glm.a({
  flexDirectionn: "row",
  display: "inline-block",
  color: "#fff"
});

output:

import glm from "glamorous";
const Component1 = glm.a({
  color: "#fff",
  display: "inline-block",
  flexDirectionn: "row"
});

Advanced Use Cases

Add support for more css-in-js package:

const syntax = require("postcss-syntax")({
  "i-css": (index, namespace) => namespace[index + 1] === "addStyles",
  "styled-components": true
});

See: postcss-syntax

Style Transformations

The main use case of this plugin is to apply PostCSS transformations to CSS code in template literals & styles as object literals.