All Projects → gucong3000 → postcss-styled

gucong3000 / postcss-styled

Licence: MIT license
PostCSS syntax for parsing styled components

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to postcss-styled

postcss-jsx
PostCSS syntax for parsing CSS in JS literals
Stars: ✭ 73 (+37.74%)
Mutual labels:  syntax, postcss, css-in-js
Vscode Stylelint
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: ✭ 260 (+390.57%)
Mutual labels:  postcss, css-in-js
Goober
🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
Stars: ✭ 2,317 (+4271.7%)
Mutual labels:  css-in-js, styled
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Stars: ✭ 9,350 (+17541.51%)
Mutual labels:  postcss, css-in-js
Styled-Responsive-Media-Queries
Responsive Media Queries for Emotion styled or styled-components — Standard size from Chrome DevTools.
Stars: ✭ 33 (-37.74%)
Mutual labels:  css-in-js, styled
React Postcss
Simple style tag for React
Stars: ✭ 9 (-83.02%)
Mutual labels:  postcss, css-in-js
Postjss
Use the power of PostCSS in compiling with JSS
Stars: ✭ 40 (-24.53%)
Mutual labels:  postcss, css-in-js
styled-jsx-plugin-postcss
Plugin to add PostCSS support to styled-jsx.
Stars: ✭ 86 (+62.26%)
Mutual labels:  postcss, css-in-js
Postcss Less
PostCSS Syntax for parsing LESS
Stars: ✭ 93 (+75.47%)
Mutual labels:  syntax, postcss
Naomi
Sublime Text enhanced syntax highlighting for JavaScript ES6/ES7/ES2015/ES2016/ES2017+, Babel, FlowType, React JSX, Styled Components, HTML5, SCSS3, PHP 7, phpDoc, PHPUnit, MQL4. Basic: Git config files.
Stars: ✭ 544 (+926.42%)
Mutual labels:  syntax, postcss
Css In React
🍭 CSS in React - Learn the best CSS in JS frameworks by example
Stars: ✭ 101 (+90.57%)
Mutual labels:  postcss, css-in-js
stylish-components
A component styling library with minimalism and performance in mind
Stars: ✭ 18 (-66.04%)
Mutual labels:  css-in-js, styled
postcss-styl
PostCSS parser plugin for converting Stylus syntax to PostCSS AST.
Stars: ✭ 15 (-71.7%)
Mutual labels:  syntax, postcss
postcss
No description or website provided.
Stars: ✭ 59 (+11.32%)
Mutual labels:  postcss
abilitysheet
This app is ability sheet for beatmania iidx music of level 12.
Stars: ✭ 38 (-28.3%)
Mutual labels:  postcss
postcss-will-change-transition
PostCSS plugin to add will-change property after transition declarations
Stars: ✭ 15 (-71.7%)
Mutual labels:  postcss
react-styled-floating-label
Floating label component which works with any HTML input
Stars: ✭ 33 (-37.74%)
Mutual labels:  styled
frog
Frog is an integration of memory-based natural language processing (NLP) modules developed for Dutch. All NLP modules are based on Timbl, the Tilburg memory-based learning software package.
Stars: ✭ 70 (+32.08%)
Mutual labels:  syntax
prepublish
Simplifies the prepare step (bundling, transpiling, rebasing) during publishing NPM packages.
Stars: ✭ 21 (-60.38%)
Mutual labels:  postcss
sublime-pine
A Pine programming language syntax for Sublime Text.
Stars: ✭ 35 (-33.96%)
Mutual labels:  syntax

PostCSS Styled Syntax

NPM version Travis Travis Codecov David

PostCSS syntax for parsing styled components

Getting Started

First thing's first, install the module:

npm install postcss-styled --save-dev

Use Cases

const postcss = require('postcss');
const stylelint = require('stylelint');
const syntax = require('postcss-styled')({
	// syntax for parse css blocks (non-required options)
	css: require('postcss-safe-parser'),
});
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 styled from 'styled-components';
const Title = styled.h1`
	font-size:   1.5em;
		text-align:  center;
	color: palevioletred;
`;

output:

import styled from 'styled-components';
const Title = styled.h1`
	font-size: 1.5em;
	text-align: center;
	color: palevioletred;
`;

Advanced Use Cases

See: postcss-syntax

Style Transformations

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].