@stylelint/postcss-css-in-js

    0.37.2 • Public • Published

    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.

    Install

    npm i @stylelint/postcss-css-in-js

    DownloadsWeekly Downloads

    1,684,213

    Version

    0.37.2

    License

    MIT

    Unpacked Size

    40.8 kB

    Total Files

    24

    Last publish

    Collaborators

    • ybiquitous
    • jeddy3
    • hudochenkov
    • ntwb
    • ota-meshi