9 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/examples/CsstaNativeDemo/ios/CsstaNativeDemo/main.m:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import
10 | 
11 |
13 | Welcome to React
12 |
14 | To get started, edit src/App.js and save to reload.
15 |
color(...) function
61 |
62 |
63 |
64 |
65 |
66 |
67 | );
68 |
69 | export default App;
70 |
--------------------------------------------------------------------------------
/docs/external-modules.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: External Modules
4 | permalink: /external-modules
5 | ---
6 |
7 | # Ⓜ️ External Modules
8 |
9 | As a user of external Cssta modules, all you have to do is ensure these modules are run through babel using `babel-plugin-cssta`. On the web, this will add the module’s CSS in the outputted CSS file, and on native, this will mostly perform optimizations.
10 |
11 | ## Webpack
12 |
13 | To get Cssta modules working, you have to make sure that you are running all files in `node_modules` through babel. Most guides recommend you exclude `node_modules`, so make sure you haven’t copied this over.
14 |
15 | ```jsx
16 | {
17 | module: {
18 | loaders: [{
19 | test: /\.jsx?$/,
20 | loader: 'babel-loader',
21 | options: {
22 | // Your normal config, just make sure you include babel-plugin-cssta
23 | presets: ['env'],
24 | plugins: [
25 | ['babel-plugin-cssta', { output: 'dist/styles.css' }],
26 | ],
27 | },
28 | }],
29 | },
30 | }
31 | ```
32 |
33 | However, if this is causing serious performance issues, you can do two runs through babel ([example](https://gist.github.com/jacobp100/4f0b08bf485bfcdcb17741cbabf85c75)).
34 |
35 | ## 🅿️ Publishers
36 |
37 | All Cssta modules have to use the ES `import … from 'cssta'` syntax for the babel plugin to work. For users, this means ensuring your build process can handle this. For publishers, just make sure your users get this syntax!
38 |
--------------------------------------------------------------------------------
/docs/_config.yml:
--------------------------------------------------------------------------------
1 | # Welcome to Jekyll!
2 | #
3 | # This config file is meant for settings that affect your whole blog, values
4 | # which you are expected to set up once and rarely edit after that. If you find
5 | # yourself editing this file very often, consider using Jekyll's data files
6 | # feature for the data you need to update frequently.
7 | #
8 | # For technical reasons, this file is *NOT* reloaded automatically when you use
9 | # 'bundle exec jekyll serve'. If you change this file, please restart the server process.
10 |
11 | # Site settings
12 | # These are used to personalize your new site. If you look in the HTML files,
13 | # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
14 | # You can create any custom variable you would like, and they will be accessible
15 | # in the templates via {{ site.myvariable }}.
16 | title: Cssta
17 | email: your-email@domain.com
18 | description: > # this means to ignore newlines until "baseurl:"
19 | Write an awesome description for your new site here. You can edit this
20 | line in _config.yml. It will appear in your document head meta (for
21 | Google search results) and in your feed.xml site description.
22 | baseurl: "" # the subpath of your site, e.g. /blog
23 | url: "" # the base hostname & protocol for your site, e.g. http://example.com
24 | twitter_username: jekyllrb
25 | github_username: jekyll
26 |
27 | # Build settings
28 | markdown: kramdown
29 | theme: minima
30 | exclude:
31 | - Gemfile
32 | - Gemfile.lock
33 | highlighter: rouge
34 |
--------------------------------------------------------------------------------
/packages/babel-plugin-cssta/fixtures/native-complex-interpolation/expected.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet as _StyleSheet } from 'react-native';
2 | import { transformStyleTuples as _transformStyleTuples } from 'cssta/lib/native/cssUtil';
3 | import _createComponent from 'cssta/lib/native/createComponent';
4 |
5 | import { View } from 'react-native';
6 |
7 | const marginSmall = 10;
8 | const marginLarge = 10;
9 |
10 | var _csstaStyle = _StyleSheet.create({
11 | 0: Object.assign({
12 | 'paddingTop': 10
13 | }, _transformStyleTuples([['margin', `${marginLarge}px ${marginSmall}px`]])),
14 | 1: Object.assign(_transformStyleTuples([['margin', `${marginLarge}px ${marginSmall}px`]]), {
15 | 'paddingTop': 10
16 | }),
17 | 2: Object.assign({
18 | 'paddingTop': 10
19 | }, _transformStyleTuples([['margin', `${marginLarge}px ${marginSmall}px`]]), {
20 | 'paddingBottom': 10
21 | })
22 | });
23 |
24 | _createComponent(View, ['attr1', 'attr2', 'attr3'], {
25 | 'transitionedProperties': [],
26 | 'keyframes': {},
27 | 'rules': [{
28 | 'validate': function (p) {
29 | return !!p["attr1"];
30 | },
31 | 'transitions': {},
32 | 'animation': null,
33 | 'style': _csstaStyle[0]
34 | }, {
35 | 'validate': function (p) {
36 | return !!p["attr2"];
37 | },
38 | 'transitions': {},
39 | 'animation': null,
40 | 'style': _csstaStyle[1]
41 | }, {
42 | 'validate': function (p) {
43 | return !!p["attr3"];
44 | },
45 | 'transitions': {},
46 | 'animation': null,
47 | 'style': _csstaStyle[2]
48 | }]
49 | });
--------------------------------------------------------------------------------
/examples/CsstaNativeDemo/ios/CsstaNativeDemo/AppDelegate.m:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import "AppDelegate.h"
11 |
12 | #import "RCTBundleURLProvider.h"
13 | #import "RCTRootView.h"
14 |
15 | @implementation AppDelegate
16 |
17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
18 | {
19 | NSURL *jsCodeLocation;
20 |
21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
22 |
23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
24 | moduleName:@"CsstaNativeDemo"
25 | initialProperties:nil
26 | launchOptions:launchOptions];
27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
28 |
29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
30 | UIViewController *rootViewController = [UIViewController new];
31 | rootViewController.view = rootView;
32 | self.window.rootViewController = rootViewController;
33 | [self.window makeKeyAndVisible];
34 | return YES;
35 | }
36 |
37 | @end
38 |
--------------------------------------------------------------------------------
/packages/cssta/src/factories/enhancerFactory.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | const React = require('react');
3 | /*:: import type { ComponentFactory, ComponentPropTypes, Props, Enhancer } from './types' */
4 |
5 | const mergeTransformers = (enhancers, EndNode) =>
6 | enhancers.reduceRight((NextElement, CurrentElement) => (
7 | props => React.createElement(CurrentElement, props, NextElement)
8 | ), EndNode);
9 |
10 | const nextCacheNode = (node, transform) => {
11 | let value = node.get(transform);
12 |
13 | if (!value) {
14 | value = new Map();
15 | node.set(transform, value);
16 | }
17 |
18 | return value;
19 | };
20 |
21 | const LEAF = 'leaf';
22 | const mergeTransformersCached = (getTransformer, enhancers, cache) /*: any */ => {
23 | const cacheEntry = enhancers.reduce(nextCacheNode, cache);
24 |
25 | let value = cacheEntry.get(LEAF);
26 |
27 | if (!value) {
28 | value = new Map();
29 | cacheEntry.set(LEAF, value);
30 | }
31 |
32 | return value;
33 | };
34 |
35 | module.exports = (constructor /*: ComponentFactory */) => {
36 | const cache = new Map();
37 |
38 | return (enhancers /*: Enhancer[] */) => (
39 | component /*: any */,
40 | propTypes /*: ComponentPropTypes */,
41 | args /*: any */
42 | ) => constructor(component, propTypes, args, (EndNode) => {
43 | const RootNode = mergeTransformersCached(
44 | passedEnhancers => mergeTransformers(passedEnhancers, EndNode),
45 | enhancers,
46 | cache
47 | );
48 | const render = props => React.createElement(RootNode, props);
49 | return render;
50 | });
51 | };
52 |
--------------------------------------------------------------------------------
/packages/cssta/src/util/resolveVariableDependencies.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | /* eslint-disable no-param-reassign */
3 | const DepGraph = require('dependency-graph').DepGraph;
4 | const { varRegExp, varRegExpNonGlobal } = require('./index');
5 |
6 | module.exports = (
7 | definedVariables /*: { [key:string]: string } */,
8 | variablesFromScope /*: { [key:string]: string } */
9 | ) /*: { [key:string]: string } */ => {
10 | const graph = new DepGraph();
11 |
12 | const variableNames = Object.keys(definedVariables);
13 |
14 | variableNames.forEach((variableName) => {
15 | graph.addNode(variableName);
16 | });
17 |
18 | variableNames.forEach((variableName) => {
19 | const referencedVariableMatches = definedVariables[variableName].match(varRegExp);
20 | if (!referencedVariableMatches) return;
21 |
22 | const referencedVariables = referencedVariableMatches
23 | .map(match => {
24 | const matchedVariable = match.match(varRegExpNonGlobal);
25 | return matchedVariable ? matchedVariable[1] : null;
26 | })
27 | .filter(Boolean);
28 |
29 | referencedVariables.forEach((referencedVariableName) => {
30 | if (referencedVariableName in definedVariables) {
31 | graph.addDependency(variableName, referencedVariableName);
32 | }
33 | });
34 | });
35 |
36 | const appliedVariables = graph.overallOrder(false).reduce((accum, variableName) => {
37 | const value = definedVariables[variableName].replace(varRegExp, (m, reference, fallback) => (
38 | accum[reference] || variablesFromScope[reference] || fallback
39 | ));
40 | accum[variableName] = value;
41 | return accum;
42 | }, {});
43 |
44 | return appliedVariables;
45 | };
46 |
--------------------------------------------------------------------------------
/docs/theming.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: Theming
4 | permalink: /theming
5 | ---
6 |
7 | # 🏳️🌈 Theming
8 |
9 | As said in the introduction, theming sholud be done by CSS custom properties. Cssta for React Native has custom property polyfills built in. On the web, you can either rely on native browser support or [a postCSS plugin](https://github.com/MadLittleMods/postcss-css-variables#differences-from-postcss-custom-properties).
10 |
11 | To define global variables, you can do the following on the web.
12 |
13 | ```jsx
14 | // Web
15 | cssta.injectGlobal`
16 | :root {
17 | --primary: red;
18 | }
19 | `
20 | ```
21 |
22 | But in React Native, you’ll have to create a wrapper View.
23 |
24 | ```jsx
25 | // Native
26 | const Root = cssta(View)`
27 | --primary: red;
28 | `
29 | ```
30 |
31 | You can then use the variables as normal.
32 |
33 | ```jsx
34 | const Button = cssta.button`
35 | color: var(--primary);
36 | border: 1px solid var(--primary);
37 | padding: 0.5rem 1rem;
38 | `
39 | ```
40 |
41 | To add dynamic styling based upon context, just redefine variables.
42 |
43 | ```jsx
44 | const LightBox = cssta.div`
45 | background-color: black;
46 | --primary: white;
47 | `
48 |
49 | const Example = (
50 |
9 | Show Navigation
10 | Hide Navigation
11 |
23 | {{ content }}
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/examples/CsstaNativeDemo/android/app/BUCK:
--------------------------------------------------------------------------------
1 | import re
2 |
3 | # To learn about Buck see [Docs](https://buckbuild.com/).
4 | # To run your application with Buck:
5 | # - install Buck
6 | # - `npm start` - to start the packager
7 | # - `cd android`
8 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
10 | # - `buck install -r android/app` - compile, install and run application
11 | #
12 |
13 | lib_deps = []
14 | for jarfile in glob(['libs/*.jar']):
15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile)
16 | lib_deps.append(':' + name)
17 | prebuilt_jar(
18 | name = name,
19 | binary_jar = jarfile,
20 | )
21 |
22 | for aarfile in glob(['libs/*.aar']):
23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile)
24 | lib_deps.append(':' + name)
25 | android_prebuilt_aar(
26 | name = name,
27 | aar = aarfile,
28 | )
29 |
30 | android_library(
31 | name = 'all-libs',
32 | exported_deps = lib_deps
33 | )
34 |
35 | android_library(
36 | name = 'app-code',
37 | srcs = glob([
38 | 'src/main/java/**/*.java',
39 | ]),
40 | deps = [
41 | ':all-libs',
42 | ':build_config',
43 | ':res',
44 | ],
45 | )
46 |
47 | android_build_config(
48 | name = 'build_config',
49 | package = 'com.csstanativedemo',
50 | )
51 |
52 | android_resource(
53 | name = 'res',
54 | res = 'src/main/res',
55 | package = 'com.csstanativedemo',
56 | )
57 |
58 | android_binary(
59 | name = 'app',
60 | package_type = 'debug',
61 | manifest = 'src/main/AndroidManifest.xml',
62 | keystore = '//android/keystores:debug',
63 | deps = [
64 | ':app-code',
65 | ],
66 | )
67 |
--------------------------------------------------------------------------------
/examples/CsstaNativeDemo/demos/CSSVariables.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { View, Button, Animated } from 'react-native';
3 | import cssta from 'cssta/native';
4 |
5 | const PickerRow = cssta(View)`
6 | flex-direction: row;
7 | justify-content: space-between;
8 | margin-top: 20px;
9 | `;
10 |
11 | const DynamicContainer = cssta(View)`
12 | --color: black;
13 |
14 | &[@color="red"] { --color: #e74c3c; }
15 | &[@color="green"] { --color: #2ecc71; }
16 | &[@color="blue"] { --color: #3498db; }
17 | `;
18 |
19 | class DynamicPicker extends Component {
20 | constructor() {
21 | super();
22 | this.state = { color: 'red' };
23 | this.setColor = color => this.setState({ color });
24 | }
25 |
26 | render() {
27 | const { color } = this.state;
28 | const { children } = this.props;
29 |
30 | return (
31 | Cssta
12 |-
13 | {% include sidebar-link.html url="/" title="Introduction" %}
14 | {% include sidebar-link.html url="/web" title="Web" %}
15 | {% include sidebar-link.html url="/native" title="Native" %}
16 | {% include sidebar-link.html url="/theming" title="Theming" %}
17 | {% include sidebar-link.html url="/production-builds" title="Production Builds" %}
18 | {% include sidebar-link.html url="/external-modules" title="External Modules" %}
19 | {% include sidebar-link.html url="/editor-integration" title="Editor Integration" %}
20 |
- 21 |