jacobp100 / cssta Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://jacobp100.github.io/cssta/
License: MIT License
Home Page: https://jacobp100.github.io/cssta/
License: MIT License
VariablesStyleSheet
accepts (VariableRuleTuple | Rule)[]
for its ruleTuples
.
VariableRuleTuple
has rules that need to be run through css-color-function and css-to-react-nativeRule
has pre-processed rulesCurrently the rules are divided through the selectors.
color: red;
&[@boolProp] {
color: blue;
}
This generate two rules. If a rule uses CSS custom properties, it will become a VariableRuleTuple
. Otherwise it is always a Rule
.
This means the following rule is a VariableRuleTuple
.
&[@boolProp] {
color: red;
font: 12px/14px "Helvetica";
border: 1px solid red;
background: var(--bg);
}
We could in theory split this rule in two, and have the first three rules be grouped into a Rule
, and have the last be put into a VariableRuleTuple
. This would mean far less processing on static rules.
Doing this would also mean we can skip StyleSheet.create
for rules with variables, which could make rapidly changing variables more performant.
In typescript cheatsheet used defaultProps like that :
const defaultProps = {
activeOpacity: 0.75,
};
interface Props {
...
}
const Button = (props: Props & typeof defaultProps) => {
...
}
Button.defaultProps = defaultProps
But when I use it with given types in #42 I encountering that error :
I tried to handle it but I couldn't.
In newer versions of React, they might introduce a forwardRef
API that lets us forward the ref to the HTML component.
I'm not familiar with styled-componenst
and cssta
internals, so forgive me if I'm starting a useless discussion.
interpolation (${value}) is not supported on web, but is supported for React Native
What about using Apollo's (Graphql) approach: a query could be written completely in js or as a string:
const query = gql`
query Repos($login: String) {
repos(login: $login) {
name
}
}`;
and here, instead of putting variables/functions/... directly into the template literal, you would do that in a decorator:
const HomePageWithData = graphql(query, {
options: ({ login }) => ({ variables: { login }, noFetch: !login }),
}
)(HomePage);
I'm wondering, does it make any sense to do the same with css?
const style = cssta.button`
color: var(--primaryColor, darkcyan);
padding: 0.5rem 1rem;
border: 2px solid currentColor;
border-radius: 1000px;
`;
const HomePageStyled = cssta(style, (props, theme) =>
({ primaryColor : props.loading ? theme.orange : theme.green })
)(HomePage);
Are there advantages to this approach compared to styled-components
's? Is it possible to still compile everything on the server with postcss to js instead of polluting front end with all those libraries.
In device android, border line is break. How I can fix it?
CRA 2 will support babel-plugin-macros. This means we can optimise. The first step is to support babel-plugin-macros (#15).
We probably won't run this in development.
However, the CSS output will also need to be managed. There are several options, some of which may not be feasible.
<app>/public
We should be able to select iOS or android via a media query
Should be possible via Aninated.loop
So I'm programatically removing a View created by cssta from what is being rendered and when I do during the ComponentWillUnmount in the VariablesProvider I'm getting "this.context.cssta.off is not a function".
Is there a special way I should be handling this?
Hello @jacobp100, does your library support dynamic style values? For example, I want the width of an element to depend on a varying numeric value that I don't know in advance.
How to configure the use of typescript, and how to pass a property into the component using typescript
In styled-components, you can write,
const A = styled...
const B = styled.div`
${A}:hover & {
color: red
}
`
We should be able to do the same. The difficulty will be that we'll have to keep track of assigned class names. We'll have to do this for at least variables and module imports and exports. It'll also be more difficult as you might have to assign a class name to a component that hasn't been parsed yet because of the import/export requirement.
The upshot is that once this is done, it should be trivial query properties on the referenced component.
const A = cssta.div`
[@active] { ... }
`
const B = styled.div`
${A}[@active] & {
color: red
}
`
Hi @jacobp100!
First of all, thank you for this awesome library. I'm really surprised that it does not have more stars on Github.
I have been already for a long time thinking if it is possible to add support for CSS animations for my React Native CSS modules project, but I haven't done anything yet because mapping CSS animations to the Animated API is a bit complicated.
I noticed that cssta
supports both CSS transitions and CSS animations in React Native, which got me thinking that maybe I could just borrow the implementations from this library and modify them to fit the different way to define/apply styles.
I was wondering if you could give me some tips of how to approach the problem in a CSS modules context as you have already implemented the support for those features in cssta
?
React Native CSS modules already supports CSS media queries, so I think that a similar approach needs to be used for animations and transitions.
Here's roughly how it works:
className
property to function call that calls a runtime library with the bundled styles.For CSS animations and CSS transitions there would need to be a wrapping component instead of just the function call that takes in styles.
Anyway, it would be nice to get your ideas of what would be the best way to implement those features.
Hello! Thanks for such a great library! You did the awesome work on it!
Is it going to support web and react-native-web?
cssta 0.6.0
react-native 0.45.0
I get this error on what appears to be component unmount
edit: VariablesProvider.componentWillUnmount
edit: console.log of this.context.cssta returns EventEmitter {_events: Object, _maxListeners: undefined}
My component looks like this:
import React, { Component } from 'react';
import { View, Text, Animated } from 'react-native';
import Container from './buttonContainer';
import cssta from 'cssta/native';
const containerStyles = {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
height: 50
};
const ButtonContainer = cssta(Animated.View) `
--primary: white;
--background: #12677a;
padding: 10px 15px;
background-color: var(--background);
transition: padding-left 0.3s;
&[@active] {
padding-left: 30px;
}
`;
const TextContainer = cssta(View) `
margin-left: 15;
`;
const ButtonText = cssta(Text) `
color: white;
text-align: left;
letter-spacing: 0.5;
font-weight: 300;
`;
const ButtonSubtitle = cssta(Text) `
color: white;
text-align: left;
font-size: 10px;
`;
const returnSvgColor = color => {
if (!color)
return "#83abb4";
if (color == "#e94649")
return "#fbcdc3";
if (color == "#3f4144")
return "#babbbe";
}
const LitlongButton = ({ title, subtitle, icon, color }) => {
const Icon = icon;
const bgColor = color ? { backgroundColor: color } : {};
const svgColor = returnSvgColor(color);
return (
<Container>
{active => (
<ButtonContainer style={[containerStyles, bgColor]} active={active}>
<Icon fill={svgColor} width={20} height={20} />
<TextContainer>
<ButtonText>
{title.toUpperCase()}
</ButtonText>
{
subtitle ?
<ButtonSubtitle>
{subtitle}
</ButtonSubtitle> :
null
}
</TextContainer>
</ButtonContainer>
)}
</Container>
)
};
export default LitlongButton;
Bundler seems to be unable to resolve useCustomPropertyStyleSheet
when CSS custom properties ("variables") are used. Upon further investigation, there is no such file under cssta/runtime/useCustomPropertyStyleSheet
, even though it is called in multiple places in babel-plugin-cssta
. Is the CSS variable feature broken, or does using the feature require some extra configuration in e.g. Babel?
So, for example the scenario outlined in Theming does not work:
const Inverted = cssta(View)`
background-color: black;
--primary: white;
`;
const ThemedText = cssta(Text)`
color: var(--primary, black);
border: 1px solid var(--primary, black);
padding: 6px 12px;
`;
<ThemedText>I black text</ThemedText>;
<Inverted>
<ThemedText>I am white text on a black background!</ThemedText>
</Inverted>;
Add support for innerRef for getting the component ref
Is your lib worth being used today?
Won't she have a performance problem inside the application?
We have a thin wrapper for animations via transition
and animation
. Why not @media
? We can use RN's Dimensions
, which has an event listener.
In the babel transform, we should mark all runtime function calls with a leading comment, /*#__PURE__*/
for dead code elimination
innerRef
#14style
prop on web to inject CSS custom properties for theming${}
) apply to values by defaultSee #6
See #6
I think we can enable it on
We currently do this.
{
"plugins": [
["babel-plugin-cssta", {
"optimizations": [
"name1",
"name2",
["name3", {
"optimizationConfigName": "optimizationConfigValue"
}],
]
}]
]
}
That's over the top. Just group them like this,
{
"plugins": [
["babel-plugin-cssta", {
"singleSourceOfVariables": {
"sourceFilename": "…"
}
}]
]
}
The next version of create-React-app will have Babel-plugin-macros. Supporting this means out of the box support for CRA.
&
[breaking]We tried to be clever and automatically add a &
when missing, :hover
meant &:hover
. This fails with,
:not([@prop]) { … }
This gets transformed to,
:not(.component-specific-class-name) { … }
Which applies to always other components (completely breaking encapsulation).
${}
) apply to values by defaultSee #6
See #6
um.. i'm not sure it is a cssta's issue.
for some reason (facebook/react-native#14148) Image component is not support corner-specific border radius like borderTopRightRadius
. but cssta translates border-radius
to four specific border radius, and it is not work for Image Component.
code:
const ImageRadius = cssta(Image) `
width: 100px;
height: 100px;
border-radius: 50px;
overflow: hidden;
`;
export default () => (
<ImageRadius
style={{ borderRadius: 10 }}
source={{ uri: 'http://img1.skqkw.cn:888/2014/11/17/10/3u1qorvdoud-126128.jpg' }}
resizeMode="cover" />
);
Mixins might be able to be achieved by,
const mixin = cssta.mixin`
color: red;
`
const Button = cssta.button`
@include ${mixin};
[@alsoNested] {
@include ${mixin};
}
`
It would probably be confusing for mixins to have selectors inside. We should probably limit them to include top-level declarations only. However, keyframes will probably be fine.
We can do this by putting the mixin body in a comment block that is flagged as such,
/* File generated by babel-plugin-cssta */
/*
CSSTA-MIXIN
path: /path/to/file/that/exports/mixin
export: default
-
color: red
*/
When you encounter something that uses the mixin, it finds the mixin comment block, and substitutes it. If the mixin block is not yet present, leave the @import
in place.
.dummyClass {
@include url('/path/to/file/that/exports/mixin') default;
}
Then when you find the mixin, substitute these with the body.
Just replace mixins definitions with pre-processed style objects. Use Object.assign
s to get the import statements to work.
The mixins will need to include a list of enhancers they require. We'll then need a createComponentWithMixins
(or we can re-purpose withEnhancers
). The created component will have to then merge the enhancers, and dynamically create a component. (Note we'll have to add a sort order for enhancers for this to work)
Maybe.
This should make it more obvious that the behaviour is not standard CSS, and make it easier to explain in the docs.
${}
) apply to values by defaultThe intended purpose of this was to interpolate constants that come from native (Stylesheet.hairline
among others). We should only let it apply to these constants, and perform runtime checking for this. We can then turn on the interpolateValuesOnly
optimisation by default.
Currently if you have any component that uses custom properties, postCSS is run beforehand, but every style tuple gets run through css-to-react-native
and css-color-function
, regardless of whether it contains a custom property. This is not great for performance.
VariablesStyleSheet
(VariableRuleTuple
) accept styleTuples: (RuleTuples | Rule)[]
If uses custom properties and keyframes, the keyframes are run through css-to-react-native
every time the custom properties are updated. Again,
keyframesStyleTuples
accept (VariableKeyframeTuple | Keyframe)[]
How to add UseNativeDriver inside ?
export const Menu = styled(View)
The style sheet cache is currently per instance rather than per component
When React releases the new context api, we should update to it
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.