kristerkari / react-native-less-transformer Goto Github PK

View Code? Open in Web Editor NEW

30.0 3.0 9.0 1.39 MB

Use Less to style your React Native apps.

License: MIT License

JavaScript 100.00%

react-native less loader transform

react-native-less-transformer's Issues

Error with Jest

Hi!

I have an error when I try to run my Jest tests.
I've followed the instructions and everything works fine for development.

But when I run my tests, I have this error:

tests/views/Login.test.js
  ● Test suite failed to run

    /app/styles/less/common.less:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@backgroundColor: #fff;
                                                                                             ^

    SyntaxError: Invalid or unexpected token

      1 | import {StyleSheet} from "react-native";
    > 2 | import extraStyles from "./less/common.less";
        | ^
      3 | 
      4 | export const styles = StyleSheet.create({});
      5 | 

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (app/styles/common.js:2:1)
      at Object.<anonymous> (app/views/Login.js:5:1)

I tried to configure Jest in my package.json:

"jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "less",
      "js"
    ],
    "transform": {
      "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
      "\\.(less)$": "<rootDir>/node_modules/react-native-less-transformer"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(less|js)$",
    "testPathIgnorePatterns": [
      "\\.snap$",
      "<rootDir>/node_modules/"
    ],
    "cacheDirectory": ".jest/cache"
  },

But it raised another error:

TypeError: Jest: a transform must export a `process` function.

      1 | import {StyleSheet} from "react-native";
    > 2 | import extraStyles from "./less/common.less";
        |               ^
      3 | 
      4 | export const styles = StyleSheet.create({});
      5 | 

      at ScriptTransformer._getTransformer (node_modules/jest-runtime/build/script_transformer.js:236:15)
      at Object.<anonymous> (app/styles/common.js:2:15)

My dependencies are:

"dependencies": {
    "axios": "^0.18.0",
    "prop-types": "^15.6.2",
    "react": "16.3.1",
    "react-native": "~0.55.2",
    "react-native-config": "^0.11.5",
    "react-navigation": "^2.10.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0"
  },
"devDependencies": {
    "babel-eslint": "^8.2.6",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "eslint": "^5.2.0",
    "eslint-plugin-jest": "^21.18.0",
    "eslint-plugin-react": "^7.10.0",
    "faker": "^4.1.0",
    "jest": "^23.4.2",
    "jest-react-native": "^18.0.0",
    "jscpd": "^0.6.22",
    "less": "^3.8.1",
    "react-native-cli": "^2.0.1",
    "react-native-less-transformer": "^1.1.2",
    "react-test-renderer": "16.3.1"
  },

Is there a way of using this library with Jest?

do i need a StyleSheet.create wrapper?

Hi, do I need a wrapper around the StyleSheet.create?
Or does react-native-svg-transformer do it itself?

This code doesn't really work ((
but I would like to know whether it is necessary or not.
If necessary, how can you add it?

Call renderToCSS without arguments

Can't run the transformer until I add arguments to renderToCSS. BUG I think?

Nest write style is not working

It does not work for the nest writing style. Do I need to add extra plugins?

After updating the project to 0.59, I get the error:
error: bundling failed: TypeError: Cannot destructure property src of 'undefined' or 'null'. at renderToCSS (node_modules/react-native-less-transformer/index.js:32:21)

On version 0.58 everything is ok

UPD:
You can fix it by change this line
return renderToCSS().then(css => {
to
return renderToCSS({ src, filename, options }).then(css => {

if i want to add a plugins `less-plugin-functions` to handler function in transfromer.js,how do i do ?

I try to do it like this ,but it don't work
less-plugin-functions

var lessTransformer = require("react-native-less-transformer");

module.exports.transform = function({ src, filename, options }) {
  if (filename.endsWith(".less")) {
    var opts = Object.assign(options, {
      lessOptions: {
        plugins: [require("less-plugin-functions")]
      }
    });
    return lessTransformer.transform({ src, filename, options: opts });
  } else {
    return upstreamTransformer.transform({ src, filename, options });
  }
};

semver issue

using in expo and facing error while starting server
Failed to construct transformer: TypeError: semver is not a function

console.log says that semver is object. so looks like we need change line
var reactNativeMinorVersion = semver(reactNativeVersionString).minor;
to
var reactNativeMinorVersion = semver.minor(reactNativeVersionString);

i have "react-native-less-transformer": "^1.4.0",
inside have dependency semver v7.5.1.

react-native-web support

Hi, is it possible to make this plugin work for react-native-web? Since necolas/react-native-web#1146 prevents classname from working I wanted to use babel-plugin-react-native-classname-to-style to convert className to style so I can still use css modules for React Native and React JS. But I also need react-native-less-transformer to work in React JS for that to work. Hope you can help me.

kristerkari / react-native-less-transformer Goto Github PK

react-native-less-transformer's Issues

Error with Jest

do i need a StyleSheet.create wrapper?

Call renderToCSS without arguments

Nest write style is not working

react-native 0.51

Not working on RN 0.59

if i want to add a plugins `less-plugin-functions` to handler function in transfromer.js,how do i do ?

semver issue

react-native-web support

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent