axept / prejss Goto Github PK
View Code? Open in Web Editor NEWGet the power of PostCSS with plugins in your JSS styles. ๐จ Just put CSS into JS and get it as JSS object.
License: MIT License
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
Maybe I do not understand something, but when i set property float float: left
it transform to
'cssFloat': 'left'
We should decided:
Keep in focus:
> @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]
Or even include default preset?
I meant plugins like "nested", etc.
Should be supported.
Let's keep on track: lttb/postjss#4
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
Have inspiration from here:
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;
}
}
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?
I try to run example project from package and get an error:
ReferenceError: Unknown plugin "transform-prejss" specified in "\prejss\examples\basic\.babelrc"
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.
Extracted from StartupMakers/jss-from-css#1
Requirements:
Problem:
Solution:
fromPostCSS
to JSS according to this example: https://github.com/axept/jss-from-postcss#exampleAdditional:
Some examples here:
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.
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"
}
}
};
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.