@stylelint/postcss-css-in-js

WebJar for @stylelint/postcss-css-in-js

License

License

MIT
Categories

Categories

JavaScript Languages
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

stylelint__postcss-css-in-js
Last Version

Last Version

0.37.2
Release Date

Release Date

Type

Type

jar
Description

Description

@stylelint/postcss-css-in-js
WebJar for @stylelint/postcss-css-in-js
Project URL

Project URL

https://www.webjars.org
Source Code Management

Source Code Management

https://github.com/stylelint/postcss-css-in-js

Download stylelint__postcss-css-in-js

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/stylelint__postcss-css-in-js/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>stylelint__postcss-css-in-js</artifactId>
    <version>0.37.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/stylelint__postcss-css-in-js/
implementation 'org.webjars.npm:stylelint__postcss-css-in-js:0.37.2'
// https://jarcasting.com/artifacts/org.webjars.npm/stylelint__postcss-css-in-js/
implementation ("org.webjars.npm:stylelint__postcss-css-in-js:0.37.2")
'org.webjars.npm:stylelint__postcss-css-in-js:jar:0.37.2'
<dependency org="org.webjars.npm" name="stylelint__postcss-css-in-js" rev="0.37.2">
  <artifact name="stylelint__postcss-css-in-js" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='stylelint__postcss-css-in-js', version='0.37.2')
)
libraryDependencies += "org.webjars.npm" % "stylelint__postcss-css-in-js" % "0.37.2"
[org.webjars.npm/stylelint__postcss-css-in-js "0.37.2"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm : babel__core jar [7.9.0,)

Project Modules

There are no modules declared in this project.

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.

org.webjars.npm

stylelint

A mighty, modern CSS linter

Versions

Version
0.37.2