axept / prejss Goto Github PK

View Code? Open in Web Editor NEW

248.0 20.0 13.0 1.59 MB

Get the power of PostCSS with plugins in your JSS styles. 🎨 Just put CSS into JS and get it as JSS object.

License: MIT License

JavaScript 100.00%

jss postcss stylesheets less scss sass stylus react sugarss css

prejss's People

Contributors

Stargazers

Watchers

Forkers

lttb zerobias lionbee sunsman

prejss's Issues

Add example for PostCSS config

Or even include default preset?

I meant plugins like "nested", etc.

Could not locate the bindings file


> @visable-dev/[email protected] prejss
> prejss-cli dist/styles.css

/Users/gkatsanos/repos/visable/ui-components/node_modules/bindings/bindings.js:135
  throw err;
  ^

Error: Could not locate the bindings file. Tried:
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/build/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/build/Debug/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/build/Release/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/out/Debug/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/Debug/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/out/Release/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/Release/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/build/default/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/compiled/16.19.0/darwin/arm64/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/addon-build/release/install-root/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/addon-build/debug/install-root/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/addon-build/default/install-root/deasync.node
 → /Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/lib/binding/node-v93-darwin-arm64/deasync.node
    at bindings (/Users/gkatsanos/repos/visable/ui-components/node_modules/bindings/bindings.js:126:9)
    at Object.<anonymous> (/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/index.js:30:31)
    at Module._compile (node:internal/modules/cjs/loader:1165:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10)
    at Module.load (node:internal/modules/cjs/loader:1043:32)
    at Function.Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1067:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/gkatsanos/repos/visable/ui-components/node_modules/prejss-postcss-parser/lib/sync/parser.js:11:16)
    at Module._compile (node:internal/modules/cjs/loader:1165:14) {
  tries: [
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/build/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/build/Debug/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/build/Release/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/out/Debug/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/Debug/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/out/Release/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/Release/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/build/default/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/compiled/16.19.0/darwin/arm64/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/addon-build/release/install-root/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/addon-build/debug/install-root/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/addon-build/default/install-root/deasync.node',
    '/Users/gkatsanos/repos/visable/ui-components/node_modules/deasync/lib/binding/node-v93-darwin-arm64/deasync.node'
  ]

node: v16.19.0

# npm list prejss-postcss-parser
@visable-dev/[email protected] /Users/gkatsanos/repos/visable/ui-components
└─┬ [email protected]
  └── [email protected]

Use SCSS variables amongst files and inject them into other preJSS usages

I wonder if there is a way to use/re-use a set of variables amongst several files.

Currently, my SCSS has a variables.scss which defines global variables.
Is there a way to load that file somehow when using prejss?

I'm migrating a react app (create-react-app) using .scss files to react-jss because I need to customise the theme of the app based on settings, those settings are given on the fly through a window.settings browser local variable.

I first started to use react-jss directly but I find your solution pretty attractive (on top of it), it would allow me to just copy/paste my code inside preJSS template literal, which would be a huge time saver.

I would only need to replace the variables using ${}, but if I can use SASS variables directly then I don't even need to do that, I can just remove my variables.scss and migrate it to preJSS and define my variables based on the given settings, and use SCSS variables ($primary-color, etc.) as I usually do in my other files. This way, I end up updating one file instead of dozens.

And, if I can load the file content inside preJSS directly, I wouldn't even need to update my SCSS file, I could just require them somehow and inject the content in preJSS string literal directly, and would only need to provide my variables. This would be the best way to go, because I'd only have to move my variables from SCSS to preJSS and then inject those in other preJSS usages, instead of moving all my SCSS to react-jss, which is a real pain.

I wonder if that's doable and if that's a good thing. Keeping actual SCSS files feels much easier to maintain, and IDE support is better too. Your thoughts?

Error while trying start example

I try to run example project from package and get an error:
ReferenceError: Unknown plugin "transform-prejss" specified in "\prejss\examples\basic\.babelrc"

Add Flow

Like https://github.com/styled-components/styled-components

Update to PostCSS 6

Themes support

We should decided:

Should we support it? Or let's JSS handle it its own?
Should Themes feature support run-time switching?
Convention and specification.

Keep in focus:

https://github.com/styled-components/styled-components/blob/v2/src/models/ThemeProvider.js

React Native support

Use https://github.com/styled-components/css-to-react-native

Nested selectors not hashed

notice the hashed selector is app-0-0, while the nested styles are app

export default preJSS`
  /*@import './src/containers/app/theme/reset.css';*/
  @import './src/containers/app/theme/popups.css';

  /* background-color: hsla( 0, 50%, 96%, 0.5); */
  app {
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;

    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-attachment: fixed;
    background-blend-mode: overlay;
    background-image: url(/images/crossword.png);

    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6 {
      font-family: Syncopate;
    }
}

App crashing when importing prejss: Module not found require-from-string

I'm running into a very weird issue when npm i -S prejss and then use import preJSS from 'prejss'; in my project, the compilation fails with:

Failed to compile.

./node_modules/require-from-string/index.js
Module not found: Can't resolve 'module' in '/Users/vadorequest/dev/student-loan-simulator/node_modules/require-from-string'

Isn't that a missing dependency?

I tried to install it npm install --save require-from-string but then another compilation error:

Failed to compile.

./node_modules/cosmiconfig/node_modules/require-from-string/index.js
Module not found: Can't resolve 'module' in '/Users/vadorequest/dev/student-loan-simulator/node_modules/cosmiconfig/node_modules/require-from-string'

If I remove import preJSS from 'prejss'; then it compiles correctly.

wrong parser on float property

Maybe I do not understand something, but when i set property float float: left it transform to
'cssFloat': 'left'

Classname notation/conversion

Quick question. As you state this project is meant to allow us to write plain CSS and end up with JSS, wouldn't it make more sense to strip the dots from classnames and global-ize any global selectors?

Take this input:

.button { background-color: salmon; }
p { color: green; }

With output

exports.default = {
    ".button": {
        "backgroundColor": "salmon"
    }
    "p": {
        "color": "green"
    }
};

While I expected the output to be something more like this:

exports.default = {
    "button": {
        "backgroundColor": "salmon"
    }
    "@global": {
        "p" {
            "color": "green"
        }
    }
};

Add tests

Have inspiration from here:

https://github.com/styled-components/styled-components/blob/v2/src/test/basic.test.js

Hot Module Replacement

Should be supported.

Let's keep on track: lttb/postjss#4

TypeError: chunks.map is not a function

Just tried to create an example for styled-jss and got this error:

  prejss git:(prejss) npm run build                      
(node:96238) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:96238) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:96238) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:96238) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

> [email protected] build /Users/kof/work/projects/kof/cssinjs/styled-jss/examples/prejss
> babel src --out-dir lib

TypeError: chunks.map is not a function
    at exports.default (/Users/kof/work/projects/kof/cssinjs/styled-jss/examples/prejss/node_modules/prejss/lib/extract-expressions.js:25:24)
    at /Users/kof/work/projects/kof/cssinjs/styled-jss/examples/prejss/node_modules/prejss/lib/create-adapter.js:33:36
    at Function.memoisePluginContainer (/Users/kof/work/projects/kof/cssinjs/styled-jss/examples/prejss/node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13)
    at Function.normalisePlugin (/Users/kof/work/projects/kof/cssinjs/styled-jss/examples/prejss/node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32)
    at /Users/kof/work/projects/kof/cssinjs/styled-jss/examples/prejss/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (native)
    at Function.normalisePlugins (/Users/kof/work/projects/kof/cssinjs/styled-jss/examples/prejss/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/kof/work/projects/kof/cssinjs/styled-jss/examples/prejss/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/kof/work/projects/kof/cssinjs/styled-jss/examples/prejss/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/kof/work/projects/kof/cssinjs/styled-jss/examples/prejss/node_modules/babel-core/lib/transformation/file/index.js:212:65)

Code for reproduction is here

node --version -> v6.10.2

Here is my result of npm show in case the issue is because of some dependency version:

➜  prejss git:(prejss) npm list
(node:97946) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:97946) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:97946) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:97946) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:97946) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:97946) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:97946) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:97946) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[email protected] /Users/kof/work/projects/kof/cssinjs/styled-jss/examples/prejss
├── [email protected] extraneous
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ ├── [email protected]
│   │ └── [email protected]
│   ├─┬ [email protected]
│   │ ├─┬ [email protected]
│   │ │ ├── [email protected]
│   │ │ ├── [email protected]
│   │ │ ├─┬ [email protected]
│   │ │ │ └── [email protected]
│   │ │ ├── [email protected]
│   │ │ └── [email protected]
│   │ ├── [email protected]
│   │ ├── [email protected]
│   │ └─┬ [email protected]
│   │   └── [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected]
│   ├─┬ [email protected]
│   │ ├─┬ [email protected]
│   │ │ ├── [email protected]
│   │ │ ├─┬ [email protected]
│   │ │ │ ├─┬ [email protected]
│   │ │ │ │ └── [email protected]
│   │ │ │ └── [email protected]
│   │ │ ├── [email protected]
│   │ │ ├── [email protected]
│   │ │ ├─┬ [email protected]
│   │ │ │ └─┬ [email protected]
│   │ │ │   └── [email protected]
│   │ │ └── [email protected]
│   │ ├── [email protected]
│   │ ├── [email protected]
│   │ └── [email protected]
│   ├── [email protected]
│   ├── [email protected]
│   └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └─┬ [email protected]
│ │   ├─┬ [email protected]
│ │   │ └── [email protected]
│ │   ├─┬ [email protected]
│ │   │ └── [email protected]
│ │   ├── [email protected]
│ │   └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   ├── [email protected]
│ │   ├── [email protected]
│ │   └─┬ [email protected]
│ │     └── [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected]
│   └─┬ [email protected]
│     ├── [email protected]
│     ├─┬ [email protected]
│     │ └── [email protected]
│     ├─┬ [email protected]
│     │ ├─┬ [email protected]
│     │ │ └── [email protected]
│     │ └── [email protected]
│     └─┬ [email protected]
│       ├── [email protected]
│       ├─┬ [email protected]
│       │ ├── [email protected]
│       │ └── [email protected]
│       ├─┬ [email protected]
│       │ └── [email protected]
│       ├─┬ [email protected]
│       │ ├─┬ [email protected]
│       │ │ └── [email protected]
│       │ └── [email protected]
│       └─┬ [email protected]
│         └── [email protected]
├── [email protected]
├── UNMET PEER DEPENDENCY react@>=14
└─┬ [email protected]
  ├── [email protected]
  ├─┬ [email protected]
  │ ├── [email protected]
  │ └─┬ [email protected]
  │   └── [email protected]
  ├─┬ [email protected]
  │ ├── [email protected]
  │ ├── [email protected]
  │ ├── [email protected]
  │ ├── [email protected]
  │ ├── [email protected]
  │ ├── [email protected]
  │ ├── [email protected]
  │ ├── [email protected]
  │ └─┬ [email protected]
  │   └── [email protected]
  └── UNMET PEER DEPENDENCY react-dom@^15.0.0

cc @lttb

Syntax Highlighting support

Add this way to README: #13 (comment)
Update highlight package for Atom
Add Example for JetBrains and PostCSS directive

Add travis config

Like https://github.com/styled-components/styled-components/blob/master/.travis.yml
Add badge https://travis-ci.org/axept/jss-from-postcss
Use #7, #2 and #3

Use postcss-load-config to load plugins

We have to keep consistent behaviour of the both plugins in tandem with https://github.com/lttb/babel-plugin-prejss

It would be great to use https://github.com/michael-ciniawsky/postcss-load-config instead of hard-coded plugins list.

By using this config file we can load and configure all required PostCSS plugins for the project on both sides.

Fast run-time execution

Problem:

Using PostCSS in run-time is slow.

Solution:

Write a plugin which convert fragments Template literals with fromPostCSS to JSS according to this example: https://github.com/axept/jss-from-postcss#example
Deploy it as https://github.com/axept/babel-plugin-jss-from-css
Target patterns like "fromPostCSS" could be overridable in babel config
PostCSS configuration should be used from package.json (or suggest better place?) but may be configured as a specified external file

Additional:

Some examples here:

axept / prejss Goto Github PK

prejss's People

Contributors

Stargazers

Watchers

Forkers

prejss's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs