Comments (3)
So... don't have time to create something real, but this might be a start. Obviously it needs some work to make it useful, and it uses fb-watchman instead of the other watcher chokidar
Basically it watches a styles dir, and creates an index file including all the files in that dir.
var watchman = require('fb-watchman');
var client = new watchman.Client();
var path = require('path');
var ReactNativeCss = require('react-native-css');
var css = new ReactNativeCss();
var fs = require('fs');
var rdir = path.join.bind(path, process.cwd());
var styles = rdir('src/styles');
console.log('watching', styles);
client.capabilityCheck({optional: [], required: ['relative_root']},
function (error, resp) {
if (error) {
console.log(error);
client.end();
return;
}
// Initiate the watch
client.command(['watch-project', styles],
function (error, resp) {
if (error) {
console.error('Error initiating watch:', error);
return;
}
// It is considered to be best practice to show any 'warning' or
// 'error' information to the user, as it may suggest steps
// for remediation
if ('warning' in resp) {
console.log('warning: ', resp.warning);
}
// `watch-project` can consolidate the watch for your
// dir_of_interest with another watch at a higher level in the
// tree, so it is very important to record the `relative_path`
// returned in resp
console.log('watch established on ', resp.watch,
' relative_path', resp.relative_path);
var sub = {
// Match any `.js` file in the dir_of_interest
expression: ["anyof", ["match", "*.css"], ["match", "*.scss"]],
// Which fields we're interested in
fields: ["name", "size", "exists", "type"],
};
if (resp.relative_path) {
sub.relative_root = resp.relative_path;
}
client.command(['subscribe', resp.watch, 'style_subscription', sub],
function (error, resp) {
if (error) {
// Probably an error in the subscription criteria
console.error('failed to subscribe: ', error);
return;
}
console.log('subscription ' + resp.subscribe + ' established');
});
});
client.on('subscription', function (resp) {
if (resp.subscription == 'style_subscription') {
for (var i in resp.files) {
var f = resp.files[i];
console.log('file changed: ' + f.name, f);
if (/\.s?css/.test(f.name)) {
css.parse(path.join(styles, f.name), rdir('dist/styles', `${f.name.replace(/\.s?css$/, '')}.js`), true, false);
}
}
writeIndex();
}
});
})
;
function writeIndex() {
fs.writeFileSync(rdir('dist/styles.js'), `module.exports = ${writeObj(fs.readdirSync(rdir('./src/styles')))}`);
}
var repe = /(\.android|\.ios)?\.s?css$/;
function writeObj(files) {
return (files.reduce(function (str, v) {
if (repe.test(v)) {
const req = JSON.stringify('./styles/' + v.replace(repe, ''));
return `${str}${JSON.stringify(v.replace(repe, ''))}: require(${req}),\n`;
}
return v;
}, '{\n')) + '};\n';
}
from react-native-css.
@minimaldesign Hi, currently there is no support for this. We would be happy to accept a pull request from yourself. This sounds like an awesome idea, I cannot dedicate time right now, but hopefully in the coming weeks.
from react-native-css.
@jspears Thanks, I will look at this over the weekend and try to implement it.
from react-native-css.
Related Issues (20)
- Can i write LESS like CSS just like that in webpages with this tool? HOT 2
- Doesn't work with Windows OS HOT 1
- value auto is set like null HOT 3
- Can't generate shadowOffset HOT 4
- Shorthands aren't properly expanding HOT 1
- Update purpose and scope HOT 1
- Add validation
- Interest in Integrating? HOT 5
- Convert properties that don't match their CSS equivalent HOT 5
- Compatibility with other css preprocessors - Stylus HOT 1
- nesting styles HOT 9
- Ability to use predefined features from StyleSheet object.
- shadowOpacity
- No Longer under active development.
- [enhancement] Create gulp plugin HOT 2
- Version 2
- V2: package.json points to incorrect main HOT 10
- undefined is not a function (Symbol.iterator) HOT 2
- Unable to use interpolation in CSS HOT 5
- Little hack for code complete to who use VSCode! [suggestion] HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-css.