satya164 / Babel Plugin Css Prop
Babel plugin to transpile `css` prop to a styled component. (Experimental)
Stars: ✭ 56
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Babel Plugin Css Prop
Babel Plugin Polished
Compile polished helper functions at build time
Stars: ✭ 133 (+137.5%)
Mutual labels: babel, babel-plugin, styled-components
Babel Plugin Styled Components
Improve the debugging experience and add server-side rendering support to styled-components
Stars: ✭ 878 (+1467.86%)
Mutual labels: babel, babel-plugin, styled-components
Postjss
Use the power of PostCSS in compiling with JSS
Stars: ✭ 40 (-28.57%)
Mutual labels: babel, babel-plugin, styled-components
I18nize React
Internationalize react apps within a lunch break
Stars: ✭ 389 (+594.64%)
Mutual labels: babel, babel-plugin
Babel Plugin Tailwind Components
Use Tailwind with any CSS-in-JS library
Stars: ✭ 320 (+471.43%)
Mutual labels: babel, babel-plugin
Babel Plugin React Remove Properties
Babel plugin for removing React properties. 💨
Stars: ✭ 327 (+483.93%)
Mutual labels: babel, babel-plugin
Ssr Sample
A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App
Stars: ✭ 285 (+408.93%)
Mutual labels: babel, styled-components
Xwasm
[Work In Progress] WebAssembly Packager and WASM tooling for modern frontend
Stars: ✭ 45 (-19.64%)
Mutual labels: babel, babel-plugin
Faster.js
faster.js is a Babel plugin that compiles idiomatic Javascript to faster, micro-optimized Javascript.
Stars: ✭ 429 (+666.07%)
Mutual labels: babel, babel-plugin
Babel Plugin Root Import
Add the opportunity to import modules by the root path
Stars: ✭ 1,084 (+1835.71%)
Mutual labels: babel, babel-plugin
Pizzaql
🍕 Modern OSS Order Management System for Pizza Restaurants
Stars: ✭ 631 (+1026.79%)
Mutual labels: babel, styled-components
Babel Plugin Css Modules Transform
Extract css class names from required css module files, so we can render it on server.
Stars: ✭ 318 (+467.86%)
Mutual labels: babel, babel-plugin
React Bolt
⚡ The most simple & robust boilerplate for your React projects.
Stars: ✭ 298 (+432.14%)
Mutual labels: babel, styled-components
Twin.macro
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: ✭ 5,137 (+9073.21%)
Mutual labels: babel, styled-components
Effectfuljs
JavaScript embedded effects compiler
Stars: ✭ 287 (+412.5%)
Mutual labels: babel, babel-plugin
Babel Plugin Sitrep
Log all assignments and the return value of a function with a simple comment
Stars: ✭ 442 (+689.29%)
Mutual labels: babel, babel-plugin
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 (+871.43%)
Mutual labels: babel, styled-components
Htm
Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
Stars: ✭ 7,299 (+12933.93%)
Mutual labels: babel, babel-plugin
Babel Plugin Console
Babel Plugin that adds useful build time console functions 🎮
Stars: ✭ 278 (+396.43%)
Mutual labels: babel, babel-plugin
Babel Plugin Module Resolver
Custom module resolver plugin for Babel
Stars: ✭ 3,134 (+5496.43%)
Mutual labels: babel, babel-plugin
babel-plugin-css-prop
Babel plugin to transpile css
prop to a styled component.
The plugin will let you use the css
prop ala emotion
in libraries like linaria
and styled-components
. Internally, it will convert the css
prop to a styled component.
Usage
Install the plugin:
yarn add --dev babel-plugin-css-prop
Then include it in your .babelrc
:
{
"plugins": ["css-prop"]
}
Example
Now you can use the css
prop in your components:
function App(props) {
return (
<div
css={`
flex: 1;
background-color: ${props.bg};
`}
>
Hello world
</div>
);
}
You are not restricted to template literals in the css
prop. You can also use a plain string.
The only restrictions are:
- The prop must be specified directly on the JSX element, since the plugin uses it to detect the prop.
- The element using the
css
prop must be inside a component/function and not in the top level scope.
Options
-
target: "linaria" | "styled-components" | "auto" | "none"
: The CSS-in-JS library you use. If you specify the library, the plugin will auto-insert a require statement forstyled
when needed. If you set it to"auto"
, it will try to auto-detect which library you use by reading yourpackage.json
. If you set it to"none"
, require statements won't be inserted. (Default:"auto"
)
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].