├── .npmignore
├── src
├── webpack
│ ├── tests
│ │ ├── styles-mock.css
│ │ ├── .eslintrc
│ │ ├── report-loader.spec.js
│ │ └── hot-loader.spec.js
│ ├── report-loader.js
│ └── hot-loader.js
├── index.js
├── common
│ ├── utils
│ │ ├── get-uniq-hash.js
│ │ ├── postjss-error.js
│ │ └── log-catcher.js
│ ├── const.js
│ ├── init-processor.js
│ ├── init-style-getter.js
│ ├── prepare-config-async.js
│ ├── prepare-config-sync.js
│ └── parse-template-string.js
├── runtime
│ ├── init-parser.js
│ ├── index.js
│ ├── async.js
│ └── tests
│ │ └── index.spec.js
└── babel
│ ├── utils
│ ├── get-indent-number.js
│ ├── require-module.js
│ └── logger.js
│ ├── init-props-parser.js
│ └── index.js
├── .eslintrc
├── .gitignore
├── examples
└── counter
│ ├── src
│ ├── client
│ │ ├── templates
│ │ │ ├── client.pug
│ │ │ ├── layout.pug
│ │ │ ├── server.pug
│ │ │ └── mixins.pug
│ │ ├── constants
│ │ │ └── ActionTypes.js
│ │ ├── reducers
│ │ │ ├── index.js
│ │ │ └── counter.js
│ │ ├── store
│ │ │ └── configureStore.js
│ │ ├── actions
│ │ │ └── index.js
│ │ ├── containers
│ │ │ └── App
│ │ │ │ ├── style.sss
│ │ │ │ └── index.jsx
│ │ ├── index.jsx
│ │ └── components
│ │ │ └── Counter
│ │ │ └── index.jsx
│ └── server
│ │ └── index.js
│ ├── .stylelintrc
│ ├── .eslintrc
│ ├── .postcssrc
│ ├── tools
│ ├── .eslintrc
│ ├── webpack.config.client.js
│ ├── webpack.common.js
│ └── webpack.config.dev.js
│ ├── .babelrc
│ └── package.json
├── .stylelintrc
├── .babelrc
├── .postcssrc
├── LICENSE
├── CHANGELOG.md
├── package.json
├── README.md
└── yarn.lock
/.npmignore:
--------------------------------------------------------------------------------
1 | yarn.lock
2 |
--------------------------------------------------------------------------------
/src/webpack/tests/styles-mock.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './runtime'
2 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | extends: '@lttb/default'
2 |
3 | env:
4 | jest: true
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log
2 | node_modules
3 | lib
4 | coverage
5 | dist
6 |
--------------------------------------------------------------------------------
/src/webpack/tests/.eslintrc:
--------------------------------------------------------------------------------
1 | rules:
2 | import/no-extraneous-dependencies:
3 | - error
4 | - devDependencies: true
5 |
--------------------------------------------------------------------------------
/examples/counter/src/client/templates/client.pug:
--------------------------------------------------------------------------------
1 | extends layout
2 |
3 | block head
4 | +head(title)
5 |
6 | block body
7 | +body
8 |
--------------------------------------------------------------------------------
/src/common/utils/get-uniq-hash.js:
--------------------------------------------------------------------------------
1 | const numberRe = /\d/g
2 |
3 |
4 | export default () => Date.now().toString(36).replace(numberRe, '')
5 |
--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | extends: '@lttb/configs.style'
2 |
3 | rules:
4 | property-no-unknown:
5 | - true
6 | - ignoreProperties:
7 | - /\$\^var__/
8 |
--------------------------------------------------------------------------------
/examples/counter/src/client/templates/layout.pug:
--------------------------------------------------------------------------------
1 | include mixins
2 |
3 | doctype html
4 | html
5 | head
6 | block head
7 | body
8 | block body
9 |
--------------------------------------------------------------------------------
/examples/counter/src/client/constants/ActionTypes.js:
--------------------------------------------------------------------------------
1 | export const COUNTER_INCREMENT = 'COUNTER_INCREMENT'
2 | export const COUNTER_DECREMENT = 'COUNTER_DECREMENT'
3 |
--------------------------------------------------------------------------------
/examples/counter/.stylelintrc:
--------------------------------------------------------------------------------
1 | extends: '@lttb/configs.style'
2 |
3 | rules:
4 | property-no-unknown:
5 | - true
6 | - ignoreProperties:
7 | - /\$\^var__/
8 |
--------------------------------------------------------------------------------
/examples/counter/src/client/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 |
3 | import counter from './counter'
4 |
5 | export default combineReducers({ counter })
6 |
--------------------------------------------------------------------------------
/examples/counter/.eslintrc:
--------------------------------------------------------------------------------
1 | rules:
2 | react/prop-types:
3 | - 2
4 | - skipUndeclared: true
5 | ignore:
6 | - classes
7 |
8 | globals:
9 | postjss: true
10 |
--------------------------------------------------------------------------------
/src/runtime/init-parser.js:
--------------------------------------------------------------------------------
1 | import parseTemplateString from '~/common/parse-template-string'
2 |
3 |
4 | export default processCSS => (strings, ...values) =>
5 | parseTemplateString({ strings, values, processCSS })
6 |
--------------------------------------------------------------------------------
/src/runtime/index.js:
--------------------------------------------------------------------------------
1 | import prepareConfigSync from '~/common/prepare-config-sync'
2 | import initParser from './init-parser'
3 |
4 |
5 | const { processCSS } = prepareConfigSync()
6 |
7 |
8 | export default initParser(processCSS)
9 |
--------------------------------------------------------------------------------
/src/common/const.js:
--------------------------------------------------------------------------------
1 | export const LOGGER = {
2 | ERROR_ID: 'POSTJSS__ERROR',
3 | }
4 |
5 | export const CONFIG = {
6 | extensionsRe: /\.(c|(s[ac]?))ss$/,
7 | namespace: 'postjss',
8 | throwError: false,
9 | modules: true,
10 | }
11 |
--------------------------------------------------------------------------------
/src/common/utils/postjss-error.js:
--------------------------------------------------------------------------------
1 | export default class PostJSSError extends Error {
2 | constructor(message, data = []) {
3 | super(`${message}\n${data.join('')}`)
4 |
5 | this.name = this.constructor.name
6 |
7 | this.stack = ''
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | plugins: [
3 | 'transform-es2015-modules-commonjs',
4 | 'transform-async-to-generator',
5 | ['transform-object-rest-spread', { useBuiltIns: true }],
6 | ['babel-root-import', {
7 | rootPathSuffix: 'src'
8 | }],
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/examples/counter/src/client/store/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux'
2 |
3 | import rootReducer from '~/reducers'
4 |
5 |
6 | const preloadedState = window.PRELOADED_STATE
7 |
8 | export default () =>
9 | createStore(rootReducer, preloadedState)
10 |
--------------------------------------------------------------------------------
/src/runtime/async.js:
--------------------------------------------------------------------------------
1 | import prepareConfig from '~/common/prepare-config-async'
2 | import initParser from './init-parser'
3 |
4 |
5 | export default prepareConfig().then((config) => {
6 | const { processCSS } = config()
7 |
8 | return initParser(processCSS)
9 | })
10 |
--------------------------------------------------------------------------------
/examples/counter/src/client/actions/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '~/constants/ActionTypes'
2 |
3 |
4 | export const counterIncrement = () => ({
5 | type: types.COUNTER_INCREMENT,
6 | })
7 |
8 | export const counterDecrement = () => ({
9 | type: types.COUNTER_DECREMENT,
10 | })
11 |
12 |
--------------------------------------------------------------------------------
/.postcssrc:
--------------------------------------------------------------------------------
1 | plugins:
2 | stylelint: {}
3 | postcss-import: {}
4 | postcss-mixins: {}
5 | postcss-advanced-variables: {}
6 | postcss-custom-selectors: {}
7 | postcss-custom-properties: {}
8 | postcss-reporter:
9 | clearAllMessages: true
10 | throwError: true
11 |
12 | parser: sugarss
13 |
--------------------------------------------------------------------------------
/examples/counter/src/client/reducers/counter.js:
--------------------------------------------------------------------------------
1 | import { handleActions } from 'redux-actions'
2 | import { COUNTER_INCREMENT, COUNTER_DECREMENT } from '~/constants/ActionTypes'
3 |
4 | export default handleActions({
5 | [COUNTER_INCREMENT]: state => state + 1,
6 |
7 | [COUNTER_DECREMENT]: state => state - 1,
8 | }, 0)
9 |
--------------------------------------------------------------------------------
/examples/counter/.postcssrc:
--------------------------------------------------------------------------------
1 | plugins:
2 | stylelint: {}
3 | postcss-import: {}
4 | postcss-mixins: {}
5 | postcss-advanced-variables: {}
6 | postcss-custom-selectors: {}
7 | postcss-custom-properties: {}
8 | postcss-reporter:
9 | clearAllMessages: true
10 | throwError: true
11 |
12 | parser: sugarss
13 |
--------------------------------------------------------------------------------
/examples/counter/src/client/templates/server.pug:
--------------------------------------------------------------------------------
1 | extends layout
2 |
3 | block head
4 | +head(title)
5 | style(type="text/css" id="server-side-styles")
6 | != sheets
7 |
8 | block body
9 | +body(html)
10 | script.
11 | window.PRELOADED_STATE = !{JSON.stringify(state)};
12 |
13 | script(src=`/static/app.js`)
14 |
--------------------------------------------------------------------------------
/examples/counter/tools/.eslintrc:
--------------------------------------------------------------------------------
1 | rules:
2 | comma-dangle:
3 | - error
4 | - arrays: always-multiline
5 | objects: always-multiline
6 | imports: always-multiline
7 | exports: always-multiline
8 | functions: ignore
9 |
10 | import/no-extraneous-dependencies:
11 | - error
12 | - devDependencies: true
13 |
--------------------------------------------------------------------------------
/examples/counter/src/client/containers/App/style.sss:
--------------------------------------------------------------------------------
1 | .app
2 | position: absolute
3 | top: 0
4 | left: 0
5 |
6 | display: flex
7 | overflow: hidden
8 | overflow-y: auto
9 | flex-direction: column
10 |
11 | width: 100vw
12 | height: 100vh
13 |
14 | .content
15 | padding: 20px
16 |
17 | .header
18 | border-bottom: 1px solid #eee
19 |
--------------------------------------------------------------------------------
/src/babel/utils/get-indent-number.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Thanks to @sindresorhus with strip-indent
3 | * @see https://github.com/sindresorhus/strip-indent/blob/7c2f0e09ef4751c8bf2dc05d6ecb3c6df93689a3/index.js
4 | */
5 | export default (str) => {
6 | const match = str.match(/^[ \t]*(?=\S)/gm)
7 |
8 | if (!match) return str
9 |
10 | return Math.min(...match.map(x => x.length))
11 | }
12 |
--------------------------------------------------------------------------------
/src/babel/utils/require-module.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import path from 'path'
3 | import resolveFrom from 'resolve-from'
4 |
5 |
6 | export default (sourceModule, requireModulePath) => {
7 | const from = resolveFrom(
8 | path.dirname(sourceModule),
9 | requireModulePath,
10 | )
11 |
12 | const data = fs.readFileSync(from)
13 |
14 | return { from, data }
15 | }
16 |
--------------------------------------------------------------------------------
/src/common/utils/log-catcher.js:
--------------------------------------------------------------------------------
1 | export default class LogCatcher {
2 | constructor(out = console, type = 'log') {
3 | this.out = out
4 | this.type = type
5 |
6 | this.messages = []
7 | this.log = out[type]
8 | }
9 |
10 | start() {
11 | this.messages = []
12 |
13 | this.out[this.type] = (...args) => this.messages.push(args.join(' '))
14 | }
15 |
16 | done() {
17 | this.out[this.type] = this.log
18 |
19 | return this.messages
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/examples/counter/src/client/templates/mixins.pug:
--------------------------------------------------------------------------------
1 | mixin head(title = 'PostJSS')
2 | meta(charset='utf-8')
3 | meta(
4 | name='viewport'
5 | content=`${`
6 | width=device-width,
7 | height=device-height,
8 | initial-scale=1.0,
9 | maximum-scale=1.0,
10 | user-scalable=0
11 | `.replace(/[\n\s]/g, '')}`
12 | )
13 |
14 | title #{`${title} | example`}
15 |
16 | block
17 |
18 | mixin body(html = '')
19 | #app
20 | != html
21 |
22 | block
23 |
--------------------------------------------------------------------------------
/src/common/init-processor.js:
--------------------------------------------------------------------------------
1 | import postcss from 'postcss'
2 | import postcssJs from 'postcss-js'
3 | import postcssrc from 'postcss-load-config'
4 |
5 |
6 | export default () =>
7 | postcssrc()
8 | .then(({ plugins, options }) => {
9 | const css = postcss(plugins)
10 |
11 | const cssProcessor = ({ from, data }) =>
12 | css.process(data, { ...options, from })
13 | .then(res => postcssJs.objectify(res.root))
14 |
15 | return cssProcessor
16 | })
17 |
--------------------------------------------------------------------------------
/examples/counter/src/client/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import { Provider } from 'react-redux'
4 |
5 | import App from './containers/App'
6 | import configureStore from './store/configureStore'
7 |
8 |
9 | const store = configureStore()
10 |
11 | const renderApp = () => render(
12 |
13 |
14 | ,
15 | document.getElementById('app'),
16 | )
17 |
18 | renderApp()
19 |
20 | if (module.hot) {
21 | module.hot.accept('./containers/App', renderApp)
22 | }
23 |
--------------------------------------------------------------------------------
/examples/counter/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | presets: [
3 | 'react',
4 | 'stage-3',
5 | ],
6 | plugins: [
7 | 'postjss/babel',
8 | 'async-to-promises',
9 | ['transform-object-rest-spread', { useBuiltIns: true }],
10 | ['babel-root-import', {
11 | rootPathSuffix: 'src/client',
12 | }],
13 | ],
14 | env: {
15 | development: {
16 | plugins: [
17 | 'react-hot-loader/babel',
18 | ],
19 | },
20 | server: {
21 | plugins: [
22 | 'transform-es2015-modules-commonjs',
23 | ],
24 | },
25 | },
26 | }
27 |
--------------------------------------------------------------------------------
/src/runtime/tests/index.spec.js:
--------------------------------------------------------------------------------
1 | import postjssAsync from '~/runtime/async'
2 |
3 |
4 | describe('PostJSS async runtime', () => {
5 | it('simple test', async () => {
6 | const postjss = await postjssAsync
7 |
8 | const test = 5
9 |
10 | const left = () => test + 10
11 |
12 | const styles = await postjss`
13 | .app
14 | position: absolute
15 | left: ${left}
16 | `
17 |
18 | const expected = {
19 | app: {
20 | left,
21 | position: 'absolute',
22 | },
23 | }
24 |
25 | expect(styles).toEqual(expected)
26 | })
27 | })
28 |
--------------------------------------------------------------------------------
/src/common/init-style-getter.js:
--------------------------------------------------------------------------------
1 | import LogCatcher from './utils/log-catcher'
2 | import PostJSSError from './utils/postjss-error'
3 |
4 |
5 | export default parseStyles => (params) => {
6 | const logCatcher = new LogCatcher(console, 'log')
7 |
8 | logCatcher.start()
9 |
10 | return parseStyles(params)
11 | .then((parsedStyles) => {
12 | logCatcher.done()
13 |
14 | const { 'defaults:': defaults, ...styles } = parsedStyles
15 |
16 | return { styles, defaults }
17 | })
18 | .catch((e) => {
19 | throw new PostJSSError(e.message, logCatcher.done())
20 | })
21 | }
22 |
--------------------------------------------------------------------------------
/src/babel/utils/logger.js:
--------------------------------------------------------------------------------
1 | import { LOGGER } from '~/common/const'
2 |
3 |
4 | const positionRe = /\n\u001b\[1m(\d+)\u001b\[22m\u001b\[1m:(\d+)\u001b/g
5 |
6 |
7 | export default {
8 | error(message, { filename = '', relative } = {}) {
9 | let logMessage = message
10 |
11 | if (relative) {
12 | const replacer = (match, line, column) =>
13 | `\n\u001b[1m${Number(line) + relative.line}\u001b[22m\u001b[1m:${Number(column) + relative.column}\u001b`
14 |
15 | logMessage = message.replace(positionRe, replacer)
16 | }
17 |
18 | console.log(`${LOGGER.ERROR_ID}:${filename}`, logMessage)
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/src/webpack/report-loader.js:
--------------------------------------------------------------------------------
1 | import LogCatcher from '~/common/utils/log-catcher'
2 | import { LOGGER } from '~/common/const'
3 |
4 | const logger = new LogCatcher(console, 'log')
5 | logger.start()
6 |
7 |
8 | export default function (source) {
9 | this.cacheable()
10 |
11 | const messages = logger.messages
12 |
13 | messages.forEach((message, index) => {
14 | if (message.startsWith(LOGGER.ERROR_ID)) {
15 | const messageIndex = message.indexOf(this.resource)
16 |
17 | if (messageIndex) {
18 | this.emitError(message.slice(messageIndex + this.resource.length).trimLeft())
19 | delete messages[index]
20 | }
21 | } else {
22 | logger.log(...[].concat(message))
23 | delete messages[index]
24 | }
25 | })
26 |
27 | return source
28 | }
29 |
--------------------------------------------------------------------------------
/src/common/prepare-config-async.js:
--------------------------------------------------------------------------------
1 | import R from 'ramda'
2 |
3 | import { CONFIG } from './const'
4 |
5 | import initCSSProcessor from './init-processor'
6 | import initStyleGetter from './init-style-getter'
7 |
8 | import PostJSSError from './utils/postjss-error'
9 |
10 |
11 | const init = R.composeP(
12 | initStyleGetter,
13 | initCSSProcessor,
14 | )
15 |
16 | export default () => init()
17 | .then(processCSS =>
18 | ({
19 | extensionsRe = CONFIG.extensionsRe,
20 | namespace = CONFIG.namespace,
21 | throwError = CONFIG.throwError,
22 | modules = CONFIG.modules,
23 | } = {}) => ({
24 | modules,
25 | namespace,
26 | throwError,
27 | processCSS,
28 | extensionsRe: new RegExp(extensionsRe, 'i'),
29 | }))
30 | .catch(e => new PostJSSError(e))
31 |
--------------------------------------------------------------------------------
/examples/counter/tools/webpack.config.client.js:
--------------------------------------------------------------------------------
1 | const R = require('ramda')
2 | const path = require('path')
3 | const webpack = require('webpack')
4 |
5 | const common = require('./webpack.common')
6 |
7 |
8 | const PATHS = {
9 | app: path.resolve(__dirname, '../src/client'),
10 | dist: path.resolve(__dirname, '../dist'),
11 | }
12 |
13 | const { conf } = common({ PATHS })
14 |
15 | const plugins = R.over(R.lensProp('plugins'), R.concat([
16 | new webpack.DefinePlugin({
17 | 'process.env.NODE_ENV': JSON.stringify('production'),
18 | }),
19 | ]))
20 |
21 | const rest = R.merge({
22 | entry: {
23 | app: path.join(PATHS.app, 'index.jsx'),
24 | },
25 | output: {
26 | path: PATHS.dist,
27 | filename: '[name].js',
28 | },
29 | })
30 |
31 |
32 | module.exports = R.compose(rest, plugins)(conf)
33 |
--------------------------------------------------------------------------------
/src/webpack/hot-loader.js:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 | import resolveFrom from 'resolve-from'
3 |
4 |
5 | export const prepareRe = ({ extensions = '(c|(s[ac]?))ss' } = {}) => {
6 | const filename = `[\`'"](.*?\\.${extensions})`
7 |
8 | return {
9 | importRe: new RegExp(`(?:require\\(|import[\\w\\s]+from)\\s*${filename}`, 'g'),
10 | filenameRe: new RegExp(filename),
11 | }
12 | }
13 |
14 | export const initPrepareFiles = (options) => {
15 | const { importRe, filenameRe } = prepareRe(options)
16 |
17 | return source => (source.match(importRe) || [])
18 | .map(file => file.match(filenameRe)[1])
19 | }
20 |
21 |
22 | let prepareFiles
23 |
24 |
25 | export default function (source) {
26 | this.cacheable()
27 |
28 | if (!prepareFiles) {
29 | prepareFiles = initPrepareFiles(this.query)
30 | }
31 |
32 | const getStylesPath = filepath =>
33 | resolveFrom(path.dirname(this.resource), filepath)
34 |
35 | prepareFiles(source)
36 | .map(getStylesPath)
37 | .filter(Boolean)
38 | .forEach(this.dependency)
39 |
40 | return source
41 | }
42 |
--------------------------------------------------------------------------------
/examples/counter/src/client/containers/App/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react'
2 | import { connect } from 'react-redux'
3 | import injectSheet from 'react-jss'
4 |
5 | import { counterIncrement, counterDecrement } from '~/actions'
6 |
7 | import Counter from '~/components/Counter'
8 |
9 | import style from './style.sss'
10 |
11 |
12 | const App = ({ counter, classes, ...actions }) => (
13 |
14 |
15 |
16 | Babel Plugin PostJSS Example
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | )
25 |
26 | App.propTypes = {
27 | counter: PropTypes.number.isRequired,
28 | classes: PropTypes.shape({}),
29 |
30 | counterIncrement: PropTypes.func.isRequired,
31 | counterDecrement: PropTypes.func.isRequired,
32 | }
33 |
34 |
35 | export default connect(
36 | ({ counter }) => ({ counter }),
37 | { counterIncrement, counterDecrement },
38 | )(injectSheet(style())(App))
39 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Artur Kenzhaev
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/examples/counter/tools/webpack.common.js:
--------------------------------------------------------------------------------
1 | const R = require('ramda')
2 | const webpack = require('webpack')
3 |
4 |
5 | const tests = {
6 | js: /\.jsx?$/,
7 | style: /\.(s[ac]?ss|css)$/,
8 | }
9 |
10 | const rules = ({ PATHS }) => [
11 | {
12 | enforce: 'pre',
13 | test: tests.js,
14 | include: [
15 | PATHS.app,
16 | ],
17 | loaders: [
18 | 'eslint-loader',
19 | ],
20 | },
21 | {
22 | test: tests.js,
23 | include: [
24 | PATHS.app,
25 | ],
26 | use: [
27 | 'postjss/webpack/report-loader',
28 | 'babel-loader',
29 | 'postjss/webpack/hot-loader',
30 | ],
31 | },
32 | ]
33 |
34 | const plugins = () => [
35 | new webpack.NoEmitOnErrorsPlugin(),
36 | ]
37 |
38 | const lens = {
39 | byCond: cond => R.lens(
40 | R.filter(cond),
41 | R.useWith(R.map, [R.compose(R.when(cond), R.identity)])
42 | ),
43 | }
44 |
45 |
46 | module.exports = options => ({
47 | tests,
48 | lens,
49 |
50 | conf: {
51 | resolve: {
52 | extensions: ['.js', '.jsx', '.sss', '.json'],
53 | },
54 |
55 | devtool: 'eval',
56 |
57 | plugins: plugins(options),
58 |
59 | module: { rules: rules(options) },
60 | },
61 | })
62 |
--------------------------------------------------------------------------------
/src/common/prepare-config-sync.js:
--------------------------------------------------------------------------------
1 | import R from 'ramda'
2 | import deasync from 'deasync'
3 |
4 | import { CONFIG } from './const'
5 |
6 | import initCSSProcessor from './init-processor'
7 | import initStyleGetter from './init-style-getter'
8 | import parseTemplateString from './parse-template-string'
9 |
10 | import PostJSSError from './utils/postjss-error'
11 |
12 |
13 | const init = R.compose(
14 | initStyleGetter,
15 | deasync(cb => initCSSProcessor()
16 | .then(data => cb(null, data))
17 | .catch(cb)),
18 | )
19 |
20 | let processCSS
21 |
22 | try {
23 | processCSS = init()
24 | } catch (e) {
25 | throw new PostJSSError(e.message)
26 | }
27 |
28 |
29 | export default ({
30 | extensionsRe = CONFIG.extensionsRe,
31 | namespace = CONFIG.namespace,
32 | throwError = CONFIG.throwError,
33 | modules = CONFIG.modules,
34 | } = {}) => ({
35 | modules,
36 | namespace,
37 | throwError,
38 | extensionsRe: new RegExp(extensionsRe, 'i'),
39 | processCSS: deasync((data, cb) => processCSS(data)
40 | .then(result => cb(null, result))
41 | .catch(cb)),
42 |
43 | parseTemplateString: deasync((data, cb) => parseTemplateString(data)
44 | .then(result => cb(null, result))
45 | .catch(cb)),
46 | })
47 |
--------------------------------------------------------------------------------
/src/webpack/tests/report-loader.spec.js:
--------------------------------------------------------------------------------
1 | import { LOGGER } from '~/common/const'
2 | import LogCatcher from '~/common/utils/log-catcher'
3 |
4 | const logger = new LogCatcher()
5 | logger.start()
6 |
7 | describe('PostJSS report-loader', () => {
8 | const loader = require('~/webpack/report-loader').default
9 |
10 | it('should be a function', () => {
11 | expect(loader).toBeInstanceOf(Function)
12 | })
13 |
14 | it('should be capture messages and errors', () => {
15 | const errors = []
16 |
17 | const ModuleMock = {
18 | cacheable: jest.fn(),
19 | dependency: jest.fn(),
20 | emitError: error => errors.push(error),
21 | query: {},
22 | resource: __filename,
23 | }
24 |
25 | const sourceMock = 'test'
26 |
27 | const messagesExpected = ['test1', 'test2', 'test3 test4']
28 | const errorsExpected = ['error1', 'error2', 'error3 error4']
29 |
30 | messagesExpected.forEach(message =>
31 | console.log(...message.split(' ')))
32 |
33 | errorsExpected.forEach(error =>
34 | console.log(`${LOGGER.ERROR_ID}:${__filename}`, ...error.split(' ')))
35 |
36 | const result = loader.call(ModuleMock, sourceMock)
37 |
38 | expect(result).toBe(sourceMock)
39 | expect(ModuleMock.cacheable).toBeCalled()
40 | expect(logger.messages).toEqual(messagesExpected)
41 | expect(errors).toEqual(errorsExpected)
42 | })
43 | })
44 |
--------------------------------------------------------------------------------
/src/common/parse-template-string.js:
--------------------------------------------------------------------------------
1 | import stripIndent from 'strip-indent'
2 | import escapeStringRegexp from 'escape-string-regexp'
3 |
4 | import getUniqHash from './utils/get-uniq-hash'
5 |
6 |
7 | const VAR = `$^var__${getUniqHash()}`
8 | const VAR_ESCAPED = escapeStringRegexp(VAR)
9 |
10 | const placeholderRe = new RegExp(`:?(.*?)${VAR_ESCAPED}(.*?):?`, 'g')
11 |
12 | // .classname => classname
13 | const classNameRe = /^\./
14 |
15 |
16 | export default async ({ strings, values, from, processCSS }) => {
17 | const data = stripIndent(strings.join(VAR)).trim().concat('\n')
18 |
19 | const { styles } = await processCSS({ data, from })
20 |
21 | let index = 0
22 |
23 | const getVal = (val) => {
24 | const [match, left, right] = (val.match(placeholderRe) || [])
25 |
26 | if (!match) {
27 | return val
28 | }
29 |
30 | const body = values[index]
31 | index += 1
32 |
33 | return (left || right) && typeof body !== 'function'
34 | ? left + body + right
35 | : body
36 | }
37 |
38 | const transform = css => Object.entries(css)
39 | .reduce((acc, [key, value]) => {
40 | const prop = getVal(key.replace(classNameRe, ''))
41 |
42 | const val = typeof value === 'object'
43 | ? transform(value)
44 | : getVal(value)
45 |
46 | return { ...acc, [prop]: val }
47 | }, {})
48 |
49 | return transform(styles)
50 | }
51 |
--------------------------------------------------------------------------------
/examples/counter/src/server/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/jsx-filename-extension */
2 |
3 |
4 | import pug from 'pug'
5 | import express from 'express'
6 | import React from 'react'
7 | import { createStore } from 'redux'
8 | import { Provider } from 'react-redux'
9 |
10 | import { renderToString } from 'react-dom/server'
11 |
12 | import { SheetsRegistryProvider, SheetsRegistry } from 'react-jss'
13 |
14 | import rootReducer from '../client/reducers'
15 | import App from '../client/containers/App'
16 |
17 |
18 | const renderFullPage = pug.compileFile('src/client/templates/server.pug')
19 |
20 | const handleRender = ({ query, params }, res) => {
21 | const { counter } = query
22 |
23 | const store = createStore(rootReducer, { counter: Number(counter) || 0 })
24 | const sheets = new SheetsRegistry()
25 |
26 | const html = renderToString(
27 |
28 |
29 |
30 |
31 | ,
32 | )
33 |
34 | res.send(renderFullPage({
35 | html,
36 | state: store.getState(),
37 | sheets: sheets.toString(),
38 | }))
39 | }
40 |
41 | ;(async () => {
42 | const app = express()
43 | const port = 3000
44 |
45 | app.use('/static', express.static('dist'))
46 | app.use('/', handleRender)
47 |
48 | app.listen(port, () => console.log(`listening on port ${port}`))
49 | })()
50 |
51 |
--------------------------------------------------------------------------------
/examples/counter/src/client/components/Counter/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react'
2 | import injectSheet from 'react-jss'
3 |
4 |
5 | const getButtonStyles = ({ color, marginType, selector }) => postjss`
6 | .${selector}
7 | left: ${() => 0}
8 |
9 | margin-${marginType}: 10px
10 |
11 | transition: ${'opacity'} 1s
12 |
13 | color: ${color}
14 | `
15 |
16 | const Button = (({ classes, onClick, children }) => (
17 |
20 | ))
21 |
22 | const StyledButton = injectSheet(getButtonStyles({
23 | color: 'red',
24 | marginType: 'right',
25 | selector: 'button',
26 | }))(Button)
27 |
28 |
29 | const counterStyles = postjss`
30 | .counter
31 | padding: 0
32 |
33 | &::before
34 | content: '😱'
35 | `
36 |
37 | const Counter = ({ classes, counter, actions: { counterIncrement, counterDecrement } }) => (
38 |
39 |
40 | {`Counter clicked ${counter} times`}
41 |
42 |
43 |
Increment
44 |
Decrement
45 |