Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

PostCSS for React Inline Styles, Free Style and other CSS-in-JS

License

NotificationsYou must be signed in to change notification settings

postcss/postcss-js

Repository files navigation

PostCSS for CSS-in-JS and styles in JS objects.

For example, to useStylelint orRTLCSS plugins in your workflow.

Sponsored by Evil Martians

Usage

Processing

constpostcssJs=require('postcss-js')constautoprefixer=require('autoprefixer')constprefixer=postcssJs.sync([autoprefixer])conststyle=prefixer({userSelect:'none'})style//=> {//     WebkitUserSelect: 'none',//        MozUserSelect: 'none',//         msUserSelect: 'none',//           userSelect: 'none'//   }

Compile CSS-in-JS to CSS

constpostcss=require('postcss')constpostcssJs=require('postcss-js')conststyle={top:10,'&:hover':{top:5}};postcss().process(style,{parser:postcssJs}).then((result)=>{result.css//=> top: 10px;//   &:hover { top: 5px; }})

Compile CSS to CSS-in-JS

constpostcss=require('postcss')constpostcssJs=require('postcss-js')constcss='--text-color: #DD3A0A; @media screen { z-index: 1; color: var(--text-color) }'constroot=postcss.parse(css)postcssJs.objectify(root)//=> {//     '--text-color': '#DD3A0A',//     '@media screen': {//       zIndex: '1',//       color: 'var(--text-color)'//     }//   }

API

sync(plugins): function

Create PostCSS processor with simple API, but with only sync PostCSS pluginssupport.

Processor is just a function, which takes one style object and return other.

async(plugins): function

Same assync, but also support async plugins.

Returned processor will return Promise.

parse(obj): Root

Parse CSS-in-JS style object to PostCSSRoot instance.

It converts numbers to pixels and parses[Free Style] like selectors and at-rules:

{'@media screen':{'&:hover':{top:10}}}

This methods use Custom Syntax name convention, so you can use it like this:

postcss().process(obj,{parser:postcssJs})

objectify(root): object

Convert PostCSSRoot instance to CSS-in-JS style object.

Troubleshoot

Webpack may need some extra config for some PostCSS plugins.

Module parse failed

Autoprefixer and some other pluginsneed ajson-loader to import data.

So, please install this loader and add to webpack config:

loaders:[{test:/\.json$/,loader:"json-loader"}]

About

PostCSS for React Inline Styles, Free Style and other CSS-in-JS

Resources

License

Stars

Watchers

Forks

Sponsor this project

  •  

Contributors13

[8]ページ先頭
©2009-2025 Movatter.jp